/* ==========================================================================
   VANILLA - LA SCENE
   --------------------------------------------------------------------------
   SEPT SECTIONS, UNE PAR MAQUETTE. Rien n'est invente : chaque section est
   le calque d'une des sept maquettes du dossier `reference/`, et le contenu
   de la maison a ete REDUIT a ce qui rentre dans sa structure.

   La version precedente tracait le bandeau de la maquette 2 puis collait
   soixante pastilles dessous : un hybride qui ne ressemblait a rien.
   Le composeur complet vit desormais sur la page carte, ou les soixante
   choix ont leur place.

     1 heros          <- maquette 1 (bandeau de site)
     2 a composer     <- maquette 2 (banniere, prix dans la tache)
     3 brioches       <- maquette 4 (titre en haut, photo a gauche, prix)
     4 a table        <- maquette 5 (texte + bouton carre, photo a droite)
     5 la maison      <- maquette 3 (affiche a mot monumental)
     6 nous trouver   <- maquette 6 (photo en tache, colonnes verticales)
     7 cloture        <- maquette 7 (titre / photo / titre)
   ========================================================================== */

/* ==========================================================================
   1. LE HEROS  <- maquette 1
   ========================================================================== */

.scene-hero {
  position: relative;
  /* Borne HAUTE et non 100dvh : sur un grand moniteur le heros devenait
     un ecran presque vide. dvh reste utilise pour le minimum, la barre
     d'adresse mobile ne doit pas faire sauter la mise en page.
     ⚠️ Borne portee de 760 a 920 px le 01/08/2026 (« augmente la taille de
     section 1 »). Une section plus haute SANS contenu plus grand redonne
     l'ecran a moitie vide qu'on avait corrige : le titre et la photo
     grandissent dans la meme passe. */
  /* ⚠️ `min(100dvh, N)` PLAFONNE A LA FENETRE : passer N de 920 a 1060 ne
     change RIEN sur un ecran de 900 px de haut, la section restait a 900.
     Pour que « augmente encore la section 1 » se voie, il faut depasser la
     fenetre -- d'ou 108dvh. Le heros deborde donc volontairement d'un
     huitieme d'ecran, ce qui invite a defiler. */
  min-height: min(110dvh, 1180px);
  display: grid;
  align-content: center;
  /* ⚠️ LE CONTENU EST CENTRE dans la section (`align-content: center`) :
     pour le REMONTER, on n'enleve pas du rembourrage haut -- on en AJOUTE
     en bas. Le contenu se decale alors de la moitie de ce qu'on ajoute.
     Demande client du 01/08/2026 : « remonte la section 1 légèrement vers
     le haut » -> bas porte de 3,4 a 8 rem, soit environ 37 px de remontee. */
  /* ⚠️ Le rembourrage bas a ete reduit avec les pastilles : elles
     occupaient le bas de la section, leur place n'a plus a etre reservee.
     C'est aussi ce qui resserre le joint entre le heros et « À composer »
     (client : « réduis légèrement l'espace entre les 2 sections »). */
  padding-block: calc(var(--entete-h) + .5rem) clamp(2.4rem, 5vw, 4.5rem);
  overflow: clip;
}

.hero__grille {
  position: relative;
  z-index: 2;
  display: grid;
  /* ⚠️ La photo est bornee par SA COLONNE, pas par son `max-height` : pour
     l'agrandir encore il faut elargir la colonne, sinon le format seul ne
     fait que l'aplatir. */
  grid-template-columns: minmax(0, .88fr) minmax(0, 1.62fr) auto;
  gap: clamp(1.2rem, 3.5vw, 3.5rem);
  align-items: start;
}
/* ⚠️ `align-content: start` et non le centrage par defaut : la colonne de
   texte remonte en haut du heros au lieu de flotter au milieu (client :
   « remonte vers le haut les textes à gauche de la première section »).
   Le petit retrait garde son alignement avec le haut de la photo. */
.hero__corps {
  display: grid; gap: clamp(.9rem, 1.7vw, 1.4rem);
  justify-items: start; align-content: start;
  padding-top: clamp(.5rem, 2vw, 2rem);
}

/* ⚠️ TAILLE REDUITE ET `max-width` RETIRE (client : « certaines phrases
   sont rognées par la frame de l'image »). Le mot le plus long du rotor,
   « bubblewaffle », mesurait 396 px a 4 rem alors que sa colonne n'en
   faisait que 380 : il passait sous la photo. Le `max-width: 20ch` ne
   servait a rien ici puisque le rotor est sur sa propre ligne, et il
   forcait le titre a se couper plus tot que necessaire. */
.hero__titre {
  margin: 0;
  font-size: clamp(1.9rem, 3.3vw, 3.1rem);
  font-weight: 400;
  line-height: 1.3;
}
.hero__titre em { font-style: normal; color: var(--terra-txt); }
.hero__titre__fixe { display: block; }

/* ------------------------------------------------------------- LE ROTOR
   Le dernier mot du titre change toutes les 2,4 s. Les mots montent l'un
   apres l'autre sous un masque : le meme geste que le decoupage mot a mot
   du reste du site, donc le titre entier parle la meme langue.

   ⚠️ LA BOITE EST DIMENSIONNEE PAR LE MOT LE PLUS LONG, pose en flux et
   rendu invisible (`.rotor__etalon`). Sans lui, la boite aurait la taille
   du mot courant et TOUTE LA MISE EN PAGE sauterait a chaque changement --
   le bloc de texte, les boutons et la photo se decaleraient cinq fois par
   quinze secondes. */
.rotor {
  position: relative;
  display: block;
  overflow: clip;
  padding-bottom: .18em;      /* reserve pour les jambages du scripte */
  color: var(--terra-txt);
}
.rotor__etalon { visibility: hidden; display: block; white-space: nowrap; }
/* Dans un titre de section, le rotor est EN LIGNE : il termine une phrase
   au lieu d'occuper sa propre ligne. */
.rotor--titre { display: inline-block; vertical-align: bottom; }
.rotor--titre .rotor__etalon { display: inline-block; }
.rotor__mot {
  position: absolute;
  left: 0; top: 0;
  white-space: nowrap;
  translate: 0 108%;
  opacity: 0;
}
.rotor__mot.est-actif { translate: 0 0; opacity: 1; }
@media (prefers-reduced-motion: no-preference) {
  .rotor__mot {
    transition: translate .7s var(--sortie), opacity .35s linear;
  }
  /* Le mot qui part descend, celui qui arrive monte : ils ne se croisent
     jamais dans le meme sens, sinon on ne lit qu'un flou. */
  .rotor__mot.est-sortant { translate: 0 -108%; opacity: 0; }
}
.hero__chapeau { max-width: 34ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .4rem; }

/* Le visuel du heros. Demande client du 01/08/2026 : plus long, moins
   arrondi. Le format passe de 1,6:1 a 2,1:1.
   ⚠️ C'est le MAX-HEIGHT qui pilote la boite, pas la colonne : avec un
   `aspect-ratio`, la hauteur plafonne et la largeur suit. Allonger le
   format suffit donc a allonger la photo, sans toucher a la grille --
   mais il faut alors REMESURER, la largeur pouvant depasser sa colonne. */
.hero__matiere {
  aspect-ratio: 1.5 / 1;
  max-height: clamp(340px, 70vh, 660px);
  opacity: 0;
}
/* ⚠️ L'image est SORTIE DU FLUX. Elle est 130 px plus haute que son cadre
   pour que la parallaxe ne decouvre jamais de vide ; tant qu'elle restait
   en flux, c'est ELLE qui donnait sa hauteur au cadre et l'`aspect-ratio`
   demande n'etait jamais applique. Sur telephone la photo sortait a 0,93:1
   -- plus haute que large -- au lieu de 1,5:1. `overflow: clip` ne change
   rien a ca : il masque le debordement, il n'empeche pas le cadre de
   grandir pour contenir son enfant. */
.hero__matiere { position: relative; }
.hero__matiere img {
  position: absolute;
  inset: -65px 0 auto 0;
  width: 100%;
  height: calc(100% + 130px);
  translate: 0 var(--par, 0px);
  /* Toutes les photos sont empilees ; une seule est visible. Le passage de
     l'une a l'autre se fait DERRIERE la coulee, donc sans fondu : un fondu
     croise en plus du rideau ferait deux gestes pour un seul evenement. */
  opacity: 0;
}
.hero__matiere img.est-actif { opacity: 1; }

/* --------------------------------------------------- LE VISUEL TOURNANT */

.hero__visuel { position: relative; }

/* LA BOX BRUNE CLAIRE derriere la photo, decalee vers la DROITE : elle
   depasse du cote droit et du bas, jamais a gauche -- c'est ce decalage
   d'un seul cote qui fait lire une epaisseur, et non un cadre. */
.hero__socle {
  position: absolute;
  z-index: -1;
  inset: 7% -3.5% -5% 9%;
  background: var(--ocre-logo);
  border-radius: clamp(12px, 1.6vw, 26px);
  overflow: clip;
}
/* Le relief : le motif pave toute la box, en brun du logotype tres pale.
   ⚠️ `max-width: none` : la remise a zero pose `max-width: 100%` sur tous
   les `svg`, ce qui bride un motif cense couvrir sa boite. */
.hero__socle__relief {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  max-width: none;
  color: var(--secondaire);
  opacity: .16;
}

/* LA COULEE DE CARAMEL.
   Elle attend AU-DESSUS du cadre, descend pour le couvrir, puis poursuit
   vers le bas. `.couvre` et `.decouvre` sont poses par le script. */
.hero__coulee {
  --gouttes: clamp(38px, 5vw, 74px);
  position: absolute;
  left: -2%; right: -2%;
  /* ⚠️ AU REPOS, LE BLOC DOIT ETRE AU-DESSUS **AVEC SES GOUTTES**.
     Pose a `bottom: 100%`, seul le bloc sortait du cadre : son bord en
     gouttes, accroche sous lui, pendait exactement dans le haut de la
     photo -- une frise de caramel visible en permanence. La reserve de
     `--gouttes` est ce qui manquait. */
  bottom: calc(100% + var(--gouttes));
  height: 100%;
  z-index: 3;
  /* CHOCOLAT FONCE (client, 01/08/2026 : « quand il y a l'animation de
     changement d'image, le fond doit être brun foncé chocolat »). En ocre
     clair, le rideau se confondait avec la box posee derriere la photo. */
  background: var(--secondaire);
  pointer-events: none;
  translate: 0 0;
}
/* Le bord en gouttes, pose sous le bloc : meme couleur, il en fait partie. */
.hero__coulee__bord {
  position: absolute;
  top: 100%; left: 0; right: 0;
  width: 100%;
  height: var(--gouttes);
  max-width: none;
  fill: var(--secondaire);
}
@media (prefers-reduced-motion: no-preference) {
  .hero__coulee { transition: translate .62s cubic-bezier(.5, 0, .2, 1); }
}
/* COUVRIR : le bloc descend d'une hauteur de cadre + la reserve des
   gouttes, donc il occupe exactement le cadre et ses gouttes pendent
   dessous, hors champ. */
.hero__coulee.couvre   { translate: 0 calc(100% + var(--gouttes)); }
/* DECOUVRIR : elle poursuit, elle ne remonte JAMAIS. Il faut deux fois la
   course pour que le HAUT du bloc passe sous le bas du cadre. */
.hero__coulee.decouvre { translate: 0 calc(200% + var(--gouttes) * 2); }

/* LES DEUX PAVES, sur des extremites opposees. Fond vanille et texte a
   l'encre : sur une photo, seul un aplat plein garantit la lecture -- un
   voile translucide depend de ce qu'il y a dessous. */
.hero__pave {
  position: absolute;
  z-index: 4;
  display: grid;
  padding: .6rem .95rem;
  background: var(--vanille);
  color: var(--encre);
  font-size: clamp(.9rem, 1.05vw, 1rem);
  line-height: 1.35;
  border-radius: 4px;
}
.hero__pave em { font-style: normal; color: var(--secondaire); }
.hero__pave--hg { top: -1.1rem; left: -1.1rem; }
.hero__pave--bd { bottom: -1.1rem; right: -1.1rem; text-align: right; }

/* ------------------------------------------------------ LE RUBAN VERTICAL */

/* La fenetre du ruban descend jusqu'au bas de la photo : `min-height` en
   plancher, puis elle prend toute la hauteur restante de la colonne. */
.ruban-v { min-height: clamp(240px, 38vh, 460px); height: 100%; overflow: clip; }
.ruban-v__piste { display: flex; flex-direction: column; align-items: center; }
/* ⚠️ L'ecart entre les deux copies est une MARGE portee par chaque copie,
   jamais un `gap` : un `gap` n'est compte qu'une fois entre les deux, et le
   raccord a `-50 %` saute alors d'un demi-ecart a chaque tour. */
.ruban-v .vertical { margin-bottom: 2.6rem; }
@media (prefers-reduced-motion: no-preference) {
  .ruban-v__piste { animation: ruban-v 16s linear infinite; }
}
@keyframes ruban-v { from { translate: 0 0; } to { translate: 0 -50%; } }
/* LA PHOTO SE DECADRE : elle monte en se DESAGRANDISSANT (1,14 -> 1), le
   mouvement inverse de tout le reste, qui grossit ou descend. C'est ce
   contre-sens qui la distingue des autres entrees. */
[data-vu='oui'] .hero__matiere { animation: pose-matiere 1.7s var(--sortie) .35s both; }
@keyframes pose-matiere {
  from { opacity: 0; scale: 1.14; translate: 0 40px; }
  to   { opacity: 1; scale: 1; translate: 0 0; }
}

@property --par { syntax: '<length>'; inherits: false; initial-value: 0px; }

@media (prefers-reduced-motion: no-preference) {
  .hero__matiere img { animation: respire 24s ease-in-out infinite alternate; }
  .filet-ok .hero__matiere img {
    animation: respire 24s ease-in-out infinite alternate, parallaxe linear both;
    animation-timeline: auto, view();
    animation-range: normal, cover 0% cover 100%;
  }
}
@keyframes respire { from { scale: 1; } to { scale: 1.08; } }
@keyframes parallaxe { from { --par: 55px; } to { --par: -55px; } }

