/* ============================================================
   CHIDO Café — home.css
   Les sections propres à l'accueil : héros, sachet, cœur de Kiru,
   terroir, plans, « pas encore décidé », FAQ, appel final.
   Charge base.css avant celle-ci — les jetons et les primitives
   viennent de là.
   ============================================================ */

/* ---------------------------------------------------------- 8. Hero */
.hero {
  display: grid;
  align-items: center;
  min-height: min(46rem, 92svh);
  padding-block: clamp(8rem, 16vw, 11rem) clamp(5rem, 10vw, 8rem);
  background: var(--ink);
  color: var(--paper);
}

/* vidéo de fond + voile pour garder le texte lisible */
.hero__media {
  position: absolute;
  inset: 0;
  z-index: -2;
  overflow: hidden;
  /* Sin cartel (20/08/2026), esto es lo que se ve mientras el primer fotograma
     llega: el color del héroe, no un hueco blanco. */
  background: var(--ink);
}
.hero__video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.82;
}
/* Voile allégé : la vidéo doit se voir. Il reste dense derrière le titre
   (à gauche) et sous le bloc de boutons, et s'efface vers la droite où
   rien n'est posé — le contraste du texte tient sans noyer l'image. */
.hero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(18, 15, 16, 0.82) 0%, rgba(18, 15, 16, 0.55) 42%, rgba(18, 15, 16, 0.12) 100%),
    linear-gradient(to top, rgba(18, 15, 16, 0.68) 0%, transparent 38%);
}

.hero__inner { position: relative; }
.hero__title { max-width: 12ch; }

/* Frappe lettre par lettre. Toutes les lettres restent dans le flux et
   ne jouent que sur l'opacité : la hauteur du bloc, les retours à la
   ligne et donc tout ce qui suit dans le héros ne bougent pas d'un pixel
   pendant la frappe. Le script ne pose `.is-typing` que s'il prend la
   main — sans JS, le titre est simplement là. */
.hero__title.is-typing .char {
  opacity: 0;
  animation: char-type 40ms linear forwards;
  animation-delay: calc(var(--i) * 26ms);
}
@keyframes char-type { to { opacity: 1; } }
.hero__title em { color: var(--yellow); font-style: normal; }
.hero__lead { max-width: 34rem; }

/* bouton pause : contenu animé toujours arrêtable */
.hero__vidbtn {
  position: absolute;
  right: max(1rem, calc((100% - 78rem) / 2));
  bottom: calc(var(--wave-h) + 1.25rem); /* au-dessus de la vague de la section suivante */
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.45rem 0.9rem;
  border: 0.0625rem solid var(--line-dark);
  border-radius: var(--r-pill);
  background: rgba(0, 0, 0, 0.4);
  color: rgba(255, 253, 244, 0.85);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.hero__vidbtn:hover {
  background: var(--nav-hover-sub);
  border-color: var(--nav-hover-sub);
  color: #000;
}
.hero__vidicon { width: 0.85rem; height: 0.85rem; flex: 0 0 auto; }

/* lecteur plein écran */
.vfs {
  position: fixed;
  inset: 0;
  z-index: 999;
  display: grid;
  place-items: center;
  background: var(--ink);
}
.vfs video { width: 100%; height: 100%; object-fit: contain; background: var(--ink); }
.vfs__close {
  position: absolute;
  top: 1.25rem;
  right: 1.25rem;
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0.0625rem solid var(--line-dark);
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.14);
  color: var(--paper);
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease, border-color 200ms ease;
}
.vfs__close:hover {
  background: var(--nav-hover-sub);
  border-color: var(--nav-hover-sub);
  color: #000;
}

.stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 0;
  margin: 2.5rem 0 0;
  border: 0.0625rem solid var(--line-dark);
  border-radius: var(--r);
  overflow: hidden;
}
.stats__item { padding: 0.9rem 1rem; border-right: 0.0625rem solid var(--line-dark); }
.stats__item:last-child { border-right: 0; }
.stats dt {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: rgba(255, 253, 244, 0.55);
}
.stats dd {
  margin: 0.2rem 0 0;
  font-family: var(--font-display);
  font-size: clamp(1.4rem, 3.4vw, 1.9rem);
  font-weight: 800;
  line-height: 1.1;
  color: var(--yellow);
}

