/* ============================================================
   CHIDO Café — base.css
   Le socle commun à toutes les pages : jetons de couleur et de trait,
   remise à zéro, primitives de mise en page, typographie, boutons,
   étiquettes, barre de navigation, pied de page et révélations au
   défilement.

   RÈGLE : une règle n'entre ici que si elle sert (ou servira) sur plus
   d'une page. Ce qui n'existe que sur une page vit dans sa feuille —
   home.css, boutique.css… Quand une deuxième page réclame un bloc, on
   le remonte ici plutôt que de le recopier.
   ============================================================ */

/* Système « affiche » : trait noir épais, ombres portées dures,
   couleurs plates en accent, papier crème comme toile de fond. */

/* ---------------------------------------------------------- 1. Jetons */
:root {
  --ink: #120f10;
  --ink-soft: #2a2426;
  --paper: #fffdf4;
  --paper-2: #fdf3d8;
  --yellow: #ffe94a;
  --pink: #ef59a7;
  --purple: #8d58a6;
  --turquoise: #08b8b4;
  --green: #078f60;
  --orange: #ff8426;
  --muted: #6d6768;

  --on-dark: rgba(255, 253, 244, 0.78);
  --line-dark: rgba(255, 253, 244, 0.22);

  /* couleurs de survol du menu, reprises de la v3 */
  --nav-hover: #f2a3f0;
  --nav-hover-sub: #fcff58;
  --nav-hover-ink: #141414;

  /* trait */
  --sw: 0.1875rem;
  --sw-thin: 0.125rem;
  --stroke: var(--sw) solid var(--ink);
  --stroke-thin: var(--sw-thin) solid var(--ink);

  /* ombres dures */
  --pop: 0.5rem 0.5rem 0 var(--ink);
  --pop-sm: 0.3125rem 0.3125rem 0 var(--ink);
  --pop-light: 0.5rem 0.5rem 0 var(--paper);

  /* rayons */
  --r-sm: 0.75rem;
  --r: 1.25rem;
  --r-lg: 2rem;
  --r-pill: 62.4375rem;

  /* rythme vertical */
  --gap: clamp(1.75rem, 4vw, 3rem);
  --section-y: clamp(4.5rem, 10vw, 8.5rem);

  /* familles — Sour Gummy porte le corps et les titres ; le mono des
     kickers et le Caveat des griffonnages gardent leur rôle d'accent */
  --font-body: "Sour Gummy", system-ui, sans-serif;
  --font-display: "Sour Gummy", system-ui, sans-serif;
  --font-variation: "wdth" 100;
  --display-tracking: -0.01em;

  --grain: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");

  /* transition ondulée entre les sections */
  --wave: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 1440 120' preserveAspectRatio='none'%3E%3Cpath d='M0 72C160 22 320 12 480 42s320 70 480 48 300-70 480-58v88H0Z'/%3E%3C/svg%3E");
  --wave-h: clamp(2.25rem, 4.5vw, 4rem);

  /* Le grain de café, en fond d'un bouton ou d'une puce. Même dessin que
     l'icône « grain entier » de la fiche produit. */
  --grain-cafe: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cellipse cx='20' cy='20' rx='8' ry='11' fill='none' stroke='%23120f10' stroke-width='3'/%3E%3Cpath d='M15 9 C20 17 20 23 25 31' fill='none' stroke='%23120f10' stroke-width='3' stroke-linecap='round'/%3E%3C/svg%3E");
}

/* ---------------------------------------------------------- 2. Base */
*, *::before, *::after { box-sizing: border-box; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: 6.5rem;
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 400;
  line-height: 1.6;
  font-optical-sizing: auto;
  font-variation-settings: var(--font-variation);
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}
body.menu-open { overflow: hidden; }

/* `hidden` doit l'emporter sur les blocs qui déclarent leur `display`.
   Sans cette ligne, un `.compte-layout[hidden]` ou un
   `.compte-order[hidden]` restait affiché : la grille annoncée par la
   classe battait le `display:none` que le navigateur attache à
   l'attribut. C'est le seul endroit du socle où masquer se décide. */
[hidden] { display: none !important; }

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }
button { font: inherit; color: inherit; }
figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }
sup { font-size: 0.6em; }
::selection { background: var(--yellow); color: var(--ink); }

:where(a, button, summary, details):focus-visible {
  outline: 0.1875rem solid var(--pink);
  outline-offset: 0.25rem;
  border-radius: 0.25rem;
}

.skip {
  position: absolute;
  left: -100vw;
  top: 0;
  z-index: 100;
  padding: 0.75rem 1.25rem;
  background: var(--yellow);
  border: var(--stroke);
  font-weight: 700;
}
.skip:focus { left: 0.75rem; top: 0.75rem; }

/* Réservé aux lecteurs d'écran : un intitulé que la mise en page n'a pas
   besoin d'afficher mais qu'une table ou un champ doit porter. */
.sr-only {
  position: absolute;
  width: 0.0625rem;
  height: 0.0625rem;
  padding: 0;
  margin: -0.0625rem;
  overflow: hidden;
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* ------------------------------------------------- 3. Mise en page */
.shell {
  width: min(100% - 2rem, 78rem);
  margin-inline: auto;
}
.shell--narrow { width: min(100% - 2rem, 54rem); }

.section {
  position: relative;
  isolation: isolate;
  padding-block: var(--section-y);
  --wave-fill: var(--paper);
}
.section--paper2 { background: var(--paper-2); --wave-fill: var(--paper-2); }
/* Section dense : deux colonnes déjà longues, le rythme vertical normal
   la faisait dépasser la hauteur de la fenêtre.
   Le bas ne peut pas être serré autant que le haut : la section suivante
   remonte de `--wave-h` par sa vague et viendrait mordre les cartes. */
.section--tight {
  --section-y: clamp(2.25rem, 3.5vw, 2.75rem);
  padding-bottom: calc(var(--wave-h) + clamp(1.5rem, 3vw, 2.5rem));
}
.section--ink { --wave-fill: var(--ink); }
.final { --wave-fill: var(--purple); }

/* la section « déborde » vers le haut par une vague de sa propre couleur */
.wave-top::before {
  content: "";
  position: absolute;
  z-index: -1;
  left: 0;
  right: 0;
  top: calc(-1 * var(--wave-h));
  height: calc(var(--wave-h) + 0.0625rem);
  background-color: var(--wave-fill);
  -webkit-mask-image: var(--wave);
  mask-image: var(--wave);
  -webkit-mask-size: 100% 100%;
  mask-size: 100% 100%;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  pointer-events: none;
}

/* illustrations posées sur une tache organique plutôt qu'encadrées */
.blob { position: relative; }
.blob::before {
  content: "";
  position: absolute;
  z-index: -1;
  inset: 5% -9% 3% -9%;
  border-radius: 58% 42% 47% 53% / 52% 48% 52% 48%;
  background: var(--blob, rgba(255, 233, 74, 0.18));
  transform: rotate(-7deg);
}
.blob--yellow { --blob: rgba(255, 233, 74, 0.16); }
.blob--pink { --blob: rgba(239, 89, 167, 0.2); }
.blob--purple { --blob: rgba(141, 88, 166, 0.24); }
.blob--turquoise { --blob: rgba(8, 184, 180, 0.18); }

/* éléments illustrés qui débordent en bord de section */
.decor {
  position: absolute;
  z-index: -1;
  pointer-events: none;
  user-select: none;
}
@media (max-width: 63.99rem) { .decor { display: none; } }

.section--ink,
.hero,
.final,
.footer { position: relative; isolation: isolate; }

.section--ink { background: var(--ink); color: var(--paper); }
.section--ink .copy,
.section--ink p:not(.tag) { color: var(--on-dark); }

.section--yellow { background: var(--yellow); --wave-fill: var(--yellow); }
.section--yellow::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -2;
  background-image: radial-gradient(var(--ink) 0.0625rem, transparent 0.0625rem);
  background-size: 1.5rem 1.5rem;
  opacity: 0.12;
  pointer-events: none;
}

/* Trame d'impression sur un fond clair. Modificateur et non règle sur
   `.section--paper2` : la classe est partagée avec la section du sachet,
   qui doit rester lisse. `::after` et pas `::before` — celui-ci porte
   déjà la vague de transition.
   `multiply` et non `overlay` : sur le crème, overlay éclaircit le bruit
   au lieu de le creuser et la trame disparaît. */