/* ⚠️ LA COLONNE VERTICALE PART DU HAUT, comme la colonne de texte de
   gauche (client : « augmente la frame vers le bas pour que le texte
   démarre de manière parallèle à la box de gauche »). Le filet fait le
   raccord entre le haut de la section et le debut du ruban, et le ruban
   descend jusqu'au bas de la photo. */
.hero__cote {
  display: grid; justify-items: center; gap: 1rem;
  align-content: start;
  padding-top: clamp(.5rem, 2vw, 2rem);
  height: 100%;
}
.hero__cote__trait { width: 1px; height: clamp(60px, 9vw, 120px); background: var(--filet-fort); flex: none; }

.hero__etat {
  position: relative; z-index: 2;
  margin-top: clamp(1.6rem, 3vw, 2.6rem);
  padding-top: 1rem;
  border-top: 1px solid var(--filet-c);
  display: flex; flex-wrap: wrap; align-items: baseline;
  gap: .4rem clamp(1.2rem, 3.5vw, 3rem);
}
.hero__etat__ouvert { display: flex; align-items: baseline; gap: .6rem; }
.hero__etat__note { color: var(--encre-tenue); }
.hero__etat__lien { margin-left: auto; font-size: .95rem; }
.hero__pastilles { position: absolute; left: var(--gouttiere); bottom: clamp(1.4rem, 3vw, 2.6rem); z-index: 3; }

@media (max-width: 980px) {
  .hero__grille { grid-template-columns: 1fr; }
  .hero__cote, .hero__pastilles { display: none; }
  /* Sur telephone, 2,1:1 sur 340 px de large ne ferait plus que 160 px de
     haut : la photo redevient une bande lisible.
     ⚠️ `max-height` doit sauter ici, sinon c'est LUI qui fixe la hauteur
     (36vh = 304 px sur un 844) et le format demande n'est jamais applique :
     la photo redevenait carree, a 1,06:1 au lieu de 1,5:1. */
  .hero__matiere { width: min(92%, 460px); aspect-ratio: 3 / 2; max-height: none; justify-self: center; }
  .hero__etat__lien { margin-left: 0; }
}

/* ==========================================================================
   PIECES COMMUNES AUX MAQUETTES
   Chacune revient dans plusieurs d'entre elles, donc elle est ecrite une
   seule fois : la tache qui porte un prix, la colonne verticale, le pied de
   maquette, et le bloc « petit titre + paragraphe ».
   ========================================================================== */

/* La tache qui porte un prix (maquettes 2 et 4).
   ATTENTION : FLEX et non GRID. En grille, chaque caractere du prix devient
   une ligne et le montant s'affiche A LA VERTICALE. Et `align-items: center`
   et non `baseline`, sans quoi le prix se colle en haut de la tache. */
.tache-prix {
  display: flex;
  align-items: center;
  justify-content: center;
  white-space: pre;
  min-width: clamp(170px, 21vw, 268px);
  min-height: clamp(110px, 13vw, 164px);
  padding: .3em 1.1em;
  clip-path: url(#t-pastille);
  background: var(--vanille);
  color: var(--encre);
  font-size: clamp(1.7rem, 3.6vw, 2.7rem);
  font-weight: 400;
  line-height: 1.3;
  font-variant-numeric: tabular-nums;
  animation: respire-tache 24s ease-in-out infinite alternate;
}

/* La colonne verticale (maquettes 2 et 6). */
.colonne { display: grid; justify-items: center; gap: 1rem; align-content: center; }
.colonne__trait { width: 1px; height: clamp(50px, 7vw, 96px); background: var(--filet-fort); }
.colonne__mot {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: clamp(1.8rem, 4.2vw, 3.4rem);
  font-weight: 400;
  color: var(--brun);
  white-space: nowrap;
}

/* Le pied de maquette : le nom, les reseaux, un filet, l'adresse du site. */
.pied-maquette {
  display: flex;
  align-items: center;
  gap: clamp(.8rem, 2vw, 1.6rem);
  font-size: .92rem;
  font-weight: 400;
  color: var(--brun);
}
.pied-maquette__filet { flex: 1; height: 1px; min-width: 2rem; background: var(--filet-fort); }
.pied-maquette__reseaux { display: flex; gap: .7rem; }
.pied-maquette__reseaux a { transition: color .4s var(--sortie), scale .35s var(--ressort); }
.pied-maquette__reseaux a:hover { color: var(--terra-txt); scale: 1.18; }
.pied-maquette .ico { font-size: 1rem; }

/* Le bloc « petit titre + paragraphe » (maquettes 3, 4 et 6). */
.note { display: grid; gap: .5rem; max-width: 34ch; }
.note h3 { font-size: .92rem; font-weight: 400; }
.note p { font-size: .92rem; color: var(--encre-douce); line-height: 1.7; }

/* ==========================================================================
   2. A COMPOSER  <- maquette 2
   ========================================================================== */

/* Rembourrage HAUT reduit : c'est l'autre moitie du joint avec le heros. */
.composer { position: relative; overflow: clip; background: var(--blanc); padding-block: calc(var(--section) * .55) var(--section); }
.composer > .enveloppe { position: relative; z-index: 1; }

.composer__grille {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr);
  gap: clamp(1rem, 3vw, 3rem);
  align-items: center;
}
.composer__vue { width: clamp(260px, 46vw, 660px); aspect-ratio: 16 / 10; }
.composer__texte { display: grid; gap: 1.1rem; justify-items: end; text-align: right; }
.composer__texte .titre-section { max-width: 16ch; }
.composer__texte .chapeau { max-width: 38ch; }
.composer__date { display: flex; align-items: baseline; gap: .8rem; }
.composer__date strong { font-size: 1.05rem; font-weight: 400; }
.composer__pied { margin-top: clamp(1.6rem, 3vw, 2.6rem); }

@media (max-width: 980px) {
  .composer__grille { grid-template-columns: 1fr; gap: 1.4rem; }
  .composer__vue { width: 100%; aspect-ratio: 4 / 3; }
  .composer .colonne { display: none; }
  .composer__texte { justify-items: start; text-align: left; }
}

/* ==========================================================================
   3. LES BRIOCHES PERDUES  <- maquette 4
   ========================================================================== */

.brioches { position: relative; overflow: clip; background: var(--gris); padding-block: var(--section); }
.brioches > .enveloppe { position: relative; z-index: 1; }

.brioches__titre { text-align: right; margin-bottom: clamp(1rem, 2vw, 1.6rem); }
.brioches__barre { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }

.brioches__grille {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: center;
}
/* La photo deborde du cadre par la gauche, comme dans la maquette. */
.brioches__vue { width: clamp(280px, 53vw, 760px); aspect-ratio: 16 / 9; margin-left: calc(var(--gouttiere) * -1 - 1rem); }
.brioches__droite { display: grid; gap: clamp(1.2rem, 2.4vw, 2rem); justify-items: end; text-align: right; }
.brioches__droite .note { justify-items: end; text-align: right; }

@media (max-width: 900px) {
  .brioches__grille { grid-template-columns: 1fr; }
  .brioches__vue { width: 100%; margin-left: 0; aspect-ratio: 4 / 3; }
  .brioches__titre { text-align: left; }
  .brioches__droite, .brioches__droite .note { justify-items: start; text-align: left; }
}

/* ==========================================================================
   4. A TABLE  <- maquette 5
   Le bouton de cette maquette est un RECTANGLE plein, pas une pilule.
   ========================================================================== */

/* ⚠️ SECTION DEPLACEE JUSTE APRES LE HEROS, et posee sur LE MEME FOND QUE
   LE PIED DE PAGE (client : « je veux que le fond soit de la même couleur
   que celui du footer »), c'est-a-dire le vanille du logotype. Elle est
   encadree par deux sections blanches, donc ses deux vagues sont
   blanc -> vanille puis vanille -> blanc. */
.table-qr { position: relative; overflow: clip; background: var(--vanille); padding-block: var(--section); }
.table-qr > .enveloppe { position: relative; z-index: 1; }

.bouton--carre { border-radius: 0; padding: .95em 2.1em; }

/* --------------------------------------------------- LES ETAPES EN BULLES
   Demande client du 01/08/2026 : « une section assez compactée, en étapes
   en forme de bulle, de la commande panier via QR code jusqu'au service à
   table, avec animation des bulles d'étapes. »
   Cinq colonnes egales, un seul fil qui les traverse, une bulle par etape
   posee dessus. Toute la bande tient en ~340 px de haut. */

.etapes__entete { display: grid; gap: .6rem; justify-items: center; text-align: center; margin-bottom: clamp(1.6rem, 3.5vw, 2.8rem); }
.etapes__entete .titre-section { max-width: 26ch; }

.etapes {
  position: relative;
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: clamp(.6rem, 1.6vw, 1.6rem);
  padding: 0; margin: 0;
  list-style: none;
}
/* ⚠️ LES DEUX FILETS HORIZONTAUX SONT SUPPRIMES (client, 01/08/2026 : « il
   y a 2 lignes horizontales, une cassée et fixe à supprimer, et celle
   animée, mais très moche visuellement »). Ils avaient deux defauts :
   - le fil FIXE etait pose de 10 % a 90 % de la liste, donc il commencait
     et finissait DANS LE VIDE, a cote des bulles des extremites -- d'ou
     l'impression de trait casse ;
   - le fil ANIME se remplissait par un `width` calcule en pixels a chaque
     etape : sur une largeur qui change au redimensionnement, il tombait a
     cote des centres.
   La progression passe donc PAR LES BULLES elles-memes : chaque etape
   franchie reste marquee, et un segment relie deux bulles voisines. Il n'y
   a plus aucun trait qui traverse la bande. */
.etape {
  --bulle: clamp(54px, 5.6vw, 78px);
  position: relative;
  display: grid;
  justify-items: center;
  text-align: center;
  gap: .45rem;
}
/* La section etant desormais vanille, la bulle prend le BLANC : sur son
   propre fond elle n'existerait plus. */
.etape__bulle {
  display: grid; place-items: center;
  width: var(--bulle); height: var(--bulle);
  border-radius: 50%;
  background: var(--blanc);
  color: var(--secondaire);
  transition: background-color .4s var(--sortie), color .4s var(--sortie),
              scale .5s var(--ressort);
}
.etape__bulle .ico { font-size: calc(var(--bulle) * .42); }
.etape__n { font-size: .92rem; color: var(--secondaire); }
.etape__titre { font-size: clamp(1.05rem, 1.5vw, 1.35rem); line-height: 1.3; }
.etape__txt { font-size: .95rem; line-height: 1.5; color: var(--encre-douce); max-width: 24ch; }

/* L'ANIMATION DES BULLES.
   Elles arrivent l'une apres l'autre, en gonflant depuis rien, et le fil
   se tire de gauche a droite pendant ce temps. Le retard vient de `--i`,
   pose en attribut sur chaque etape : une seule regle sert les cinq. */
/* ⚠️ La liste porte `data-reveler` pour etre OBSERVEE, mais la revelation
   generique `[data-reveler] > *` doit etre neutralisee ici : sinon les
   cinq etapes montent en bloc pendant que leurs bulles gonflent une par
   une, et les deux gestes se marchent dessus. */
[data-reveler].etapes > * { opacity: 1; translate: 0 0; transition: none; }
.js .etapes::before { scale: 0 1; transform-origin: left; }
.js .etape__bulle { scale: .2; opacity: 0; }
.js .etape__n, .js .etape__titre, .js .etape__txt { opacity: 0; translate: 0 12px; }
@media (prefers-reduced-motion: no-preference) {
  /* Meme correction de rythme que l'entree du heros : 190 ms entre deux
     bulles, pas 130. Cinq bulles a 130 ms se posent en 0,65 s, ce qui se
     lit comme un seul mouvement au lieu de cinq. */
  .js .etapes::before { transition: scale 1.5s var(--sortie) .15s; }
  .js .etape__bulle {
    transition: scale .95s var(--ressort) calc(var(--i) * 190ms + 200ms),
                opacity .5s linear calc(var(--i) * 190ms + 200ms),
                background-color .4s var(--sortie), color .4s var(--sortie);
  }
  .js .etape__n, .js .etape__titre, .js .etape__txt {
    transition: opacity .7s var(--sortie) calc(var(--i) * 190ms + 430ms),
                translate .8s var(--sortie) calc(var(--i) * 190ms + 430ms);
  }
}
.js [data-vu='oui'].etapes::before { scale: 1 1; }
.js [data-vu='oui'] .etape__bulle { scale: 1; opacity: 1; }
.js [data-vu='oui'] .etape__n,
.js [data-vu='oui'] .etape__titre,
.js [data-vu='oui'] .etape__txt { opacity: 1; translate: 0 0; }
/* ⚠️ AUCUN REMPLISSAGE AU SURVOL (demande client du 02/08/2026). Le
   remplissage dit « cette etape est franchie » : declenche par la souris,
   il racontait une progression qui n'avait pas lieu, et il entrait en
   conflit avec la coulee de la boucle sur la meme bulle. */

/* ------------------------------------------------- LA BOUCLE DES ETAPES
   Un jeton parcourt les cinq etapes, une par une, puis attend deux
   secondes avant de repartir. La classe `est-active` est posee par le
   script (`boucleEtapes`), qui garantit qu'une seule etape la porte a la
   fois et que le tour ne se relance qu'apres la cinquieme.
   ⚠️ Le fil se remplit derriere le jeton : c'est ce trait qui fait lire
   une PROGRESSION et pas cinq surbrillances sans rapport. */
/* LE SEGMENT QUI RELIE DEUX BULLES VOISINES.
   Il part du centre de la bulle et va vers celle de droite. Il vit sur
   l'etape, donc il ne peut pas tomber a cote : il est cale sur SA propre
   bulle, quelle que soit la largeur de la bande.
   ⚠️ Il s'arrete a la derniere etape (`:last-child`), sinon un segment
   part vers le vide a droite de la cinquieme bulle. */
