/* ============================================
   PAGE PRESTATIONS & SERVICES
   ============================================ */

/* ============ LES 3 PRESTATIONS ============
   Fleur immobile qui se désature au scroll (couleur sous Mariages, N&B sous
   Deuil) ; les 3 blocs se composent syllabe par syllabe puis ressortent en
   flou. Piloté par servicesHero() (prestations-services.js). */
.services-hero {
  position: relative;
  background: var(--white);
}

/* Verrou : .sh-lock (piste) + .sh-lock-inner (fenêtre fixe) figent header +
   section pendant que les 3 blocs se relaient, puis relâchent la page.
   Même mécanisme en desktop et mobile ; seule la disposition des blocs change. */
.sh-lock {
  position: relative;
  height: 320vh; /* 100vh figés + ~2,2 écrans de défilement */
}
.sh-lock-inner {
  position: sticky;
  top: 0;
  height: 100vh;
  overflow: hidden;
}

/* Desktop : piste plus longue, chaque cran de molette avance moins la
   progression — aucun bloc (Réceptions, Deuil) n'est sauté sur un scroll rapide. */
@media (min-width: 1025px) {
  .sh-lock {
    height: 440vh;
  }
}

.sh-scroll {
  position: relative;
}

/* .sh-pin ne fait que centrer la fleur (c'est .sh-lock-inner qui fige l'écran) */
.sh-pin {
  position: relative;
  height: 100vh;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* fleur immobile : seul transform = l'entrée au chargement */
.sh-flower {
  position: relative;
  width: min(42vw, 620px);
  aspect-ratio: 3 / 2;
  /* remonte la fleur sous la nav (.sh-pin démarre sous le header) */
  margin-top: -16vh;
  transform: translateY(46px) scale(0.965);
  transition: transform 1s var(--ease);
}
.sh-flower.is-in {
  transform: none;
}

.sh-flower-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: contain;
  /* sans JS : pleine couleur */
  filter: grayscale(0);
}

/* voile blanc : dissout la fleur en toute fin de parcours */
.sh-flower-veil {
  position: absolute;
  inset: 0;
  z-index: 2;
  background: var(--white);
  opacity: 0;
  pointer-events: none;
}