.section--grain::after {
  content: "";
  position: absolute;
  /* la trame monte jusqu'au sommet de la vague : limitée au corps de la
     section, la bande de transition restait lisse et se lisait comme une
     autre couleur que le reste */
  inset: calc(-1 * var(--wave-h)) 0 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.22;
  mix-blend-mode: multiply;
  pointer-events: none;
  /* deux couches de masque : la vague en haut, un plein pour le reste —
     la trame prend exactement la silhouette visible de la section */
  -webkit-mask-image: var(--wave), linear-gradient(#000, #000);
  mask-image: var(--wave), linear-gradient(#000, #000);
  -webkit-mask-size: 100% calc(var(--wave-h) + 0.0625rem), 100% calc(100% - var(--wave-h));
  mask-size: 100% calc(var(--wave-h) + 0.0625rem), 100% calc(100% - var(--wave-h));
  -webkit-mask-position: top center, bottom center;
  mask-position: top center, bottom center;
  -webkit-mask-repeat: no-repeat, no-repeat;
  mask-repeat: no-repeat, no-repeat;
}

/* grain d'impression sur les fonds sombres */
.hero::after,
.section--ink::after,
.final::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background-image: var(--grain);
  opacity: 0.13;
  mix-blend-mode: overlay;
  pointer-events: none;
}

/* --------------------------------------------------- 4. Typographie */
.display {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.2vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}
.display--md { font-size: clamp(2rem, 4.8vw, 3.5rem); }
.kiru__title { font-size: clamp(1.9rem, 3.6vw, 2.75rem); }
.display--sm { font-size: clamp(1.45rem, 2.6vw, 1.9rem); line-height: 1.12; }
.display em { font-style: normal; color: var(--pink); }
.hero__title em, .phero__title em, .kiru__title em, .final__title em { color: var(--yellow); }
.display em.em--pink { color: var(--pink); }

.kicker {
  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;
  color: var(--ink);
}
.kicker--light { color: var(--yellow); }

.lead {
  max-width: 44rem;
  margin: 1.25rem 0 0;
  font-size: clamp(1.05rem, 1.5vw, 1.25rem);
  font-weight: 400;
  line-height: 1.62;
  color: var(--ink-soft);
}
.section--ink .lead,
.hero .lead { color: var(--on-dark); }

.copy { margin-top: 1.25rem; font-size: 1.03rem; line-height: 1.68; color: var(--ink-soft); }
.copy p { margin: 0 0 1rem; }
.copy p:last-child { margin-bottom: 0; }
.copy strong { font-weight: 600; color: var(--ink); }

.scribble {
  font-family: "Caveat Brush", cursive;
  font-size: 1.35rem;
  line-height: 1.3;
}

.note {
  margin: 1.75rem 0 0;
  padding: 0.9rem 1.1rem;
  border-left: 0.375rem solid var(--orange);
  background: rgba(255, 132, 38, 0.1);
  border-radius: 0 var(--r-sm) var(--r-sm) 0;
  font-size: 0.92rem;
  line-height: 1.55;
  color: var(--ink-soft);
}
/* en-tête de section : sur-titre seul */
.sec-head {
  display: flex;
  align-items: center;
  margin-bottom: 1.25rem;
}

/* variantes centrées (blocs de conversion) */
.sec-head--center { justify-content: center; }
.section--center > .shell > .display,
.section--center .access__intro { text-align: center; }
.section--center .access__intro { margin-inline: auto; }
.section--center .access__intro .lead { max-width: none; margin-inline: auto; }

/* trois piliers du modèle */
.pillars { display: grid; gap: 1.5rem; margin-top: 2.25rem; }
/* sous l'image, la colonne est deux fois moins large : les trois piliers
   passent en liste, icône à gauche, texte à droite — en trois colonnes ils
   se retrouveraient à 150 px chacun */
/* deux colonnes « le propos | l'illustration », la primitive de mise en
   page la plus utilisée du site — d'où sa place ici plutôt que dans une
   feuille de page */
.split { display: grid; gap: var(--gap); align-items: center; }
.split > * { min-width: 0; }
.split__art { justify-self: center; width: min(100%, 30rem); }

.principe__art { display: grid; gap: clamp(1.5rem, 3vw, 2.25rem); align-content: start; }
.principe__figure img { width: 100%; }
.pillars--stack { grid-template-columns: 1fr; gap: 1.1rem; margin-top: 0; }
.pillars--stack .pillars__item {
  grid-template-columns: auto minmax(0, 1fr);
  grid-template-rows: auto auto;
  column-gap: 0.9rem;
  row-gap: 0.15rem;
  align-items: center;
}
.pillars--stack .pillars__icon { grid-row: 1 / 3; margin-bottom: 0; width: 2.5rem; height: 2.5rem; }
.pillars--stack .pillars__icon svg { width: 1.25rem; height: 1.25rem; }
.pillars__item { display: grid; gap: 0.35rem; align-content: start; }
.pillars__icon {
  display: grid;
  place-items: center;
  width: 3rem;
  height: 3rem;
  margin-bottom: 0.35rem;
  border: var(--stroke-thin);
  border-radius: 50%;
  color: var(--ink);
}
.pillars__icon svg { width: 1.45rem; height: 1.45rem; }
.pillars__icon--yellow { background: var(--yellow); }
.pillars__icon--pink { background: var(--pink); }
.pillars__icon--turquoise { background: var(--turquoise); }
.pillars__item strong {
  font-family: var(--font-display);
  font-size: 1.05rem;
  font-weight: 700;
  line-height: 1.2;
}
.pillars__item > span:last-child { font-size: 0.86rem; line-height: 1.45; color: var(--muted); }

/* ------------------------------------------------------ 5. Boutons
   Un seul système pour tous les boutons : trait épais + ombre dure
   décalée. Deux jetons pilotent les variantes, jamais le box-shadow
   directement :
     --btn-shadow : couleur de l'ombre. Règle absolue — elle ne doit
       être ni la couleur de fond du bouton (l'ombre disparaîtrait,
       cas du bouton noir avec ombre encre) ni celle de la surface
       qui le porte (fonds sombres → accent turquoise plus bas).
     --btn-pop : décalage au repos, réduit pour la taille --sm. */
.btn {
  --btn-shadow: var(--ink);
  --btn-pop: 0.3125rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  border: var(--stroke);
  border-radius: var(--r-pill);
  background: var(--yellow);
  color: var(--ink);
  box-shadow: var(--btn-pop) var(--btn-pop) 0 var(--btn-shadow);
  font-family: var(--font-body);
  font-size: 0.9rem;
  font-weight: 700;
  letter-spacing: 0.03em;
  text-align: center;
  text-transform: uppercase;
  cursor: pointer;
  transition: transform 160ms ease, box-shadow 160ms ease, background-color 160ms ease;
}
.btn:hover {
  background: var(--pink);
  color: var(--paper);
  transform: translate(-0.125rem, -0.125rem);
  box-shadow:
    calc(var(--btn-pop) + 0.125rem) calc(var(--btn-pop) + 0.125rem) 0 var(--btn-shadow);
}
/* enfoncé : le bouton rejoint son ombre */
.btn:active {
  transform: translate(var(--btn-pop), var(--btn-pop));
  box-shadow: 0 0 0 var(--btn-shadow);
}

/* fond encre → ombre turquoise : une ombre encre se perdrait dans le
   bouton, une ombre jaune se perdrait sur le crème des cartes */
.btn--dark {
  background: var(--ink);
  color: var(--paper);
  --btn-shadow: var(--turquoise);
}
.btn--dark:hover { background: var(--pink); }

/* contour sur fond clair : même trait, même ombre que les pleins.
   Ombre turquoise plutôt qu'encre : le survol remplit le bouton en
   encre, la couleur de l'ombre ne change donc pas en cours de route */
.btn--ghost {
  background: transparent;
  --btn-shadow: var(--turquoise);
}
.btn--ghost:hover { background: var(--ink); color: var(--paper); }

/* contour sur fond sombre : ombre turquoise, jamais crème sur crème
   (le trait est déjà crème, une ombre crème lirait comme un doublon) */
.btn--ghost-light {
  border-color: var(--paper);
  background: transparent;
  color: var(--paper);
  --btn-shadow: var(--turquoise);
}
.btn--ghost-light:hover { background: var(--paper); color: var(--ink); }

.btn--sm { min-height: 2.5rem; padding: 0.4rem 1.1rem; font-size: 0.75rem; --btn-pop: 0.1875rem; }

/* Surfaces sombres (héros, sections encre, appel final, pied de page,
   barre de nav) : l'ombre encrée serait invisible sur le fond. */
.hero .btn,
.section--ink .btn,
.final .btn,
.footer .btn,
.nav__bar .btn { --btn-shadow: var(--turquoise); }

.actions { display: flex; flex-wrap: wrap; gap: 0.85rem; margin-top: 2rem; }

/* ------------------------------------------ 5 bis. Champs de formulaire
   Ces primitives sont nées dans `societaire.css` pour le bulletin de
   souscription. L'espace client les réclame à son tour (connexion,
   adresses, profil) : elles remontent donc ici, comme le veut la règle
   d'en-tête, plutôt que d'être recopiées dans une deuxième feuille. */
.fields { display: grid; gap: 1rem; }
.field { display: grid; gap: 0.3rem; }
.field > span {
  font-size: 0.78rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--ink-soft);
}
/* l'astérisque du champ requis doit se voir sans se lire comme du texte */
.field > span em { font-style: normal; color: var(--pink); }
.field input,
.field select,
.field textarea {
  width: 100%;
  padding: 0.7rem 0.85rem;
  border: var(--stroke-thin);
  border-radius: var(--r-sm);
  background: var(--paper);
  color: var(--ink);
  font: inherit;
  font-size: 0.92rem;
}
.field textarea { min-height: 6.5rem; resize: vertical; }
.field input:focus-visible,
.field select:focus-visible,
.field textarea:focus-visible {
  outline: 0.1875rem solid var(--pink);
  outline-offset: 0.125rem;
}
.field--wide { grid-column: 1 / -1; }