.etape::after {
  content: '';
  position: absolute;
  top: calc(var(--bulle) / 2);
  left: calc(50% + var(--bulle) / 2 + 6px);
  right: calc(-50% + var(--bulle) / 2 - 6px);
  height: 2px;
  border-radius: 2px;
  background: color-mix(in srgb, var(--secondaire) 18%, transparent);
}
.etape:last-child::after { display: none; }
/* Le segment se remplit quand l'etape est FRANCHIE : c'est ce remplissage,
   et non un trait qui glisse, qui fait lire une progression. */
.etape::before {
  content: '';
  position: absolute;
  z-index: 1;
  top: calc(var(--bulle) / 2);
  left: calc(50% + var(--bulle) / 2 + 6px);
  width: 0;
  height: 2px;
  border-radius: 2px;
  background: var(--secondaire);
  transition: width .55s var(--sortie);
}
.etape:last-child::before { display: none; }
.etape.est-franchie::before { width: calc(100% - var(--bulle) - 12px); }

/* ⚠️ UNE ETAPE FRANCHIE LE RESTE jusqu'a la fin du tour. Sans ca, une seule
   bulle est allumee a la fois et on ne voit pas une progression : on voit
   une lumiere qui saute d'une bulle a l'autre. C'est exactement ce que le
   client a decrit par « pas de rapidité d'affichage de remplissage d'icône
   d'une étape à une autre ». */
.etape.est-franchie .etape__bulle {
  background: var(--secondaire);
  color: var(--vanille);
}
.etape.est-active .etape__bulle { scale: 1.14; }
.etape.est-franchie .etape__titre { color: var(--secondaire); }
.etape.est-franchie .etape__n { opacity: .55; }

.etapes__pied {
  display: flex; flex-wrap: wrap; align-items: center; justify-content: center;
  gap: 1rem clamp(1rem, 3vw, 2.4rem);
  margin-top: clamp(1.6rem, 3.5vw, 2.6rem);
}
.etapes__note { color: var(--encre-douce); }

@media (max-width: 900px) {
  /* Cinq colonnes sur un telephone donnent des bulles de 40 px et des
     textes de trois mots par ligne. Deux colonnes, et le fil saute. */
  .etapes { grid-template-columns: 1fr 1fr; gap: 1.6rem 1rem; }
  .etapes::before { display: none; }
  .etape__txt { max-width: 100%; }
}
@media (max-width: 420px) {
  .etapes { grid-template-columns: 1fr; }
  .etape { grid-template-columns: var(--bulle) 1fr; justify-items: start; text-align: left; gap: .2rem 1rem; }
  .etape__bulle { grid-row: span 3; }
}

/* ==========================================================================
   5. LA MAISON  <- maquette 3
   ========================================================================== */

.maison { position: relative; overflow: clip; background: var(--blanc); padding-block: var(--section); }
.maison > .enveloppe { position: relative; z-index: 1; }

.maison__haut {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: center;
}
/* Les deux filets qui encadrent la photo et depassent a gauche. */
.maison__cadre { display: grid; gap: .9rem; }
.maison__cadre span { height: 1px; background: var(--filet-fort); margin-left: -18%; }
.maison__vue { width: clamp(280px, 48vw, 700px); aspect-ratio: 16 / 9; }

.maison__mot {
  margin-top: clamp(1.6rem, 3.5vw, 3rem);
  font-size: clamp(2.4rem, 8.5vw, 7.4rem);
  font-weight: 400;
  line-height: .95;
}
.maison__mot em { font-style: normal; color: var(--terra-txt); display: block; }
.maison__pied { margin-top: clamp(1.4rem, 3vw, 2.4rem); }

@media (max-width: 900px) {
  .maison__haut { grid-template-columns: 1fr; }
  .maison__vue { width: 100%; }
  .maison__cadre span { margin-left: 0; }
}

/* ==========================================================================
   6. NOUS TROUVER  <- maquette 6
   --------------------------------------------------------------------------
   Le plan est passe A COTE du texte, pas au-dessus. En pleine largeur il
   faisait 1 655 px a lui seul, soit un cinquieme de la page, pour une
   information qui tient en trois lignes. Il garde la tache de la maquette,
   sa tache terracotta qui depasse en haut et son contour fin decale, mais
   dans une colonne.
   ========================================================================== */

.ici { position: relative; overflow: clip; background: var(--gris); padding-block: var(--section); }
.ici > .enveloppe { position: relative; z-index: 1; }

.ici__scene {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto auto;
  gap: clamp(1.2rem, 3.5vw, 3rem);
  align-items: center;
}
.ici__texte { display: grid; gap: 1rem; justify-items: start; }
.ici__adresse {
  font-size: clamp(1.5rem, 3.4vw, 2.6rem);
  font-weight: 400;
  line-height: 1.3;
}
.ici__adresse em { font-style: normal; color: var(--terra-txt); display: block; }
.ici__sous { font-size: .95rem; color: var(--encre-douce); }
.ici__horaire { display: flex; align-items: center; gap: 1rem; width: 100%; }
.ici__horaire strong { font-size: 1.02rem; font-weight: 400; white-space: nowrap; }
.ici__horaire__filet { flex: 1; height: 1px; background: var(--filet-fort); }

.ici__vertical {
  writing-mode: vertical-rl;
  rotate: 180deg;
  font-size: .92rem; font-weight: 400;
  color: var(--brun);
  justify-self: center;
}

.ici__plan { position: relative; width: clamp(240px, 32vw, 420px); aspect-ratio: 1 / .86; isolation: isolate; }
/* La tache terracotta qui DEPASSE EN HAUT de la photo : le geste de la
   maquette 6. Le contour fin decale en bas a droite qui la doublait est
   retire -- plus aucune forme evidee sur le site (client, 01/08/2026). */
.ici__plan::before {
  content: '';
  position: absolute; z-index: -1;
  inset: -12% 24% 54% 12%;
  clip-path: url(#t-d);
  background: var(--terra);
}
/* ⚠️ Le plan NE PREND PAS la forme en tache des photos. La bulle d'adresse
   de Google se pose en haut a gauche de l'iframe et une tache la tranchait
   en plein mot ; `&iwloc=` ne la supprime pas, et le contenu est d'une autre
   origine, donc hors d'atteinte. C'est un galet. Le geste de la maquette est
   porte par l'aplat terracotta derriere et le contour decale devant. */
.ici__cadre {
  width: 100%; height: 100%;
  overflow: clip;
  border-radius: clamp(16px, 2.4vw, 34px);
  background: var(--blanc);
}
.ici__cadre iframe {
  width: 100%; height: 100%; border: 0;
  /* Le plan de Google est gris-bleu et jure avec la palette chaude. Un
     leger virage vers l'ocre le fait entrer dans la charte sans le rendre
     illisible. Ce n'est pas un flou : la consigne « pas de flou » tient. */
  filter: sepia(.34) saturate(.72) hue-rotate(-8deg) contrast(1.04);
}

@media (max-width: 900px) {
  .ici__scene { grid-template-columns: 1fr; }
  .ici__vertical { display: none; }
  .ici__plan { width: min(100%, 380px); justify-self: center; }
}
/* ==========================================================================
   7. LA CLOTURE  <- maquette 7
   ========================================================================== */

.cloture { position: relative; overflow: clip; background: var(--blanc);
           padding-block: var(--section); text-align: center; }
.cloture > .enveloppe { position: relative; z-index: 1; }

.cloture__haut { margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.cloture__mot {
  font-size: clamp(2.6rem, 9.5vw, 8.4rem);
  font-weight: 400;
  line-height: .92;
}
.cloture__mot--bas { color: var(--terra-txt); }

/* La photo chevauche le bas du premier mot, comme dans la maquette. */
.cloture__vue {
  width: min(100%, 420px);
  aspect-ratio: 5 / 4;
  margin: clamp(-1.6rem, -3vw, -.8rem) auto clamp(-1rem, -2vw, -.4rem);
  position: relative;
  z-index: 1;
}
.cloture__texte { max-width: 46ch; margin: 1.2rem auto 0; color: var(--encre-douce); font-size: .95rem; }
.cloture__bas {
  margin-top: clamp(1.6rem, 3.5vw, 2.8rem);
  display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 1rem;
}
.cloture__tel { font-size: 1.15rem; font-weight: 400; }
.cloture__logo {
  display: grid; place-items: center;
  width: 76px; aspect-ratio: 1;
  clip-path: url(#t-pastille);
  background: var(--nude);
}
.cloture__logo img { width: 78%; }

/* ==========================================================================
   6. LES AVIS
   --------------------------------------------------------------------------
   ⚠️ AUCUN AVIS N'EST ECRIT DANS LE CSS NI DANS LE HTML. Le mur est rempli
   par `VA.AVIS` (js/data.js), qui est VIDE tant que la maison n'a pas
   fourni de vrais avis. Vide, la section affiche l'appel a temoigner et
   les liens vers les vraies fiches : c'est exact, et ca n'invente rien.
   ========================================================================== */

.avis { position: relative; overflow: clip; background: var(--peche); padding-block: var(--section); }
.avis > .enveloppe { position: relative; z-index: 1; }

.avis__entete { display: grid; gap: .6rem; justify-items: center; text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.4rem); }
.avis__entete .titre-section { max-width: 22ch; }

.avis__mur {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 280px), 1fr));
  gap: clamp(.9rem, 2vw, 1.6rem);
}
.avis__mur:empty { display: none; }

.avis__carte {
  display: grid; gap: .6rem; align-content: start;
  padding: clamp(1.1rem, 2.4vw, 1.7rem);
  background: var(--blanc);
  border-radius: var(--r-surface);
}
.avis__note { display: flex; align-items: center; gap: .15rem; color: var(--secondaire); }
.avis__note .ico { font-size: 1rem; fill: currentColor; stroke: none; }
.avis__note .ico[data-vide] { fill: none; opacity: .35; }
.avis__txt { line-height: 1.6; }
.avis__qui { display: flex; align-items: baseline; gap: .5rem; color: var(--encre-douce); font-size: .95rem; }
.avis__qui strong { color: var(--encre); }

.avis__appel {
  display: grid; justify-items: center; gap: 1rem; text-align: center;
  margin-top: clamp(1.4rem, 3vw, 2.2rem);
}
.avis__appel__txt { max-width: 46ch; color: var(--encre-douce); }
.avis__appel__liens { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; }

/* ==========================================================================
   8. LA FAQ
   Deux colonnes : le titre tient a gauche pendant qu'on ouvre les tiroirs.
   ========================================================================== */

/* ==========================================================================
   8. LA FAQ — UNE CONVERSATION DE SALLE
   --------------------------------------------------------------------------
   Client : « je veux vraiment une section FAQ hors du commun, qui sort du
   lot générique qu'on voit partout. » L'accordeon a filets gris a donc ete
   abandonne pour une CONVERSATION : la question est une bulle du visiteur,
   posee a DROITE ; la reponse est une bulle de la maison, posee a GAUCHE et
   signee du logotype. On lit la section comme on lit un echange, pas comme
   on lit une liste.

   ⚠️ C'EST TOUJOURS DU `<details>` NATIF. Le tiroir s'ouvre sans une ligne
   de JavaScript, reste accessible au clavier, et la recherche du navigateur
   trouve le texte des reponses fermees. Une conversation pilotee en JS
   aurait ete plus facile a ecrire et se serait effondree sans script --
   alors que la regle du projet est que TOUT s'affiche sans JavaScript.

   ⚠️ `name="faq"` sur les `<details>` : un seul ouvert a la fois, en natif.
   ========================================================================== */

.faq { position: relative; overflow: clip; background: var(--blanc); padding-block: var(--section); }
.faq__grille {
  position: relative; z-index: 1;
  display: grid;
  gap: clamp(1.4rem, 3vw, 2.4rem);
  justify-items: center;
}
.faq__entete { display: grid; gap: .8rem; justify-items: center; text-align: center; }
.faq__entete .titre-section { max-width: 24ch; }

.faq__liste {
  display: grid;
  gap: clamp(.8rem, 1.8vw, 1.3rem);
  width: min(100%, 860px);
}

/* --- LA BULLE DU VISITEUR : a droite, vanille, coin bas-droit rentre --- */
.faq__item { display: grid; justify-items: end; }
.faq__item summary {
  position: relative;
  max-width: min(100%, 42ch);
  padding: .8rem 3.2rem .8rem 1.2rem;
  background: var(--vanille);
  color: var(--encre);
  border-radius: 20px 20px 4px 20px;
  font-size: clamp(1rem, 1.35vw, 1.15rem);
  line-height: 1.4;
  cursor: pointer;
  list-style: none;
  transition: background-color .3s var(--sortie), translate .3s var(--sortie);
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary:hover { translate: -3px 0; }
.faq__item[open] summary { background: var(--secondaire); color: var(--vanille); }

/* La croix pivote au lieu d'etre remplacee par une autre icone. */
.faq__item summary::after {
  content: '';
  position: absolute; right: 1.1rem; top: 50%;
  width: 16px; height: 16px;
  margin-top: -8px;
  background:
    linear-gradient(currentColor 0 0) center / 100% 1.5px no-repeat,
    linear-gradient(currentColor 0 0) center / 1.5px 100% no-repeat;
  transition: rotate .4s var(--sortie);
}
.faq__item[open] summary::after { rotate: 45deg; }

/* --- LA BULLE DE LA MAISON : a gauche, signee du logotype --- */
.faq__rep {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: end;
  justify-self: start;
  max-width: min(100%, 52ch);
  margin-top: .5rem;
}
/* Le logotype tient lieu de visage : c'est la maison qui repond. */
.faq__rep::before {
  content: '';
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--vanille) url('../img/logo-petit.png') center / 78% no-repeat;
}
.faq__rep p {
  padding: .85rem 1.2rem;
  background: var(--gris);
  border-radius: 20px 20px 20px 4px;
  color: var(--encre);
  line-height: 1.6;
}
@media (prefers-reduced-motion: no-preference) {
  .faq__item[open] .faq__rep { animation: faq-ouvre .5s var(--sortie) both; }
}
/* La reponse arrive DEPUIS LA GAUCHE, comme si elle venait d'en face. */
@keyframes faq-ouvre {
  from { opacity: 0; translate: -18px 0; scale: .96; }
  to   { opacity: 1; translate: 0 0; scale: 1; }
}

