/* ==========================================================================
   GUIVONIZ — Composants
   Règles dures : pas d'ombre, pas de dégradé, pilules à 1000px,
   titres en graisse 300–350, lime uniquement en ponctuation.
   ========================================================================== */

/* ---------------------------------------------------------------- Boutons */
.btn {
  --btn-bg: transparent;
  display: inline-flex; align-items: center; justify-content: center;
  gap: var(--spacing-8);
  font-family: var(--font-seed-sans);
  font-size: var(--text-body-sm);
  font-weight: var(--font-weight-regular);
  line-height: 1;
  padding: 16px 24px;
  border-radius: var(--radius-buttons);
  border: 0;
  text-decoration: none;
  cursor: pointer;
  position: relative;
  isolation: isolate;
  overflow: hidden;
  transition: color var(--dur-base) var(--ease-organic),
              background-color var(--dur-base) var(--ease-organic),
              border-color var(--dur-base) var(--ease-organic),
              transform var(--dur-base) var(--ease-settle);
  -webkit-tap-highlight-color: transparent;
}
.btn-sm { padding: 11px 18px; font-size: var(--text-caption); }
.btn-lg { padding: 19px 32px; font-size: var(--text-body); letter-spacing: -0.18px; }

/* Remplissage « marée » : un disque de couleur monte depuis le bas (pas un dégradé) */
.btn::before {
  content: ""; position: absolute; z-index: -1;
  left: 50%; bottom: -10%;
  width: 140%; aspect-ratio: 1;
  translate: -50% 0;
  border-radius: var(--radius-full);
  background: var(--btn-bg);
  scale: 0;
  transition: scale var(--dur-base) var(--ease-organic);
}
.btn:hover::before, .btn:focus-visible::before { scale: 1; }
.btn:active { transform: scale(0.975); }

.btn-primary {
  background: var(--color-forest-depths);
  color: var(--color-snow-white);
  --btn-bg: var(--color-lime-pulse);
}
.btn-primary:hover, .btn-primary:focus-visible { color: var(--color-forest-depths); }

.btn-ghost {
  background: transparent;
  color: var(--color-snow-white);
  border: 1.5px solid var(--color-snow-white);
  --btn-bg: var(--color-snow-white);
}
.btn-ghost:hover, .btn-ghost:focus-visible { color: var(--color-forest-depths); }

/* Équivalent de btn-ghost pour les fonds CLAIRS.
   btn-ghost est blanc sur blanc hors d'une section sombre : dans la fiche
   produit, les deuxième et troisième boutons d'achat étaient invisibles. */
.btn-outline {
  background: transparent;
  color: var(--color-forest-depths);
  border: 1.5px solid var(--color-forest-depths);
  --btn-bg: var(--color-forest-depths);
}
.btn-outline:hover, .btn-outline:focus-visible { color: var(--color-snow-white); }

/* Garde-fou ciblé : la fiche produit est TOUJOURS sur fond clair, donc un
   btn-ghost y serait blanc sur blanc. Ailleurs, le contexte est choisi en JS
   (`onDark`) et il ne faut surtout pas écraser ce choix — une carte produit
   peut se trouver dans une section sombre. */
.sheet-panel .btn-ghost {
  color: var(--color-forest-depths);
  border-color: var(--color-forest-depths);
  --btn-bg: var(--color-forest-depths);
}
.sheet-panel .btn-ghost:hover,
.sheet-panel .btn-ghost:focus-visible { color: var(--color-snow-white); }

.btn-invert {
  background: var(--color-snow-white);
  color: var(--color-forest-depths);
  border: 1.5px solid var(--color-forest-depths);
  --btn-bg: var(--color-forest-depths);
}
.btn-invert:hover, .btn-invert:focus-visible { color: var(--color-snow-white); }

.btn-lime {
  background: var(--color-lime-pulse);
  color: var(--color-forest-depths);
  --btn-bg: var(--color-forest-depths);
}
.btn-lime:hover, .btn-lime:focus-visible { color: var(--color-snow-white); }

.btn[disabled], .btn[aria-disabled="true"] {
  background: var(--color-ash); color: var(--color-snow-white);
  cursor: not-allowed; pointer-events: none; border-color: transparent;
}
.btn .arw { transition: translate var(--dur-base) var(--ease-organic); }
.btn:hover .arw { translate: 4px 0; }

/* ------------------------------------------------- Lien texte + flèche */
.link-arw {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 10.5px 7px 0;
  font-size: var(--text-body-sm);
  text-decoration: none;
  color: var(--color-forest-depths);
  position: relative;
}
.link-arw::after {
  content: ""; position: absolute; left: 0; right: 10.5px; bottom: 4px;
  height: 1.5px; background: currentColor;
  transform-origin: left;
  transition: scale var(--dur-base) var(--ease-organic);
}
.link-arw:hover::after, .link-arw:focus-visible::after { scale: 0 1; }
.link-arw .arw { transition: translate var(--dur-base) var(--ease-organic); }
.link-arw:hover .arw { translate: 5px 0; }
.sec-dark .link-arw, .on-dark .link-arw, .callout-dark .link-arw,
.footer .link-arw { color: var(--color-snow-white); }
/* Le pied de page est sombre mais ne porte PAS .sec-dark : ses .link-arw
   gardaient donc la couleur de base, vert forêt — exactement la couleur du
   fond. Contraste mesuré : 1,00. Texte strictement invisible. */
/* Un lien dans un encadré sombre était vert foncé sur vert foncé : invisible. */
.callout-dark a:not(.btn) { color: var(--color-snow-white); }
.callout-lime a:not(.btn), .callout-lime .link-arw { color: var(--color-forest-depths); }

/* -------------------------------------------------------------- Badges */
.badge {
  display: inline-flex; align-items: center; gap: 5px;
  max-width: 100%;
  padding: 6px 8px;
  border-radius: var(--radius-badges);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  line-height: 1.2;
  white-space: nowrap;
}
/* Sur petit écran, un badge long doit revenir à la ligne plutôt que d'être
   coupé. Le nowrap garde la forme de pastille sur les badges courts, qui sont
   l'immense majorité ; mais « Limited evidence — and I am giving you the
   sources » fait 314 px et ne tient pas dans une colonne de 335. */
@media (max-width: 640px) {
  .badge { white-space: normal; text-align: left; }
}
.badge-sale { background: var(--color-lime-pulse); color: var(--color-forest-depths); }
.badge-tag  { background: rgba(252, 252, 247, 0.2); color: var(--color-snow-white); }
.badge-soft { background: var(--color-warm-stone); color: var(--color-forest-depths); }
.badge-out  { border: 1.5px solid currentColor; }

.code-pill {
  display: inline-flex; align-items: center;
  padding: 6px 8px;
  border: 1.5px solid currentColor;
  border-radius: var(--radius-badges);
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  letter-spacing: 0.015em;
  text-transform: uppercase;
  line-height: 1;
}