/* les cases à cocher portent des phrases longues : la case reste en
   haut de la première ligne au lieu de se centrer sur trois lignes */
.checks { display: grid; gap: 0.9rem; }
.check { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 0.7rem; align-items: start; }
.check input {
  width: 1.15rem;
  height: 1.15rem;
  margin: 0.2rem 0 0;
  accent-color: var(--pink);
}
.check span { font-size: 0.86rem; line-height: 1.55; color: var(--ink-soft); }

/* ------------------------------------ 6. Cadres, panneaux, étiquettes */
.frame {
  border: var(--stroke);
  border-radius: var(--r);
  background: var(--paper);
  box-shadow: var(--pop);
  overflow: hidden;
}
.frame img { width: 100%; }
.frame--tilt { transform: rotate(-1.75deg); }
.frame figcaption {
  padding: 0.6rem 1rem 0.85rem;
  border-top: var(--stroke-thin);
  color: var(--ink);
  text-align: center;
}

/* schéma du grain : ni cadre, ni fond, ni ombre. Le liseré crème vient
   d'un empilement de `drop-shadow` sans décalage, qui suit le détourage
   du PNG — sans lui, les contours noirs et le « 10 % avant / 55 % après »
   manuscrit disparaîtraient dans le fond de la carte. */
.beanchart {
  margin: 0;
  width: min(100%, 17rem);
  align-self: center;
  justify-self: center;
}

/* schéma + chiffres : empilés en étroit, côte à côte dès qu'il y a la place */
.beanchart img {
  width: 100%;
  filter:
    drop-shadow(0 0 0.07rem var(--paper))
    drop-shadow(0 0 0.07rem var(--paper));
}

.tag {
  display: inline-block;
  align-self: flex-start;  /* évite l'étirement dans un conteneur flex */
  justify-self: start;     /* et dans une grille, où `align-self` agit sur l'autre axe */
  margin: 0 0 0.9rem;
  padding: 0.35rem 0.8rem;
  border: var(--stroke-thin);
  border-radius: var(--r-pill);
  background: var(--yellow);
  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;
}
.tag--yellow { background: var(--yellow); }
.tag--turquoise { background: var(--turquoise); }
.tag--green { background: var(--green); color: var(--paper); }
.tag--purple { background: var(--purple); color: var(--paper); }
.tag--pink { background: var(--pink); color: var(--paper); }
.tag--muted { background: transparent; border-style: dashed; color: var(--muted); }

/* Une étiquette porte sa propre couleur : son texte est posé sur sa
   pastille, pas sur le fond de la section. Sans cela, `.section--ink p`
   l'emportait en spécificité et peignait en crème le texte d'une pastille
   jaune — blanc sur jaune, illisible. Seule la discrète n'a pas de
   pastille : sur l'encre elle emprunte le crème, et son filet avec elle. */
.section--ink .tag--muted,
.detail-hero .tag--muted {
  color: var(--on-dark);
  border-color: rgba(255, 253, 244, 0.45);
}

/* ------------------------------------------- Le tableau qui se replie
   Une liste de cartes en téléphone, un vrai tableau à partir de 48rem,
   avec un seul balisage : des `<table>` dont les cellules se réempilent.
   En étroit, chaque cellule annonce sa colonne grâce à son `data-label`
   — la même chaîne que l'en-tête, traduite par `data-i18n-label`.

   Né dans l'espace client (commandes, parts, vie coopérative), il sert
   aussi au Protocole Kiru pour la répartition des 11,90 € : il remonte
   donc ici, et son nom ne parle plus d'un seul écran. */
.foldtable { width: 100%; border-collapse: collapse; }
.foldtable caption { text-align: left; padding-bottom: 0.75rem; font-size: 0.85rem; color: var(--muted); }
.foldtable thead { display: none; }
.foldtable tr {
  display: grid;
  gap: 0.4rem;
  padding: 1rem 0;
  border-bottom: var(--stroke-thin);
}
.foldtable tr:last-child { border-bottom: 0; padding-bottom: 0; }
.foldtable td { padding: 0; }
.foldtable td::before {
  content: attr(data-label) " ";
  display: block;
  font: 0.62rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
  font-weight: 600;
  letter-spacing: 0.11em;
  text-transform: uppercase;
  color: var(--muted);
}
.foldtable .foldtable__ref { font: 700 1.05rem/1.2 var(--font-display); }
.foldtable .foldtable__amount { font: 700 1rem/1.2 var(--font-display); }
.foldtable a { text-decoration: underline; text-underline-offset: 0.2em; font-weight: 600; }
.foldtable a:hover { color: var(--pink); }

@media (min-width: 48rem) {
  /* le tableau redevient un tableau : les intitulés repassent en
     en-tête et les `data-label` s'effacent */
  .foldtable thead { display: table-header-group; }
  .foldtable tbody { display: table-row-group; }
  .foldtable tr { display: table-row; padding: 0; }
  .foldtable th {
    padding: 0 0.75rem 0.6rem 0;
    border-bottom: var(--stroke-thin);
    text-align: left;
    font: 600 0.62rem/1.4 "IBM Plex Mono", ui-monospace, monospace;
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--muted);
  }
  .foldtable td {
    padding: 0.95rem 0.75rem 0.95rem 0;
    border-bottom: 0.0625rem solid rgba(18, 15, 16, 0.18);
    vertical-align: top;
  }
  .foldtable tbody tr:last-child td { border-bottom: 0; }
  .foldtable td::before { display: none; }
  .foldtable td:last-child { padding-right: 0; text-align: right; }
}

.ticks { display: grid; gap: 0.65rem; margin: 1.25rem 0 1.5rem; }
.ticks li {
  position: relative;
  padding-left: 1.6rem;
  font-size: 0.95rem;
  line-height: 1.45;
}
.ticks li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.45rem;
  width: 0.9rem;
  height: 0.5rem;
  border-left: 0.1875rem solid var(--ink);
  border-bottom: 0.1875rem solid var(--ink);
  transform: rotate(-45deg);
}
.ticks--none li::before {
  top: 0.6rem;
  width: 0.75rem;
  height: 0;
  border-left: 0;
  border-bottom: 0.1875rem solid var(--muted);
  transform: none;
}

.quote {
  margin: 2rem 0 0;
  padding: 1.4rem 1.5rem;
  border: var(--stroke);
  border-radius: var(--r);
  background: var(--pink);
  color: var(--ink);
  box-shadow: var(--pop-sm);
  transform: rotate(-0.8deg);
}
.quote blockquote {
  margin: 0;
  font-family: "Caveat Brush", cursive;
  font-size: clamp(1.35rem, 2.6vw, 1.75rem);
  line-height: 1.28;
}
.quote__gloss {
  margin: 0.65rem 0 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.78rem;
  line-height: 1.45;
}
/* en espagnol la valeur du dictionnaire est vide : rien ne doit rester */
.quote__gloss:empty { display: none; }