@media (max-width: 620px) {
  .faq__rep::before { width: 32px; height: 32px; }
  .faq__item summary { padding-right: 2.8rem; }
}

/* ==========================================================================
   9. CONTACT
   Quatre cartes, aucun formulaire : le site est statique, il n'a pas de
   quoi envoyer un courriel. Chaque carte est un vrai canal, cliquable.
   ========================================================================== */

.contact { position: relative; overflow: clip; background: var(--gris); padding-block: var(--section); }
.contact__entete { display: grid; justify-items: center; text-align: center; margin-bottom: clamp(1.4rem, 3vw, 2.2rem); }

.contact__grille {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 230px), 1fr));
  gap: clamp(.8rem, 2vw, 1.4rem);
}
.contact__carte {
  display: grid; gap: .35rem; align-content: start;
  padding: clamp(1.1rem, 2.4vw, 1.6rem);
  background: var(--blanc);
  border-radius: var(--r-surface);
  transition: background-color .35s var(--sortie), translate .35s var(--sortie);
}
.contact__carte:hover { background: var(--vanille); translate: 0 -4px; }
.contact__bulle {
  display: grid; place-items: center;
  width: 46px; height: 46px;
  border-radius: 50%;
  margin-bottom: .5rem;
  background: var(--vanille);
  color: var(--secondaire);
  transition: background-color .35s var(--sortie), color .35s var(--sortie);
}
.contact__carte:hover .contact__bulle { background: var(--secondaire); color: var(--vanille); }
.contact__bulle .ico { font-size: 1.2rem; }
.contact__quoi { font-size: .95rem; color: var(--encre-douce); }
.contact__val { font-size: clamp(1.05rem, 1.5vw, 1.25rem); color: var(--secondaire); overflow-wrap: anywhere; }
.contact__note { font-size: .92rem; color: var(--encre-douce); }
/* ------------------------------------------------- LES AVIS A PHOTO */
.avis__carte--photo { grid-row: span 2; }
.avis__photo { margin: .2rem 0 0; display: grid; gap: .3rem; }
/* ⚠️ `aspect-ratio` pose ICI et pas seulement sur l'image : sans lui, la
   carte saute au moment ou la photo arrive, et tout le mur se recompose. */
.avis__photo img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: calc(var(--r-surface) - 4px);
}
.avis__photo figcaption { font-size: .85rem; color: var(--encre-tenue); }
.avis__portrait {
  width: 30px; height: 30px; border-radius: 50%;
  object-fit: cover; flex: none;
}
.avis__qui { display: flex; align-items: center; gap: .5rem; }
/* ==========================================================================
   REGLAGES DU 01/08/2026 (nuit) — fonds de section et formulaire
   ========================================================================== */

/* « Brioche perdue fourrée » prend la couleur PRINCIPALE du logo et non le
   gris rose des maquettes (client). */
.brioches { background: var(--vanille); }
/* Sur le vanille, la tache qui porte le prix doit passer au blanc : sur son
   propre fond elle n'existerait plus. */
.brioches .tache-prix { background: var(--blanc); }

/* ------------------------------------------------- « NOUS JOINDRE » EN BRUN
   Fond = couleur secondaire du logo. ⚠️ TOUT LE TEXTE DE LA SECTION BASCULE
   AVEC LUI : sur #683C22, l'encre #372E2C ne fait que 1,5:1. C'est la meme
   erreur que la section « avis » aurait faite si elle avait ete foncee --
   changer un fond oblige a REMESURER tout ce qu'il porte. */
.contact { background: var(--secondaire); color: var(--vanille); }
.contact .titre-section { color: var(--vanille); }
.contact .titre-section em { color: var(--blanc); }
.contact__carte { background: color-mix(in srgb, var(--vanille) 12%, transparent); }
.contact__carte:hover { background: var(--vanille); }
.contact__carte:hover .contact__quoi,
.contact__carte:hover .contact__note { color: var(--encre-douce); }
.contact__carte:hover .contact__val { color: var(--secondaire); }
.contact__quoi, .contact__note { color: color-mix(in srgb, var(--vanille) 72%, transparent); }
.contact__val { color: var(--vanille); }
.contact__bulle { background: var(--vanille); color: var(--secondaire); }
.contact .bouton { --bg: var(--vanille); --fg: var(--secondaire); }
.contact .bouton::before { background: var(--blanc); }

/* --------------------------------------------------------- LE FORMULAIRE
   Structure reprise de Dolce Coffee : deux champs courts en duo, puis le
   sujet, puis le message. Les champs sont des aplats clairs sur le brun --
   un champ a simple bordure disparaitrait sur ce fond. */
.form {
  display: grid;
  gap: clamp(.7rem, 1.4vw, 1rem);
  width: min(100%, 720px);
  margin-inline: auto;
  margin-bottom: clamp(1.6rem, 3vw, 2.6rem);
  justify-items: stretch;
}
.form__duo { display: grid; grid-template-columns: 1fr 1fr; gap: inherit; }
.champ { display: grid; gap: .3rem; }
.champ label { font-size: .95rem; color: color-mix(in srgb, var(--vanille) 78%, transparent); }
.champ input, .champ textarea {
  width: 100%;
  padding: .7rem .9rem;
  border: 0;
  border-radius: 10px;
  background: color-mix(in srgb, var(--vanille) 14%, transparent);
  color: var(--blanc);
  font: inherit;
  line-height: 1.5;
  transition: background-color .3s var(--sortie);
}
.champ textarea { resize: vertical; min-height: 7rem; }
.champ input:focus, .champ textarea:focus {
  background: color-mix(in srgb, var(--vanille) 22%, transparent);
  outline: 2px solid var(--vanille);
  outline-offset: 2px;
}
.form .bouton { justify-self: start; }
.form__mention { font-size: .92rem; line-height: 1.55; color: color-mix(in srgb, var(--vanille) 68%, transparent); }
.form__mention strong { color: var(--vanille); }
.form__mention[hidden] { display: none; }

@media (max-width: 620px) {
  .form__duo { grid-template-columns: 1fr; }
}

/* Le credit du pied : plus de surlignage sur « Core Agency » (client). */
.credit__agence { text-decoration: none; }
/* ⚠️ LE RUBAN VERTICAL DEMARRE AU MEME NIVEAU QUE LA PHOTO.
   Mesure : il commencait a 188 px quand la photo et l'etiquette de gauche
   commencaient a 160. Trois choses l'y poussaient, et c'est leur SOMME qui
   comptait : le rembourrage haut de la colonne (29 px), le filet decoratif
   (56 px) et l'ecart qui le suivait (16 px). Le filet est supprime -- il ne
   servait qu'a amorcer le ruban, et il coutait 72 px de retard a lui seul
   avec son ecart -- et la colonne prend le MEME retrait que la photo, donc
   les deux partent exactement de la meme ligne. */
.hero__cote { padding-top: 0; margin-top: clamp(1.5rem, 5vw, 5.5rem); }
.hero__cote__trait { display: none; }

/* Le second rang de boutons : les deux qui rassurent avant de se deplacer.
   Marge plus serree que le premier -- ce sont deux rangs d'un meme bloc. */
.hero__actions--second { margin-top: 0; }
.hero__chapeau { max-width: 46ch; }

/* ⚠️ LA PHOTO DESCEND, PAS LA SECTION (client : « la première section est
   trop haute et donc trop proche du header, baisse vers le bas uniquement
   la section image à droite »). C'est la colonne de DROITE qui recoit le
   retrait : le titre et les boutons gardent leur place en haut. */
.hero__visuel { margin-top: clamp(1.5rem, 5vw, 5.5rem); }
@media (max-width: 980px) { .hero__visuel { margin-top: clamp(1rem, 3vw, 2rem); } }
/* ==========================================================================
   PASSE DU 02/08/2026 — fonds inverses, prix, texte vertical, chat
   ========================================================================== */

/* ------------------------------- « CE QU'ON EN DIT » PASSE AU BRUN DU LOGO
   ⚠️ Comme pour « Nous joindre » : un fond fonce oblige a REMESURER tout ce
   qu'il porte. Sur #683C22, l'encre ne fait que 1,5:1. */
.avis { background: var(--secondaire); color: var(--vanille); }
.avis .titre-section { color: var(--vanille); }
.avis .titre-section em { color: var(--blanc); }
.avis .chapeau, .avis__appel__txt { color: color-mix(in srgb, var(--vanille) 74%, transparent); }
.avis__carte { background: color-mix(in srgb, var(--vanille) 12%, transparent); color: var(--vanille); }
.avis__note { color: var(--vanille); }
.avis__qui { color: color-mix(in srgb, var(--vanille) 70%, transparent); }
.avis__qui strong { color: var(--vanille); }
.avis .bouton { --bg: var(--vanille); --fg: var(--secondaire); }
.avis .bouton::before { background: var(--blanc); }
.avis .bouton--clair { --bg: transparent; --fg: var(--vanille); border-color: color-mix(in srgb, var(--vanille) 42%, transparent); }
.avis .bouton--clair::before { background: var(--vanille); }
.avis .bouton--clair:hover { --fg: var(--secondaire); }

/* ----------------------------- « NOUS TROUVER » PASSE A LA COULEUR PRINCIPALE */
.ici { background: var(--vanille); }
.ici__cadre { background: var(--blanc); }

/* ------------------------------------ FONDS INVERSES : CONTACT <-> PIED
   Le formulaire passe au clair, le pied au brun. Les regles du bloc
   precedent qui mettaient « Nous joindre » en brun sont donc annulees ici,
   en fin de feuille -- c'est la derniere qui compte. */
.contact { background: var(--vanille); color: var(--encre); }
.contact .titre-section { color: var(--encre); }
.contact .titre-section em { color: var(--secondaire); }
.contact__carte { background: var(--blanc); }
.contact__carte:hover { background: var(--secondaire); }
.contact__carte:hover .contact__quoi,
.contact__carte:hover .contact__note { color: color-mix(in srgb, var(--vanille) 72%, transparent); }
.contact__carte:hover .contact__val { color: var(--vanille); }
.contact__carte:hover .contact__bulle { background: var(--vanille); color: var(--secondaire); }
.contact__quoi, .contact__note { color: var(--encre-douce); }
.contact__val { color: var(--secondaire); }
.contact__bulle { background: var(--vanille); color: var(--secondaire); }
.contact .bouton { --bg: var(--secondaire); --fg: var(--vanille); }
.contact .bouton::before { background: var(--blanc); }
.contact .bouton:hover { --fg: var(--secondaire); }
.contact .champ label { color: var(--encre-douce); }
.contact .champ input, .contact .champ textarea {
  background: var(--blanc); color: var(--encre);
}
.contact .champ input:focus, .contact .champ textarea:focus {
  background: var(--blanc); outline-color: var(--secondaire);
}
.contact .form__mention { color: var(--encre-douce); }
.contact .form__mention strong { color: var(--secondaire); }

/* ------------------------------------------------------- LES PRIX EN BRUN */
.tache-prix { color: var(--secondaire); }
.prix { color: var(--secondaire); }

/* ------------------------------ LE TEXTE VERTICAL DU HEROS : PLUS GRAND */
.hero__cote .vertical { font-size: clamp(1.35rem, 1.75vw, 1.9rem); }
/* Il demarre plus haut : le filet qui le precede est raccourci. */
.hero__cote__trait { height: clamp(30px, 4vw, 56px); }

/* ------------------- LE BLOC DE TEXTE DE GAUCHE DESCEND LEGEREMENT */
.hero__corps { padding-top: clamp(2rem, 5vw, 5rem); }

/* --------------------------------------------------- LA FAQ : LE VIDE A GAUCHE
   ⚠️ Quand aucune reponse n'est ouverte, une conversation ou toutes les
   bulles sont a droite laisse une colonne vide a gauche -- le defaut
   signale. Une bulle d'ACCUEIL de la maison, toujours visible, ouvre donc
   l'echange du bon cote et occupe cette place en permanence. */
.faq__accueil {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .8rem;
  align-items: end;
  justify-self: start;
  max-width: min(100%, 46ch);
  margin-bottom: .3rem;
}
.faq__accueil::before {
  content: '';
  width: 40px; height: 40px;
  border-radius: 50%;
  background: var(--vanille) url('../img/logo-petit.png') center / 78% no-repeat;
}
.faq__accueil p {
  padding: .85rem 1.2rem;
  background: var(--gris);
  border-radius: 20px 20px 20px 4px;
  line-height: 1.6;
}
@media (max-width: 620px) { .faq__accueil::before { width: 32px; height: 32px; } }
/* ------------------------------------------------ LE ROTOR VERTICAL
   Dans un `writing-mode: vertical-rl`, le masque et le glissement se font
   sur l'axe HORIZONTAL de l'ecran, mais le navigateur les exprime toujours
   dans le repere du texte : `translate: 0 108%` glisse bien le long du mot.
   Rien de special a faire, seulement laisser la boite se dimensionner. */
.rotor--vertical { display: inline-block; }
.rotor--vertical .rotor__etalon { display: inline-block; }

/* ==========================================================================
   LA BOUCLE DES ETAPES — REMPLISSAGE EN COULEE DE CHOCOLAT
   --------------------------------------------------------------------------
   Client : « remplis avec animation coulée de chocolat, pas comme
   maintenant avec remplissage instantané », et « il y a encore une latence,
   c'est pas fluide ».

   ⚠️ D'OU VENAIT LA LATENCE, mesuree et corrigee :
   1. `background-color` ne s'anime PAS sur le compositeur : chaque bulle
      qui changeait de fond declenchait un redessin. Le chocolat est
      desormais un ELEMENT qui monte en `scale`, ce qui ne coute rien.
   2. La section entiere portait `content-visibility: auto` : la premiere
      entree dans l'ecran demandait une mise en page complete pile au
      moment ou la boucle demarrait. La section des etapes en est exclue.
   3. `will-change` sur ce qui bouge, et rien d'autre.
   ========================================================================== */