/* ------------------------------------------------------- Bandeau promo */
.promo {
  height: 40px;
  display: flex; align-items: center; justify-content: center;
  gap: var(--spacing-8);
  background: var(--color-snow-white);
  color: var(--color-forest-depths);
  border-bottom: 1px solid rgba(28, 58, 19, 0.1);
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-label);
  font-weight: var(--font-weight-medium);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  overflow: hidden;
  position: relative;
  z-index: 60;
}
.promo a { text-decoration: none; border-bottom: 1.5px solid currentColor; padding-bottom: 1px; white-space: nowrap; }
.promo-track { display: flex; align-items: center; gap: var(--spacing-8); white-space: nowrap; }
.promo-short { display: none; }

/* Cible tactile du lien de tête. Le texte fait 18 px de haut, le minimum
   AA (WCAG 2.5.8) est de 24. On agrandit la zone cliquable avec un
   pseudo-élément plutôt qu'avec du padding : le bandeau a une hauteur fixe
   de 40 px et le soulignement doit rester collé au texte. Rien ne bouge à
   l'écran, seule la surface qui réagit au doigt change. */
.promo a { position: relative; }
.promo a::after {
  content: ''; position: absolute;
  left: -6px; right: -6px; top: 50%;
  height: 40px; transform: translateY(-50%);
}
@media (max-width: 760px) {
  .promo { font-size: 10px; letter-spacing: 0.04em; padding-inline: var(--spacing-16); }
  .promo-long { display: none; }
  .promo-short { display: inline; }
}

/* Fil d'Ariane : mêmes 18 px de texte, même correction. Les liens sont les
   seuls <a class="mono"> placés directement dans un <nav class="row">, ce qui
   suffit à les viser sans toucher aux vingt fichiers de contenu qui portent
   ce fil. On n'étend que vers le haut et le bas : deux liens voisins ne
   peuvent donc pas se recouvrir. */
nav.row > a.mono { position: relative; }
nav.row > a.mono::after {
  content: ''; position: absolute;
  left: 0; right: 0; top: 50%;
  height: 32px; transform: translateY(-50%);
}

/* ---------------------------------------------------------- Navigation */
.nav {
  position: sticky; top: 0; z-index: 50;
  background: var(--color-snow-white);
  border-bottom: 1px solid rgba(28, 58, 19, 0);
  transition: border-color var(--dur-base) var(--ease-organic);
}
.nav.is-stuck { border-bottom-color: rgba(28, 58, 19, 0.12); }
.nav-inner {
  height: 72px;
  display: flex; align-items: center; gap: var(--spacing-32);
  max-width: var(--page-max-width); margin-inline: auto;
  padding-inline: var(--page-gutter);
}
.wordmark {
  display: inline-flex; align-items: baseline; gap: 5px;
  font-size: var(--text-subheading);
  font-weight: var(--font-weight-w350);
  letter-spacing: -0.4px;
  text-decoration: none;
  color: var(--color-forest-depths);
}
.wordmark .dot {
  width: 7px; height: 7px; border-radius: var(--radius-full);
  background: var(--color-lime-pulse);
  border: 1.5px solid var(--color-forest-depths);
  display: inline-block;
  transition: transform var(--dur-base) var(--ease-organic);
}
.wordmark:hover .dot { transform: translateY(-4px) scale(1.25); }

.nav-links { display: flex; align-items: center; gap: var(--spacing-24); margin-right: auto; }
.nav-link {
  text-decoration: none; font-size: var(--text-body-sm); color: var(--color-forest-depths);
  position: relative; padding: 6px 0;
}
.nav-link::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1.5px;
  background: currentColor; scale: 0 1; transform-origin: left;
  transition: scale var(--dur-base) var(--ease-organic);
}
.nav-link:hover::after, .nav-link[aria-current="page"]::after { scale: 1 1; }
.nav-actions { display: flex; align-items: center; gap: var(--spacing-8); }

.nav-avatar {
  width: 40px; height: 40px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-forest-depths);
  background: var(--color-snow-white); color: var(--color-forest-depths);
  display: grid; place-items: center; cursor: pointer;
  font-family: var(--font-seed-sans-mono); font-size: var(--text-label); font-weight: 500;
  transition: background-color var(--dur-base) var(--ease-organic), color var(--dur-base) var(--ease-organic);
}
.nav-avatar:hover { background: var(--color-forest-depths); color: var(--color-snow-white); }
.nav-avatar.has-profile { background: var(--color-lime-pulse); }

.nav-burger { display: none; }
@media (max-width: 960px) {
  .nav-links { display: none; }
  .nav-burger { display: grid; }
  .nav-inner { height: 64px; gap: var(--spacing-16); }
  .nav-desktop-only { display: none !important; }
}

/* Panneau mobile */
.nav-sheet {
  position: fixed; inset: 0; z-index: 70;
  background: var(--color-forest-depths); color: var(--color-snow-white);
  padding: var(--spacing-32) var(--page-gutter);
  display: flex; flex-direction: column; gap: var(--spacing-24);
  clip-path: circle(0% at calc(100% - 44px) 44px);
  transition: clip-path var(--dur-slow) var(--ease-organic);
  pointer-events: none;
  overflow-y: auto;
}
.nav-sheet.is-open { clip-path: circle(140% at calc(100% - 44px) 44px); pointer-events: auto; }
.nav-sheet a { text-decoration: none; font-size: var(--text-heading-sm); font-weight: var(--font-weight-light); letter-spacing: -0.3px; }
/* Les liens du menu sont en inline-flex pour garder une cible tactile de 44 px.
   Inline-flex est de niveau ligne : ils s'alignaient donc comme les mots d'une
   phrase — « Comparatifs Science Méthode » sur une ligne, 4 px d'écart — et le
   margin-top de .stack-16 restait sans effet. Une colonne flex rend chaque lien
   autonome et rétablit l'espacement. */
.nav-sheet nav { display: flex; flex-direction: column; align-items: flex-start; }

/* ----------------------------------------------- Barre de progression */
.scroll-progress {
  position: fixed; top: 0; left: 0; height: 2px; z-index: 90;
  background: var(--color-forest-depths);
  width: 100%; transform-origin: left; scale: 0 1;
}
.sec-dark ~ .scroll-progress { background: var(--color-lime-pulse); }

/* ------------------------------------------------------- Carte produit */
.pcard {
  position: relative;
  border-radius: var(--radius-cards);
  padding: var(--card-padding);
  display: flex; flex-direction: column; gap: var(--spacing-8);
  background: transparent;
  transform-style: preserve-3d;
  transition: background-color var(--dur-base) var(--ease-organic);
}
.sec-dark .pcard:hover, .on-dark .pcard:hover { background: rgba(252, 252, 247, 0.05); }
.sec-light .pcard:hover, .sec-stone .pcard:hover { background: rgba(28, 58, 19, 0.035); }
.pcard-head { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--spacing-8); }
.pcard-name { font-size: var(--text-subheading); line-height: var(--leading-subheading); letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-w350); }
.pcard-meta { display: flex; align-items: baseline; justify-content: space-between; gap: var(--spacing-8); }
.pcard-price { font-size: var(--text-label); font-weight: var(--font-weight-medium); text-transform: uppercase; letter-spacing: 0.04em; font-family: var(--font-seed-sans-mono); }
.pcard-foot { margin-top: auto; display: flex; flex-direction: column; gap: var(--spacing-8); }
.pcard-why {
  font-size: var(--text-caption); line-height: 1.45;
  padding: var(--spacing-8) 0 0;
  border-top: 1px solid rgba(252, 252, 247, 0.16);
}
.sec-light .pcard-why, .sec-stone .pcard-why { border-top-color: rgba(28, 58, 19, 0.12); }
.pcard-tags { position: absolute; top: var(--spacing-16); left: var(--spacing-16); display: flex; gap: 5px; z-index: 3; }