/* variante claire de la bande de chiffres (hors fond sombre) */
.stats--light { border-color: var(--ink); }
.stats--light .stats__item { border-right-color: var(--ink); }
.stats--light dt { color: var(--muted); }
.stats--light dd { color: var(--ink); }

/* le titre du sachet : la ligne de rappel juste dessous le complète, donc
   il reste sur une mesure courte */
#cafe .display--md { max-width: 22ch; margin-top: 0.75rem; }
#cafe .lead { margin-top: 1rem; }

.cafe__definition {
  display: inline-block;
  margin: 2rem 0 0;
  padding-bottom: 0.15rem;
  border-bottom: 0.1875rem solid var(--pink);
}
.cafe__art { align-self: center; width: min(100%, 24rem); }

/* La scène porte la tache organique et les grains : la rangée de flèches
   vit en dehors, sinon elle décalerait le décor accroché à l'image. */
.cafe__stage { position: relative; }

/* Fenêtre du carrousel. `overflow: clip` et non `hidden` : la piste est
   rognée sans créer de conteneur de défilement, donc un clic sur une
   flèche ne peut pas laisser la fenêtre décalée d'un demi-sachet. */
.cafe__carousel {
  position: relative;
  z-index: 2;
  overflow: clip;
  aspect-ratio: 1060 / 1397;
  border-radius: var(--r);
}
.cafe__track {
  display: flex;
  height: 100%;
  transition: transform 620ms cubic-bezier(0.65, 0, 0.35, 1);
}
/* la vue qui sort recule et s'éteint : le glissement gagne une profondeur
   que la seule translation ne donne pas */
.cafe__slide {
  flex: 0 0 100%;
  margin: 0;
  opacity: 0.35;
  scale: 0.9;
  transition: opacity 480ms ease, scale 620ms cubic-bezier(0.65, 0, 0.35, 1);
}
.cafe__slide.is-active { opacity: 1; scale: 1; }
.cafe__slide img { width: 100%; height: 100%; object-fit: contain; }

/* Les commandes, sous l'image : deux pastilles au même dessin que les
   boutons ronds du site. */
.cafe__nav {
  position: relative;
  z-index: 4;
  display: flex;
  justify-content: center;
  gap: 0.9rem;
  margin-top: clamp(1.25rem, 3vw, 1.75rem);
}
.cafe__arrow {
  display: grid;
  place-items: center;
  width: 3.25rem;
  height: 3.25rem;
  padding: 0;
  border: var(--stroke);
  border-radius: 50%;
  background: var(--yellow);
  box-shadow: var(--pop-sm);
  cursor: pointer;
  transition: transform 140ms ease, box-shadow 140ms ease, background 140ms ease, color 140ms ease;
}
.cafe__arrow svg { width: 1.4rem; height: 1.4rem; }
.cafe__arrow:hover {
  background: var(--pink);
  color: var(--paper);
  transform: translate(-0.125rem, -0.125rem);
  box-shadow: 0.4375rem 0.4375rem 0 var(--ink);
}
.cafe__arrow:active { transform: translate(0.125rem, 0.125rem); box-shadow: 0.1875rem 0.1875rem 0 var(--ink); }

/* Les grains illustrés existent par paire : trois suffisent et leur course
   est plus ample pour éviter l'effet de répétition des anciens pictogrammes. */