.table-qr { content-visibility: visible; }

.etape__bulle { position: relative; overflow: clip; isolation: isolate; }
/* La coulee : un disque de chocolat qui MONTE dans la bulle. Son bord haut
   est arrondi, donc il arrive comme un liquide et non comme une barre. */
.etape__bulle::before {
  content: '';
  position: absolute;
  left: -20%; right: -20%; bottom: -60%;
  height: 160%;
  z-index: -1;
  border-radius: 46% 46% 0 0 / 28% 28% 0 0;
  background: var(--secondaire);
  translate: 0 100%;
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .etape__bulle::before {
    transition: translate .62s cubic-bezier(.45, 0, .25, 1);
  }
}
.etape.est-franchie .etape__bulle::before { translate: 0 0; }
/* La couleur de l'icone suit la coulee, avec un temps de retard : elle
   change quand le chocolat l'a effectivement recouverte. */
.etape.est-franchie .etape__bulle { color: var(--vanille); transition-delay: .28s; }
.etape__bulle { background: var(--blanc); }
/* --------------------------------------------- LA NOTE D'ENSEMBLE GOOGLE
   ⚠️ Elle est affichee ET declaree en JSON-LD, depuis la MEME source
   (`VA.NOTE_GOOGLE`). Google rejette une fiche dont les donnees
   structurees ne correspondent pas a l'ecran : deux chiffres ecrits a deux
   endroits finiraient par diverger. */
.avis__resume {
  display: flex; align-items: center; gap: .6rem; flex-wrap: wrap;
  justify-content: center;
}
.avis__resume[hidden] { display: none; }
.avis__chiffre { font-size: clamp(1.8rem, 3vw, 2.4rem); color: var(--vanille); line-height: 1; }
.avis__etoiles { display: flex; gap: .1rem; color: var(--ocre-logo); }
.avis__etoiles .ico { font-size: 1.15rem; fill: currentColor; stroke: none; }
.avis__etoiles .ico[data-vide] { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; }
.avis__total { color: color-mix(in srgb, var(--vanille) 74%, transparent); }

/* Le mur est en colonnes de journal : des cartes de hauteurs tres
   inegales (avec ou sans photo) laissent sinon des trous. */
.avis__mur { align-items: start; }
.avis__note .ico { fill: var(--ocre-logo); stroke: none; }
.avis__note .ico[data-vide] { fill: none; stroke: var(--ocre-logo); stroke-width: 1.4; }
.avis__photo figcaption { color: color-mix(in srgb, var(--vanille) 60%, transparent); }
/* ==========================================================================
   LE MUR D'AVIS — CARROUSEL A DEUX COLONNES (repris de Dolce Coffee)
   --------------------------------------------------------------------------
   La note en tres grand a gauche, deux colonnes qui defilent en continu a
   droite, en SENS OPPOSES. Les pistes sont doublees par le script : quand
   la premiere moitie a fini de defiler, la seconde est exactement a sa
   place de depart, donc la boucle n'a ni debut ni fin visibles.
   ========================================================================== */

.mur {
  display: grid;
  grid-template-columns: minmax(0, .82fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(1.6rem, 5vw, 4.5rem);
}
.mur__texte { display: grid; justify-items: start; gap: .5rem; }
.mur__texte .etiquette { color: var(--ocre-logo); }
.mur__texte .chapeau { color: color-mix(in srgb, var(--vanille) 74%, transparent); max-width: 40ch; }

/* La note en tres grand : c'est le chiffre qui porte la section, il doit se
   lire avant le texte. */
.mur__note { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; }
.mur__note[hidden] { display: none; }
.mur__chiffre { font-size: clamp(3.4rem, 7vw, 6rem); line-height: .9; color: var(--vanille); }
.mur__etoiles { display: inline-flex; gap: .1rem; color: var(--ocre-logo); }
.mur__etoiles .ico { font-size: 1.25rem; fill: currentColor; stroke: none; }
.mur__etoiles .ico[data-vide] { fill: none; stroke: currentColor; stroke-width: 1.4; opacity: .55; }
.mur__note small { font-size: 1rem; color: color-mix(in srgb, var(--vanille) 70%, transparent); }
.mur__actions { display: flex; flex-wrap: wrap; gap: .7rem; margin-top: .8rem; }

.mur__colonnes {
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  height: clamp(420px, 46vw, 580px);
  overflow: clip;
  /* Les avis s'estompent en haut et en bas : le mur n'a pas de fin
     visible. ⚠️ Un masque en DEGRADE, jamais un `url()` : un masque charge
     depuis un fichier est refuse en `file://` et l'element devient
     entierement invisible, sans la moindre erreur. */
  mask-image: linear-gradient(to bottom, transparent, #000 13%, #000 87%, transparent);
}
.mur__col { display: flex; flex-direction: column; overflow: clip; }
.mur__piste {
  display: flex; flex-direction: column;
  gap: clamp(.7rem, 1.4vw, 1.1rem);
  padding-bottom: clamp(.7rem, 1.4vw, 1.1rem);
  will-change: transform;
}
/* ⚠️ VITESSE LENTE, et deux durees differentes : deux colonnes exactement
   synchrones se lisent comme un seul bloc qui glisse. */
@media (prefers-reduced-motion: no-preference) {
  .mur__piste { animation: mur-defile 58s linear infinite; }
  .mur__col--inverse .mur__piste { animation-duration: 72s; animation-direction: reverse; }
  .mur__colonnes:hover .mur__piste { animation-play-state: paused; }
}
@keyframes mur-defile { from { translate: 0 0; } to { translate: 0 -50%; } }

/* ------------------------------------------------------------- LA CARTE */
.avisc {
  display: grid; gap: .55rem;
  padding: clamp(.9rem, 1.7vw, 1.2rem);
  background: color-mix(in srgb, var(--vanille) 12%, transparent);
  border-radius: var(--r-surface);
  color: var(--vanille);
}
.avisc__h { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .7rem; }
.avisc__av { width: 40px; height: 40px; flex: none; border-radius: 50%; object-fit: cover; }
.avisc__av--mono {
  display: grid; place-items: center;
  font-size: 1.05rem;
  color: var(--secondaire);
}
.avisc__av--mono[data-teinte="0"] { background: var(--vanille); }
.avisc__av--mono[data-teinte="1"] { background: var(--ocre-logo); }
.avisc__av--mono[data-teinte="2"] { background: var(--peche); }
.avisc__av--mono[data-teinte="3"] { background: var(--gris); }
.avisc__ident { min-width: 0; }
.avisc__n { display: block; font-weight: 400; }
.avisc__meta { display: block; font-size: .9rem; color: color-mix(in srgb, var(--vanille) 66%, transparent); }
.avisc__txt { line-height: 1.6; }
.avisc__photo { display: grid; gap: .3rem; margin: 0; }
.avisc__photo img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--r-surface) - 4px); }
.avisc__photo figcaption { font-size: .85rem; color: color-mix(in srgb, var(--vanille) 55%, transparent); }
.avisc .avis__note .ico { fill: var(--ocre-logo); stroke: none; }

@media (max-width: 860px) {
  .mur { grid-template-columns: 1fr; }
  .mur__colonnes { height: clamp(380px, 90vw, 520px); }
}
/* ==========================================================================
   « NOUS TROUVER » IMBRIQUE DANS « NOUS JOINDRE » (client, 02/08/2026)
   --------------------------------------------------------------------------
   Les deux sections disaient la meme chose a deux endroits : comment nous
   atteindre. Elles n'en font plus qu'une -- les moyens de contact cales a
   GAUCHE, le plan a DROITE.
   ⚠️ `align-items: start` : sans lui, la colonne courte se centre sur la
   longue et le plan flotte au milieu d'un vide.
   ========================================================================== */

.contact__scene {
  display: grid;
  grid-template-columns: minmax(0, 1.15fr) minmax(0, .85fr);
  gap: clamp(1.4rem, 4vw, 3.5rem);
  align-items: start;
}
.contact__gauche { display: grid; gap: clamp(1rem, 2vw, 1.6rem); align-content: start; }
/* Le formulaire et les cartes perdent leur largeur maximale centree : dans
   une colonne, ils occupent toute la place. */
.contact__scene .form { width: 100%; margin-inline: 0; margin-bottom: 0; }
.contact__scene .contact__grille { grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr)); }

.contact__ici { display: grid; gap: .5rem; align-content: start; }
.contact__adresse {
  font-size: clamp(1.5rem, 2.6vw, 2.2rem);
  line-height: 1.25;
  color: var(--secondaire);
}
.contact__adresse em { font-style: normal; display: block; color: var(--encre); }
.contact__sous { color: var(--encre-douce); }

/* LE GALET DU PLAN. Angles adoucis, jamais une forme organique : la bulle
   d'adresse de Google se pose en haut a gauche du cadre et une tache la
   trancherait en plein mot. */
.contact__plan {
  margin-top: .4rem;
  aspect-ratio: 4 / 3;
  overflow: clip;
  border-radius: clamp(16px, 2.4vw, 34px);
  background: var(--blanc);
}
.contact__plan iframe { width: 100%; height: 100%; border: 0; }

.contact__horaire { display: flex; align-items: baseline; gap: .5rem; }
.contact__horaire strong { font-weight: 400; font-size: 1.15rem; color: var(--secondaire); }
.contact__horaire span { color: var(--encre-douce); font-size: .95rem; }

@media (max-width: 900px) {
  .contact__scene { grid-template-columns: 1fr; }
}
/* ==========================================================================
   CORRECTIONS MESUREES — 02/08/2026 (nuit)
   ========================================================================== */

/* 1. LE JOINT HEROS / ETAPES. Il faisait 90 px de vide, en plus de la
   vague. Les deux rembourrages se resserrent. */
/* ⚠️ C'EST LA `min-height` QUI CREAIT LE VIDE, PAS LE REMBOURRAGE. Reduire
   le rembourrage bas ne changeait RIEN : a 110dvh sur un ecran de 900, la
   section est forcee a 990 px alors que son contenu en fait ~700, et le
   reste tombe en bas puisque le contenu est cale en haut. La borne passe
   donc a 100dvh. */
.scene-hero { min-height: min(100dvh, 1040px); padding-bottom: clamp(1rem, 2vw, 2rem); }
.table-qr { padding-block: clamp(2.8rem, 5.2vw, 5rem) var(--section); }

/* 2. LE RUBAN VERTICAL, VRAIMENT CENTRE.
   ⚠️ Mesure : la COLONNE etait bien centree (1361 contre 1361), mais le
   texte ne l'etait pas dans sa fenetre. En `writing-mode: vertical-rl`,
   l'axe en ligne est VERTICAL : `align-items: center` centre alors sur la
   HAUTEUR, pas sur la largeur. C'est `justify-content` qu'il faut, et il
   faut le poser sur la piste ET sur chaque copie. */
.ruban-v { display: grid; justify-items: center; }
.ruban-v__piste { align-items: center; justify-content: flex-start; width: 100%; }
.ruban-v .vertical { align-self: center; text-align: center; }

/* 3. LES ETAPES : REMPLISSAGE PLUS LENT, ET LE FILET QUI VA JUSQU'AU BOUT.
   ⚠️ Le filet ne se remplissait qu'a 88 % : sa piste mesure exactement
   `100% - bulle` (calcul des `left`/`right` de `.etape::after`) alors que
   le remplissage etait ecrit `100% - bulle - 12px`. Douze pixels de trop,
   donc un trou clair juste avant la bulle suivante -- visible sur toutes
   les etapes. Les deux valeurs sont maintenant les MEMES. */
.etape::before { transition: width 1s cubic-bezier(.45, 0, .25, 1); }
.etape.est-franchie::before { width: calc(100% - var(--bulle)); }
/* La coulee de chocolat monte deux fois plus lentement : a 0,62 s elle
   etait posee avant qu'on l'ait vue partir. */
@media (prefers-reduced-motion: no-preference) {
  .etape__bulle::before { transition: translate 1.15s cubic-bezier(.42, 0, .28, 1); }
}
.etape.est-franchie .etape__bulle { transition-delay: .5s; }

/* 4. LA FAQ : PLUS DE COLONNE VIDE.
   ⚠️ La conversation tenait sur 860 px de large : les questions callees a
   droite laissaient 400 px de blanc a gauche sous la bulle d'accueil. Une
   conversation se lit dans une colonne ETROITE, comme sur un telephone --
   620 px, centree. Le vide disparait sans rien changer au principe. */
.faq__liste { width: min(100%, 620px); }
.faq__item summary { max-width: min(100%, 34ch); }
.faq__rep { max-width: min(100%, 40ch); }
.faq__accueil { max-width: min(100%, 38ch); }

/* 5. LA QUATRIEME CARTE DE CONTACT. L'adresse e-mail se coupait en plein
   milieu (« creperievanilla@gmail. » / « com ») et poussait la carte a
   deux lignes de plus que les autres. Elle passe a une taille plus petite
   et se coupe a un endroit choisi. */
.contact__val { font-size: clamp(.98rem, 1.15vw, 1.12rem); overflow-wrap: anywhere; }
.contact__carte { align-content: start; }
/* ==========================================================================
   LE MUR D'AVIS — DES POLAROIDS EPINGLES (idee propre a Vanilla)
   --------------------------------------------------------------------------
   Ce n'est PAS le mur de Dolce Coffee, qui est fait de deux colonnes
   verticales. Ici les avis sont des photos epinglees sur un mur : photo en
   haut, texte a la main dessous, nom en bas, chaque carte legerement de
   travers. La bande file lateralement, comme si on longeait le mur.

   ⚠️ AUCUNE OMBRE PORTEE — la regle du projet tient. Ce sont le BORD BLANC
   EPAIS et l'INCLINAISON qui font le polaroid, pas une ombre.
   ========================================================================== */