/* --------------------------------------- Scène 3D produit (le flacon) */
.stage3d {
  position: relative;
  aspect-ratio: 4 / 5;
  width: 100%;
  display: grid; place-items: center;
  perspective: var(--perspective-near);
  perspective-origin: 50% 42%;
  cursor: grab;
  touch-action: pan-y;
  border-radius: var(--radius-cards);
  overflow: hidden;
}
.stage3d:active { cursor: grabbing; }
.stage3d-world {
  position: relative;
  width: 58%;
  transform-style: preserve-3d;
  transform: rotateX(var(--rx, -8deg)) rotateY(var(--ry, -18deg)) translateZ(0);
  transition: transform var(--dur-base) var(--ease-organic);
}
.stage3d.is-dragging .stage3d-world { transition: none; }

/* Anneau de sol : ellipse plate, aucune ombre.
   `--sol` est posé par product3d.js : c'est le pied réel de l'objet, calculé
   à partir de sa forme et de son échelle. Les 78 % ne servent plus que de
   repli, le temps que la scène se monte. */
.stage3d-ring {
  position: absolute; left: 50%; top: var(--sol, 78%);
  width: 54%; aspect-ratio: 3 / 1;
  translate: -50% 0;
  /* 50 %, pas --radius-full : sur une boîte 3:1, un rayon en pixels donne un
     stade (deux demi-cercles et deux côtés droits), pas une ellipse. L'objet
     avait l'air posé sur une gélule. */
  border-radius: 50%;
  border: 1.5px solid rgba(252, 252, 247, 0.22);
  transform: rotateX(72deg);
  pointer-events: none;
}
.sec-light .stage3d-ring, .sec-stone .stage3d-ring { border-color: rgba(28, 58, 19, 0.16); }

/* Ancrage au sol. L'objet flottait au-dessus de son anneau : l'œil n'avait aucun
   point de contact. On ajoute une ellipse PLATE, sans flou ni dégradé — on reste
   dans le parti pris « illustration scientifique », ce n'est pas une ombre portée.
   Pseudo-éléments : ZÉRO nœud DOM ajouté, donc zéro coût au rendu. */
.stage3d-ring::before,
.stage3d-ring::after {
  content: ""; position: absolute;
  border-radius: 50%;
  pointer-events: none;
}
/* la nappe large : pose l'objet dans l'espace */
.stage3d-ring::before {
  inset: 6%;
  background: rgba(28, 58, 19, 0.07);
}
/* le contact : plus serré et plus dense, là où l'objet touche */
.stage3d-ring::after {
  inset: 30% 26%;
  background: rgba(28, 58, 19, 0.13);
}
/* sur fond sombre, c'est la lumière qui manque, pas l'ombre */
.sec-dark .stage3d-ring::before, .on-dark .stage3d-ring::before,
.callout-dark .stage3d-ring::before { background: rgba(252, 252, 247, 0.05); }
.sec-dark .stage3d-ring::after, .on-dark .stage3d-ring::after,
.callout-dark .stage3d-ring::after { background: rgba(252, 252, 247, 0.09); }

/* Halo lime discret derrière le produit, révélé au survol */
.stage3d-halo {
  position: absolute; left: 50%; top: 46%;
  width: 62%; aspect-ratio: 1; translate: -50% -50%;
  border-radius: var(--radius-full);
  background: var(--color-lime-pulse);
  opacity: 0; scale: 0.6;
  transition: opacity var(--dur-slow) var(--ease-organic), scale var(--dur-slow) var(--ease-organic);
  pointer-events: none;
}
.pcard:hover .stage3d-halo, .stage3d:hover .stage3d-halo { opacity: 0.16; scale: 1; }