.quote figcaption {
  margin-top: 0.85rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* --------------------------------------- 6a. Barres de proportion
   Deux parts à la même échelle : la comparaison se voit avant de se
   lire. L'accueil s'en sert pour les 55 %, le Protocole Kiru pour
   opposer la filière spécialité à Chido. */
.bars { display: grid; gap: 1.1rem; }
.bars__value {
  margin: 0 0 0.4rem;
  font-family: var(--font-display);
  font-size: clamp(1.65rem, 2.8vw, 2.1rem);
  font-weight: 800;
  line-height: 1;
  color: var(--ink);
}
.bars__track {
  height: 0.85rem;
  border: var(--sw-thin) solid var(--ink);
  border-radius: var(--r-pill);
  overflow: hidden;
}
.bars__fill {
  display: block;
  height: 100%;
  width: var(--w, 0%);
  background: var(--ink);
  transform-origin: left center;
}
.bars__row--now .bars__fill { background: var(--pink); }
.bars__label { margin: 0.45rem 0 0; font-size: 0.8rem; line-height: 1.35; }

/* Les jauges tournent en boucle tant qu'elles sont à l'écran, et restent
   l'essentiel du cycle sur leur valeur finale — c'est la donnée qui doit
   se lire, pas le mouvement.
   On anime `transform: scaleX` et non `width` : la largeur finale reste
   posée en CSS, donc aucun recalcul de mise en page à chaque image. */
@keyframes fill-loop {
  0%   { transform: scaleX(0); animation-timing-function: cubic-bezier(0.22, 1, 0.36, 1); }
  22%  { transform: scaleX(1); }
  86%  { transform: scaleX(1); animation-timing-function: ease-in; }
  100% { transform: scaleX(0); }
}
/* sans JS, la barre est simplement à sa valeur : rien n'est masqué */
.js-reveal .gauge__fill,
.js-reveal .bars__fill { transform: scaleX(0); }
/* `[data-meters]` désigne le conteneur révélé qui porte les barres :
   il était codé en dur sur `.band__data`, propre à l'accueil. Toute page
   peut maintenant poser l'attribut sur son propre bloc. */
.js-reveal .gauge.is-in .gauge__fill,
.js-reveal [data-meters].is-in .bars__fill { animation: fill-loop 5.5s infinite; }

/* --------------------------------------- 6c. Offres
   Les cartes d'offre : l'accueil en montre trois en résumé, Devenir
   sociétaire les détaille. Même composant, deux pages. */
/* --------------------------------------------------------- 12. Plans */
.access__intro { margin-bottom: clamp(2.5rem, 5vw, 3.5rem); }
.plans { display: grid; gap: 1.25rem; align-items: start; }

/* Le titre juste au-dessus des cartes.
   Sur l'accueil, .access__intro sépare le titre des cartes : il y a une
   accroche entre les deux. Sur Devenir sociétaire, le <h2> touche la
   grille — rien entre eux — et deux choses se cognaient : les jambages
   de « aujourd'hui » et la pastille rose, qui déborde de 0,9rem au-dessus
   de la carte et penche de 4°. D'où une marge plus grande que celle de
   l'accueil : elle doit dégager le titre ET la pastille.
   Sélecteur adjacent, donc l'accueil n'y touche pas. */
.display + .plans { margin-top: clamp(3rem, 5.5vw, 4.25rem); }

.plan {
  position: relative;
  display: flex;
  flex-direction: column;
  padding: clamp(1.35rem, 3vw, 1.85rem);
  border: var(--stroke);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--pop-sm);
}
.plan--main { background: var(--paper); box-shadow: var(--pop); }
.plan--muted { background: transparent; border-style: dashed; box-shadow: none; }
.plan h3 { margin: 0 0 0.75rem; }
.plan__price { margin: 0; display: flex; align-items: baseline; gap: 0.5rem; flex-wrap: wrap; }
.plan__price strong {
  font-family: var(--font-display);
  font-size: clamp(2rem, 5vw, 2.6rem);
  font-weight: 800;
  line-height: 1;
}
.plan__price span { font-size: 0.9rem; color: var(--muted); }
.plan__price--text strong { font-size: 1.45rem; letter-spacing: -0.01em; }
.plan__sub { margin: 0.4rem 0 0; font-size: 0.85rem; line-height: 1.45; color: var(--muted); }
.plan .btn { margin-top: auto; width: 100%; }

/* Mention légale : hors des cartes, centrée sous la grille — elle porte
   sur l'offre entière, pas sur la seule carte fondateur. Encre douce et
   pas `--muted` : le texte repose maintenant sur le jaune saturé. */
.plans__legal {
  margin: clamp(1.5rem, 3vw, 2.25rem) 0 0;
  font-size: 0.78rem;
  line-height: 1.55;
  text-align: center;
  text-wrap: pretty;
  color: var(--ink-soft);
}
.plan__sticker {
  position: absolute;
  top: -0.9rem;
  right: 1.25rem;
  padding: 0.4rem 0.85rem;
  border: var(--stroke-thin);
  border-radius: var(--r-pill);
  background: var(--pink);
  color: var(--paper);
  box-shadow: 0.1875rem 0.1875rem 0 var(--ink);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transform: rotate(4deg);
}

/* --------------------------------------- 6b. Pages intérieures
   Le socle des pages autres que l'accueil : un héros sans vidéo, des
   blocs numérotés, et la rangée de liens fléchés qui ferme chaque page.
   Ces trois-là reviennent sur le Manifeste, le Protocole Kiru, ART,
   Les Producteurs et Devenir sociétaire — d'où leur place ici. */

/* Le héros est une `section--ink` : fond, grain et couleur de texte
   viennent déjà de là, il n'ajoute que sa respiration. */
.phero {
  padding-block: clamp(7.5rem, 14vw, 10rem) clamp(3.5rem, 7vw, 5.5rem);
  /* Le fond du héros (image ou vidéo, au choix du client) se pose ici : il faut
     donc un contexte de positionnement et un débordement coupé. Sans fond, ces
     deux lignes ne changent rien. */
  position: relative;
  overflow: hidden;
}
/* Le fond : posé derrière, voilé, et jamais annoncé — c'est un décor. Il n'y a
   pas de z-index négatif ici, l'ordre du DOM suffit et évite de passer sous le
   fond encre de la section. */
.phero__media {
  position: absolute;
  inset: 0;
}
.phero__media img,
.phero__media video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  opacity: 0.55;
}
/* Le voile : dense à gauche, sous le titre, et léger vers la droite où rien
   n'est posé — même logique que le héros de l'accueil. */
.phero__media::after {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(100deg, rgba(18, 15, 16, 0.86) 0%, rgba(18, 15, 16, 0.62) 45%, rgba(18, 15, 16, 0.28) 100%),
    linear-gradient(to top, rgba(18, 15, 16, 0.55) 0%, transparent 45%);
}
.phero__inner { display: grid; gap: 1.1rem; position: relative; }

/* ---------- Le bloc Passeport et son aperçu ----------
   Partagé par l'accueil et le Protocole Kiru, donc monté ici. Le QR est
   décoratif : sur un écran on ne le scanne pas, alors il est enveloppé dans un
   lien qui ouvre le passeport d'un exemplaire de démonstration. */
.cafe__passport {
  display: flex;
  align-items: center;
  gap: 1.05rem;
  width: fit-content;
  margin-top: 1.75rem;
  padding: 0.85rem 1.25rem 0.85rem 0.85rem;
  border: var(--stroke-thin);
  border-radius: var(--r-sm);
  background: var(--paper);
  box-shadow: var(--pop-sm);
}
.cafe__qr { flex: 0 0 auto; width: 5.5rem; height: 5.5rem; border: 0.1875rem solid var(--ink); }
.cafe__passport p { display: grid; gap: 0.18rem; margin: 0; color: var(--ink-soft); font-size: 0.9rem; line-height: 1.35; }
.cafe__passport strong { font-family: var(--font-display); font-size: 1.2rem; line-height: 1.15; }

/* Le lien qui enveloppe le bloc : il ne redessine rien, il ajoute l'indice
   qu'on peut cliquer et il décale l'ombre au survol. */
.qrlink {
  display: inline-block;
  color: inherit;
  text-decoration: none;
}
.qrlink .cafe__passport { transition: transform .18s ease, box-shadow .18s ease; }
.qrlink:hover .cafe__passport,
.qrlink:focus-visible .cafe__passport { transform: translate(-0.1rem, -0.1rem); box-shadow: var(--pop); }
.qrlink__cue {
  display: inline-flex;
  align-items: center;
  gap: .35rem;
  margin-top: .55rem;
  font: 600 .78rem/1.2 var(--font-body);
  color: var(--pink);
  text-decoration: underline;
  text-underline-offset: .25em;
}
.qrlink__cue svg { width: 1rem; height: 1rem; }
/* Sur fond encre le rose perd le contraste : on reprend la couleur du texte. */
.section--ink .qrlink__cue { color: inherit; }