.mur__tete { display: grid; justify-items: center; text-align: center; gap: .4rem; }
.mur__tete .chapeau { max-width: 46ch; }
.mur__actions { display: flex; flex-wrap: wrap; gap: .7rem; justify-content: center; margin-top: clamp(1.2rem, 2.6vw, 2rem); }

.mur__bande {
  margin-top: clamp(1.4rem, 3vw, 2.4rem);
  overflow: clip;
  /* Les cartes s'estompent aux deux bouts : la bande n'a ni debut ni fin. */
  mask-image: linear-gradient(to right, transparent, #000 7%, #000 93%, transparent);
}
.mur__rail {
  display: flex; align-items: flex-start;
  gap: clamp(1rem, 2.2vw, 2rem);
  width: max-content;
  padding-inline: clamp(1rem, 2.2vw, 2rem);
  will-change: transform;
}
@media (prefers-reduced-motion: no-preference) {
  .mur__rail { animation: mur-file 64s linear infinite; }
  .mur__bande:hover .mur__rail { animation-play-state: paused; }
}
@keyframes mur-file { from { translate: 0 0; } to { translate: -50% 0; } }

/* --------------------------------------------------------- LE POLAROID */
.avisc {
  width: clamp(230px, 22vw, 290px);
  flex: none;
  display: grid; gap: .5rem;
  /* Le bord blanc du polaroid : epais, et plus epais en bas. */
  padding: 12px 12px 16px;
  background: var(--blanc);
  border-radius: 3px;
  color: var(--encre);
}
/* Une inclinaison alternee, faible : au-dela de 3 degres, la bande se lit
   comme un defaut d'alignement et non comme un mur de photos. */
.avisc:nth-child(odd)  { rotate: -1.6deg; }
.avisc:nth-child(even) { rotate: 1.3deg; margin-top: clamp(.8rem, 1.6vw, 1.6rem); }
.avisc:nth-child(3n)   { rotate: .7deg; }

.avisc__photo { display: grid; gap: 0; margin: 0; }
.avisc__photo img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 2px; }
.avisc__photo figcaption { display: none; }   /* le nom est deja en bas de la carte */

.avisc__txt {
  font-size: .98rem; line-height: 1.5;
  /* Quatre lignes au plus : sur un mur, une carte plus haute que les
     autres casse la rangee. Le texte integral reste dans le HTML, donc
     lisible par un moteur et par un lecteur d'ecran. */
  display: -webkit-box; -webkit-box-orient: vertical; -webkit-line-clamp: 4;
  overflow: hidden;
}
.avisc__h { display: grid; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: .5rem; }
.avisc__av { width: 30px; height: 30px; flex: none; border-radius: 50%; object-fit: cover; }
.avisc__av--mono { display: grid; place-items: center; font-size: .95rem; color: var(--secondaire); }
.avisc__av--mono[data-teinte="0"] { background: var(--vanille); }
.avisc__av--mono[data-teinte="1"] { background: var(--ocre-logo); }
.avisc__av--mono[data-teinte="2"] { background: var(--peche); }
.avisc__av--mono[data-teinte="3"] { background: var(--gris); }
.avisc__ident { min-width: 0; }
.avisc__n { display: block; font-weight: 400; font-size: .95rem; }
.avisc__meta { display: block; font-size: .82rem; color: var(--encre-tenue); }

/* La note d'ensemble, centree au-dessus de la bande. */
.mur__note { display: flex; align-items: baseline; flex-wrap: wrap; gap: .5rem; justify-content: center; }
.mur__note[hidden] { display: none; }
/* ==========================================================================
   PASSE DU 02/08/2026 — deux concepts neufs + trois reglages
   ========================================================================== */

/* 1. LES POLAROIDS PRENNENT LE RAYON DE L'EN-TETE. */
.avisc { border-radius: clamp(16px, 1.8vw, 24px); }
.avisc__photo img { border-radius: clamp(10px, 1.2vw, 16px); }

/* 2. LA MENTION DU FORMULAIRE, A DROITE DU BOUTON. */
.form__envoi {
  display: grid; grid-template-columns: auto minmax(0, 1fr);
  align-items: center; gap: 1rem;
}
.form__mention { font-size: .9rem; line-height: 1.45; }
.form__mention--ok { grid-column: 1 / -1; }
@media (max-width: 560px) { .form__envoi { grid-template-columns: 1fr; } }

/* 3. LE JOINT ACCUEIL / ETAPES.
   ⚠️ Ce qui restait, c'etait la VAGUE elle-meme : 92 px de haut a 1440.
   Elle est ramenee a 62 px sur ce joint precis -- pas sur toutes, les
   autres separent des sections ou la respiration est bienvenue. */
.scene-hero + .vague { height: clamp(38px, 4.2vw, 64px); }

/* ==========================================================================
   L'ANATOMIE DE LA BRIOCHE (concept propre a cette section)
   --------------------------------------------------------------------------
   Le plat est DEMONTE : chaque garniture est nommee autour de la photo et
   reliee a elle par un filet qui pointe l'endroit ou elle se trouve. On lit
   la recette sur l'assiette, pas dans un paragraphe.
   ========================================================================== */

.anatomie {
  display: grid;
  grid-template-columns: minmax(0, 1.35fr) minmax(0, .65fr);
  gap: clamp(1.4rem, 4vw, 4rem);
  align-items: center;
}
.anatomie__vue {
  grid-area: 1 / 1;
  aspect-ratio: 4 / 3;
  border-radius: clamp(16px, 2.2vw, 30px);
}
.anatomie__vue img { width: 100%; height: 100%; object-fit: cover; }

/* Les reperes vivent AU-DESSUS de la photo, dans la meme case de grille. */
/* ⚠️ `align-self: stretch` EST INDISPENSABLE. La grille porte
   `align-items: center` : sans le contredire ici, la liste se reduit a la
   hauteur de son contenu -- c'est-a-dire ZERO, ses enfants etant tous en
   `position: absolute`. Les `top: 22%` valaient alors 22 % de 0, et les
   cinq etiquettes se retrouvaient empilees sur une seule ligne. */
.anatomie__reperes {
  grid-area: 1 / 1;
  position: relative;
  align-self: stretch;
  justify-self: stretch;
  list-style: none; margin: 0; padding: 0;
  pointer-events: none;
  z-index: 2;
}
.anatomie__reperes li {
  position: absolute;
  left: var(--x); top: var(--y);
  display: flex; align-items: center;
}
/* Le point pose sur la photo. */
.anatomie__reperes li::before {
  content: '';
  position: absolute; left: 0; top: 50%;
  width: 9px; height: 9px; margin: -4.5px 0 0 -4.5px;
  border-radius: 50%;
  background: var(--secondaire);
}
/* Le filet qui relie le point a l'etiquette. */
.anatomie__reperes li::after {
  content: '';
  position: absolute; top: 50%;
  height: 1px;
  width: clamp(24px, 4vw, 54px);
  background: var(--secondaire);
  opacity: .55;
}
.anatomie__reperes span {
  position: relative;
  padding: .32em .8em;
  background: var(--blanc);
  color: var(--secondaire);
  border-radius: var(--r-pilule);
  font-size: clamp(.85rem, 1vw, .98rem);
  white-space: nowrap;
}
/* L'etiquette part a gauche ou a droite du point selon `--cote`. */
.anatomie__reperes li[style*="--cote:d"] { padding-left: clamp(24px, 4vw, 54px); }
.anatomie__reperes li[style*="--cote:d"]::after { left: 0; }
.anatomie__reperes li[style*="--cote:g"] { transform: translateX(-100%); padding-right: clamp(24px, 4vw, 54px); }
.anatomie__reperes li[style*="--cote:g"]::before { left: 100%; }
.anatomie__reperes li[style*="--cote:g"]::after { right: 0; }

.anatomie__fiche { grid-area: 1 / 2; display: grid; justify-items: start; gap: .5rem; }
.anatomie__nom { font-size: clamp(1.8rem, 3.4vw, 2.8rem); line-height: 1.15; color: var(--secondaire); }
.anatomie__prix {
  font-size: clamp(2rem, 4vw, 3.2rem);
  line-height: 1;
  color: var(--secondaire);
  font-variant-numeric: lining-nums tabular-nums;
}
.anatomie__note { color: var(--encre-douce); max-width: 30ch; }

@media (max-width: 860px) {
  /* ⚠️ Des etiquettes flottantes sur une photo de 300 px se chevauchent :
     en dessous de 860 px, elles redeviennent une simple liste sous la
     photo, et les filets disparaissent. */
  .anatomie { grid-template-columns: 1fr; }
  .anatomie__vue, .anatomie__reperes, .anatomie__fiche { grid-area: auto; }
  .anatomie__reperes { position: static; display: flex; flex-wrap: wrap; gap: .5rem; pointer-events: auto; }
  .anatomie__reperes li { position: static; transform: none; padding: 0; }
  .anatomie__reperes li::before, .anatomie__reperes li::after { display: none; }
  .anatomie__reperes span { background: var(--blanc); }
}

/* ==========================================================================
   LE CADRAN DU SERVICE (concept propre a la section « La maison »)
   --------------------------------------------------------------------------
   La maison ne se raconte pas au passe : l'anneau montre le service du jour
   et se remplit jusqu'a l'heure qu'il est. C'est une JAUGE, pas un dessin :
   elle porte l'information la plus demandee d'un restaurant -- c'est ouvert,
   maintenant, et pour combien de temps encore.
   ========================================================================== */

.cadran {
  display: grid;
  grid-template-columns: minmax(0, .8fr) auto minmax(0, 1fr);
  gap: clamp(1.2rem, 3.2vw, 3.2rem);
  align-items: center;
}
.cadran__vue {
  aspect-ratio: 3 / 4;
  border-radius: clamp(16px, 2.2vw, 30px);
}
.cadran__vue img { width: 100%; height: 100%; object-fit: cover; }

/* ------------------------------------------------------------ L'HORLOGE */
.cadran__horloge {
  position: relative;
  width: clamp(210px, 23vw, 300px);
  aspect-ratio: 1;
  display: grid; place-items: center;
}
/* ⚠️ L'ANNEAU N'EST PAS UN CERCLE ENTIER, ET C'EST INDISPENSABLE.
   Ferme, son debut et sa fin tombent au meme endroit : « 16h » et « 0h »
   se superposaient en haut, illisibles. Il couvre donc 300 degres, avec une
   ouverture de 60 degres en bas -- le service a un DEBUT et une FIN, ce qui
   est justement ce qu'on veut lire.
   La rotation de 120deg amene ce debut en bas a gauche : un cercle SVG part
   de 3 h, il faut -90 pour l'amener en haut, puis +210 pour descendre a
   gauche.
   ⚠️ pathLength="100" dans le HTML fait de la circonference une regle de
   100 unites, quel que soit le rayon : 83.333 = 300/360. Retirer cet
   attribut casse le remplissage sans aucune erreur. */
.cadran__disque {
  position: absolute; inset: 0; width: 100%; height: 100%;
  rotate: 120deg;
}
.cadran__piste {
  fill: none; stroke-width: 9; stroke-linecap: round;
  stroke: color-mix(in srgb, var(--secondaire) 14%, transparent);
  stroke-dasharray: 83.333 100;
}
/* ⚠️ --part est DECLARE via @property : sans declaration, une variable ne
   s'interpole pas et le remplissage sauterait d'un coup au lieu de couler.
   C'est la variable qui s'anime, le dasharray se recalcule tout seul. */
@property --part { syntax: '<number>'; inherits: false; initial-value: 0; }
.cadran__ecoule {
  fill: none; stroke-width: 9; stroke-linecap: round;
  stroke: var(--secondaire);
  stroke-dasharray: calc(83.333 * var(--part)) 100;
  transition: --part 1.6s var(--sortie);
}
@media (prefers-reduced-motion: reduce) { .cadran__ecoule { transition: none; } }

/* La tete de lecture, posee sur l'anneau a l'heure qu'il est.
   ⚠️ "inset: calc(50% - (96/240) * 100%)" redonne a cette boite le diametre
   EXACT de l'anneau : sa bordure haute tombe donc pile sur le trace, et une
   simple rotation suffit a placer la tete a la bonne heure. */
.cadran__tete {
  position: absolute;
  inset: calc(50% - 40%);
  rotate: var(--a, 0deg);
  transition: rotate 1.4s var(--sortie);
  pointer-events: none;
}
.cadran__tete::after {
  content: '';
  position: absolute; left: 50%; top: 0;
  width: 17px; height: 17px; translate: -50% -50%;
  border-radius: 50%;
  background: var(--secondaire);
  border: 3px solid var(--blanc);
}

/* Les heures, posees un peu au-dela de l'anneau (rayon 118 sur 120).
   Le second rotate, negatif, remet le chiffre d'aplomb : sans lui, « 22h »
   arriverait couche a l'horizontale. */
.cadran__crans { position: absolute; inset: calc(50% - 49.17%); pointer-events: none; }
.cadran__cran { position: absolute; inset: 0; rotate: var(--a, 0deg); }
.cadran__cran b {
  position: absolute; left: 50%; top: 0;
  translate: -50% -50%;
  rotate: calc(var(--a, 0deg) * -1);
  padding: 0 .3em;
  background: var(--blanc);
  color: var(--encre-douce);
  font-size: .72rem; font-weight: 400;
  font-variant-numeric: lining-nums tabular-nums;
}

.cadran__centre {
  position: relative; z-index: 2;
  display: grid; justify-items: center; gap: .12rem;
  max-width: 62%; text-align: center;
}
.cadran__etat {
  display: flex; align-items: center; gap: .45em;
  font-size: clamp(1.4rem, 2.5vw, 2rem); line-height: 1;
  color: var(--secondaire);
}
/* Le point qui bat : c'est lui qui dit « en direct ». */
.cadran__etat::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--secondaire);
  animation: pouls-cadran 2.2s ease-in-out infinite;
}
.cadran[data-ouvert='non'] .cadran__etat { color: var(--encre-douce); }
.cadran[data-ouvert='non'] .cadran__etat::before { animation: none; opacity: .4; }
@keyframes pouls-cadran { 0%, 100% { scale: 1; opacity: 1; } 50% { scale: .72; opacity: .5; } }
@media (prefers-reduced-motion: reduce) { .cadran__etat::before { animation: none; } }