/* Le flacon : cylindre de facettes plates (aucun dégradé) */
.jar { position: relative; width: 100%; transform-style: preserve-3d; }
.jar-body, .jar-lid { position: relative; transform-style: preserve-3d; }
.jar-facet {
  position: absolute; inset: 0;
  transform-style: preserve-3d;
  backface-visibility: hidden;
}
.jar-top, .jar-bottom {
  position: absolute; left: 0; right: 0;
  border-radius: var(--radius-full);
}
.jar-label {
  position: absolute; left: 50%; top: 50%;
  translate: -50% -50%;
  transform: translateZ(var(--label-z, 60px));
  text-align: center;
  color: var(--color-snow-white);
  pointer-events: none;
  width: 72%;
}
.jar-label .jl-code {
  display: block;
  font-family: var(--font-seed-sans-mono); font-size: 9px; line-height: 1.2;
  letter-spacing: 0.12em; text-transform: uppercase; opacity: 0.85;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.jar-label .jl-line { display: block; height: 1px; background: currentColor; opacity: 0.45; margin: 5px auto; width: 60%; }
.jar-label .jl-dose {
  display: block;
  font-family: var(--font-seed-sans-mono); font-size: 8px; line-height: 1.2;
  letter-spacing: 0.08em; opacity: 0.7;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

.stage3d-hint {
  position: absolute; bottom: 10px; left: 50%; translate: -50% 0;
  font-family: var(--font-seed-sans-mono); font-size: var(--text-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0; transition: opacity var(--dur-base) var(--ease-organic);
  pointer-events: none;
}
.stage3d:hover .stage3d-hint { opacity: 0.55; }

/* ------------------------------------------------------ Carte feature */
.fcard {
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  background: var(--color-warm-stone);
  display: flex; flex-direction: column; gap: var(--spacing-16);
  position: relative; overflow: hidden;
  transition: transform var(--dur-base) var(--ease-settle), background-color var(--dur-base) var(--ease-organic);
}
.fcard-glass {
  background: rgba(196, 199, 196, 0.42);
  backdrop-filter: blur(37.5px);
  -webkit-backdrop-filter: blur(37.5px);
}
.sec-dark .fcard, .on-dark .fcard { background: rgba(252, 252, 247, 0.07); }
.sec-dark .fcard-glass, .on-dark .fcard-glass { background: rgba(252, 252, 247, 0.1); }
.fcard-lg { border-radius: var(--radius-large-cards); padding: var(--spacing-40); }
.fcard-num {
  font-family: var(--font-seed-sans-mono); font-size: var(--text-label);
  /* 0.6 donnait un contraste de 3,55:1 sur 12 px, sous le minimum WCAG AA
     de 4,5:1 pour du texte normal. 0.78 passe la barre sans changer le ton. */
  letter-spacing: 0.12em; opacity: 0.78;
}

/* ------------------------------------------------------------- Inputs */
.field {
  width: 100%;
  background: transparent;
  border: 1.5px solid var(--color-forest-depths);
  border-radius: var(--radius-inputs);
  color: var(--color-forest-depths);
  padding: 14px 20px;
  font-family: var(--font-seed-sans);
  font-size: var(--text-body-sm);
  transition: border-color var(--dur-base) var(--ease-organic);
}
.field::placeholder { color: rgba(28, 58, 19, 0.45); }
.on-dark .field, .sec-dark .field {
  border-color: var(--color-snow-white); color: var(--color-snow-white);
}
.on-dark .field::placeholder, .sec-dark .field::placeholder { color: rgba(252, 252, 247, 0.5); }

/* Pilule de choix (quiz, filtres) */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 11px 18px;
  border-radius: var(--radius-full);
  border: 1.5px solid rgba(28, 58, 19, 0.3);
  background: transparent; color: var(--color-forest-depths);
  font-family: var(--font-seed-sans); font-size: var(--text-caption);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-organic),
              border-color var(--dur-fast) var(--ease-organic),
              color var(--dur-fast) var(--ease-organic),
              transform var(--dur-fast) var(--ease-settle);
}
.chip:hover { border-color: var(--color-forest-depths); transform: translateY(-2px); }
.chip[aria-pressed="true"], .chip.is-on {
  background: var(--color-forest-depths); color: var(--color-snow-white); border-color: var(--color-forest-depths);
}
.sec-dark .chip, .on-dark .chip, .nav-sheet .chip { border-color: rgba(252, 252, 247, 0.4); color: var(--color-snow-white); }
.sec-dark .chip:hover, .on-dark .chip:hover, .nav-sheet .chip:hover { border-color: var(--color-snow-white); }
.sec-dark .chip[aria-pressed="true"], .on-dark .chip[aria-pressed="true"],
.nav-sheet .chip[aria-pressed="true"], .nav-sheet .chip.is-on,
.sec-dark .chip.is-on, .on-dark .chip.is-on {
  background: var(--color-lime-pulse); color: var(--color-forest-depths); border-color: var(--color-lime-pulse);
}

/* --------------------------------------------------- Tableau comparatif */
.table-wrap { overflow-x: auto; border-radius: var(--radius-cards); background: var(--color-warm-stone); }
table.cmp { width: 100%; border-collapse: collapse; min-width: 540px; }
/* Dans une colonne d'article étroite, le tableau doit rester lisible
   plutôt que de couper sa dernière colonne. */
@media (max-width: 1320px) {
  table.cmp th, table.cmp td { padding: 12px var(--spacing-8); font-size: 13px; }
}
table.cmp th, table.cmp td {
  text-align: left; padding: 14px var(--spacing-16);
  font-size: var(--text-caption); line-height: 1.45;
  border-bottom: 1px solid rgba(28, 58, 19, 0.1);
  vertical-align: top;
}
table.cmp thead th {
  font-family: var(--font-seed-sans-mono); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: 0.08em; font-weight: var(--font-weight-medium);
  color: var(--color-pewter);
}
table.cmp tbody tr { transition: background-color var(--dur-fast) var(--ease-organic); }
table.cmp tbody tr:hover { background: rgba(28, 58, 19, 0.04); }
table.cmp tbody tr:last-child td { border-bottom: 0; }
table.cmp td.num { font-family: var(--font-seed-sans-mono); white-space: nowrap; }

/* Téléphone : le tableau devient une pile de cartes.
   En défilement horizontal, 38 % du tableau sommeil restait hors écran et la
   colonne des noms sortait avant qu'on atteigne la dernière — on lisait
   « Pour qui » sans savoir de quelle ligne. Pire, une seule cellule longue
   étirait toute la ligne : jusqu'à 300 px de haut dont 200 de vide.
   Ici chaque ligne devient un bloc autonome, le titre en tête et les autres
   colonnes en « libellé : valeur ». Plus de défilement, plus de blancs, et
   les cinq colonnes redeviennent lisibles. Les libellés viennent de
   data-label, posé sur chaque cellule par table_labels() dans tools/build.py. */
@media (max-width: 760px) {
  .table-wrap { overflow: visible; background: transparent; border-radius: 0; }
  table.cmp { display: block; min-width: 0; }
  table.cmp thead { display: none; }
  table.cmp tbody, table.cmp tr, table.cmp td { display: block; }

  table.cmp tbody tr {
    background: var(--color-warm-stone);
    border-radius: var(--radius-cards);
    padding: var(--spacing-16);
  }
  table.cmp tbody tr + tr { margin-top: var(--spacing-16); }
  /* Le survol de ligne colorait la carte entière au moindre effleurement. */
  table.cmp tbody tr:hover { background: var(--color-warm-stone); }

  table.cmp td {
    padding: 0; border-bottom: 0;
    font-size: var(--text-caption); line-height: 1.45;
  }
  /* Première cellule : le titre de la carte. */
  table.cmp td:first-child {
    font-size: var(--text-body-sm); line-height: 1.3;
    padding-bottom: var(--spacing-16);
  }
  table.cmp td:first-child strong { font-weight: var(--font-weight-medium); }

  /* Les suivantes : libellé à gauche, valeur à droite. */
  table.cmp td[data-label] {
    display: flex; align-items: baseline;
    justify-content: space-between; gap: var(--spacing-16);
    padding-top: 10px; margin-top: 10px;
    border-top: 1px solid rgba(28, 58, 19, 0.1);
  }
  table.cmp td[data-label]::before {
    content: attr(data-label);
    flex: none; max-width: 42%;
    font-family: var(--font-seed-sans-mono);
    font-size: var(--text-label); text-transform: uppercase;
    letter-spacing: 0.08em; color: var(--color-pewter);
  }
  table.cmp td[data-label] { text-align: right; }
  table.cmp td.num { white-space: normal; }
}

/* ---------------------------------------------------------- Éditorial */
.prose { font-size: var(--text-body); line-height: 1.65; letter-spacing: -0.18px; }
/* :where() a une spécificité nulle : la remise à zéro n'écrase donc pas la
   règle d'espacement ci-dessous, contrairement à un sélecteur `.prose p`. */
.prose :where(p, ul, ol, figure, blockquote, div) { margin: 0; }
.prose > * + * { margin-top: var(--spacing-24); }
.prose h2 {
  font-size: var(--text-heading-sm); line-height: 1.2; letter-spacing: -0.32px;
  font-weight: var(--font-weight-w350); margin-top: var(--spacing-64);
  scroll-margin-top: 120px;
}
.prose h3 {
  font-size: var(--text-subheading); line-height: var(--leading-subheading);
  letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-regular);
  margin-top: var(--spacing-40); scroll-margin-top: 120px;
}
.prose ul, .prose ol { padding-left: var(--spacing-24); }
.prose li + li { margin-top: var(--spacing-8); }
.prose li::marker { color: var(--color-sage-moss); }
.prose a:not(.btn):not(.link-arw) {
  text-decoration: none; border-bottom: 1.5px solid var(--color-lime-pulse);
  transition: border-color var(--dur-fast) var(--ease-organic), background-color var(--dur-fast) var(--ease-organic);
}
.prose a:not(.btn):not(.link-arw):hover { background: var(--color-lime-pulse); border-color: var(--color-forest-depths); }
.prose blockquote { padding: var(--spacing-24) 0 var(--spacing-24) var(--spacing-32);
  border-left: 1.5px solid var(--color-forest-depths);
  font-size: var(--text-heading-sm); line-height: 1.3; letter-spacing: -0.4px;
  font-weight: var(--font-weight-light);
}
.prose blockquote cite { display: block; margin-top: var(--spacing-16); font-size: var(--text-caption); font-style: normal; color: var(--color-pewter); font-family: var(--font-seed-sans-mono); }
.prose figcaption { margin-top: var(--spacing-8); font-size: var(--text-caption); color: var(--color-pewter); }
.prose .lede { font-size: var(--text-heading-sm); line-height: 1.35; letter-spacing: -0.4px; font-weight: var(--font-weight-light); }