.cafe__grains { position: absolute; inset: -4% -18%; z-index: 3; pointer-events: none; }
.cafe__grain {
  position: absolute;
  width: var(--grain-size);
  max-width: none;
  animation: cafe-grain-float var(--grain-duration) ease-in-out var(--grain-delay, 0s) infinite alternate;
}
@keyframes cafe-grain-float {
  to { transform: translate(var(--grain-x), var(--grain-y)) rotate(var(--grain-rotate)); }
}
.cafe__grain--1 { --grain-size: 7.5rem; --grain-duration: 4.6s; --grain-x: 1.1rem; --grain-y: -2rem; --grain-rotate: 13deg; top: 4%; left: -8%; }
.cafe__grain--2 { --grain-size: 6rem; --grain-duration: 5.4s; --grain-delay: -1.2s; --grain-x: -1.4rem; --grain-y: 1.7rem; --grain-rotate: -16deg; top: 32%; right: 10%; z-index: -1; }
.cafe__grain--3 { --grain-size: 7rem; --grain-duration: 4.9s; --grain-delay: -2.6s; --grain-x: 1.8rem; --grain-y: 1.1rem; --grain-rotate: 10deg; bottom: 2%; left: -10%; }

/* Le bloc Passeport (`.cafe__passport`) est monté dans base.css : le
   Protocole Kiru l'utilise aussi depuis le 20/08/2026. */

/* ------------------------------------------------------ 9. Principe */
/* `.split` est monté dans base.css : le Manifeste l'utilise aussi */

.timeline {
  display: grid;
  gap: 1rem;
  margin-top: clamp(2.5rem, 5vw, 4rem);
}
.timeline__item {
  display: grid;
  grid-template-columns: auto 1fr;
  grid-template-rows: auto auto;
  align-items: center;
  gap: 0.15rem 0.9rem;
  padding: 1.1rem 1.25rem;
  border: var(--stroke);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--pop-sm);
}
.timeline__num {
  grid-row: 1 / 3;
  display: grid;
  place-items: center;
  width: 2.4rem;
  height: 2.4rem;
  border: var(--stroke-thin);
  border-radius: 50%;
  background: var(--turquoise);
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 800;
}
.timeline__label { font-weight: 600; line-height: 1.25; }
.timeline__when {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--muted);
}

/* ------------------------------------------- 9c. Bande image
   Emplacement réservé pour une grande image rectangulaire. Le format est
   porté par la figure et non par le contenu : le cadre garde la même
   place avant et après l'arrivée du visuel, donc la page ne saute pas au
   remplacement. Les hachures signalent qu'il s'agit d'un trou à combler,
   pas d'un aplat décoratif. */
.bigfig { margin: 0; }
.bigfig__slot,
.bigfig__img {
  aspect-ratio: 16 / 7;
  width: 100%;
  border: var(--stroke);
  border-radius: var(--r);
  box-shadow: var(--pop);
}
.bigfig__img { object-fit: cover; height: auto; }
.bigfig__slot {
  display: grid;
  place-items: center;
  background-color: var(--paper);
  background-image: repeating-linear-gradient(
    -45deg,
    rgba(18, 15, 16, 0.06) 0 0.5rem,
    transparent 0.5rem 1.25rem
  );
}
.bigfig__hint {
  padding: 0.55rem 1.1rem;
  border: var(--stroke-thin);
  border-radius: var(--r-pill);
  background: var(--paper);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}
/* en colonne étroite, le 16/7 réduit l'image à un bandeau : on la
   redresse pour qu'elle garde du corps */
@media (max-width: 47.99rem) {
  .bigfig__slot,
  .bigfig__img { aspect-ratio: 4 / 3; }
}

/* ---------------------------------------------------------- 10. Kiru */
/* titre et sur-titre resserrés : dans une section qui doit tenir dans la
   fenêtre, ils prenaient 163 px à eux seuls */
.kiru__head { display: grid; gap: 0.85rem; margin-bottom: clamp(1.75rem, 3vw, 2.25rem); }
.kiru__title { margin: 0; }
.section--tight .sec-head { margin-bottom: 0.75rem; }

/* --------------------------------- 9b. Kiru : deux bandes
   Les deux cartes empilaient six blocs chacune : quelles que soient les
   marges, une colonne de six blocs se lit comme un tas. Ici, deux bandes
   séparées d'un filet, chacune en trois colonnes — le propos, la pièce à
   conviction, la donnée — et rien n'empile plus de trois éléments.
   Aucune opacité sur les textes : la hiérarchie passe par le corps et le
   poids, un texte à 60 % d'opacité se lit comme désactivé. */