.cadran__reste { color: var(--encre); font-size: .95rem; }
.cadran__jour { color: var(--encre-douce); font-size: .78rem; }

/* --------------------------------------------------------------- LE MOT */
.cadran__mot { display: grid; justify-items: start; gap: .6rem; }
.cadran__phrase { line-height: 1.6; max-width: 34ch; color: var(--encre); }
.cadran__adresse {
  display: grid; gap: .1rem;
  padding-top: .7rem;
  border-top: 1px solid var(--filet-c);
  color: var(--secondaire); line-height: 1.5;
  justify-self: stretch;
}
.cadran__boutons { display: flex; flex-wrap: wrap; gap: .6rem; margin-top: .3rem; }

@media (max-width: 1080px) {
  /* Trois colonnes ne tiennent plus : la photo passe au-dessus, l'horloge
     et le mot restent cote a cote tant qu'ils tiennent. */
  .cadran { grid-template-columns: auto minmax(0, 1fr); }
  .cadran__vue { grid-column: 1 / -1; aspect-ratio: 16 / 9; }
}
@media (max-width: 720px) {
  .cadran { grid-template-columns: 1fr; justify-items: center; }
  .cadran__vue { grid-column: auto; }
  .cadran__mot { justify-items: center; text-align: center; }
  .cadran__adresse { justify-items: center; }
}

/* ==========================================================================
   LES QUATRE CANAUX EN LIGNES (au lieu de quatre paves)
   ⚠️ En cartes, chacun occupait 260 px de haut pour trois mots et la
   colonne finissait bien plus bas que le plan d'en face -- c'etait ca, le
   vide. En lignes, le meme contenu tient dans la hauteur du plan.
   ========================================================================== */

.canaux { display: grid; gap: 0; list-style: none; margin: 0; padding: 0; }
.canal {
  display: grid;
  grid-template-columns: auto auto minmax(0, 1fr) auto;
  align-items: center;
  gap: .8rem;
  padding: .7rem .9rem;
  border-radius: 12px;
  transition: background-color .3s var(--sortie);
}
.canaux li + li { border-top: 1px solid color-mix(in srgb, var(--encre) 12%, transparent); }
.canal:hover { background: var(--blanc); }
.canal__bulle {
  display: grid; place-items: center;
  width: 34px; height: 34px;
  border-radius: 50%;
  background: var(--blanc);
  color: var(--secondaire);
}
.canal:hover .canal__bulle { background: var(--secondaire); color: var(--vanille); }
.canal__bulle .ico { font-size: 1rem; }
.canal__quoi { color: var(--encre-douce); font-size: .95rem; }
.canal__val { color: var(--secondaire); overflow-wrap: anywhere; justify-self: end; text-align: right; }
.canal__fleche { font-size: 1rem; color: var(--secondaire); opacity: .45; transition: translate .3s var(--sortie); }
.canal:hover .canal__fleche { translate: 4px 0; opacity: 1; }
@media (max-width: 520px) {
  .canal { grid-template-columns: auto minmax(0, 1fr) auto; }
  .canal__quoi { display: none; }
  .canal__val { justify-self: start; text-align: left; }
}
/* ==========================================================================
   LA FAQ — LE VIDE DE GAUCHE, POUR DE BON
   --------------------------------------------------------------------------
   ⚠️ RESSERRER LA COLONNE NE SUFFISAIT PAS. Mesure : la conversation tenait
   sur 620 px centres (410..1030) dans une page de 1440 -- donc 410 px de
   blanc de chaque cote, et comme les questions sont callees a DROITE de
   leur colonne, tout le poids visuel partait a droite et la gauche
   paraissait vide sur toute la hauteur de la section.

   La solution n'est pas de retrecir encore : c'est de DONNER UN CONTENU a
   cette colonne. Le titre, le chapeau et le bouton d'appel y retournent, et
   ils y RESTENT COLLES pendant qu'on ouvre les reponses -- la question
   « et si ma question n'y est pas ? » a sa reponse sous les yeux tout du
   long. Plus une seule bande vide.
   ========================================================================== */

.faq__grille {
  grid-template-columns: minmax(0, .85fr) minmax(0, 1.15fr);
  gap: clamp(1.6rem, 4vw, 4rem);
  align-items: start;
  justify-items: stretch;
}
.faq__entete {
  justify-items: start;
  text-align: left;
  position: sticky;
  top: calc(var(--entete-h) + 1.5rem);
}
.faq__entete .titre-section { max-width: 15ch; }
.faq__entete .chapeau { max-width: 34ch; }
.faq__liste { width: 100%; max-width: 620px; justify-self: end; }

@media (max-width: 860px) {
  /* Sur une colonne, l'en-tete ne colle plus : il n'y a plus de bande vide
     a remplir, et un bloc colle sur telephone mange la moitie de l'ecran. */
  .faq__grille { grid-template-columns: 1fr; }
  .faq__entete { position: static; justify-items: center; text-align: center; }
  .faq__liste { justify-self: center; }
}
/* ==========================================================================
   LE RUBAN VERTICAL — CE QUI LE FAISAIT « COMMENCER TROP BAS »
   --------------------------------------------------------------------------
   ⚠️ C'ETAIT LA ROTATION, PAS LA POSITION. `.vertical` porte
   `writing-mode: vertical-rl` PLUS `rotate: 180deg` : la rotation retourne
   la colonne, donc la PREMIERE lettre du texte se retrouve EN BAS et la
   phrase se lit de bas en haut. Deplacer la fenetre ne pouvait rien y
   changer -- le debut du texte restait collé au bas, quoi qu'on fasse.
   Dans le ruban, la rotation saute : le texte se lit du HAUT vers le bas et
   commence donc en haut de sa fenetre.
   Et la fenetre est raccourcie par le BAS (plus de `height: 100%`, une
   hauteur bornee) : elle s'arrete bien avant le bas de la photo.
   ========================================================================== */
.ruban-v .vertical { rotate: none; }
/* Le ruban ne part plus pile a la ligne de la photo : cale a zero, il
   remontait trop haut. Il descend d'un cran, sans revenir au retard de
   depart. */
.ruban-v { min-height: 0; height: clamp(200px, 26vh, 330px); margin-top: clamp(1.4rem, 3vw, 2.6rem); }

/* ==========================================================================
   « BRIOCHE PERDUE FOURREE » — ELLE SE MONTE SOUS VOS YEUX
   --------------------------------------------------------------------------
   Meme famille que la section des etapes, que le client juge reussie : une
   BOUCLE qui progresse. Ici ce n'est plus une explication, c'est le plat qui
   se compose : la base d'abord, puis chaque garniture qui tombe dessus l'une
   apres l'autre avec son nom, et on recommence.
   C'est litteralement le concept du site — « une base, puis ce que vous
   voulez dessus » — joue devant le visiteur.
   ========================================================================== */

.anatomie__reperes li {
  /* Chaque garniture attend hors champ et TOMBE sur l'assiette. */
  opacity: 0;
  translate: 0 -18px;
}
@media (prefers-reduced-motion: no-preference) {
  .anatomie__reperes li { transition: opacity .5s var(--sortie), translate .7s var(--ressort); }
}
.anatomie__reperes li.est-posee { opacity: 1; translate: 0 0; }
/* Le point sur la photo apparait AVANT son etiquette : on voit d'abord
   l'endroit, on lit ensuite le nom. */
.anatomie__reperes li::before { scale: 0; transition: scale .45s var(--ressort); }
.anatomie__reperes li.est-posee::before { scale: 1; }
.anatomie__reperes li::after { scale: 0 1; transform-origin: var(--org, left); transition: scale .5s var(--sortie) .12s; }
.anatomie__reperes li[style*="--cote:g"]::after { --org: right; }
.anatomie__reperes li.est-posee::after { scale: 1 1; }

/* ------------------------------------------------ LE JOURNAL DU MONTAGE
   Il annonce la garniture au moment ou elle se pose sur la photo.
   ⚠️ `min-height` sur le bloc : « Coulis de chocolat blanc » tient sur deux
   lignes, « Framboise » sur une. Sans hauteur reservee, le prix et le bouton
   sautent de 24 px a chaque garniture. */
.anatomie__geste { display: grid; gap: .15rem; min-height: 3.6em; align-content: start; }
.anatomie__geste__verbe {
  font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--encre-douce);
}
.anatomie__geste__quoi {
  font-size: clamp(1.05rem, 1.7vw, 1.35rem); line-height: 1.25;
  color: var(--secondaire);
}
.vient-de-changer { animation: monte-mot .5s var(--sortie); }
@keyframes monte-mot { from { opacity: 0; translate: 0 10px; } to { opacity: 1; translate: 0 0; } }

/* La jauge des cinq garnitures : meme remplissage coulant que les etapes. */
.anatomie__jauge {
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr;
  gap: 6px; width: min(100%, 230px);
  list-style: none; margin: .1rem 0 .5rem; padding: 0;
}
.anatomie__jauge li {
  position: relative; height: 4px; border-radius: 2px; overflow: clip;
  background: color-mix(in srgb, var(--secondaire) 16%, transparent);
}
.anatomie__jauge li::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--secondaire);
  transform-origin: left;
  scale: 0 1;
  transition: scale .55s var(--sortie);
}
.anatomie__jauge li.est-pleine::after { scale: 1 1; }
@media (prefers-reduced-motion: reduce) {
  .anatomie__jauge li::after, .vient-de-changer { transition: none; animation: none; }
}

/* ------------------------------------------- ETAPES : COULEE PLUS LENTE
   ⚠️ Ces trois durees vont ensemble, et avec PAS dans js/scene.js :
   coulee 1,75 s + retard .8 s < PAS 2000 ms. Accelerer l'une sans les
   autres redonne la saccade que le client signalait. */
@media (prefers-reduced-motion: no-preference) {
  .etape__bulle::before { transition: translate 1.75s cubic-bezier(.42, 0, .28, 1); }
}
.etape::before { transition: width 1.55s cubic-bezier(.45, 0, .25, 1); }
.etape.est-franchie .etape__bulle { transition-delay: .8s; }

/* ==========================================================================
   L'ATELIER (section « Posez dessus ce qui vous fait envie »)
   --------------------------------------------------------------------------
   On choisit son produit, puis ses extras, et l'apercu change : la photo du
   produit d'un cote, les garnitures qui se posent dessus de l'autre, le
   total qui roule en bas. Principe repris du configurateur Gelatissimo.
   ⚠️ Les garnitures sont ECRITES sur l'assiette, jamais dessinees.
   ========================================================================== */

.atelier {
  display: grid;
  grid-template-columns: minmax(0, .95fr) minmax(0, 1.05fr);
  gap: clamp(1.2rem, 3vw, 3rem);
  align-items: start;
  margin-top: clamp(2rem, 5vw, 4rem);
}

/* ------------------------------------------------------------- L'APERCU */
/* ⚠️ L'apercu est COLLANT : la liste des extras est longue, et un visiteur
   qui descend jusqu'aux boules de glace doit continuer a voir ce qu'il est
   en train de composer. Sans cela, on choisit a l'aveugle. */
.atelier__vue {
  position: sticky;
  top: calc(var(--entete-h) + 1.2rem);
  display: grid; gap: .7rem;
}
.plaque {
  position: relative;
  aspect-ratio: 4 / 5;
  border-radius: clamp(16px, 2.2vw, 30px);
  overflow: clip;
  background: var(--nude);
}
.plaque__photo {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: opacity .4s var(--sortie), scale .6s var(--sortie);
}
/* Pas de photo pour ce produit : la plaque ecrit son nom plutot que de
   montrer autre chose. */
.plaque[data-vide='oui'] .plaque__photo { opacity: 0; scale: 1.04; }
.plaque__nom {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: 12%;
  text-align: center;
  font-size: clamp(1.7rem, 3.4vw, 2.9rem);
  line-height: 1.1;
  color: var(--secondaire);
}
.plaque__pose { position: absolute; inset: 0; pointer-events: none; }

.pose {
  position: absolute;
  left: var(--x); top: var(--y);
  translate: -50% -50%;
  rotate: var(--r, 0deg);
  display: inline-flex; align-items: center; gap: .45em;
  padding: .32em .8em;
  background: var(--blanc);
  color: var(--secondaire);
  border-radius: var(--r-pilule);
  font-size: clamp(.74rem, .95vw, .9rem);
  white-space: nowrap;
}
.pose i { width: 9px; height: 9px; border-radius: 50%; flex: none; }
.pose--tombe { animation: pose-tombe .42s var(--ressort) both; }
.pose--part { opacity: 0; scale: .8; transition: opacity .3s, scale .3s; }
@keyframes pose-tombe {
  from { opacity: 0; translate: -50% -110%; scale: .9; }
  to   { opacity: 1; translate: -50% -50%;  scale: 1; }
}
@media (prefers-reduced-motion: reduce) { .pose--tombe { animation: none; } }

.atelier__resume {
  color: var(--encre-douce);
  font-size: .92rem; line-height: 1.5;
  min-height: 2.8em;                 /* la liste s'allonge : pas de saut */
}

/* -------------------------------------------------------------- LES CHOIX */
/* ⚠️ La liste defile DANS son cadre au-dela de 860 px : les cinq etages de
   la carte font une quarantaine de pastilles, et la section d'accueil
   doit rester compacte. En dessous, elle se deroule normalement -- un
   cadre qui defile dans une page qui defile est infernal au doigt. */