/* Encadré takeaway / protocole */
.callout {
  border-radius: var(--radius-cards);
  padding: var(--spacing-24);
  background: var(--color-warm-stone);
}
/* L'encadré lime impose SA couleur de texte : sans ça, placé dans une
   section sombre, il héritait du blanc et devenait illisible. */
.callout-lime,
.callout-lime * { color: var(--color-forest-depths); }
/* Exception : un bouton garde SA propre couleur. Sans ça, « .callout-lime * »
   écrasait le blanc de .btn-primary et donnait du vert forêt sur vert forêt —
   contraste 1,00, bouton strictement invisible dans un encadré lime. */
.callout-lime .btn-primary,
.callout-lime .btn-primary * { color: var(--color-snow-white); }
.callout-lime .btn-primary:hover,
.callout-lime .btn-primary:focus-visible,
.callout-lime .btn-primary:hover *,
.callout-lime .btn-primary:focus-visible * { color: var(--color-forest-depths); }
.callout-lime { background: var(--color-lime-pulse); }
.callout-lime .callout-title { opacity: 0.7; }
.callout-lime .muted { color: rgba(28, 58, 19, 0.72); }
.callout-dark { background: var(--color-forest-depths); color: var(--color-snow-white); }
.callout-title {
  font-family: var(--font-seed-sans-mono); font-size: var(--text-label);
  text-transform: uppercase; letter-spacing: 0.1em; margin-bottom: var(--spacing-16);
  display: block;
}

/* Gabarit de page éditoriale : texte large à gauche, encadrés à droite.
   En classe et non en style en ligne, sinon la règle mobile ne s'applique pas. */
.page-layout {
  display: grid;
  grid-template-columns: 1.55fr minmax(0, 1fr);
  gap: var(--spacing-48);
  align-items: start;
}
@media (max-width: 1040px) {
  .page-layout { grid-template-columns: minmax(0, 1fr); gap: var(--spacing-40); }
}

/* Gabarit d'article : sommaire à gauche, texte à droite.
   Le sommaire disparaît sous 1040px — la colonne DOIT disparaître avec lui,
   sinon le texte reste coincé dans 240px. */
.article-layout {
  display: grid;
  grid-template-columns: 240px minmax(0, 1fr);
  gap: var(--spacing-64);
  align-items: start;
}
@media (max-width: 1040px) {
  .article-layout { grid-template-columns: minmax(0, 1fr); gap: 0; }
}

/* Sommaire collant */
.toc { position: sticky; top: 110px; align-self: start; }
.toc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; border-left: 1.5px solid rgba(28, 58, 19, 0.14); }
.toc-list a {
  display: block; padding: 7px var(--spacing-16); font-size: var(--text-caption);
  text-decoration: none; color: var(--color-pewter); line-height: 1.35;
  border-left: 1.5px solid transparent; margin-left: -1.5px;
  transition: color var(--dur-fast) var(--ease-organic), border-color var(--dur-fast) var(--ease-organic);
}
.toc-list a:hover { color: var(--color-forest-depths); }
.toc-list a.is-active { color: var(--color-forest-depths); border-left-color: var(--color-forest-depths); }
@media (max-width: 1040px) { .toc { display: none; } }

/* Sommaire repliable, téléphone et tablette.
   Le sommaire latéral ci-dessus disparaît sous 1040 px : sur un guide de treize
   minutes lu au téléphone, plus aucun moyen de voir la structure ni de sauter à
   une section. Celui-ci prend le relais. <details> natif : aucun JavaScript,
   replié par défaut pour ne pas repousser le texte, et il s'ouvre même si les
   scripts ne chargent pas. Les ancres tombent juste : .prose h2 porte déjà un
   scroll-margin-top de 120 px, qui compense la barre de navigation collante. */
.toc-m { display: none; }
@media (max-width: 1040px) {
  .toc-m {
    display: block;
    margin-bottom: var(--spacing-32);
    border: 1px solid rgba(28, 58, 19, 0.14);
    border-radius: var(--radius-cards);
    background: var(--color-snow-white);
  }
  .toc-m > summary {
    display: flex; align-items: center; justify-content: space-between;
    gap: var(--spacing-16);
    padding: var(--spacing-16);
    cursor: pointer;
    list-style: none;
  }
  .toc-m > summary::-webkit-details-marker { display: none; }
  .toc-m > summary:focus-visible {
    outline: 2px solid var(--color-forest-depths); outline-offset: 2px;
    border-radius: var(--radius-cards);
  }

  /* Le « + » se redresse en « − » à l'ouverture. */
  .toc-m-sign { position: relative; width: 13px; height: 13px; flex: none; }
  .toc-m-sign::before,
  .toc-m-sign::after {
    content: ''; position: absolute; left: 0; right: 0; top: calc(50% - 0.75px);
    height: 1.5px; background: var(--color-forest-depths);
    transition: transform var(--dur-fast) var(--ease-organic);
  }
  .toc-m-sign::after { transform: rotate(90deg); }
  .toc-m[open] .toc-m-sign::after { transform: rotate(0deg); }

  .toc-m-list {
    list-style: none; margin: 0;
    padding: 0 var(--spacing-16) var(--spacing-8);
    border-top: 1px solid rgba(28, 58, 19, 0.1);
  }
  .toc-m-list li + li { border-top: 1px solid rgba(28, 58, 19, 0.07); }
  .toc-m-list a {
    display: block; padding-block: 13px;
    font-size: var(--text-caption); line-height: 1.35;
    color: var(--color-pewter); text-decoration: none;
  }
  .toc-m-list a:active { color: var(--color-forest-depths); }
}