.band {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  padding-top: clamp(1.15rem, 2.2vw, 1.5rem);
  border-top: 0.0625rem solid var(--line-dark);
}
.band + .band { margin-top: clamp(1.5rem, 2.75vw, 2rem); }

/* jeton plein plutôt qu'un mot en petites capitales : c'est le vocabulaire
   du site (trait épais, couleur plate) et ça donne un point d'entrée à la
   bande au lieu d'une ligne de texte de plus */
.band__label {
  display: inline-block;
  margin: 0 0 0.9rem;
  padding: 0.35rem 0.85rem;
  border: var(--stroke-thin);
  border-color: var(--ink);
  border-radius: var(--r-pill);
  background: var(--turquoise);
  color: var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.12em;
  text-transform: uppercase;
}
.band__label--ink { background: var(--ink); color: var(--paper); border-color: var(--ink); }

.band__title {
  margin: 0 0 0.85rem;
  font-family: var(--font-display);
  font-size: clamp(1.35rem, 2.1vw, 1.7rem);
  font-weight: 700;
  line-height: 1.18;
  color: var(--paper);
}
.section--ink .band__text,
.section--ink .band__note,
.section--ink .gauge__note {
  margin: 0;
  font-size: 0.96rem;
  line-height: 1.6;
  color: var(--paper);
}
.section--ink .band__note { margin-top: 0.9rem; font-size: 0.88rem; }
.band__text strong { font-weight: 600; }

/* la jauge : le chiffre porte la bande, la barre le prolonge */
.gauge { align-self: start; }
.gauge__value {
  margin: 0;
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.6vw, 3.75rem);
  font-weight: 800;
  line-height: 1;
  color: var(--yellow);
}
/* La barre oblique est ici et pas dans le champ : celui qui édite écrit
   « 258 », pas « /258 ». */
.gauge__total { font-size: 0.4em; color: var(--paper); }
.gauge__total::before { content: "/"; }
.gauge__track {
  height: 0.85rem;
  margin: 0.75rem 0 0.85rem;
  border: var(--sw-thin) solid var(--paper);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.gauge__fill {
  display: block;
  height: 100%;
  width: var(--meter-w, 0%);
  background: var(--turquoise);
  transform-origin: left center;
}

/* `fill-loop` et le déclenchement des barres sont montés dans base.css */
.gauge__label {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.66rem;
  line-height: 1.5;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--paper);
}
.section--ink .gauge__note { margin-top: 1rem; font-size: 0.88rem; }

/* le masque, sorti du décor de fond : à 12 % d'opacité derrière le texte il
   ne se lisait pas et brouillait la colonne de droite. Ici il occupe sa
   propre colonne, à pleine densité, face au propos qu'il illustre. */
.band__mask {
  margin: 0;
  justify-self: center;
  width: min(58%, 12rem);
}
.band__mask img { width: 100%; rotate: 4deg; }

/* les chapitres : en ligne sous les trois colonnes, comme une frise */
.chapters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(8.5rem, 1fr));
  gap: 0.9rem 1rem;
}
.chapters__item {
  display: flex;
  align-items: center;
  gap: 0.65rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.74rem;
  line-height: 1.3;
  color: var(--paper);
}
.chapters__icon {
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  flex: 0 0 auto;
  border: var(--sw-thin) solid var(--ink);
  border-radius: 50%;
  background: var(--turquoise);
  color: var(--ink);
}
.chapters__icon svg { width: 1.15rem; height: 1.15rem; }
/* la note de la frise : sous les six pastilles, en retrait */
.band__data--wide .band__note { margin-top: 1rem; }

/* --- bande 2 : panneau plein --- */
.band--slab {
  padding: clamp(1rem, 1.8vw, 1.4rem);
  /* gouttière verticale propre au panneau : celle des bandes ouvertes est
     trop large une fois le contenu enfermé dans un cadre */
  row-gap: clamp(0.85rem, 1.6vw, 1.2rem);
  border: var(--stroke);
  border-radius: var(--r-lg);
  background: var(--yellow);
  /* turquoise et non encre : sur le fond noir de la section, une ombre
     encre serait invisible */
  box-shadow: 0.5rem 0.5rem 0 var(--turquoise);
}
.band--slab .band__title { color: var(--ink); }
.section--ink .band--slab .band__text,
.section--ink .band--slab .band__note { color: var(--ink); }
.band--slab .beanchart img { filter: none; } /* fond clair : le liseré crème n'a plus d'objet */