.sh-caps {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

.sh-cap {
  position: absolute;
  width: min(400px, 30vw);
}
.sh-cap--left { left: 6vw; text-align: left; }
.sh-cap--right { right: 6vw; text-align: right; }
/* 3 blocs calés par le haut : Mariages et Deuil à gauche, Réceptions à droite */
.sh-cap[data-step="0"] { top: 21%; }
.sh-cap[data-step="1"] { top: 21%; }
.sh-cap[data-step="2"] { top: 21%; }

.sh-cap-inner {
  position: relative;
  isolation: isolate;
}

/* halo blanc derrière le texte, suit --sh-vis */
.sh-cap-inner::before {
  content: "";
  position: absolute;
  inset: -2.8rem -2.4rem;
  z-index: -1;
  pointer-events: none;
  opacity: var(--sh-vis, 0);
  background: radial-gradient(closest-side, rgba(255, 255, 255, 0.96), rgba(255, 255, 255, 0.82) 55%, rgba(255, 255, 255, 0));
}

/* typo du mur botanique de l'accueil (.eyebrow / .editorial-title / .body-text) */
.sh-kicker {
  display: block;
  font-family: var(--font-display);
  font-weight: 400;
  font-size: 15px;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  color: var(--violet-mid);
  margin-bottom: 1rem;
  opacity: 0; /* révélé en JS */
}

.sh-title {
  font-family: var(--font-serif);
  font-weight: 400;
  font-style: normal;
  line-height: 1.02;
  /* même taille que .bw-intro .editorial-title (accueil) */
  font-size: clamp(2.7rem, 4.4vw, 4.4rem);
  color: var(--indigo);
  margin-bottom: 1.1rem;
}

.sh-text {
  font-family: var(--font-display);
  font-weight: 300;
  line-height: 1.85;
  font-size: 18px;
  color: var(--ink-text-dim);
  max-width: 34ch;
}
.sh-cap--right .sh-text {
  margin-left: auto;
}

/* .sh-syl = unité de cascade ; .sh-word empêche un mot de se couper en fin de ligne */
.sh-syl {
  display: inline-block;
  opacity: 0;
}
.sh-word {
  display: inline-flex;
}

/* ============ MOBILE : blocs empilés au-dessus de la fleur, au même endroit ============ */
@media (max-width: 1024px) {
  /* pin interne désactivé (.sh-lock-inner fige l'écran), flux vertical */
  .services-hero,
  .sh-scroll,
  .sh-pin {
    position: static;
    height: auto;
    overflow: visible;
    display: block;
  }

  /* blocs positionnés en % de l'écran */
  .sh-caps {
    padding: 0 13vw;
  }
  .sh-cap,
  .sh-cap--left,
  .sh-cap--right {
    left: 0;
    right: 0;
    width: auto;
    text-align: center;
  }
  /* les 3 blocs à la même position */
  .sh-cap[data-step="0"],
  .sh-cap[data-step="1"],
  .sh-cap[data-step="2"] {
    top: 22%;
    transform: none;
  }
  .sh-cap-inner::before {
    display: none; /* texte au-dessus de la fleur : pas de halo */
  }
  .sh-text {
    font-size: 20px;
    max-width: none;
    margin-left: 0;
    padding: 1rem 1.5rem 1rem;
    text-align: center;
    /* paragraphe animé d'un bloc : caché par défaut */
    opacity: 0;
  }
  .sh-title {
    /* même taille que .bw-intro .editorial-title (accueil, mobile) */
    font-size: clamp(2.15rem, 10vw, 2.8rem);
  }

  /* will-change seulement pendant l'animation (.sh-anim-live, servicesHero) :
     évite le « tac » de fin d'animation en mobile. */
  .sh-anim-live .sh-syl,
  .sh-anim-live .sh-text,
  .sh-anim-live .sh-kicker {
    will-change: opacity, filter, transform;
  }

  /* fleur sous le texte, fixe dans le verrou */
  .sh-flower {
    position: absolute;
    left: 50%;
    top: 66vh;
    width: min(90vw, 400px);
    margin: 0;
    transform: translateX(-50%) translateY(46px) scale(0.965);
  }
  .sh-flower.is-in {
    transform: translateX(-50%);
  }
}

@media (max-width: 700px) {
  .sh-caps {
    padding: 0 10vw;
  }
}

/* Mobiles peu hauts (≤800px) : texte resserré et remonté pour ne pas
   toucher la fleur. */
@media (max-width: 1024px) and (max-height: 800px) {
  .sh-cap[data-step="0"],
  .sh-cap[data-step="1"],
  .sh-cap[data-step="2"] {
    top: 20%;
  }
  .sh-kicker { margin-bottom: 0.6rem; }
  .sh-title {
    font-size: clamp(1.9rem, 8vw, 2.4rem);
    margin-bottom: 0.8rem;
  }
  .sh-text {
    font-size: 15px;
    line-height: 1.6;
    padding: 0.6rem 1rem;
  }
}

/* Très petits écrans (iPhone SE 1re gén.) */
@media (max-width: 1024px) and (max-height: 620px) {
  .sh-text { font-size: 14px; line-height: 1.5; }
}

/* Tablette portrait : paragraphe en colonne centrée, fleur agrandie.
   min-height:900px exclut le paysage. */
@media (min-width: 768px) and (max-width: 1024px) and (min-height: 900px) {
  .sh-kicker {
    font-size: 25px;
  }
  .sh-title {
    font-size: clamp(2.15rem, 10vw, 5rem);
  }
  .sh-text {
    font-size: 25px;
    max-width: 30rem;
    margin-left: auto;
    margin-right: auto;
  }
  /* bloc remonté, fleur légèrement plus basse pour ne pas se chevaucher */
  .sh-cap[data-step="0"],
  .sh-cap[data-step="1"],
  .sh-cap[data-step="2"] {
    top: 17%;
  }
  .sh-flower {
    top: 64vh;
    width: min(74vw, 560px);
  }
}

.services-stack {
  background: var(--white);
  padding: 6.5rem 4vw 4.5rem;
}

/* ---- Citation : mots + pétales. opacity/transform écrits à chaque frame
   par le JS (prestationQuoteScrollLink) ; ici seulement le placement et les
   valeurs lues par le script (--petal-fall / --petal-rot). Marge basse pour
   que tout ait fini de tomber avant la liste d'occasions. ---- */
.prestation-quote-wrap {
  position: relative;
  /* isolation : empêche le z-index négatif des pétales de passer sous le fond
     de .services-stack */
  isolation: isolate;
  height: 35rem;
  margin: 4rem 0 45rem;
}

/* pas de position:relative : le <h2> n'a pas de hauteur propre, les mots se
   positionnent sur .prestation-quote-wrap */

/* pétales sous le texte (z-index négatif) */
.prestation-quote-petals {
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.prestation-quote-petal {
  position: absolute;
  width: clamp(90px, 10vw, 160px);
  height: auto;
  /* sans JS : visible */
  opacity: 1;
}

.prestation-quote-petal-1 {
  top: -5%;
  left: 4%;
  width: clamp(120px, 13vw, 180px);
  --petal-rot: -18deg;
  --petal-fall: -110px;
}
.prestation-quote-petal-2 {
  top: 92%;
  left: 68%;
  width: clamp(100px, 11vw, 140px);
  --petal-rot: 22deg;
  --petal-fall: -75px;
}
.prestation-quote-petal-3 {
  top: 78%;
  left: 2%;
  width: clamp(110px, 12vw, 160px);
  --petal-rot: -10deg;
  --petal-fall: -120px;
}
.prestation-quote-petal-5 {
  top: 8%;
  left: 78%;
  width: clamp(55px, 6vw, 85px);
  --petal-rot: 30deg;
  --petal-fall: -50px;
}
.prestation-quote-petal-6 {
  top: 46%;
  left: 90%;
  width: clamp(65px, 7vw, 100px);
  --petal-rot: -25deg;
  --petal-fall: -65px;
}
.prestation-quote-petal-7 {
  top: 122%;
  left: 80%;
  width: clamp(50px, 5.5vw, 75px);
  --petal-rot: 12deg;
  --petal-fall: -45px;
}
.prestation-quote-petal-8 {
  top: 110%;
  left: 10%;
  width: clamp(60px, 6.5vw, 95px);
  --petal-rot: -20deg;
  --petal-fall: -60px;
}
.prestation-quote-petal-4 {
  top: 190%;
  left: 57%;
  --petal-rot: 15deg;
  --petal-fall: -70px;
}

.prestation-quote-word {
  position: absolute;
  font-family: var(--font-serif);
  font-weight: 400;
  text-transform: uppercase;
  line-height: 1;
  font-size: clamp(2.2rem, 4.6vw, 10rem);
  color: var(--indigo);
  /* sans JS : visible */
  opacity: 1;
}

/* ~30% d'écart entre chaque mot : chacun arrive à un moment distinct */
.prestation-quote .prestation-quote-word:nth-child(1) {
  top: 0%;
  left: 30%;
}
.prestation-quote .prestation-quote-word:nth-child(2) {
  top: 27%;
  left: 40%;
}
.prestation-quote .prestation-quote-word:nth-child(3) {
  top: 57%;
  left: 45%;
}
.prestation-quote .prestation-quote-word:nth-child(4) {
  top: 87%;
  left: 16%;
}
.prestation-quote .prestation-quote-word:nth-child(5) {
  top: 117%;
  left: 52%;
}
.prestation-quote .prestation-quote-word:nth-child(6) {
  top: 147%;
  left: 32%;
}
.prestation-quote .prestation-quote-word:nth-child(7) {
  top: 177%;
  left: 42%;
}

/* ============================================
   LISTE D'OCCASIONS : défilement infini, 2 rangées en sens opposés.
   Contenu répété 4 fois, boucle sur 1/4 de piste : aucun trou sur grand écran.
   ============================================ */
.event-list {
  background: var(--white);
  padding: 2.5rem 0 3.5rem;
  display: flex;
  flex-direction: column;
  gap: 1.4rem;
}

.event-list-row {
  overflow: hidden;
  white-space: nowrap;
}

.event-list-track {
  display: inline-flex;
  gap: 3rem;
  padding-right: 3rem;
  animation: eventListLeft 40s linear infinite;
}

.event-list-row--right .event-list-track {
  animation-name: eventListRight;
  animation-duration: 46s;
}

.event-list-track span {
  font-family: var(--font-serif);
  font-weight: 300;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: clamp(1.1rem, 2.6vw, 1.8rem);
  color: var(--indigo);
}

@keyframes eventListLeft {
  from {
    transform: translateX(0);
  }
  to {
    transform: translateX(-25%);
  }
}

@keyframes eventListRight {
  from {
    transform: translateX(-25%);
  }
  to {
    transform: translateX(0);
  }
}

/* ============ RESPONSIVE ============ */
@media (max-width: 700px) {
  /* Mobile : disposition beaucoup plus verticale */
  .services-stack {
    padding-top: 1.5rem;
  }
  .prestation-quote-wrap {
    min-height: 56rem;
    height: auto;
    margin: 1rem 0 5rem;
  }

  .prestation-quote .prestation-quote-word:nth-child(1) { top: 10%;  left: 25%; }  /* Des */
  .prestation-quote .prestation-quote-word:nth-child(2) { top: 22%; left: 44%; }  /* fleurs */
  .prestation-quote .prestation-quote-word:nth-child(3) { top: 31%; left: 22%; }  /* à */
  .prestation-quote .prestation-quote-word:nth-child(4) { top: 49%; left: 25%; }  /* chaque */
  .prestation-quote .prestation-quote-word:nth-child(5) { top: 62%; left: 40%; }  /* moment */
  .prestation-quote .prestation-quote-word:nth-child(6) { top: 74%; left: 32%; }  /* de */
  .prestation-quote .prestation-quote-word:nth-child(7) { top: 91%; left: 42%; }  /* vie */

  .prestation-quote-petal {
    width: clamp(64px, 20vw, 105px);
  }
  .prestation-quote-petal-1 { top: -5%;   left: -1%;  width: clamp(84px, 26vw, 140px); }
  .prestation-quote-petal-5 { top: 4%;   left: 66%;  width: clamp(46px, 13vw, 72px); }
  .prestation-quote-petal-3 { top: 36%;  left: 45%; }
  .prestation-quote-petal-6 { top: 25%;  left: 81%;  width: clamp(46px, 13vw, 72px); }
  .prestation-quote-petal-2 { top: 69%;  left: 60%; }
  .prestation-quote-petal-8 { top: 58%;  left: -1%; }
  .prestation-quote-petal-7 { top: 105%;  left: 42%;  width: clamp(46px, 13vw, 72px); }
  .prestation-quote-petal-4 { top: 85%;  left: 14%; }
}

/* ============================================
   NOS CRÉATIONS — fleur colorée au survol, fondu au scroll ; titre à
   droite qui se fond en flou au scroll (prestations-services.js).
   ============================================ */
.creations-intro {
  background: var(--white);
  padding: 2.5rem 1.5rem 3rem;
}

.creations-hero {
  display: flex;
  align-items: flex-start;
  gap: 2vw;
  max-width: 1600px;
  margin: 0 auto;
}

/* margin-left négatif : la tige sort par le bord gauche de l'écran.
   #nosCreations est ici : le lien de l'accueil atterrit sur la fleur. */
.creations-photo {
  flex: 1 1 auto;
  min-width: 0;
  position: relative;
  max-width: min(46vw, 520px);
  margin-left: -2vw;
  scroll-margin-top: 5vh;
}

.creations-photo-img {
  position: relative;
  z-index: 2;
  display: block;
  width: 100%;
  height: auto;
  /* sans JS : visible */
  opacity: 1;
}

/* copie désaturée ; un masque radial qui grandit laisse passer la couleur
   de dessous */
.creations-photo-img--gray {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  filter: grayscale(1);
  /* sans JS : N&B */
  opacity: 1;
}

/* titre décalé vers le bas de la fleur (à revoir si la photo change) */
.creations-hero-title {
  flex: 0 0 auto;
  margin: 0;
  margin-top: 12rem;
  margin-right: 20vh;
  white-space: nowrap;
}

.creations-title-kicker {
  display: block;
  margin-bottom: 0.4rem;
}

.creations-title-main {
  display: block;
}

/* même police que .footer-title */
.creations-title-piece {
  display: inline-block;
  vertical-align: top;
  font-family: var(--font-display);
  font-style: normal;
  font-weight: 200;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  line-height: 1;
  /* ≤900px : 4rem */
  font-size: 6rem;
  color: var(--indigo);
  will-change: opacity, filter, transform;
}

.creations-title-piece--kicker {
  text-transform: none;
  font-size: clamp(1.5rem, 3vw, 2.3rem);
}

@media (max-width: 900px) {
  .creations-hero { flex-direction: column; }
  .creations-hero-title {
    margin-top: 0;
    margin-right: 0;
    text-align: center;
    white-space: normal;
    align-self: center;
  }
  .creations-title-piece { font-size: 4rem; }
  .creations-title-piece--kicker { font-size: 2.6rem; }
  /* nowrap : les 3 syllabes (spans) ne se coupent pas en fin de ligne */
  .creations-title-main { white-space: nowrap; }
}

@media (max-width: 700px) {
  .creations-photo {
    max-width: 560px;
    margin-left: -6vw;
  }
}

/* « CRÉATIONS » réduit sous ~405px pour rester sur une ligne */
@media (max-width: 480px) {
  .creations-title-piece { font-size: 3.4rem; }
}

/* ============================================
   GALERIE DES CRÉATIONS : 4 colonnes décalées, scroll natif. Chaque photo
   tombe en se révélant, puis se dissout en sortant par le haut.
   ============================================ */
.cg-wall {
  background: var(--white);
  padding: 2rem 3vw 30vh;
}
.cg-wall-grid {
  display: flex;
  gap: 1.6vw;
  max-width: 1500px;
  margin: 0 auto;
}
.cg-col {
  flex: 1;
  display: flex;
  flex-direction: column;
  /* gap > distance de chute (JS) : une photo qui tombe ne mord pas sur la
     précédente */
  gap: 5vw;
}
.cg-card {
  will-change: opacity, transform;
}
.cg-card img {
  display: block;
  width: 100%;
  aspect-ratio: 2 / 3;
  object-fit: cover;
  border-radius: 8px;
}

@media (max-width: 900px) {
  .cg-wall-grid { gap: 4vw; }
  .cg-col { gap: 8vw; }
}
@media (max-width: 560px) {
  .cg-wall { padding: 2rem 3vw 13vh; }
  /* gap porté par la grille : .cg-col est aplatie (display:contents) */
  .cg-wall-grid { flex-direction: column; max-width: 320px; margin: 0 auto; gap: 8vh; }

  /* Mobile : display:contents aplatit les colonnes pour réordonner les 20
     cartes par teinte via `order` (blanc, rose, jaune, bleu, vert). */
  .cg-col { display: contents; }

  .cg-col:nth-child(1) .cg-card:nth-child(1) { order: 1; }
  .cg-col:nth-child(2) .cg-card:nth-child(1) { order: 2; }
  .cg-col:nth-child(3) .cg-card:nth-child(1) { order: 3; }
  .cg-col:nth-child(4) .cg-card:nth-child(1) { order: 4; }

  .cg-col:nth-child(1) .cg-card:nth-child(2) { order: 5; }
  .cg-col:nth-child(2) .cg-card:nth-child(2) { order: 6; }
  .cg-col:nth-child(3) .cg-card:nth-child(2) { order: 7; }
  .cg-col:nth-child(4) .cg-card:nth-child(2) { order: 8; }

  .cg-col:nth-child(1) .cg-card:nth-child(3) { order: 9; }
  .cg-col:nth-child(2) .cg-card:nth-child(3) { order: 10; }
  .cg-col:nth-child(3) .cg-card:nth-child(3) { order: 11; }
  .cg-col:nth-child(4) .cg-card:nth-child(3) { order: 12; }

  .cg-col:nth-child(1) .cg-card:nth-child(4) { order: 13; }
  .cg-col:nth-child(2) .cg-card:nth-child(4) { order: 14; }
  .cg-col:nth-child(3) .cg-card:nth-child(4) { order: 15; }
  .cg-col:nth-child(4) .cg-card:nth-child(4) { order: 16; }

  .cg-col:nth-child(1) .cg-card:nth-child(5) { order: 17; }
  .cg-col:nth-child(2) .cg-card:nth-child(5) { order: 18; }
  .cg-col:nth-child(3) .cg-card:nth-child(5) { order: 19; }
  .cg-col:nth-child(4) .cg-card:nth-child(5) { order: 20; }
}