/* Bloc expert / relecture */
.byline { display: flex; align-items: center; gap: var(--spacing-16); flex-wrap: wrap; }
.byline-avatar {
  width: 44px; height: 44px; border-radius: var(--radius-full);
  background: var(--color-forest-depths); color: var(--color-snow-white);
  display: grid; place-items: center;
  font-family: var(--font-seed-sans-mono); font-size: var(--text-caption);
}

/* FAQ */
.faq-item { border-bottom: 1px solid rgba(28, 58, 19, 0.12); }
.faq-q {
  width: 100%; background: none; border: 0; cursor: pointer;
  display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-16);
  padding: var(--spacing-24) 0; text-align: left;
  font-family: var(--font-seed-sans); font-size: var(--text-subheading);
  letter-spacing: var(--tracking-subheading); font-weight: var(--font-weight-w350);
  color: inherit;
}
.faq-q .sign { position: relative; width: 18px; height: 18px; flex: 0 0 auto; }
.faq-q .sign::before, .faq-q .sign::after {
  content: ""; position: absolute; inset: 0; margin: auto;
  background: currentColor;
}
.faq-q .sign::before { width: 100%; height: 1.5px; }
.faq-q .sign::after { width: 1.5px; height: 100%; transition: scale var(--dur-base) var(--ease-organic); }
.faq-item.is-open .faq-q .sign::after { scale: 1 0; }
.faq-a { overflow: hidden; height: 0; transition: height var(--dur-base) var(--ease-organic); }
.faq-a-inner { padding-bottom: var(--spacing-24); max-width: 70ch; }

/* ------------------------------------------------------------- Footer */
.footer { background: var(--color-forest-depths); color: var(--color-snow-white); padding-block: var(--spacing-80) var(--spacing-32); }
.footer a { text-decoration: none; opacity: 0.75; transition: opacity var(--dur-fast) var(--ease-organic); font-size: var(--text-caption); }
.footer a:hover { opacity: 1; }
/* Un lien DANS un paragraphe déjà atténué cumulait les opacités
   (0,45 × 0,75 = 0,34) et tombait à 2,77 de contraste. */
.footer p a { opacity: 1; text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------ Réseaux sociaux */
.social-row {
  display: grid; grid-template-columns: repeat(4, 42px); gap: 10px;
  margin-top: var(--spacing-16); width: max-content;
}  /* grille fixe : 8 réseaux tombent en 4 + 4, pas en 6 + 2 */
.social {
  display: inline-flex; align-items: center; justify-content: center;
  width: 42px; height: 42px;
  border: 1px solid rgba(252, 252, 247, 0.26);
  border-radius: 50%;
  color: var(--color-snow-white);
  text-decoration: none;
  transition: background var(--dur-fast) var(--ease-organic),
              border-color var(--dur-fast) var(--ease-organic),
              color var(--dur-fast) var(--ease-organic),
              translate var(--dur-fast) var(--ease-organic);
}
.footer .social { opacity: 1; }
.social svg { width: 19px; height: 19px; flex: none; }
.social:hover, .social:focus-visible {
  background: var(--color-lime-pulse);
  border-color: var(--color-lime-pulse);
  color: var(--color-forest-depths);
  translate: 0 -2px;
}
@media (pointer: coarse) {
  .social { width: 44px; height: 44px; }
  .social-row { grid-template-columns: repeat(4, 44px); }
}
@media (prefers-reduced-motion: reduce) { .social:hover, .social:focus-visible { translate: none; } }
/* Le nom reste dans le DOM pour les lecteurs d'écran et le référencement. */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}
.footer-cols { display: grid; grid-template-columns: 1.4fr repeat(3, 1fr); gap: var(--spacing-32); }
.footer-col { display: flex; flex-direction: column; gap: var(--spacing-8); }
.footer-col h4, .footer-col .footer-h { font-family: var(--font-seed-sans-mono); font-size: var(--text-label); text-transform: uppercase; letter-spacing: 0.1em; opacity: 0.6; margin-bottom: var(--spacing-8); font-weight: 400; }
@media (max-width: 860px) { .footer-cols { grid-template-columns: 1fr 1fr; } }