/* les deux parts, en barres à la même échelle */
/* note de pied de panneau : la comparaison porte sur toute la bande, pas
   sur la colonne des chiffres */
.band__foot {
  margin: 0;
  padding-top: 0.75rem;
  border-top: 0.0625rem solid rgba(18, 15, 16, 0.2);
  font-size: 0.82rem;
  line-height: 1.5;
}
.section--ink .band--slab .band__foot { color: var(--ink); }

/* `.bars` est monté dans base.css : le Protocole Kiru s'en sert aussi */

/* `.section--ink p` (0,2,0) l'emportait sur `.bars__value` (0,1,0) : les
   chiffres du panneau jaune passaient en creme et devenaient illisibles */
.section--ink .band--slab .bars__value,
.section--ink .band--slab .bars__label { color: var(--ink); }

/* les deux parts : le chiffre, puis ce qu'il désigne */
.shares { display: grid; gap: 1.15rem; margin: 0; }
.shares dt {
  font-family: var(--font-display);
  font-size: clamp(1.6rem, 2.8vw, 2.05rem);
  font-weight: 800;
  line-height: 1;
  color: var(--paper);
}
.shares__row--now dt { color: var(--yellow); }
.shares dd { margin: 0.3rem 0 0; font-size: 0.82rem; line-height: 1.4; color: var(--paper); }

/* l'appel sort des colonnes et se centre : il porte sur la section entière */
.kiru__cta { display: flex; justify-content: center; margin-top: clamp(1.5rem, 2.75vw, 2rem); }


/* ------------------------------------------------------- 11. Terroir
   Trois bandes empilées — ouverture chiffrée, la route sur un panneau
   sombre, la voix et les notes — au lieu d'une colonne de texte face à
   une illustration. Sur fond crème : c'est le turquoise des tuiles et le
   panneau noir qui portent la couleur, pas la surface. */

/* --- bande 1 : ouverture --- */
.terroir__head { display: grid; gap: clamp(1.35rem, 3vw, 2.25rem); }

/* sur-titre prolongé par un filet : il tient la largeur de la bande */
.rule-kicker {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  font-weight: 500;
  letter-spacing: 0.18em;
  line-height: 1.4;
  text-transform: uppercase;
}
.rule-kicker::after {
  content: "";
  flex: 1;
  height: var(--sw-thin);
  background: var(--ink);
}

/* pas de mesure imposée : le titre tient sa ligne complète */
.terroir__title { max-width: none; }

/* les trois chiffres : tuiles turquoise sur le crème — c'est la couleur
   du terroir dans la palette, et sur fond crème des tuiles crème
   n'existeraient pas */
.figures { display: grid; gap: 1rem; margin: 0; }
.figures__item {
  padding: 1.1rem 1.25rem 1.25rem;
  border: var(--stroke);
  border-radius: var(--r);
  background: var(--turquoise);
  box-shadow: var(--pop-sm);
}
.figures dt {
  font-family: var(--font-display);
  font-size: clamp(2.1rem, 5vw, 2.9rem);
  font-weight: 800;
  line-height: 1;
}
.figures dd {
  margin: 0.45rem 0 0;
  font-size: 0.86rem;
  line-height: 1.45;
  color: var(--ink-soft);
}

/* --- bande 2 : la route ---
   Plus de panneau sombre : les quatre temps sont posés sur la surface de la
   section, centrés, et l'illustration est nue — son PNG est déjà détouré,
   un cadre papier n'ajoutait qu'une boîte. */
.route { margin-top: clamp(2.25rem, 5vw, 3.5rem); text-align: center; }
.route__label {
  margin: 0 0 clamp(1.5rem, 3vw, 2.25rem);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: clamp(0.85rem, 1.3vw, 1rem);
  font-weight: 600;
  letter-spacing: 0.12em;
  line-height: 1.5;
  text-transform: uppercase;
  color: var(--ink);
}