/* ---------- L'aperçu ----------
   Un <dialog> natif : Échap, le piège au clavier et le ::backdrop viennent du
   navigateur. On ne redessine que le cadre. */
.apercu {
  width: min(64rem, 94vw);
  max-width: none;
  height: min(88vh, 60rem);
  padding: 0;
  border: var(--stroke);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--pop);
  overflow: hidden;
}
.apercu::backdrop { background: rgba(18, 15, 16, .72); }
.apercu[open] { display: flex; flex-direction: column; }
.apercu__bar {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .7rem .8rem .7rem 1.1rem;
  border-bottom: var(--stroke-thin);
  background: var(--paper-2);
}
.apercu__title { margin: 0; flex: 1 1 auto; font: 700 .95rem/1.2 var(--font-display); }
.apercu__open { font: 600 .8rem/1.2 var(--font-body); color: var(--ink); text-underline-offset: .25em; }
.apercu__close {
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  width: 2.1rem;
  height: 2.1rem;
  padding: 0;
  border: var(--stroke-thin);
  border-radius: 50%;
  background: var(--paper);
  color: var(--ink);
  cursor: pointer;
}
.apercu__close svg { width: 1.1rem; height: 1.1rem; }
.apercu__frame { flex: 1 1 auto; width: 100%; border: 0; background: var(--paper); }
/* Le fond ne défile pas derrière le dialogue. */
.is-apercu, .is-apercu body { overflow: hidden; }
.phero__title { margin: 0; max-width: 18ch; }
.phero .lead { margin-top: 0; max-width: 46rem; }