/* --------------------------------------------------------- Modal / drawer */
.sheet {
  position: fixed; inset: 0; z-index: 100;
  display: grid; place-items: center;
  padding: var(--page-gutter);
  background: rgba(28, 58, 19, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  opacity: 0; pointer-events: none;
  transition: opacity var(--dur-base) var(--ease-organic);
}
.sheet.is-open { opacity: 1; pointer-events: auto; }
.sheet-panel {
  background: var(--color-snow-white);
  border-radius: var(--radius-large-cards);
  width: min(960px, 100%);
  max-height: min(88vh, 900px);
  overflow-y: auto;
  padding: var(--spacing-40);
  translate: 0 24px; scale: 0.985;
  transition: translate var(--dur-base) var(--ease-settle), scale var(--dur-base) var(--ease-settle);
}
.sheet.is-open .sheet-panel { translate: 0 0; scale: 1; }
.sheet-close {
  position: absolute; top: var(--spacing-24); right: var(--spacing-24);
  width: 44px; height: 44px; border-radius: var(--radius-full);
  border: 1.5px solid var(--color-forest-depths); background: var(--color-snow-white);
  cursor: pointer; display: grid; place-items: center; color: var(--color-forest-depths);
  transition: background-color var(--dur-fast) var(--ease-organic), color var(--dur-fast) var(--ease-organic);
}
.sheet-close:hover { background: var(--color-forest-depths); color: var(--color-snow-white); }
@media (max-width: 700px) { .sheet-panel { padding: var(--spacing-24); border-radius: var(--radius-2xl); } }

/* ------------------------------------------- Confort tactile (cibles 44px)
   Au doigt, une cible sous ~44px se rate une fois sur trois. Le bouton
   « Voir sur Amazon » faisait 36px : c'est le bouton le plus important du site. */
.save-btn {
  background: none; border: 0; cursor: pointer; color: inherit;
  padding: 6px; line-height: 0; border-radius: var(--radius-full);
}
@media (pointer: coarse), (max-width: 860px) {
  .btn-sm, .ai-go { min-height: 44px; padding-block: 12px; }
  .chip, .ai-chips .chip { min-height: 44px; }
  .ai-chips .chip { padding: 12px 16px; }
  .nav-avatar { width: 44px; height: 44px; }
  .save-btn { padding: 14px; }
  .link-arw { padding-block: 14px; min-height: 44px; box-sizing: border-box; }
  .link-arw::after { bottom: 11px; }
  .toc-list a { padding-block: 12px; }
  /* Les liens de navigation faisaient 30 px de haut : au-dessus du minimum
     WCAG, en dessous du confort réel au pouce. */
  .nav a, .footer a, .nav-sheet a { min-height: 44px; display: inline-flex; align-items: center; }
}

/* ------------------------------------------------- Sélecteur de langue */
/* Deux pastilles dans un même cadre : on voit d'un coup la langue active ET
   celle qui est disponible. Un menu déroulant cacherait la moitié de
   l'information, pour deux options seulement. */
.lang-switch {
  display: inline-flex; align-items: center; gap: 2px;
  border: 1.5px solid var(--color-forest-depths); border-radius: var(--radius-full);
  padding: 2px; background: transparent;
}
.lang-opt {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 36px; min-height: 30px; padding: 0 9px;
  border-radius: var(--radius-full);
  font-size: var(--text-caption); font-weight: var(--font-weight-medium);
  letter-spacing: .4px; text-decoration: none;
  /* .62 tombait à 3,93:1, sous le minimum WCAG AA. */
  color: var(--color-forest-depths); opacity: .8;
  transition: background var(--dur-fast) var(--ease-organic),
              opacity var(--dur-fast) var(--ease-organic);
}
.lang-opt:hover { opacity: 1; }
.lang-opt.is-on {
  background: var(--color-forest-depths); color: var(--color-snow-white); opacity: 1;
}
/* Sur fond sombre — panneau mobile, sections sombres — le cadre et le texte
   passent au blanc, sinon le sélecteur disparaît. */
.nav-sheet .lang-switch, .sec-dark .lang-switch, .on-dark .lang-switch {
  border-color: rgba(252, 252, 247, .45);
}
.nav-sheet .lang-opt, .sec-dark .lang-opt, .on-dark .lang-opt { color: var(--color-snow-white); }
.nav-sheet .lang-opt.is-on, .sec-dark .lang-opt.is-on, .on-dark .lang-opt.is-on {
  background: var(--color-snow-white); color: var(--color-forest-depths);
}
.nav-sheet .lang-switch { align-self: flex-start; }

/* ------------------------------------------------------------ Toast */
.toast-host { position: fixed; bottom: var(--spacing-24); left: 50%; translate: -50% 0; z-index: 120; display: flex; flex-direction: column; gap: var(--spacing-8); align-items: center; pointer-events: none; }
.toast {
  background: var(--color-forest-depths); color: var(--color-snow-white);
  border-radius: var(--radius-full); padding: 12px 22px;
  font-size: var(--text-caption);
  translate: 0 16px; opacity: 0;
  transition: translate var(--dur-base) var(--ease-settle), opacity var(--dur-base) var(--ease-organic);
}
.toast.is-in { translate: 0 0; opacity: 1; }

/* ------------------------------------------------------ Bibliographie */
.src-row {
  padding: var(--spacing-16) 0;
  border-top: 1px solid rgba(28, 58, 19, 0.14);
  scroll-margin-top: 110px;
}
.src-row:first-child { border-top: 0; }
.src-title {
  display: block;
  font-size: var(--text-caption);
  line-height: 1.5;
  text-decoration: none;
  border-bottom: 1.5px solid var(--color-lime-pulse);
  padding-bottom: 2px;
  transition: background-color var(--dur-fast) var(--ease-organic);
}
.src-title:hover { background: var(--color-lime-pulse); }
.sec-dark .src-row { border-top-color: rgba(252, 252, 247, 0.18); }

/* ------------------------------------- Scène produit en mode image */
.stage3d.is-image { cursor: default; }
.stage3d.is-image .stage3d-world {
  width: 82%;
  display: grid;
  place-items: center;
  transition: transform var(--dur-base) var(--ease-organic);
}
.p3-img {
  width: 100%;
  height: auto;
  object-fit: contain;
  border-radius: var(--radius-cards);
  mix-blend-mode: multiply;          /* fond blanc de l'image fondu dans la carte */
}
.sec-dark .p3-img, .on-dark .p3-img { mix-blend-mode: normal; }
.stage3d-illus {
  position: absolute; bottom: 8px; right: 10px;
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em; text-transform: uppercase;
  opacity: 0.68; pointer-events: none;  /* texte : 0,4 insuffisant */
}

/* Badge cliquable : le niveau de preuve s'explique en un clic, partout */
.badge-link {
  text-decoration: none;
  cursor: pointer;
  transition: opacity var(--dur-fast) var(--ease-organic),
              outline-color var(--dur-fast) var(--ease-organic);
  outline: 1.5px solid transparent;
  outline-offset: 2px;
}
.badge-link:hover { outline-color: currentColor; }

/* ---------------------------------------------------------- Plan du site */
.plan-group + .plan-group { margin-top: var(--spacing-64); }
.plan-group h2 { margin-bottom: var(--spacing-8); }
.plan-list { margin-top: var(--spacing-24); }
.plan-row {
  display: grid;
  grid-template-columns: 110px 1fr 1.3fr 70px;
  gap: var(--spacing-16);
  align-items: baseline;
  padding: var(--spacing-16) 0;
  border-top: 1px solid rgba(28, 58, 19, 0.12);
  text-decoration: none;
  transition: background-color var(--dur-fast) var(--ease-organic),
              padding-left var(--dur-fast) var(--ease-organic);
}
.plan-row:hover { background: rgba(28, 58, 19, 0.04); padding-left: var(--spacing-8); }
.plan-kicker {
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-micro);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.70;  /* texte sur fond clair */
}
.plan-title { font-size: var(--text-body-sm); line-height: 1.35; }
.plan-desc { font-size: var(--text-caption); line-height: 1.45; color: var(--color-pewter); }
.plan-meta { opacity: 0.7; text-align: right; }  /* 0,5 donnait 2,86 de contraste */
@media (max-width: 860px) {
  .plan-row { grid-template-columns: 1fr auto; gap: 6px; }
  .plan-kicker { grid-column: 1; }
  .plan-meta { grid-column: 2; grid-row: 1; }
  .plan-title { grid-column: 1 / -1; }
  .plan-desc { grid-column: 1 / -1; }
}

/* ==========================================================================
   Fiche produit — niveaux d'information
   --------------------------------------------------------------------------
   Une fiche contenait jusqu'à 1 250 mots d'un bloc : impossible à lire, et
   l'essentiel se noyait. On garde tout, mais sur trois niveaux :
     1. l'essentiel, toujours visible (ce que ça fait / ne fait pas)
     2. l'action : les trois options et le bouton
     3. le détail, replié dans des <details> natifs — accessibles au clavier
        et ouverts par défaut par les lecteurs d'écran qui le demandent.
   ========================================================================== */
.p-key {
  border: 1.5px solid var(--color-forest-depths);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-16);
}
.p-key dt {
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  opacity: 0.72;  /* 0,62 donnait 3,93 de contraste sur les 37 fiches */
  margin: 0 0 4px;
}
.p-key dd { margin: 0 0 var(--spacing-12); font-size: var(--text-caption); line-height: 1.6; }
.p-key dd:last-child { margin-bottom: 0; }