/* la frise reste horizontale, comme dans le panneau d'origine : numéro,
   pastille et nom empilés et centrés, reliés par un pointillé */
.route__steps {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.5rem;
}
.route__step { position: relative; display: grid; justify-items: center; gap: 0.4rem; }
/* le pointillé relie les pastilles dès le mobile */
.route__step:not(:last-child)::after {
  content: "";
  position: absolute;
  top: 2.3rem;
  left: calc(50% + 1.7rem);
  right: calc(-50% + 1.7rem);
  border-top: var(--sw-thin) dashed rgba(18, 15, 16, 0.28);
}
.route__num {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.62rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  line-height: 1;
  color: var(--muted);
}
.route__icon {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--stroke-thin);
  border-radius: 50%;
  color: var(--ink);
}
.route__icon svg { width: 1.35rem; height: 1.35rem; }
.route__icon--yellow { background: var(--yellow); }
.route__icon--pink { background: var(--pink); }
.route__icon--turquoise { background: var(--turquoise); }
.route__icon--orange { background: var(--orange); }
.route__name {
  max-width: 22ch;
  font-family: var(--font-display);
  font-size: clamp(0.78rem, 2.2vw, 1.15rem);
  font-weight: 600;
  line-height: 1.2;
  color: var(--ink);
}