.atelier__liste {
  display: grid; gap: 1.1rem;
  max-height: min(56vh, 480px);
  overflow-y: auto;
  padding-right: .7rem;
  scrollbar-width: thin;
  /* Le degrade du bas dit QUE CA DEFILE. Sans lui, la derniere ligne
     coupee net passe pour une mise en page ratee. C'est un masque, pas un
     flou : la regle « zero flou » du site tient. */
  mask-image: linear-gradient(to bottom, #000 calc(100% - 40px), transparent);
}
.etage { display: grid; gap: .5rem; }
.etage__entete { display: flex; align-items: baseline; justify-content: space-between; gap: 1rem; }
.etage__nom {
  display: flex; align-items: baseline; gap: .5em;
  font-size: clamp(1rem, 1.3vw, 1.15rem);
  color: var(--secondaire);
}
.etage__nom b {
  display: grid; place-items: center;
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  background: var(--secondaire); color: var(--vanille);
  font-size: .72em; font-weight: 400;
}
.etage__prix { color: var(--encre-douce); font-size: .85rem; white-space: nowrap; }
.etage__sous { color: var(--encre-douce); font-size: .82rem; margin-top: .2rem; }
.atelier__etape2 {
  display: flex; align-items: baseline; gap: .5em;
  color: var(--secondaire); font-size: clamp(1rem, 1.3vw, 1.15rem);
  padding-top: .4rem;
  border-top: 1px solid var(--filet-c);
}
.atelier__etape2 b {
  display: grid; place-items: center;
  width: 1.7em; height: 1.7em;
  border-radius: 50%;
  background: var(--secondaire); color: var(--vanille);
  font-size: .72em; font-weight: 400;
}

.puces { display: flex; flex-wrap: wrap; gap: .4rem; }
/* ⚠️ Le filet de la pastille est PERMANENT, il n'apparait pas au survol :
   une bordure qui surgit sous la souris fait sauter la mise en page d'un
   pixel sur toute la ligne. Au survol, seul l'aplat change. */
.puce {
  display: inline-flex; align-items: center; gap: .45em;
  padding: .4em .85em;
  border: 1px solid var(--filet-c);
  border-radius: var(--r-pilule);
  background: color-mix(in srgb, var(--ocre-logo) 14%, var(--blanc));
  color: var(--encre);
  font: inherit; font-size: .88rem; line-height: 1.3;
  cursor: pointer;
  transition: background .25s var(--sortie), color .25s var(--sortie);
}
.puce i {
  width: 10px; height: 10px; border-radius: 50%; flex: none;
  background: var(--teinte, var(--ocre-logo));
}
.puce em { font-style: normal; color: var(--encre-douce); font-size: .92em; }
.puce:hover { background: color-mix(in srgb, var(--ocre-logo) 34%, var(--blanc)); }
.puce[aria-pressed='true'] {
  background: var(--secondaire); color: var(--vanille); border-color: var(--secondaire);
}
.puce[aria-pressed='true'] em { color: color-mix(in srgb, var(--vanille) 70%, transparent); }
.puce--base { padding: .5em 1em; }

/* ---------------------------------------------------------------- LE PIED */
.atelier__pied {
  display: grid; gap: .7rem;
  margin-top: 1.1rem;
  padding-top: 1rem;
  border-top: 1px solid var(--filet-c);
}
.atelier__total { display: flex; align-items: baseline; gap: .8rem; flex-wrap: wrap; }
/* ⚠️ --pas EST LA HAUTEUR D'UN CHIFFRE, et elle doit valoir exactement le
   line-height : les roues sont des colonnes de dix chiffres qu'on decale
   de N x --pas. Si les deux valeurs divergent, les chiffres s'affichent
   coupes en deux. */
.roues {
  font-size: clamp(1.9rem, 3.6vw, 2.9rem);
  line-height: 1.1; --pas: 1.1em;
  color: var(--secondaire);
  font-variant-numeric: lining-nums tabular-nums;
  display: inline-flex; align-items: flex-end;
}
.roue { display: inline-block; height: var(--pas); overflow: clip; }
.roue > span { display: block; transition: translate .5s var(--ressort); }
.roue b { display: block; height: var(--pas); line-height: var(--pas); font-weight: 400; }
@media (prefers-reduced-motion: reduce) { .roue > span { transition: none; } }

.atelier__actions { display: flex; flex-wrap: wrap; gap: .6rem; }
.atelier__note { color: var(--encre-douce); font-size: .8rem; line-height: 1.5; }

@media (max-width: 860px) {
  .atelier { grid-template-columns: 1fr; }
  .atelier__vue { position: static; }
  .plaque { aspect-ratio: 4 / 3; }
  .atelier__liste { max-height: none; overflow: visible; padding-right: 0; }
}

/* ------------------------------------------------- FAQ : PLUS DE COLONNE
   ⚠️ TROISIEME ETAT DE CETTE SECTION, ET LE BON. En deux colonnes, quelle
   que soit la repartition, il restait toujours un vide : d'abord a gauche
   (rien sous la bulle d'accueil), puis sous l'entete (la conversation est
   trois fois plus haute qu'un titre). Une colonne laterale COURTE face a
   une colonne LONGUE laissera toujours un trou -- ce n'est pas un reglage
   de largeur, c'est la mise en page qui ne convient pas.
   L'entete passe donc AU-DESSUS, sur toute la largeur, et la conversation
   se lit dans une colonne centree, comme sur un telephone. Plus de colonne
   laterale, donc plus de vide possible. */
.faq__grille {
  grid-template-columns: 1fr;
  gap: clamp(1.6rem, 3.5vw, 2.6rem);
}
.faq__entete {
  position: static;
  justify-items: start;
  text-align: left;
  max-width: none;
}
.faq__entete .titre-section { max-width: 20ch; }
.faq__entete .chapeau { max-width: 52ch; }
.faq__liste {
  width: 100%;
  max-width: 760px;
  justify-self: center;
}
@media (max-width: 860px) {
  .faq__entete { justify-items: center; text-align: center; }
  .faq__entete .titre-section, .faq__entete .chapeau { max-width: none; }
}

/* ------------------------------------------- LE CADRAN : DEUX COLONNES
   ⚠️ La photo de salle est retiree (demande client du 03/08/2026). La
   section dit maintenant deux choses, une par colonne : ce qu'on sert a
   gauche, et jusqu'a quelle heure a droite. L'ordre des colonnes est
   inverse par rapport au balisage -- le texte est ecrit EN SECOND dans le
   HTML mais s'affiche a gauche, pour que le lecteur d'ecran annonce le
   titre avant la jauge. */
.cadran {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: clamp(1.6rem, 5vw, 5rem);
}
.cadran__mot { grid-column: 1; grid-row: 1; justify-items: start; gap: .8rem; }
.cadran__horloge { grid-column: 2; grid-row: 1; }
.cadran__mot .titre-section { max-width: 16ch; }
.cadran__phrase { max-width: 42ch; }
.cadran__adresse { justify-self: start; min-width: 22ch; }

@media (max-width: 900px) {
  .cadran { grid-template-columns: 1fr; justify-items: center; }
  .cadran__mot, .cadran__horloge { grid-column: 1; }
  .cadran__mot { grid-row: 1; justify-items: center; text-align: center; }
  .cadran__horloge { grid-row: 2; }
  .cadran__mot .titre-section, .cadran__phrase { max-width: none; }
  .cadran__adresse { justify-self: center; justify-items: center; }
}

/* L'horloge se centre dans sa moitie : callee au bord, elle laissait un
   couloir vide de 200 px entre le texte et elle. */
.cadran__horloge { justify-self: center; }
@media (max-width: 900px) { .cadran__horloge { justify-self: center; } }

/* ==========================================================================
   LE COMPTEUR DU SERVICE (remplace l'anneau, 03/08/2026)
   --------------------------------------------------------------------------
   Ferme : « On ouvre dans 14 : 27 : 05 ». Ouvert : « Il vous reste ... ».
   Le chiffre descend a la seconde -- c'est la reponse la plus directe a la
   question qu'on se pose devant un restaurant.
   ⚠️ Les anciennes regles .cadran__disque / __piste / __ecoule / __tete /
   __crans / __centre ne servent plus a rien : leur balisage a ete retire de
   index.html. Elles sont laissees en place sans effet -- les supprimer
   demanderait de relire tout le fichier, et elles ne s'appliquent a aucun
   element existant.
   ========================================================================== */

.compteur {
  display: grid;
  justify-items: center;
  gap: .35rem;
  padding: clamp(1.2rem, 2.6vw, 2rem) clamp(1.4rem, 3vw, 2.6rem);
  border-radius: clamp(16px, 2.2vw, 26px);
  background: var(--blanc);
  border: 1px solid var(--filet-c);
  text-align: center;
}
.compteur__etat {
  display: flex; align-items: center; gap: .5em;
  font-size: clamp(1.4rem, 2.4vw, 1.9rem); line-height: 1;
  color: var(--secondaire);
}
/* Le point qui bat : c'est lui qui dit « en direct ». */
.compteur__etat::before {
  content: '';
  width: 10px; height: 10px; border-radius: 50%;
  background: var(--secondaire);
  animation: pouls-cadran 2.2s ease-in-out infinite;
}
.cadran[data-ouvert='non'] .compteur__etat { color: var(--encre-douce); }
.cadran[data-ouvert='non'] .compteur__etat::before { animation: none; opacity: .4; }
@media (prefers-reduced-motion: reduce) { .compteur__etat::before { animation: none; } }

.compteur__quoi {
  color: var(--encre-douce);
  font-size: .8rem; letter-spacing: .14em; text-transform: uppercase;
  margin-top: .2rem;
}

.compteur__cadre {
  display: flex; align-items: flex-start; gap: .35rem;
  margin: .3rem 0 .1rem;
}
.compteur__bloc {
  display: grid; justify-items: center; gap: .1rem;
  min-width: 2.6ch;
}
/* ⚠️ tabular-nums EST INDISPENSABLE : sans lui, chaque seconde change la
   largeur du chiffre et le bloc entier tremble a chaque tic. */
.compteur__bloc b {
  font-weight: 400;
  font-size: clamp(2.4rem, 5vw, 3.6rem); line-height: 1;
  color: var(--secondaire);
  font-variant-numeric: lining-nums tabular-nums;
  font-feature-settings: 'tnum' 1;
}
.compteur__bloc i {
  font-style: normal;
  font-size: .72rem; color: var(--encre-douce);
}
.compteur__deux {
  font-size: clamp(1.8rem, 3.6vw, 2.6rem); line-height: 1.1;
  color: color-mix(in srgb, var(--secondaire) 40%, transparent);
}
.compteur__jour { color: var(--encre-douce); font-size: .82rem; }

/* La colonne de droite n'a plus a reserver un carre d'horloge. */
.cadran { grid-template-columns: minmax(0, 1fr) auto; }
.cadran .compteur { grid-column: 2; grid-row: 1; justify-self: center; }
@media (max-width: 900px) {
  .cadran .compteur { grid-column: 1; grid-row: 2; }
}

/* ==========================================================================
   FAQ : PLUS COMPACTE, ET LE LOGOTYPE TEL QUEL
   --------------------------------------------------------------------------
   ⚠️ Le logotype n'est plus decoupe en rond ni pose sur une pastille : il
   s'affiche entier, en `contain`, donc sans rien perdre de sa forme.
   ⚠️ La section etait longue parce que TOUT respirait a la meme echelle que
   le reste du site. Une conversation se lit serre : les ecarts, les
   rembourrages et le visage sont reduits, le texte ne bouge pas.
   ========================================================================== */

.faq__rep::before {
  width: 34px; height: 34px;
  border-radius: 0;
  background: url('../img/logo-petit.png') center / contain no-repeat;
}
.faq { padding-block: clamp(2rem, 4.2vw, 3.4rem); }
.faq__grille { gap: clamp(1rem, 2.2vw, 1.6rem); }
.faq__entete { gap: .3rem; }
.faq__liste { gap: .45rem; max-width: 720px; }
.faq__accueil { margin-bottom: .3rem; }
.faq__accueil p { padding: .7rem 1.1rem; }
.faq__item summary { padding: .62rem 2.9rem .62rem 1rem; font-size: clamp(.95rem, 1.2vw, 1.05rem); }
.faq__rep { gap: .6rem; margin-top: .35rem; }
.faq__rep p { padding: .68rem 1.05rem; font-size: .95rem; line-height: 1.5; }

/* L'entete de la FAQ tient sur UNE bande : titre a gauche, phrase et
   telephone a droite. Empiles, ces trois elements coutaient a eux seuls
   250 px de hauteur pour trois lignes de texte -- c'est la que la section
   s'allongeait, pas dans la conversation. */
.faq__entete {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: end;
  column-gap: clamp(1rem, 3vw, 2.5rem);
  row-gap: .4rem;
}
.faq__entete .titre-section {
  grid-column: 1; grid-row: 1 / span 2;
  align-self: center;
  font-size: clamp(1.7rem, 3vw, 2.5rem);
  max-width: 18ch;
}
.faq__entete .chapeau { grid-column: 2; grid-row: 1; justify-self: end; text-align: right; max-width: 34ch; }
.faq__entete .bouton { grid-column: 2; grid-row: 2; justify-self: end; }

@media (max-width: 760px) {
  /* Cote a cote, le titre et la phrase se marchent dessus sous 760 px. */
  .faq__entete { grid-template-columns: 1fr; justify-items: center; }
  .faq__entete .titre-section { grid-column: 1; grid-row: auto; max-width: none; }
  .faq__entete .chapeau { grid-column: 1; grid-row: auto; justify-self: center; text-align: center; }
  .faq__entete .bouton { grid-column: 1; grid-row: auto; justify-self: center; }
}

/* L'ecart accueil / etapes, encore desserre : a 2,8rem les deux sections se
   touchaient presque une fois la vague posee entre elles. */
.table-qr { padding-block: clamp(4rem, 7.5vw, 7rem) var(--section); }

/* De l'air sous la premiere image : a 28 px de retrait, le bloc photo et son
   socle decale arrivaient presque au ras de la vague. */
.scene-hero { padding-bottom: clamp(3rem, 5.5vw, 5.5rem); }