.p-more { border-top: 1.5px solid rgba(28, 58, 19, 0.14); }
.p-more > summary {
  list-style: none;
  cursor: pointer;
  padding: var(--spacing-16) 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--spacing-16);
  min-height: 44px;
  font-family: var(--font-seed-sans-mono);
  font-size: var(--text-mono);
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.p-more > summary::-webkit-details-marker { display: none; }
.p-more > summary::after {
  content: '+';
  font-size: 18px;
  line-height: 1;
  opacity: 0.70;  /* le + doit se voir */
  flex: 0 0 auto;
  transition: transform 0.2s var(--ease-seed, ease);
}
.p-more[open] > summary::after { content: '–'; }
.p-more > summary:hover { opacity: 0.72; }
.p-more > summary:focus-visible {
  outline: 2px solid var(--color-forest-depths);
  outline-offset: 3px;
  border-radius: 4px;
}
.p-more > summary .p-more-hint {
  font-family: var(--font-seed-sans);
  font-size: var(--text-caption);
  letter-spacing: 0;
  text-transform: none;
  opacity: 0.70;  /* indice de dépliant */
  flex: 1 1 auto;
  text-align: right;
}
.p-more-body { padding-bottom: var(--spacing-24); }
@media (prefers-reduced-motion: reduce) {
  .p-more > summary::after { transition: none; }
}

/* Une option du comparatif : encadrée, avec son bouton toujours visible. */
.p-tier {
  border: 1.5px solid rgba(28, 58, 19, 0.16);
  border-radius: var(--radius-2xl);
  padding: var(--spacing-16);
  margin-bottom: var(--spacing-12);
}
.p-tier.is-first { border-color: var(--color-forest-depths); border-width: 2px; }
.p-tier:last-child { margin-bottom: 0; }
.p-tier .p-tier-cta { margin-top: var(--spacing-12); display: flex; }
.p-tier .p-tier-cta .btn { width: 100%; justify-content: center; }


/* ==========================================================================
   Corrections d'audit — 8 octobre 2026
   ========================================================================== */

/* Les décors du hero (maillage, points) dépassaient la fenêtre de 10 px et
   créaient une barre de défilement horizontale. Ils sont purement visuels :
   on les coupe au bord de leur section. */
.hero, .sec { overflow-x: clip; }
@supports not (overflow-x: clip) { .hero, .sec { overflow-x: hidden; } }

/* Cibles tactiles : la règle des 44 px ne s'appliquait qu'en dessous de
   860 px. Sur un portable avec écran tactile, ou simplement pour viser
   juste à la souris, les puces à 34 px et les liens à 31 px étaient justes.
   On monte le plancher partout. */
.chip { min-height: 40px; }
.link-arw { min-height: 40px; padding-block: 9px; }
.save-btn { min-width: 40px; min-height: 40px; display: inline-flex;
            align-items: center; justify-content: center; }
.btn-sm { min-height: 40px; }
.ai-go { min-height: 40px; }

/* ATTENTION À L'ORDRE. Le plancher de 40 px ci-dessus n'a pas de media query
   et arrive APRÈS le bloc « Confort tactile » plus haut dans ce fichier : à
   spécificité égale, c'est lui qui gagnait, y compris sur téléphone. Les
   cibles censées faire 44 px au doigt en faisaient donc 40. On rétablit le
   44 px ici, après le plancher, pour que l'ordre joue dans le bon sens.
   Si un jour on rajoute un plancher global, le remettre AVANT ce bloc. */
@media (pointer: coarse), (max-width: 860px) {
  .chip, .ai-chips .chip { min-height: 44px; }
  .link-arw { min-height: 44px; padding-block: 14px; box-sizing: border-box; }
  .link-arw::after { bottom: 11px; }
  .btn-sm, .ai-go { min-height: 44px; padding-block: 12px; }
  .save-btn { min-width: 44px; min-height: 44px; padding: 14px; }
}

/* Les badges de niveau de preuve et le lien du bandeau sont des LIENS, mais
   grossir leur boîte déformerait les cartes. On agrandit donc la zone qui
   répond au doigt, pas le dessin : un pseudo-élément transparent déborde de
   la pastille jusqu'à atteindre 44 px de haut. Le badge garde ses 26 px à
   l'œil, et se touche comme s'il en faisait 44. */
@media (pointer: coarse), (max-width: 860px) {
  a.badge, .promo a { position: relative; }
  a.badge::after, .promo a::after {
    content: ""; position: absolute; left: 0; right: 0;
    top: 50%; height: 44px; translate: 0 -50%;
  }
}

/* ==========================================================================
   Performance des scènes 3D — 10 octobre 2026
   --------------------------------------------------------------------------
   Chaque objet fait 40 à 80 div en `preserve-3d`. Dix objets sur une page,
   c'est 450 à 800 éléments que le compositeur doit tenir dans un contexte 3D,
   même quand ils sont hors écran. D'où les saccades en descendant.
   `content-visibility: auto` dit au navigateur de ne pas peindre ce qui n'est
   pas visible, SANS rien changer au rendu une fois à l'écran. `contain-intrinsic-size`
   réserve la place pour que la barre de défilement ne saute pas.
   ========================================================================== */
.stage3d {
  content-visibility: auto;
  contain-intrinsic-size: auto 240px;
}
/* Pendant une interaction, on rend la scène prioritaire au compositeur.
   Hors interaction, on relâche : `will-change` permanent mange la mémoire. */
.stage3d.is-dragging,
.pcard:hover .stage3d {
  will-change: transform;
}
/* La fiche produit ouverte est toujours visible : pas de mise en veille. */
.sheet-panel .stage3d { content-visibility: visible; }

@media (prefers-reduced-motion: reduce) {
  .stage3d { content-visibility: auto; }
}


/* ---------------------------------------- Fiche produit sur téléphone */
/* L'objet 3D occupait 287 px et la ligne dose/format/prix se cassait en
   trois lignes de 112 px : les trois options partaient à 1 337 px. */
@media (max-width: 860px) {
  .sheet-panel .stage3d { aspect-ratio: auto; height: 215px; }
  .sheet-panel .row-between:has(.mono) {
    display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--spacing-8);
  }
}

/* Barre d'achat collante, téléphone seulement. Elle colle au bas du panneau
   qui défile : pas de position fixed, donc rien ne peut recouvrir la page. */
.sheet-cta { display: none; }
@media (max-width: 860px) {
  .sheet-cta {
    display: flex; align-items: center; gap: var(--spacing-12);
    position: sticky; bottom: 0; z-index: 5;
    margin: var(--spacing-16) calc(-1 * var(--spacing-16)) 0;
    padding: var(--spacing-12) var(--spacing-16);
    background: var(--color-snow-white);
    border-top: 1px solid rgba(28, 58, 19, 0.14);
    box-shadow: 0 -8px 24px rgba(28, 58, 19, 0.08);
  }
  .sheet-cta .sheet-cta-txt { flex: 1 1 auto; min-width: 0; }
  /* Taille fixe, pas `--text-caption` : cette barre est une commande, pas du
     texte de lecture. Quand caption est passé à 16 px sur mobile, le nom du
     produit est tombé sur deux lignes et la barre a doublé de hauteur.
     Le nom se coupe proprement s'il est trop long. */
  .sheet-cta .sheet-cta-txt strong {
    font-weight: 600; display: block; font-size: 14px; line-height: 1.25;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sheet-cta .sheet-cta-txt span { display: block; font-size: var(--text-micro); opacity: 0.72;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .sheet-cta .btn { flex: 0 0 auto; padding: 13px 18px; }
}