@media (min-width: 30rem) {
  .route__steps { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}

/* l'illustration, sans cadre ni fond */
.route__figure {
  width: min(100%, 30rem);
  margin: clamp(1.75rem, 3.5vw, 2.5rem) auto 0;
}
.route__figure img { width: 100%; }
.route__figure figcaption { margin-top: 0.35rem; font-size: 1.2rem; }

/* --- la vidéo qui s'ouvre au défilement ---
   `--p` va de 0 (cadrée, trait épais, ombre dure) à 1 (pleine largeur, sans
   cadre) ; le script ne fait que poser cette valeur, toute l'interpolation
   est ici. La piste est plus haute que l'écran : la scène y reste collée, ce
   qui donne le temps d'ouvrir puis de tenir avant que la page reprenne.
   Largeurs en % et non en vw : la barre de défilement ne doit pas créer de
   débordement horizontal. */
.filmstrip { margin-top: clamp(2.5rem, 5vw, 4rem); }
.filmstrip__track { height: 220vh; }
.filmstrip__stage {
  position: sticky;
  top: 0;
  display: grid;
  place-items: center;
  height: 100svh;
  overflow: clip;
}
.filmstrip__frame {
  --p: 0;
  position: relative;
  width: calc(58% + 42% * var(--p));
  margin: 0;
  aspect-ratio: 16 / 9;
  /* à l'ouverture complète, le cadre prend aussi toute la hauteur : sans ce
     min-height, le 16/9 laissait deux bandes crème en haut et en bas */
  min-height: calc(100svh * var(--p));
  max-height: 100svh;
  border: calc(var(--sw) * (1 - var(--p))) solid var(--ink);
  border-radius: calc(var(--r-lg) * (1 - var(--p)));
  /* l'ombre dure du système, qui s'efface quand l'image prend tout l'écran */
  box-shadow:
    calc(0.5rem * (1 - var(--p))) calc(0.5rem * (1 - var(--p))) 0 var(--turquoise);
  overflow: hidden;
}
.filmstrip__video { width: 100%; height: 100%; object-fit: cover; }

/* la légende et la commande passent en surimpression une fois plein cadre */
.filmstrip__cap {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  padding: 0.7rem 1rem;
  background: linear-gradient(transparent, rgba(18, 15, 16, 0.72));
  color: var(--paper);
  font-family: "Caveat Brush", cursive;
  font-size: clamp(1rem, 1.6vw, 1.3rem);
  text-align: center;
}
.filmstrip__toggle {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  padding: 0;
  border: 0.0625rem solid var(--line-dark);
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.45);
  color: rgba(255, 253, 244, 0.9);
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.filmstrip__toggle:hover { background: var(--nav-hover-sub); color: #000; border-color: var(--nav-hover-sub); }
.filmstrip__toggle svg { width: 1.05rem; height: 1.05rem; }

/* Sans JS, ou en mouvement réduit : pas de collage, pas d'ouverture — la
   vidéo est simplement posée dans la page, à sa taille cadrée. */
.filmstrip--static .filmstrip__track { height: auto; }
.filmstrip--static .filmstrip__stage {
  position: static;
  height: auto;
  padding-inline: 1rem;
  overflow: visible;
}

/* --- bande 3 : la voix et les notes --- */
.terroir__foot {
  display: grid;
  gap: clamp(1.5rem, 4vw, 2.5rem);
  margin-top: clamp(2.25rem, 5vw, 3.5rem);
  justify-items: center;
}
.terroir__mask { width: min(58%, 13rem); }
.terroir__say { display: grid; gap: clamp(1.25rem, 3vw, 1.75rem); }
/* la phrase la plus forte de la section : manuscrite et grande, elle
   sort du registre « paragraphe » où elle était enterrée */
.terroir__claim {
  margin: 0;
  font-size: clamp(1.45rem, 3.2vw, 2.05rem);
  line-height: 1.22;
}

.terroir__notes { display: grid; gap: 1.5rem; }
.tnote h3 {
  margin: 0 0 0.5rem;
  padding-bottom: 0.45rem;
  border-bottom: var(--sw-thin) solid var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
}
.tnote p { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }

/* Les offres (.plans/.plan) sont montées dans base.css :
   Devenir sociétaire les affiche aussi. */

/* ---------------------------------------------- 13. Non encore décidé */
.pending__art { display: grid; place-items: center; }
.pending__mask {
  width: min(88%, 26rem);
  animation: pending-float 6s ease-in-out infinite alternate;
}
/* flottement discret : quelques pixels et une pointe de rotation, assez
   pour que le personnage respire sans attirer l'œil hors du texte */
@keyframes pending-float {
  from { transform: translateY(-0.65rem) rotate(-1.2deg); }
  to   { transform: translateY(0.65rem) rotate(1.2deg); }
}

/* ----------------------------------------------------------- 14. FAQ */
.faq { display: grid; gap: 0.75rem; margin-top: clamp(2rem, 4vw, 3rem); }
.faq__item {
  border: var(--stroke);
  border-radius: var(--r);
  background: var(--paper);
  overflow: hidden;
  transition: box-shadow 160ms ease;
}
.faq__item[open] { box-shadow: var(--pop-sm); }
.faq__item summary {
  position: relative;
  padding: 1.1rem 3.25rem 1.1rem 1.25rem;
  font-family: var(--font-display);
  font-size: 1.1rem;
  font-weight: 600;
  line-height: 1.3;
  cursor: pointer;
  list-style: none;
}
.faq__item summary::-webkit-details-marker { display: none; }
.faq__item summary::after {
  content: "";
  position: absolute;
  right: 1.25rem;
  top: 50%;
  width: 0.85rem;
  height: 0.85rem;
  margin-top: -0.425rem;
  background:
    linear-gradient(var(--ink), var(--ink)) center/100% 0.1875rem no-repeat,
    linear-gradient(var(--ink), var(--ink)) center/0.1875rem 100% no-repeat;
  transition: transform 200ms ease;
}
.faq__item[open] summary::after { transform: rotate(90deg); background-size: 100% 0.1875rem, 0 100%; }
.faq__body { padding: 0 1.25rem 1.25rem; }
.faq__body p { margin: 0; line-height: 1.62; color: var(--ink-soft); }

/* --------------------------------------------------- 15. Appel final */
.final {
  /* la vague est peinte au-dessus du bloc : ce padding n'avait rien à
     dégager en haut, il ne creusait qu'un vide */
  padding-block: clamp(2.25rem, 4.5vw, 3.5rem) 0;
  background: var(--purple);
  color: var(--paper);
}
.final__grid { display: grid; gap: 1.5rem; align-items: end; }
/* la main monte du bas, mais le texte n'a pas à la suivre : il se centre
   sur la hauteur du bloc */
.final__text { align-self: center; }

/* en une colonne, la composition est centrée : sinon le texte s'aligne à
   gauche pendant que l'illustration reste au milieu */
.final__text { text-align: center; }
.final__title { margin-inline: auto; }
.final__text .actions { justify-content: center; }
.final__grid > * { min-width: 0; }
.final__title { max-width: 20ch; }
.final__art {
  width: min(54%, 13rem);
  justify-self: center;
  margin-bottom: -0.0625rem;
  filter: drop-shadow(0 1rem 1.5rem rgba(0, 0, 0, 0.3));
}


/* ------------------------------------------------- Points d'arrêt */
@media (min-width: 48rem) {
  .timeline { grid-template-columns: repeat(3, 1fr); }
  .pillars:not(.pillars--stack) { grid-template-columns: repeat(3, 1fr); gap: 1.25rem; }

  .final__grid { grid-template-columns: 1.15fr 0.85fr; gap: 2.5rem; }
  /* deux colonnes : le texte reprend son alignement à gauche */
  .final__text { text-align: left; }
  .final__title { margin-inline: 0; }
  .final__text .actions { justify-content: flex-start; }

  .final__art { width: min(100%, 15rem); justify-self: end; }

  /* terroir : les trois chiffres en ligne, la route en deux colonnes
     (itinéraire | fiche illustrée), le personnage face à sa phrase */
  .figures { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.25rem; }

  /* la frise d'un côté, l'illustration de l'autre */
  .route {
    display: grid;
    grid-template-columns: minmax(0, 1.25fr) minmax(0, 0.75fr);
    align-items: center;
    column-gap: clamp(2rem, 4vw, 3.25rem);
  }
  .route__label { grid-column: 1 / -1; }
  .route__figure { margin: 0; width: 100%; }

  /* la piste est plus longue quand l'écran est large : plus de course pour
     ouvrir sans que ça paraisse brusque */
  .filmstrip__track { height: 260vh; }

  /* pastilles et libellés à taille pleine */
  .route__steps { gap: 0.75rem; }
  .route__step { gap: 0.5rem; }
  .route__icon { width: 3.75rem; height: 3.75rem; }
  .route__icon svg { width: 1.8rem; height: 1.8rem; }
  .route__num { font-size: 0.68rem; letter-spacing: 0.12em; }
  .route__step:not(:last-child)::after {
    top: 2.95rem;
    left: calc(50% + 2.25rem);
    right: calc(-50% + 2.25rem);
  }

  .terroir__foot {
    grid-template-columns: 13.5rem minmax(0, 1fr);
    align-items: center;
    justify-items: start;
  }
  .terroir__mask { width: 100%; }
  .terroir__notes { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2rem; }

  .pending__mask { width: min(84%, 25rem); }
}

@media (min-width: 64rem) {
  /* les trois colonnes de la bande : propos | pièce | donnée */
  .band {
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.75fr) minmax(0, 0.9fr);
    gap: clamp(1.75rem, 3.5vw, 3rem);
    align-items: start;
  }
  .band__foot { grid-column: 1 / -1; }

  /* bande 1 : le propos, le masque qui l'illustre, puis la jauge — et les
     chapitres en frise sous les trois, où ils ont la largeur pour tenir
     sur une seule ligne */
  .band--proof {
    grid-template-columns: minmax(0, 1.1fr) minmax(0, 0.62fr) minmax(0, 0.9fr);
    row-gap: clamp(1.5rem, 2.6vw, 2.25rem);
  }
  .band__data--wide { grid-column: 1 / -1; }
  .band__mask { width: 100%; justify-self: stretch; }
  .chapters { grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 1rem; }

  /* décor illustré en bord de section */
  .decor--cherries-left {
    bottom: 2rem;
    left: -4rem;
    width: 13rem;
    transform: rotate(-16deg);
  }
  .decor--cherries-right {
    top: 3rem;
    right: -3.5rem;
    width: 10rem;
    transform: rotate(24deg);
  }
  .decor--leaf {
    top: 6rem;
    left: -3rem;
    width: 11rem;
    opacity: 0.75;
    transform: rotate(-12deg);
  }

}