/* blocs numérotés : le chiffre porte le bloc, comme un chapitre */
.numbered {
  display: grid;
  gap: clamp(1.5rem, 3vw, 2.25rem);
  margin-top: clamp(2rem, 4vw, 2.75rem);
}
.numbered__item {
  display: grid;
  gap: 0.6rem;
  align-content: start;
  padding: clamp(1.25rem, 2.6vw, 1.75rem);
  border: var(--stroke);
  border-radius: var(--r-lg);
  background: var(--paper);
  box-shadow: var(--pop-sm);
}
.numbered__num {
  margin: 0;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  color: var(--pink);
}
.numbered__title { margin: 0; }
.numbered__text { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
/* sur fond sombre la carte se réduit à un filet : une carte crème y
   ferait trois pavés clairs au milieu du noir */
.section--ink .numbered__item {
  background: transparent;
  border-color: var(--line-dark);
  box-shadow: none;
}
.section--ink .numbered__title { color: var(--paper); }
.section--ink .numbered__text { color: var(--paper); }
.section--ink .numbered__num { color: var(--yellow); }

/* Variante « rail » : une seule colonne, le chiffre dans une pastille à
   gauche et un filet qui relie les étapes. C'est la forme d'un protocole
   — cinq cartes côte à côte se liraient comme cinq options, pas comme
   une suite. Le Protocole Kiru et le parcours d'adhésion s'en servent. */
.numbered--rail { --numbered-cols: 1; gap: 0; }
.numbered--rail .numbered__item {
  position: relative;
  grid-template-columns: auto minmax(0, 1fr);
  column-gap: clamp(1rem, 2.5vw, 1.5rem);
  padding: 0 0 clamp(1.5rem, 3vw, 2.25rem) 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  box-shadow: none;
}
.numbered--rail .numbered__item:last-child { padding-bottom: 0; }
/* le filet part du bas de la pastille et s'arrête à la suivante ; sur le
   dernier pas il n'a plus rien à relier */
.numbered--rail .numbered__item:not(:last-child)::before {
  content: "";
  position: absolute;
  top: 3rem;
  bottom: 0.35rem;
  left: 1.3125rem;
  width: var(--sw-thin);
  background: var(--ink);
  opacity: 0.25;
}
.numbered--rail .numbered__num {
  display: grid;
  place-items: center;
  grid-row: 1 / 3;
  width: 2.75rem;
  height: 2.75rem;
  border: var(--stroke-thin);
  border-radius: 50%;
  background: var(--yellow);
  color: var(--ink);
  font-size: 0.85rem;
  letter-spacing: 0.06em;
}
.numbered--rail .numbered__title,
.numbered--rail .numbered__text { grid-column: 2; }
.section--ink .numbered--rail .numbered__item::before { background: var(--paper); }

/* La phrase qui conclut un développement : elle sort du corps de texte
   parce qu'elle n'explique pas, elle tranche. Trois pages s'en servent —
   le Protocole Kiru, ART et La Coopérative. */
.punchline {
  margin: clamp(1.25rem, 2.5vw, 1.75rem) 0 0;
  max-width: 34rem;
  font-family: var(--font-display);
  font-size: clamp(1.15rem, 2.2vw, 1.45rem);
  font-weight: 700;
  line-height: 1.26;
  color: var(--ink);
}
.section--ink .punchline { color: var(--yellow); }

/* Termes définis côte à côte : le mot porte, la glose suit. Ni une liste
   à puces (ce ne sont pas des caractéristiques) ni un paragraphe. */
.traits { display: grid; gap: 0.9rem; margin: 0; }
.traits div { display: grid; gap: 0.15rem; }
.traits dt { font-family: var(--font-display); font-size: 1.05rem; font-weight: 700; line-height: 1.2; }
.traits dd { margin: 0; font-size: 0.95rem; line-height: 1.6; color: var(--ink-soft); }
.section--ink .traits dt { color: var(--paper); }
.section--ink .traits dd { color: var(--paper); }

/* Rangée de filtres : des pastilles, pas un menu déroulant. Cinq ou huit
   entrées se montrent, elles ne se cherchent pas — et l'état actif se lit
   d'un coup d'œil. La Boutique filtre ses rayons, le Journal ses
   rubriques et ses formats. */
.filters { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.filters button {
  padding: 0.5rem 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;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background-color 160ms ease, color 160ms ease, box-shadow 160ms ease;
}
.filters button:hover { background: var(--paper-2); }
.filters button.is-active {
  background: var(--ink);
  color: var(--paper);
  box-shadow: 0.1875rem 0.1875rem 0 var(--turquoise);
}

/* rangée de liens fléchés : la sortie de chaque page */
.arrowlinks {
  display: flex;
  flex-wrap: wrap;
  gap: 0.9rem 1.85rem;
  margin-top: clamp(1.75rem, 3vw, 2.5rem);
}
.arrowlinks a {
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding-bottom: 0.25rem;
  border-bottom: var(--sw-thin) solid currentColor;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.76rem;
  font-weight: 500;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  transition: color 160ms ease, gap 160ms ease;
}
.arrowlinks a::after { content: "→"; }
.arrowlinks a:hover { color: var(--pink); gap: 0.85rem; }
.section--ink .arrowlinks a:hover { color: var(--yellow); }

/* ---------------------------------------------------- 7. Navigation */
.nav {
  position: fixed;
  inset: 0 0 auto;
  z-index: 60;
  padding: 0.75rem 1rem;
  transition: padding 200ms ease;
}
.nav.is-stuck { padding-top: 0.5rem; }

.nav__bar {
  display: flex;
  align-items: center;
  gap: 1rem;
  width: min(100%, 78rem);
  margin-inline: auto;
  padding: 0.5rem 0.6rem 0.5rem 1rem;
  border: var(--stroke);
  border-radius: var(--r-pill);
  background: var(--ink);
  color: var(--paper);
  /* pas d'ombre dure ici : noir sur noir, elle se lisait comme une
     seconde barre décalée vers le bas et la droite */
  box-shadow: 0 0.375rem 1.25rem rgba(18, 15, 16, 0.16);
}

.nav__logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.nav__logo img { width: auto; height: 2.25rem; }

.nav__utils { display: flex; align-items: center; gap: 0.6rem; margin-left: auto; }

/* sélecteur de langue (FR / ES), repris de la v3 */
.lang {
  display: flex;
  align-items: center;
  gap: 0.125rem;
  padding: 0.1875rem;
  border: 0.0625rem solid var(--line-dark);
  border-radius: var(--r-pill);
  background: rgba(255, 255, 255, 0.08);
}
.lang__opt {
  padding: 0.375rem 0.7rem;
  border: 0;
  border-radius: var(--r-pill);
  background: transparent;
  color: rgba(255, 255, 255, 0.7);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  cursor: pointer;
  transition: background-color 200ms ease, color 200ms ease;
}
.lang__opt:hover { color: var(--paper); }
.lang__opt[data-lang="fr"].is-active { background: var(--nav-hover-sub); color: #000; }
.lang__opt[data-lang="es"].is-active { background: var(--nav-hover); color: #000; }

.nav__toggle {
  display: grid;
  place-items: center;
  width: 2.75rem;
  height: 2.75rem;
  padding: 0;
  border: 0.0625rem solid var(--line-dark);
  border-radius: 50%;
  background: transparent;
  cursor: pointer;
  transition: background-color 200ms ease, border-color 200ms ease;
}
.nav__toggle:hover { background: var(--nav-hover); border-color: var(--nav-hover); }
.nav__toggle:hover .nav__burger,
.nav__toggle:hover .nav__burger::before,
.nav__toggle:hover .nav__burger::after { background: var(--nav-hover-ink); }
.nav__burger,
.nav__burger::before,
.nav__burger::after {
  display: block;
  width: 1.15rem;
  height: 0.125rem;
  border-radius: 0.125rem;
  background: var(--paper);
  transition: transform 200ms ease, opacity 150ms ease;
}
.nav__burger { position: relative; }
.nav__burger::before,
.nav__burger::after { content: ""; position: absolute; left: 0; }
.nav__burger::before { top: -0.375rem; }
.nav__burger::after { top: 0.375rem; }
.is-active .nav__burger { background: transparent; }
.is-active .nav__burger::before { transform: translateY(0.375rem) rotate(45deg); }
.is-active .nav__burger::after { transform: translateY(-0.375rem) rotate(-45deg); }

/* voile derrière le panneau mobile */
.nav:has(.nav__links.is-open)::before {
  content: "";
  position: fixed;
  inset: 0;
  z-index: -1;
  background: rgba(18, 15, 16, 0.62);
  pointer-events: none;
}

/* panneau mobile : carte crème, jamais noir sur noir */
.nav__links {
  position: fixed;
  inset: 5.5rem 1rem auto;
  display: none;
  max-height: calc(100svh - 7rem);
  padding: 0.5rem 1.25rem 1.5rem;
  border: var(--stroke);
  border-radius: var(--r-lg);
  background: var(--paper);
  color: var(--ink);
  box-shadow: 0.5rem 0.5rem 0 var(--turquoise);
  overflow-y: auto;
}
.nav__links.is-open { display: block; }
.nav__links > a,
.nav__summary {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.85rem 0;
  border-bottom: 0.0625rem solid rgba(18, 15, 16, 0.14);
  font-size: 0.95rem;
  font-weight: 600;
  cursor: pointer;
}
.nav__chevron { width: 0.5rem; height: 0.5rem; flex: 0 0 auto; transition: transform 200ms ease; }

/* le lien reste cliquable ; un bouton dédié déplie le sous-menu en mobile */
.nav__details { position: relative; }
.nav__subtoggle {
  position: absolute;
  top: 0;
  right: 0;
  width: 3rem;
  height: 3.2rem;
  border: 0;
  background: transparent;
  cursor: pointer;
}
.nav__sub { display: none; padding: 0.35rem 0 0.75rem 1rem; }
.nav__details.is-open .nav__sub { display: grid; }
.nav__details.is-open .nav__chevron { transform: rotate(180deg); }
.nav__sub a { padding: 0.5rem 0.65rem; border-radius: var(--r-sm); font-size: 0.92rem; color: var(--muted); }
.nav__sub a:hover { background: var(--nav-hover-sub); color: #000; }
.nav__links > a:hover,
.nav__summary:hover { color: var(--nav-hover-ink); }
.nav__cta { margin-top: 1.25rem; width: 100%; gap: 0.5rem; }
.nav__cta:hover { background: var(--nav-hover); color: var(--nav-hover-ink); }
.nav__ctaIcon { width: 1.05rem; height: 1.05rem; flex: 0 0 auto; }

/* Panier : dans le panneau mobile c'est une ligne comme les autres (il
   hérite de `.nav__links > a`), avec son libellé. La pastille ronde
   n'arrive qu'en desktop, où il se glisse entre « Art » et la connexion. */
.nav__cartIcon { width: 1.15rem; height: 1.15rem; flex: 0 0 auto; }

/* ------------------------------------------------------- 16. Footer */
.footer {
  padding-block: clamp(3rem, 6vw, 4.5rem) 2rem;
  background: var(--ink);
  color: var(--paper);
}
/* Petits écrans : une colonne, tout centré — aligné à gauche, le pied
   ressemblait à une liste déséquilibrée sur la moitié de l'écran. */
.footer__top { display: grid; gap: 2.25rem; text-align: center; justify-items: center; }
.footer__col { justify-items: center; }
.footer__brand p {
  max-width: 26rem;
  margin: 1rem auto 0;
  font-size: 0.9rem;
  line-height: 1.6;
  color: var(--on-dark);
}
.footer__logo { width: auto; height: 3.25rem; }
.footer__title {
  margin: 0 0 0.5rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.7rem;
  font-weight: 500;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--yellow);
}
.footer__col { display: grid; gap: 0.5rem; align-content: start; }
.footer__col a { font-size: 0.9rem; color: var(--on-dark); }
.footer__col a:hover { color: var(--yellow); }
.footer__cta { align-content: start; }
.footer__ctaText {
  max-width: 18rem;
  margin: 0 auto 1rem;
  font-size: 0.86rem;
  line-height: 1.5;
  color: var(--on-dark);
}
.footer__bottom {
  margin-top: 2.5rem;
  text-align: center;
  padding-top: 1.5rem;
  border-top: 0.0625rem solid var(--line-dark);
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.72rem;
  letter-spacing: 0.06em;
  color: rgba(255, 253, 244, 0.5);
}

/* -------------------------------------------------- Carrito local */
.cart-badge { display: none; min-width: 1.15rem; padding: 0 .28rem; border-radius: var(--r-pill); background: var(--pink); color: var(--ink); font: 700 .63rem/1.15rem "IBM Plex Mono", monospace; text-align: center; }
.cart-badge.is-visible { display: inline-block; }
.cart-backdrop { position: fixed; z-index: 190; inset: 0; background: rgba(18, 15, 16, .48); opacity: 0; pointer-events: none; transition: opacity 180ms ease; }
.cart-backdrop.is-open { opacity: 1; pointer-events: auto; }
.cart-drawer { position: fixed; z-index: 200; inset: 0 0 0 auto; display: grid; grid-template-rows: auto 1fr auto; width: 100%; padding: 1rem; border-left: 0; background: var(--paper); box-shadow: none; transform: translateX(105%); transition: transform 260ms cubic-bezier(.22,1,.36,1); }
.cart-drawer.is-open { transform: translateX(0); }
.cart-drawer__head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding-bottom: 1rem; border-bottom: var(--stroke-thin); }
.cart-drawer__title { margin: 0; font: 800 1.65rem/1 var(--font-display); }
.cart-close { display: grid; place-items: center; width: 2.5rem; height: 2.5rem; border: var(--stroke-thin); border-radius: 50%; background: var(--yellow); font-size: 1.5rem; cursor: pointer; }
.cart-items { display: grid; align-content: start; gap: .8rem; overflow: auto; padding-block: 1rem; }
.cart-item { display: grid; grid-template-columns: 1fr auto; gap: .45rem .75rem; padding: .9rem; border: var(--stroke-thin); border-radius: var(--r-sm); background: var(--paper-2); }
.cart-item__name { margin: 0; font-weight: 700; line-height: 1.25; }
.cart-item__price { margin: 0; font: 700 1rem/1 var(--font-display); }
.cart-qty { display: flex; align-items: center; gap: .45rem; }
.cart-qty button, .cart-remove { border: var(--stroke-thin); border-radius: .4rem; background: var(--paper); cursor: pointer; font: 700 .85rem/1.7 "IBM Plex Mono", monospace; }
.cart-qty button { width: 1.8rem; }
.cart-remove { padding: 0 .45rem; color: var(--muted); }
.cart-empty { margin: 1.5rem 0; color: var(--muted); }
.cart-drawer__foot { padding-top: 1rem; border-top: var(--stroke-thin); }
.cart-total { display: flex; justify-content: space-between; margin: 0 0 1rem; font: 800 1.25rem/1 var(--font-display); }
.cart-drawer__foot .btn { width: 100%; justify-content: center; }
/* Le bandeau « ajouté au panier ». Vide, il affleurait le bas de la
   fenêtre : `translateY(150%)` d'une boîte de 2 rem ne la sort pas du
   cadre, et une pastille jaune traînait dans le coin de toutes les
   pages. La visibilité tranche la question. */
.cart-toast { position: fixed; z-index: 210; right: 1rem; bottom: 1rem; max-width: calc(100% - 2rem); padding: .8rem 1rem; border: var(--stroke); border-radius: var(--r-sm); background: var(--yellow); box-shadow: var(--pop-sm); font-weight: 700; visibility: hidden; opacity: 0; transform: translateY(150%); transition: transform 180ms ease, opacity 180ms ease; }
.cart-toast.is-visible { visibility: visible; opacity: 1; transform: translateY(0); }
.checkout-grid { display: grid; gap: 2rem; }
.checkout-panel { padding: 1rem; border: var(--stroke); border-radius: var(--r); background: var(--paper); box-shadow: var(--pop-sm); }
.checkout-form { display: grid; gap: .9rem; }
.checkout-form label { display: grid; gap: .3rem; font: .68rem/1.4 "IBM Plex Mono", monospace; letter-spacing: .1em; text-transform: uppercase; }
.checkout-form input { width: 100%; padding: .7rem .8rem; border: var(--stroke-thin); border-radius: var(--r-sm); background: var(--paper); font: inherit; }
.checkout-steps { display: flex; gap: .5rem; margin: 0 0 1.5rem; font: .65rem/1.2 "IBM Plex Mono", monospace; letter-spacing: .06em; text-transform: uppercase; }
.checkout-steps span { padding: .35rem .55rem; border-radius: var(--r-pill); background: var(--paper-2); }
.checkout-steps .is-active { background: var(--yellow); }
@media (min-width: 30rem) {
  .cart-drawer { width: min(100%, 29rem); padding: 1.25rem; border-left: var(--stroke); box-shadow: -0.5rem 0 0 var(--ink); }
  .cart-drawer__title { font-size: clamp(1.5rem, 5vw, 2rem); }
  .checkout-panel { padding: clamp(1rem, 3vw, 2rem); border-radius: var(--r-lg); }
}
@media (min-width: 48rem) { .checkout-grid { grid-template-columns: minmax(0, 1.2fr) minmax(16rem, .8fr); align-items: start; } }

/* Ajustements de densité : le panier reste utilitaire, sans cartes
   concurrentes avec les produits. Le badge se superpose à l'icône. */
.nav__cart { position: relative; }
.nav__cart .cart-badge { position: absolute; right: -.25rem; top: -.32rem; z-index: 1; }
.cart-item { padding: .85rem 0; border: 0; border-bottom: .0625rem solid rgba(18, 15, 16, .18); border-radius: 0; background: transparent; }
.cart-item:last-child { border-bottom: 0; }
.cart-qty { gap: .65rem; font: .78rem/1 "IBM Plex Mono", monospace; }
.cart-qty button, .cart-remove { padding: 0; border: 0; border-radius: 0; background: transparent; color: var(--ink); font: 700 .9rem/1 "IBM Plex Mono", monospace; }
.cart-qty button:hover, .cart-remove:hover { color: var(--pink); }
.cart-remove { justify-self: end; font-size: .68rem; text-decoration: underline; text-underline-offset: .2em; }
.cart-drawer__foot { border-top: .125rem solid var(--ink); }
.detail-hero .lead { color: var(--paper); }


/* ------------------------------------------------- Points d'arrêt
   (partie commune : coquille et pied de page ; la navigation a les
   siens plus bas, avec le reste de la barre) */
@media (min-width: 30rem) {
  /* dès 480 px le pied passe à deux colonnes : la marque et l'appel
     tiennent la largeur, les deux listes se rangent côte à côte */
  .footer__top {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    text-align: left;
    justify-items: start;
  }
  .footer__brand,
  .footer__cta { grid-column: 1 / -1; }
  .footer__col { justify-items: start; }
  .footer__brand p,
  .footer__ctaText { margin-inline: 0; }
  .footer__bottom { text-align: left; }
}

@media (min-width: 48rem) {
  .shell { width: min(100% - 3rem, 78rem); }
  /* Sin esta línea `.shell--narrow` deja de existir a partir de 48rem: la
     regla de arriba tiene la misma especificidad y viene después, así que
     gana y la columna estrecha vuelve a los 78rem. Se notaba en las 21
     páginas que la usan —legales, Journal, pasaporte, búsqueda—, donde un
     párrafo de prosa cruzaba la pantalla entera. */
  .shell--narrow { width: min(100% - 3rem, 54rem); }
  .split { grid-template-columns: 1.05fr 0.95fr; gap: clamp(2.5rem, 5vw, 4.5rem); }
  .split--reverse .split__text { order: 2; }
  .traits { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 1.5rem; }
  .plans { grid-template-columns: repeat(2, 1fr); }
  .plan--main { grid-column: 1 / -1; }
  /* trois colonnes par défaut ; une page qui en enchaîne cinq pose
     `--numbered-cols` sur le conteneur plutôt qu'une règle de plus */
  .numbered { grid-template-columns: repeat(var(--numbered-cols, 3), minmax(0, 1fr)); }
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr; }
  .footer__brand { grid-column: 1 / -1; }
  .footer__cta { grid-column: auto; }
}

@media (min-width: 64rem) {
  .footer__top { grid-template-columns: 1.5fr 1fr 1fr 1.2fr; }
  .footer__brand { grid-column: auto; }

  .nav { padding-inline: 2rem; }
  .nav__toggle { display: none; }
  /* langue puis liens, le CTA reste le dernier élément de la barre */
  .nav__utils { order: 1; margin-left: auto; }
  .nav__links {
    order: 2;
    position: static;
    display: flex;
    align-items: center;
    gap: 0.15rem;
    max-height: none;
    margin-left: 0;
    padding: 0;
    border: 0;
    border-radius: 0;
    background: transparent;
    color: var(--paper);
    box-shadow: none;
    overflow: visible;
  }
  .nav:has(.nav__links.is-open)::before { content: none; }
  .nav__subtoggle { display: none; }
  .nav__links > a,
  .nav__summary {
    padding: 0.5rem 0.8rem;
    border: 0;
    border-radius: var(--r-pill);
    font-size: 0.82rem;
    font-weight: 500;
    white-space: nowrap;
    transition: background-color 200ms ease, color 200ms ease;
  }
  .nav__links > a:hover,
  .nav__summary:hover,
  .nav__details:focus-within > .nav__summary {
    background: var(--nav-hover);
    color: var(--nav-hover-ink);
  }

  /* sous-menu au survol, comme en v3 */
  .nav__sub {
    position: absolute;
    top: calc(100% + 0.5rem);
    left: 0;
    display: grid;
    min-width: 14.375rem;
    padding: 0.5rem;
    border: 0.0625rem solid rgba(0, 0, 0, 0.12);
    border-radius: 0.875rem;
    background: #fff;
    box-shadow: 0 1.125rem 2.625rem rgba(0, 0, 0, 0.24);
    opacity: 0;
    visibility: hidden;
    transform: translateY(0.5rem);
    transition: opacity 200ms ease, transform 200ms ease, visibility 200ms ease;
  }
  .nav__details:hover .nav__sub,
  .nav__details:focus-within .nav__sub {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
  }
  .nav__details:hover .nav__chevron { transform: rotate(180deg); }
  .nav__sub a {
    padding: 0.625rem 0.75rem;
    border-radius: 0.625rem;
    color: var(--nav-hover-ink);
    text-transform: none;
    letter-spacing: 0;
  }
  .nav__sub a:hover { background: var(--nav-hover-sub); color: #000; }
  /* le panier redevient une pastille ronde : le libellé sort, l'`aria-label`
     de l'ancre porte le nom accessible */
  /* sélecteur descendant : `.nav__links > a` pose déjà padding, rayon et
     bordure ici, il faut la même spécificité pour les reprendre */
  .nav__links > .nav__cart {
    display: grid;
    place-items: center;
    width: 2.5rem;
    height: 2.5rem;
    margin-left: 0.35rem;
    padding: 0;
    border: 0.0625rem solid var(--line-dark);
    border-radius: 50%;
  }
  .nav__cartLabel { display: none; }
  .nav__links > .nav__cart:hover { background: var(--nav-hover); color: var(--nav-hover-ink); }

  .plans { grid-template-columns: 1.15fr 1fr 1fr; }
  .plan--main { grid-column: auto; }

  .nav__cta { width: auto; margin: 0 0 0 0.6rem; }
}

/* ------------------------------------------------------ 18. Mouvement
   Rien n'est masqué tant que le script n'a pas posé `.js-reveal` sur
   <html> : sans JS, ou si le script échoue, la page reste lisible. */
/* Décalages composés via variables : une seule règle pour tout, et les
   éléments déjà inclinés au repos gardent leur rotation (--rest-r).

   Pas de clip-path ici : il réduit l'aire de l'élément à zéro et
   IntersectionObserver tient compte du découpage — l'élément ne serait
   jamais vu comme visible, donc jamais révélé. */
.js-reveal [data-reveal] {
  opacity: 0;
  transform:
    rotate(var(--rest-r, 0deg))
    translate3d(var(--rv-x, 0px), var(--rv-y, 0px), 0)
    scale(var(--rv-s, 1));
  /* le réarmement a lieu hors champ : cette transition n'est jamais vue,
     elle ne sert qu'à éviter un saut si le réarmement tombait au bord */
  transition: opacity 300ms ease, transform 300ms ease;
  will-change: opacity, transform;
}
/* une fois entré, l'élément n'a plus rien à animer : on libère le compositeur */
.js-reveal [data-reveal].is-in { will-change: auto; }
.js-reveal [data-reveal].is-in {
  opacity: 1;
  transform: rotate(var(--rest-r, 0deg));
  /* entrée : lente, souple, décalée par --rv-d */
  transition:
    opacity 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-d, 0ms),
    transform 760ms cubic-bezier(0.22, 1, 0.36, 1) var(--rv-d, 0ms);
}

.js-reveal [data-reveal="up"] { --rv-y: 2.75rem; }
.js-reveal [data-reveal="rise"] { --rv-y: 4.5rem; }
.js-reveal [data-reveal="left"] { --rv-x: -4.5rem; }
.js-reveal [data-reveal="right"] { --rv-x: 4.5rem; }
.js-reveal [data-reveal="zoom"] { --rv-y: 2rem; --rv-s: 0.9; }

/* rotations de repos, conservées pendant l'animation */
.quote { --rest-r: -0.8deg; }
.terroir__process { --rest-r: -1.75deg; }
.plan__sticker { --rest-r: 4deg; }

/* dérive légère des illustrations de bord au défilement */
.decor { transition: translate 120ms linear; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .js-reveal [data-reveal],
  .js-reveal [data-reveal].is-in {
    opacity: 1 !important;
    transform: none !important;
    clip-path: none !important;
  }
  .decor { translate: none !important; }
  /* Un fond vidéo n'est que du décor : on l'efface et le voile suffit. Un
     <video> ne se met pas en pause depuis CSS. */
  .phero__media video { display: none; }
  /* boucles infinies : les couper franchement, une durée de 0.01ms les
     ferait clignoter au lieu de les arrêter */
  .bean, .cafe__grain, .pending__mask { animation: none !important; transform: none !important; }
  /* le carrousel du sachet reste pilotable à la flèche : on coupe le
     glissement, pas le passage d'une vue à l'autre. Les vues inactives
     gardent leur place dans la piste — les masquer décalerait la
     translation qui les tient hors cadre. */
  .cafe__track, .cafe__slide { transition: none !important; }
  .cafe__slide { opacity: 1 !important; scale: 1 !important; }
  .gauge__fill, .bars__fill { animation: none !important; transform: none !important; }
  .hero__title .char { opacity: 1 !important; animation: none !important; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

@media print {
  .nav, .skip { display: none; }
  body { background: #fff; }
}


/* =========================================================================
   14. LES PAGES ÉCRITES EN BLOCS `chido-*`
   -------------------------------------------------------------------------
   Huit pages du site ne sont pas des gabarits PHP : leur contenu est du
   HTML rangé dans `post_content`, avec un jeu de classes à part —
   `chido-page`, `chido-hero`, `chido-section`, `chido-cta` — hérité de la
   génération v9. Le Manifeste, l'Espace presse, Contact, le Coffee Shop, et
   les quatre pages légales : mentions, CGV, confidentialité, cookies.

   POURQUOI C'EST ICI ET PLUS DANS manifeste.css. Ces règles y ont vécu un
   jour, et sept des huit pages sont restées sans style — `manifeste.css` ne
   se charge que sur /manifeste/, puisque la feuille suit le slug. Les CGV et
   les mentions légales, que la loi oblige à publier, sortaient en Times New
   Roman sur fond blanc. Une seule origine, chargée partout : base.css.

   Le préfixe `.chido-page--manifeste` a sauté avec le déménagement. Ce qui
   est propre au Manifeste — les démentis, la clôture — reste dans sa feuille.
   ========================================================================= */

.chido-page {
  padding-bottom: var(--section-y);
  background: var(--paper);
  color: var(--ink);
}

/* --- l'ouverture --- */
.chido-hero {
  width: min(100% - 2rem, 54rem);
  margin-inline: auto;
  padding-block: var(--section-y) clamp(2rem, 5vw, 3.5rem);
}

.chido-hero__label {
  margin: 0 0 0.9rem;
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 0.8rem;
  font-weight: 600;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--muted);
}

.chido-hero__title {
  margin: 0;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(2.6rem, 7.2vw, 5.25rem);
  line-height: 1.02;
  letter-spacing: var(--display-tracking);
  text-wrap: balance;
}

.chido-hero__subtitle {
  margin: 1.2rem 0 0;
  max-width: 42ch;
  font-size: clamp(1.05rem, 1.6vw, 1.25rem);
  line-height: 1.55;
  color: var(--ink-soft);
}

/* --- les sections ---
   Un filet fin les sépare plutôt qu'un fond alterné : le texte
   est long, et cinq bandes de couleur en feraient une brochure
   au lieu d'un texte qu'on lit d'un trait. */
.chido-section {
  width: min(100% - 2rem, 54rem);
  margin-inline: auto;
  padding-block: clamp(2.5rem, 6vw, 4rem);
  border-top: var(--stroke-thin);
}

.chido-section__title {
  margin: 0 0 1.1rem;
  max-width: 24ch;
  font-family: var(--font-display);
  font-weight: 800;
  font-size: clamp(1.75rem, 3.6vw, 2.6rem);
  line-height: 1.1;
  text-wrap: balance;
}

.chido-section__text {
  margin: 0 0 1rem;
  font-size: clamp(1rem, 1.3vw, 1.1rem);
  line-height: 1.68;
  color: var(--ink-soft);
}

.chido-section__text:last-child { margin-bottom: 0; }
.chido-section__text strong { color: var(--ink); font-weight: 700; }

/* Les interdits : c'est la section qui dit « on ne fera pas ».
   Le filet rose à gauche fait le travail d'une puce sans en
   être une — ce sont des phrases, pas une liste. */
.chido-section--interdits .chido-section__text {
  padding-left: clamp(1rem, 2vw, 1.5rem);
  border-left: 0.375rem solid var(--pink);
}

/* --- la signature ---
   Écrite par le client le 29/08/2026 avec son style en ligne ;
   la règle ici fait le même effet et prend le relais le jour où
   ce style disparaît. */
.chido-manifeste__firma {
  margin-top: clamp(2rem, 4vw, 2.5rem);
  font-style: italic;
  color: var(--muted);
}

/* --- les deux boutons de fin --- */
.chido-cta-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.85rem;
  margin-top: clamp(2rem, 4vw, 2.75rem);
}

.chido-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 3.25rem;
  padding: 0.8rem 1.6rem;
  border: var(--stroke);
  border-radius: var(--r-pill);
  font-family: var(--font-display);
  font-weight: 700;
  line-height: 1;
  color: var(--ink);
  text-decoration: none;
  box-shadow: var(--pop-sm);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}

.chido-cta--primary { background: var(--yellow); }
.chido-cta--secondary { background: var(--paper); }

.chido-cta:hover,
.chido-cta:focus-visible {
  transform: translate(-0.125rem, -0.125rem);
  box-shadow: 0.4375rem 0.4375rem 0 var(--ink);
}

@media (prefers-reduced-motion: reduce) {
  .chido-cta { transition: none; }
  .chido-cta:hover,
  .chido-cta:focus-visible { transform: none; }
}

/* ------------------------------------------------------------
   LES CLASSES DE LA MAQUETTE

   `template-parts/blocks/manifeste-*.php` écrit `denials`,
   `ment__quote` et `seek__line`. Ces blocs ne sont pas employés
   par la page telle qu'elle est aujourd'hui, mais ils restent
   enregistrés et le jour où quelqu'un repose la page sur eux,
   la feuille est là. On ne les retire pas : c'est la mise en
   forme d'origine, et elle a coûté un dessin.
   ------------------------------------------------------------ */