/** Shopify CDN: Minification failed

Line 1157:0 Unexpected "}"

**/
/* ==========================================================================
   ONDESSA — Système visuel « la fiche de soin », tirage clair
   Blanc dominant, une brume froide pour les surfaces, l'encre pour le texte
   et le bouton, le cuivre du produit en trait rare. La photo mène, le type
   se tait. Registre : Typology, The Ordinary, GHD.
   ========================================================================== */

/* --- 1. Fontes auto-hébergées ------------------------------------------- */

@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin.woff2') format('woff2');
  font-weight: 300 800; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Archivo';
  src: url('../fonts/archivo-latin-ext.woff2') format('woff2');
  font-weight: 300 800; font-stretch: 62% 125%; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/chivomono-latin.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+2074, U+20AC, U+2122, U+2191,
    U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Chivo Mono';
  src: url('../fonts/chivomono-latin-ext.woff2') format('woff2');
  font-weight: 300 500; font-style: normal; font-display: swap;
  unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF,
    U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020,
    U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* --- 2. Tokens ---------------------------------------------------------- */

:root {
  /* Le blanc domine : c'est le fond de presque toute la page. */
  --blanc:       #FFFFFF;
  --blanc-tiede: #FBFBFA;

  /* La brume — un gris froid très pâle, pour les surfaces qui portent la
     photographie et pour les respirations. Jamais crème, jamais beige. */
  --brume:       #E7EBEB;
  --brume-clair: #F3F5F5;
  --brume-sourd: #DCE1E1;

  /* L'encre — le texte, et le bouton. Presque noir, très légèrement froid. */
  --encre:        #16181A;
  --encre-doux:   #565E60;
  --encre-faible: #8B9395;

  /* Le filet imprimé — la page se structure par des traits, pas par des cartes */
  --filet:        rgba(22, 24, 26, 0.13);
  --filet-faible: rgba(22, 24, 26, 0.07);
  --filet-fort:   rgba(22, 24, 26, 0.24);

  /* Le cuivre du produit — accent unique, et rare. Jamais en aplat. */
  --cuivre:       #A96C48;
  --cuivre-clair: #C08E70;

  /* Les sept longueurs d'onde — de la lumière physique, jamais une couleur
     d'interface : elles n'existent que dans le halo et sur les onglets.
     Assombries par rapport au tirage sombre, pour tenir sur du blanc. */
  --wl-630: #D23636;
  --wl-590: #C98A12;
  --wl-525: #1B9A5E;
  --wl-490: #1795A8;
  --wl-465: #3556C4;
  --wl-415: #6E3CC4;
  --wl-000: #9AA2A6;
  --wl: var(--wl-630);

  --face: 'Archivo', system-ui, -apple-system, 'Segoe UI', sans-serif;
  --mono: 'Chivo Mono', ui-monospace, 'SF Mono', Menlo, monospace;

  /* Le rythme : beaucoup plus d'air qu'une page marchande ordinaire */
  --pad:  clamp(20px, 5vw, 56px);
  --gap:  clamp(22px, 3vw, 40px);
  /* L'air entre deux sections, c'est DEUX fois cette valeur : le bas de l'une
     plus le haut de la suivante. À 156 px, la coupure entre la fiche d'achat
     et la presse faisait 312 px de vide — un tiers d'écran sur rien. */
  --sect: clamp(56px, 6vw, 100px);
  --page: 1280px;
  --r:    2px;
  --r-lg: 3px;

  --ombre:  0 1px 2px rgba(22, 24, 26, .05), 0 8px 28px rgba(22, 24, 26, .07);
  --sortie: cubic-bezier(.16, 1, .3, 1);
}

/* --- 3. Base ------------------------------------------------------------ */

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

/* Le verrou latéral n'existe QUE sous 1040 px, et voici pourquoi.
   Les rails débordent volontairement des marges sur mobile ; sans verrou, la
   page part de côté. Mais `overflow: clip` fait de `html` un conteneur de
   rognage, et un élément collant n'y trouve plus de port de défilement :
   `position: sticky` devient inerte. C'est ce qui empêchait la galerie de la
   fiche d'achat de tenir en place — elle défilait avec la page et laissait
   900 px de colonne blanche à côté de la FAQ.
   Au-dessus de 1040 px, aucun rail n'est actif et rien ne déborde : on retire
   le verrou et la galerie se colle. En dessous, elle est de toute façon
   passée en `static` (§ 13). */
@media (max-width: 1040px) { html { overflow-x: clip; } }
@media (prefers-reduced-motion: reduce) { html { scroll-behavior: auto; } }

body {
  margin: 0;
  background: var(--blanc);
  color: var(--encre);
  font-family: var(--face);
  font-size: 16px;
  font-weight: 400;
  font-variation-settings: 'wdth' 100;
  line-height: 1.68;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Aucun `overflow` ici, volontairement. Dès qu'on en pose un sur un seul
     axe, la règle de couplage transforme le `visible` de l'autre axe en
     `auto` : le body devient un conteneur de défilement et `position: sticky`
     cesse d'opérer sur ses descendants. La galerie de la fiche d'achat ne se
     collait plus — elle défilait avec la page et laissait une colonne blanche
     de 900 px à côté de la FAQ. Le débordement latéral est déjà bloqué par le
     `overflow-x: clip` posé sur `html` (§ 3), qui n'a pas cet effet de bord
     parce que `html` est de toute façon le conteneur de défilement. */
}

img, svg, video { display: block; max-width: 100%; }
img { height: auto; }

h1, h2, h3, h4 {
  margin: 0;
  font-weight: 500;
  line-height: 1.14;
  letter-spacing: -0.018em;
  text-wrap: balance;
}
p { margin: 0; }
a { color: inherit; }

::selection { background: var(--encre); color: var(--blanc); }
:focus-visible { outline: 2px solid var(--encre); outline-offset: 3px; border-radius: 1px; }

/* --- 4. Grammaire du document ------------------------------------------- */

.page { width: min(100% - 2 * var(--pad), var(--page)); margin-inline: auto; }

/* La marge de gauche du formulaire, réduite à un trait très pâle */
.fil { position: relative; padding-left: clamp(0px, 4vw, 76px); }
.fil::before {
  content: '';
  position: absolute;
  left: clamp(0px, 2vw, 38px);
  top: 0; bottom: 0; width: 1px;
  background: var(--filet-faible);
}
@media (max-width: 900px) { .fil::before { display: none; } }

.ref {
  position: absolute;
  left: calc(clamp(0px, 2vw, 38px) - clamp(0px, 4vw, 76px));
  transform: translateX(-50%);
  background: var(--blanc);
  padding: 6px 0;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  color: var(--encre-faible);
  writing-mode: vertical-rl;
}
@media (max-width: 900px) { .ref { display: none; } }

.regle { border: 0; height: 1px; margin: 0; background: var(--filet); }

.champ { display: grid; gap: 3px; }
.champ dt,
.etiq {
  font-family: var(--mono);
  font-size: 10.5px;
  font-weight: 400;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.champ dd { margin: 0; font-size: 15px; color: var(--encre); }

/* --- 5. Typographie — petite, calme, très espacée ----------------------- */

.d1 {
  font-size: clamp(1.9rem, 3.1vw, 2.85rem);
  font-variation-settings: 'wdth' 98;
  font-weight: 480;
  letter-spacing: -0.022em;
  line-height: 1.12;
}
.d2 {
  font-size: clamp(1.6rem, 2.6vw, 2.3rem);
  font-variation-settings: 'wdth' 99;
  font-weight: 480;
  letter-spacing: -0.018em;
  line-height: 1.18;
}
.d3 { font-size: clamp(1.15rem, 1.6vw, 1.4rem); font-weight: 500; letter-spacing: -0.012em; line-height: 1.32; }
.d4 { font-size: 1rem; font-weight: 550; letter-spacing: -0.006em; line-height: 1.4; }

.plomb { font-size: clamp(1rem, 1.3vw, 1.1rem); line-height: 1.66; color: var(--encre-doux); max-width: 58ch; }
.corps { max-width: 66ch; color: var(--encre-doux); font-size: 15.5px; }
.corps p + p { margin-top: 1em; }

.mono { font-family: var(--mono); font-size: 0.84em; letter-spacing: 0.02em; font-variant-numeric: tabular-nums; }

/* Le mot-symbole, à la manière des maisons : capitales espacées, la ville
   dessous dans un corps deux fois plus petit. */
.mot {
  display: block;
  text-align: center;
  font-variation-settings: 'wdth' 108;
  font-weight: 500;
  letter-spacing: 0.26em;
  text-transform: uppercase;
  font-size: 15px;
  line-height: 1;
  padding-left: 0.26em;
  white-space: nowrap;
}
.mot__ville {
  display: block;
  text-align: center;
  margin-top: 5px;
  font-family: var(--mono);
  font-size: 8.5px;
  letter-spacing: 0.34em;
  text-transform: uppercase;
  color: var(--encre-faible);
  padding-left: 0.34em;
}

/* --- 6. Boutons — l'encre pleine, sans ombre ---------------------------- */

.btn {
  --btn-bg: var(--encre);
  --btn-fg: var(--blanc);
  display: inline-flex;
  align-items: center; justify-content: center;
  gap: 10px;
  width: 100%;
  min-height: 54px;
  padding: 15px 26px;
  border: 1px solid var(--btn-bg);
  border-radius: var(--r);
  background: var(--btn-bg);
  color: var(--btn-fg);
  font-family: var(--face);
  font-size: 12.5px;
  font-weight: 550;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  text-decoration: none;
  cursor: pointer;
  transition: background-color .2s var(--sortie), color .2s var(--sortie), border-color .2s var(--sortie);
}
.btn:hover { --btn-bg: #33383A; }
.btn:active { --btn-bg: #0B0D0E; }
.btn[disabled] { opacity: .4; cursor: not-allowed; }

.btn--creux {
  --btn-bg: transparent;
  --btn-fg: var(--encre);
  border-color: var(--filet-fort);
  min-height: 48px;
}
.btn--creux:hover { --btn-bg: var(--brume-clair); --btn-fg: var(--encre); border-color: var(--encre); }
.btn--auto { width: auto; }

.lien {
  color: var(--encre);
  text-decoration: none;
  border-bottom: 1px solid var(--filet-fort);
  padding-bottom: 1px;
  transition: border-color .16s;
}
.lien:hover { border-color: var(--encre); }

/* --- 7. Le sceau -------------------------------------------------------- */

.sceau {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 6px 12px;
  border: 1px solid var(--filet-fort);
  border-radius: var(--r);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.sceau--pivot { transform: rotate(-1.6deg); }

/* --- 8. Surfaces -------------------------------------------------------- */

/* La page se structure par des traits et des respirations, pas par des cartes
   empilées. La « fiche » n'est qu'un encadré de filet sur le blanc. */
.fiche { background: var(--blanc); border: 1px solid var(--filet); border-radius: var(--r-lg); }

/* La brume — les sections qui documentent, et les respirations */
.feuille { background: var(--brume); color: var(--encre); border-radius: var(--r-lg); }
.feuille .regle { background: var(--filet); }

/* --- 9. Structure de page ----------------------------------------------- */

.sect { padding-block: var(--sect); position: relative; }
.sect--serre { padding-block: clamp(34px, 3.6vw, 56px); }
.sect + .sect { border-top: 1px solid var(--filet-faible); }
.tete { display: grid; gap: 16px; margin-bottom: var(--gap); }

/* --- 10. Bandeau d'annonce + en-tête ------------------------------------ */

.annonce {
  background: var(--encre);
  color: var(--blanc);
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.annonce__piste { display: flex; align-items: center; justify-content: center; gap: 40px; min-height: 36px; text-align: center; }
.annonce b { font-weight: 500; }
@media (max-width: 760px) { .annonce__piste > *:not(.annonce__cle) { display: none; } }

.entete {
  position: sticky; top: 0; z-index: 60;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(14px) saturate(1.2);
  border-bottom: 1px solid var(--filet-faible);
}
.entete__int {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center; gap: 24px;
  min-height: 78px;
}
/* Les trois blocs sont placés explicitement sur la même ligne : sans cela, le
   placement automatique renvoie la nav (colonne 1) à la ligne suivante, parce
   que le mot-symbole (colonne 2) a déjà été posé. */
.marque { display: flex; align-items: center; gap: 10px; text-decoration: none; color: var(--encre); grid-area: 1 / 2; justify-self: center; }
.marque svg { width: 20px; height: 20px; flex: none; color: var(--cuivre); }

.nav { display: flex; gap: 26px; grid-area: 1 / 1; }
.nav a {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.13em;
  text-transform: uppercase;
  text-decoration: none;
  color: var(--encre-doux);
  transition: color .16s;
}
.nav a:hover { color: var(--encre); }
@media (max-width: 1000px) { .nav { display: none; } }

.entete__outils { display: flex; align-items: center; gap: 10px; grid-area: 1 / 3; justify-self: end; }
.icone-btn {
  display: grid; place-items: center;
  width: 36px; height: 36px;
  border: 0; border-radius: var(--r);
  background: transparent; color: var(--encre);
  cursor: pointer;
  transition: background-color .16s;
}
.icone-btn:hover { background: var(--brume-clair); }
.icone-btn svg { width: 17px; height: 17px; }

/* --- 11. La première fiche (buybox) ------------------------------------- */

.buybox {
  display: grid;
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 0.88fr);
  gap: clamp(28px, 4.5vw, 76px);
  align-items: start;
  padding-block: clamp(24px, 3vw, 44px) var(--sect);
}
@media (max-width: 1040px) { .buybox { grid-template-columns: 1fr; gap: 32px; } }

/* Un élément de grille avec `align-items: start` prend la hauteur de son
   contenu : `position: sticky` posé dessus n'a alors aucune course à
   parcourir et reste inerte. On sépare donc les deux rôles — la colonne
   s'étire sur toute la rangée, et c'est son contenu qui se colle. Sans ça,
   la galerie défilait avec la page et laissait 900 px de blanc à côté de
   la FAQ. */
.galerie { align-self: stretch; }
.galerie__collant { position: sticky; top: 96px; display: grid; gap: 12px; }
@media (max-width: 1040px) { .galerie__collant { position: static; } }

.scene {
  position: relative;
  aspect-ratio: 1 / 1;
  border-radius: var(--r-lg);
  overflow: hidden;
  background: var(--brume);
  isolation: isolate;
}
/* Le halo de la longueur d'onde active, en teinte très basse sur la brume */
.scene::before {
  content: '';
  position: absolute; inset: -18%;
  z-index: 0;
  background: radial-gradient(closest-side, var(--wl), transparent 70%);
  opacity: .12;
  filter: blur(52px);
  transition: background-color .55s var(--sortie), opacity .55s var(--sortie);
}
.scene__pile { position: absolute; inset: 0; z-index: 1; }
.scene__pile img {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  object-fit: cover;
  opacity: 0;
  transition: opacity .5s var(--sortie);
}
.scene__pile img.est-vu { opacity: 1; }

.scene__cote {
  position: absolute; z-index: 2;
  left: 18px; bottom: 16px;
  display: flex; align-items: center; gap: 8px;
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--encre-doux);
}
.scene__cote i {
  width: 7px; height: 7px; border-radius: 50%;
  background: var(--wl);
  transition: background-color .45s var(--sortie);
}

/* Les sept onglets — un simple ruban de filets */
.onglets { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.onglet {
  position: relative;
  display: grid; gap: 8px; justify-items: center;
  padding: 11px 3px 9px;
  border: 0;
  border-top: 1px solid var(--filet);
  border-radius: 0;
  background: transparent;
  color: var(--encre-faible);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.04em;
  cursor: pointer;
  transition: color .2s var(--sortie);
}
.onglet i {
  position: absolute; top: -1px; left: 0; right: 0;
  height: 2px;
  background: var(--t);
  opacity: 0;
  transition: opacity .25s var(--sortie);
}
.onglet:hover { color: var(--encre-doux); }
.onglet[aria-selected='true'] { color: var(--encre); }
.onglet[aria-selected='true'] i { opacity: 1; }
@media (max-width: 400px) { .onglets { gap: 3px; } .onglet { font-size: 9.5px; } }
@media (max-width: 340px) { .onglets { grid-template-columns: repeat(4, 1fr); } }

/* --- 11b. Le panneau d'achat -------------------------------------------- */

.achat { display: grid; gap: 20px; }
.achat__entete { display: grid; gap: 13px; }
.achat__entete .d1 { font-size: clamp(1.75rem, 2.7vw, 2.4rem); }

.etoiles { display: flex; align-items: center; gap: 9px; font-size: 13px; color: var(--encre-doux); }
.etoiles__lot { display: flex; gap: 2px; color: var(--cuivre); }
.etoiles svg { width: 13px; height: 13px; }

.benefs { display: grid; gap: 11px; margin: 0; padding: 0; list-style: none; }
.benefs li { display: grid; grid-template-columns: 15px 1fr; gap: 12px; align-items: start; font-size: 15px; color: var(--encre-doux); }
.benefs b { color: var(--encre); font-weight: 550; }
.benefs svg { width: 15px; height: 15px; margin-top: 4px; color: var(--encre); flex: none; }

.prix { display: flex; align-items: baseline; flex-wrap: wrap; gap: 12px; }
.prix__vif { font-size: clamp(1.7rem, 2.4vw, 2.1rem); font-weight: 500; letter-spacing: -0.02em; line-height: 1; }
.prix__ancre { font-size: 1rem; color: var(--encre-faible); text-decoration: line-through; }
.prix__eco {
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--cuivre);
  border: 1px solid currentColor;
  border-radius: var(--r);
  padding: 4px 8px;
}

/* Les accessoires optionnels, en lignes de filet */
.options { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.option {
  display: grid;
  grid-template-columns: 20px 1fr auto;
  gap: 14px;
  align-items: center;
  padding: 14px 2px;
  border-bottom: 1px solid var(--filet-faible);
  cursor: pointer;
  transition: background-color .16s var(--sortie);
}
.option:hover { background: var(--blanc-tiede); }
.option__case {
  width: 17px; height: 17px;
  display: grid; place-items: center;
  border: 1px solid var(--filet-fort);
  border-radius: 1px;
  color: transparent;
  transition: background-color .16s, border-color .16s, color .16s;
}
.option input { position: absolute; opacity: 0; width: 0; height: 0; }
.option:has(input:checked) .option__case { background: var(--encre); border-color: var(--encre); color: var(--blanc); }
.option:has(input:focus-visible) .option__case { outline: 2px solid var(--encre); outline-offset: 2px; }
.option__case svg { width: 11px; height: 11px; }
.option__vig { display: none; }
.option__nom { font-size: 14.5px; font-weight: 500; color: var(--encre); }
.option__note { font-size: 12.5px; color: var(--encre-faible); }
.option__prix { font-family: var(--mono); font-size: 13px; color: var(--encre); }

.total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; padding-top: 4px; }
.total__val { font-size: 1.3rem; font-weight: 550; letter-spacing: -0.02em; }

/* Les garanties, en lignes de filet plutôt qu'en cartes */
.garanties { display: grid; grid-template-columns: 1fr 1fr; gap: 0; border-top: 1px solid var(--filet); }
.garantie { display: grid; grid-template-columns: 18px 1fr; gap: 11px; align-items: start; padding: 15px 14px 15px 0; }
.garantie + .garantie { border-left: 1px solid var(--filet-faible); padding-left: 18px; }
.garantie svg { width: 18px; height: 18px; color: var(--encre); margin-top: 2px; }
.garantie b { display: block; font-size: 13px; font-weight: 550; color: var(--encre); }
.garantie span { font-size: 12px; color: var(--encre-faible); line-height: 1.5; }
@media (max-width: 520px) {
  .garanties { grid-template-columns: 1fr; }
  .garantie + .garantie { border-left: 0; border-top: 1px solid var(--filet-faible); padding-left: 0; }
}

.paiement { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--encre-faible); }
.paiement svg { width: 14px; height: 14px; }
.paiement b { color: var(--encre); font-weight: 500; }

.temoin { display: grid; gap: 11px; padding: 20px 0; border-top: 1px solid var(--filet); }
.temoin__haut { display: flex; align-items: center; gap: 11px; }
.temoin__ph { width: 34px; height: 34px; border-radius: 50%; object-fit: cover; flex: none; background: var(--brume); }
.temoin__nom { font-size: 13px; font-weight: 550; color: var(--encre); }
.temoin__meta { font-size: 11.5px; color: var(--encre-faible); }
.temoin p { font-size: 14.5px; line-height: 1.62; color: var(--encre-doux); }

/* --- 12. Accordéon ------------------------------------------------------ */

.acc { border-top: 1px solid var(--filet); }
.acc details { border-bottom: 1px solid var(--filet-faible); }
.acc summary {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 19px 2px;
  cursor: pointer; list-style: none;
  font-size: 15px; font-weight: 500;
  color: var(--encre);
  transition: color .16s;
}
.acc summary::-webkit-details-marker { display: none; }
.acc summary:hover { color: var(--encre-doux); }
.acc summary i { position: relative; flex: none; width: 12px; height: 12px; }
.acc summary i::before, .acc summary i::after {
  content: ''; position: absolute; background: var(--encre);
  transition: transform .28s var(--sortie), opacity .28s var(--sortie);
}
.acc summary i::before { inset: 5.5px 0 5.5px 0; height: 1px; }
.acc summary i::after  { inset: 0 5.5px 0 5.5px; width: 1px; }
.acc details[open] summary i::after { transform: rotate(90deg); opacity: 0; }
.acc__corps { padding: 0 2px 22px; font-size: 15px; line-height: 1.68; color: var(--encre-doux); max-width: 70ch; }
.acc__corps p + p { margin-top: .9em; }

/* --- 13. Le tableau comparatif ------------------------------------------ */

.compa { width: 100%; border-collapse: collapse; font-size: 14.5px; }
.compa th, .compa td { padding: 17px 16px; text-align: left; vertical-align: middle; }
.compa thead th {
  font-family: var(--mono);
  font-size: 10px; font-weight: 400;
  letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--encre-faible);
  border-bottom: 1px solid var(--filet-fort);
  vertical-align: bottom;
}
.compa tbody tr + tr td, .compa tbody tr + tr th { border-top: 1px solid var(--filet-faible); }
.compa tbody th { font-weight: 500; color: var(--encre); width: 32%; }
.compa td { color: var(--encre-doux); }
.compa .col-nous { background: var(--blanc); color: var(--encre); font-weight: 500; }
.compa thead .col-nous {
  color: var(--encre); font-family: var(--face);
  font-size: 12.5px; font-weight: 600; letter-spacing: 0.08em;
  text-transform: uppercase;
  border-bottom-color: var(--encre);
}
.compa__oui, .compa__non { display: inline-flex; align-items: center; gap: 8px; }
.compa__oui svg { width: 15px; height: 15px; color: var(--encre); flex: none; }
.compa__non svg { width: 15px; height: 15px; color: var(--encre-faible); flex: none; }
.compa-enrl { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.compa-enrl table { min-width: 660px; }

/* --- 14. Le protocole en trois temps ------------------------------------ */

.temps { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; }
@media (max-width: 860px) { .temps { grid-template-columns: 1fr; } }
.temp { display: grid; gap: 13px; align-content: start; padding: clamp(24px, 3vw, 40px) clamp(20px, 2.4vw, 34px); }
.temp + .temp { border-left: 1px solid var(--filet); }
@media (max-width: 860px) { .temp + .temp { border-left: 0; border-top: 1px solid var(--filet); } }
.temp__n { font-family: var(--mono); font-size: 10.5px; letter-spacing: 0.13em; color: var(--encre-faible); }
.temp__min {
  font-family: var(--mono); font-size: 11.5px; color: var(--encre-faible);
  padding-top: 13px; margin-top: 3px; border-top: 1px solid var(--filet);
}

/* --- 15. Grilles génériques --------------------------------------------- */

.duo { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: clamp(30px, 5vw, 84px); align-items: center; }
.duo--inv > *:first-child { order: 2; }
.duo--haut { align-items: start; }
@media (max-width: 900px) { .duo { grid-template-columns: 1fr; gap: 30px; } .duo--inv > *:first-child { order: 0; } }

.trio { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 0; border-top: 1px solid var(--filet); }
.trio > * { padding: 28px clamp(18px, 2vw, 30px) 28px 0; }
.trio > * + * { border-left: 1px solid var(--filet-faible); padding-left: clamp(18px, 2vw, 30px); }
@media (max-width: 860px) {
  .trio { grid-template-columns: 1fr; }
  .trio > * + * { border-left: 0; border-top: 1px solid var(--filet-faible); padding-left: 0; }
}

.visuel { border-radius: var(--r-lg); overflow: hidden; background: var(--brume); }
.visuel img { width: 100%; }
.visuel--portrait { aspect-ratio: 4 / 5; }
.visuel--portrait img { width: 100%; height: 100%; object-fit: cover; }

/* --- 16. Les avis ------------------------------------------------------- */

.avis { display: grid; gap: 14px; align-content: start; }
.avis__haut { display: flex; align-items: center; gap: 11px; }
.avis__ph { width: 36px; height: 36px; border-radius: 50%; object-fit: cover; background: var(--brume); flex: none; }
.avis p { font-size: 14.5px; line-height: 1.64; color: var(--encre-doux); }
.avis__achat { font-family: var(--mono); font-size: 10px; letter-spacing: .11em; text-transform: uppercase; color: var(--encre-faible); }

.videos { display: grid; grid-template-columns: repeat(5, 1fr); gap: 10px; }
@media (max-width: 1000px) { .videos { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 620px)  { .videos { grid-template-columns: repeat(2, 1fr); } }
.video {
  position: relative; aspect-ratio: 9/16;
  border-radius: var(--r-lg); overflow: hidden;
  border: 0; padding: 0;
  background: var(--brume);
  cursor: pointer;
}
.video img { width: 100%; height: 100%; object-fit: cover; transition: transform .6s var(--sortie); }
.video:hover img { transform: scale(1.03); }
.video__play { position: absolute; inset: 0; display: grid; place-items: center; color: var(--blanc); }
.video__play span { width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: rgba(22, 24, 26, .5); backdrop-filter: blur(6px); }
.video__play svg { width: 13px; height: 13px; margin-left: 2px; }
.video__leg { position: absolute; left: 12px; right: 12px; bottom: 11px; font-size: 11.5px; font-weight: 500; color: var(--blanc); text-shadow: 0 1px 10px rgba(0,0,0,.7); }

/* --- 17. La presse ------------------------------------------------------ */

.presse { display: flex; align-items: center; justify-content: center; flex-wrap: wrap; gap: clamp(28px, 5vw, 70px); }
.presse span {
  font-variation-settings: 'wdth' 106;
  font-weight: 500;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  font-size: 12.5px;
  color: var(--encre-faible);
}

/* --- 18. Contre-indications --------------------------------------------- */

.prudence {
  display: grid; grid-template-columns: 20px 1fr; gap: 16px;
  padding-top: clamp(22px, 3vw, 30px);
  border-top: 1px solid var(--filet-fort);
}
.prudence > svg { width: 20px; height: 20px; color: var(--encre); margin-top: 3px; }
.prudence__liste { margin: 16px 0 0; padding: 0; list-style: none; display: grid; gap: 0; max-width: 78ch; }
.prudence__liste li { position: relative; padding: 10px 0 10px 20px; font-size: 14.5px; color: var(--encre-doux); }
.prudence__liste li + li { border-top: 1px solid var(--filet-faible); }
.prudence__liste li::before {
  content: ''; position: absolute; left: 2px; top: 19px;
  width: 5px; height: 5px; border-radius: 50%; background: var(--encre-faible);
}

/* --- 19. Barre d'achat persistante -------------------------------------- */

.barre {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 70;
  background: rgba(255, 255, 255, .95);
  backdrop-filter: blur(16px) saturate(1.2);
  border-top: 1px solid var(--filet);
  transform: translateY(105%);
  transition: transform .4s var(--sortie), visibility .4s;
  padding-bottom: env(safe-area-inset-bottom);
  /* Translatée hors écran, la barre restait dans l'ordre de tabulation : au
     clavier, on tombait sur un « Ajouter au panier » invisible entre deux
     sections. `visibility: hidden` la retire du parcours sans casser la
     transition, qui reste animable. */
  visibility: hidden;
}
.barre.est-vu { transform: translateY(0); visibility: visible; }
.barre__int { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding-block: 11px; }
.barre__gau { display: flex; align-items: center; gap: 13px; min-width: 0; }
.barre__vig { width: 42px; height: 42px; border-radius: var(--r); object-fit: cover; flex: none; background: var(--brume); }
.barre__nom { font-size: 13.5px; font-weight: 550; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.barre__prix { font-family: var(--mono); font-size: 12.5px; color: var(--encre-doux); }
.barre .btn { width: auto; min-width: 220px; min-height: 46px; }
@media (max-width: 620px) { .barre__gau { display: none; } .barre .btn { width: 100%; min-width: 0; } }

/* --- 20. Pied de page --------------------------------------------------- */

.pied { background: var(--brume-clair); border-top: 1px solid var(--filet-faible); }
.pied__haut {
  display: grid; grid-template-columns: 1.5fr repeat(3, 1fr);
  gap: clamp(28px, 4vw, 60px);
  padding-block: clamp(52px, 6vw, 88px);
}
@media (max-width: 900px) { .pied__haut { grid-template-columns: 1fr 1fr; } }
@media (max-width: 560px) { .pied__haut { grid-template-columns: 1fr; } }
.pied h4 { margin-bottom: 16px; font-family: var(--mono); font-size: 10px; font-weight: 400; letter-spacing: .14em; text-transform: uppercase; color: var(--encre-faible); }
.pied ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.pied a { font-size: 14px; color: var(--encre-doux); text-decoration: none; transition: color .16s; }
.pied a:hover { color: var(--encre); }
.pied .marque { justify-self: start; }
.pied__bas {
  display: flex; align-items: center; justify-content: space-between;
  flex-wrap: wrap; gap: 14px;
  padding-block: 22px;
  border-top: 1px solid var(--filet-faible);
  font-size: 12px; color: var(--encre-faible);
}

.lettre { display: grid; gap: 11px; max-width: 340px; }
.lettre__champ { display: flex; gap: 8px; }
.lettre input {
  flex: 1; min-width: 0;
  padding: 12px 13px;
  background: var(--blanc);
  border: 1px solid var(--filet-fort);
  border-radius: var(--r);
  color: var(--encre);
  font-family: var(--face); font-size: 14px;
}
.lettre input::placeholder { color: var(--encre-faible); }
.lettre input:focus-visible { border-color: var(--encre); outline: none; }
.lettre .btn { width: auto; min-height: 44px; padding-inline: 20px; }

/* --- 21. Mentions synthétiques ------------------------------------------ */

.synth {
  font-family: var(--mono);
  font-size: 10.5px;
  letter-spacing: .05em;
  color: var(--encre-faible);
  border: 1px dashed var(--filet-fort);
  border-radius: var(--r);
  padding: 8px 12px;
  display: inline-flex; align-items: center; gap: 8px;
}
.synth svg { width: 12px; height: 12px; flex: none; }

/* --- 22. La planche du spectre ------------------------------------------ */

.axe { position: relative; padding-top: 34px; }
.axe__piste {
  height: 8px;
  border-radius: 1px;
  background: linear-gradient(90deg,
    #6B00B5 0%, #1E3BFF 16%, #00A8C8 30%, #24B95E 42%,
    #C9C020 57%, #E08A15 67%, #D92415 83%, #7E0A00 100%);
}
.axe__marques { position: absolute; inset: 0 0 auto 0; margin: 0; padding: 0; list-style: none; }
.axe__marques li { position: absolute; left: var(--x); top: 0; transform: translateX(-50%); display: grid; justify-items: center; gap: 5px; }
.axe__marques li::after { content: ''; width: 1px; height: 12px; background: var(--filet-fort); }
.axe__marques b { font-family: var(--mono); font-size: 10.5px; font-weight: 400; letter-spacing: .04em; color: var(--encre-doux); white-space: nowrap; }
.axe__bornes { display: flex; justify-content: space-between; margin-top: 9px; font-family: var(--mono); font-size: 10px; letter-spacing: .08em; color: var(--encre-faible); }

.ondes { margin: 0; display: grid; gap: 0; }
.onde { display: grid; grid-template-columns: minmax(180px, 0.85fr) minmax(0, 2fr); gap: 12px 30px; align-items: baseline; padding: 16px 0; }
.onde + .onde { border-top: 1px solid var(--filet-faible); }
.onde dt { display: flex; align-items: center; gap: 10px; font-size: 15px; font-weight: 550; color: var(--encre); }
.onde dt i { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--t); }
.onde dt b { font-weight: 400; color: var(--encre-faible); }
.onde dd { margin: 0; font-size: 14.5px; color: var(--encre-doux); max-width: 60ch; }
@media (max-width: 700px) { .onde { grid-template-columns: 1fr; gap: 5px; } }

/* --- 23. Listes de champs ----------------------------------------------- */

.specs { margin: 0; display: grid; gap: 0; border-top: 1px solid var(--filet); }
.specs .champ {
  grid-template-columns: minmax(120px, 0.5fr) minmax(0, 1fr);
  gap: 8px 24px; align-items: baseline;
  padding: 13px 0;
  border-bottom: 1px solid var(--filet-faible);
}
@media (max-width: 520px) { .specs .champ { grid-template-columns: 1fr; gap: 2px; } }

/* --- 24. La bande pleine largeur ---------------------------------------- */

.bande { position: relative; min-height: min(82vh, 720px); display: grid; align-items: end; overflow: hidden; }
.bande > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 50% 32%; }
.bande__voile {
  position: absolute; inset: 0;
  background: linear-gradient(to top, rgba(10,11,12,.72) 0%, rgba(10,11,12,.32) 34%, transparent 66%);
}
.bande__mot { position: relative; padding-block: clamp(34px, 5vw, 66px); color: var(--blanc); }
.bande__mot p {
  font-size: clamp(1.3rem, 2.4vw, 1.95rem);
  font-weight: 480;
  letter-spacing: -0.018em;
  line-height: 1.22;
  max-width: 21ch;
  text-wrap: balance;
}
.bande__mot span {
  display: block; margin-top: 14px;
  font-size: 14.5px; font-weight: 400; letter-spacing: 0;
  color: rgba(255,255,255,.82);
  max-width: 46ch; line-height: 1.6;
}

/* --- 25. Mouvement ------------------------------------------------------ */

.monte { opacity: 0; transform: translateY(16px); transition: opacity .8s var(--sortie), transform .8s var(--sortie); }
.monte.est-vu { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
  .monte { opacity: 1; transform: none; transition: none; }
  *, *::before, *::after { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

/* --- 26. Utilitaires ---------------------------------------------------- */

.pile { display: grid; }
.g-8 { gap: 8px; } .g-12 { gap: 12px; } .g-16 { gap: 16px; }
.g-20 { gap: 20px; } .g-28 { gap: 28px; } .g-36 { gap: 36px; }
.mt-24 { margin-top: 24px; } .mt-36 { margin-top: 36px; } .mt-56 { margin-top: 56px; }
.centre { text-align: center; justify-items: center; }
.invisible {
  position: absolute; width: 1px; height: 1px;
  padding: 0; margin: -1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap; border: 0;
}

/* ==========================================================================
   27. Le rail — défilement horizontal
   Sur mobile, une liste verticale de sept entrées coûte sept écrans de pouce.
   Le même contenu en rail tient en un écran et se parcourt d'un geste.
   Le rail déborde volontairement des marges de page pour signaler qu'il
   continue : une carte coupée au bord est ce qui donne envie de pousser.
   ========================================================================== */

.rail {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: var(--rail-carte, min(74%, 300px));
  gap: 12px;
  overflow-x: auto;
  overscroll-behavior-x: contain;
  scroll-snap-type: x mandatory;
  scroll-padding-inline: var(--pad);
  margin-inline: calc(-1 * var(--pad));
  padding-inline: var(--pad);
  padding-bottom: 4px;
  scrollbar-width: none;
}
.rail::-webkit-scrollbar { display: none; }
.rail > * { scroll-snap-align: start; min-width: 0; }

/* L'indice de parcours : combien de cartes, et qu'on peut pousser */
.rail-indice {
  display: none;
  align-items: center;
  gap: 8px;
  margin-top: 14px;
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .12em;
  text-transform: uppercase;
  color: var(--encre-faible);
}
.rail-indice::after {
  content: '';
  flex: 1;
  height: 1px;
  background: linear-gradient(90deg, var(--filet-fort), transparent);
}
@media (max-width: 900px) { .rail-indice { display: flex; } }

/* --- 28. La presse et la recherche --------------------------------------- */

.presse-rail { --rail-carte: min(80%, 330px); }
.coupure {
  display: grid;
  gap: 12px;
  align-content: start;
  padding: 22px 22px 20px;
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
  background: var(--blanc);
}
.coupure__source {
  font-variation-settings: 'wdth' 106;
  font-weight: 550;
  letter-spacing: 0.16em;
  text-transform: uppercase;
  font-size: 12px;
  color: var(--encre);
}
.coupure__date { font-family: var(--mono); font-size: 10px; letter-spacing: .1em; color: var(--encre-faible); }
.coupure p { font-size: 14.5px; line-height: 1.6; color: var(--encre-doux); }
.coupure a {
  font-family: var(--mono); font-size: 10.5px; letter-spacing: .1em;
  text-transform: uppercase; color: var(--encre);
  text-decoration: none; border-bottom: 1px solid var(--filet-fort);
  padding-bottom: 2px; justify-self: start; margin-top: 2px;
}
.coupure a:hover { border-color: var(--encre); }

/* --- 29. Le carrousel vidéo ---------------------------------------------- */

.videos-rail { --rail-carte: min(58%, 230px); }
.videos-rail .video { aspect-ratio: 9/16; }
.video__cadre { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* --- 30. Réglages mobiles ------------------------------------------------ */

@media (max-width: 900px) {
  /* Les sections respirent moins : on gagne un écran entier sur la page */
  :root { --sect: clamp(40px, 7vw, 60px); }

  /* Les sept longueurs d'onde passent en rail */
  .ondes {
    --rail-carte: min(76%, 290px);
    display: grid;
    grid-auto-flow: column;
    grid-auto-columns: var(--rail-carte);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 4px;
    scrollbar-width: none;
    border-top: 0;
  }
  .ondes::-webkit-scrollbar { display: none; }
  .ondes > * { scroll-snap-align: start; min-width: 0; }
  .onde {
    grid-template-columns: 1fr;
    gap: 8px;
    align-content: start;
    padding: 20px;
    border: 1px solid var(--filet);
    border-radius: var(--r-lg);
  }
  .onde + .onde { border-top: 1px solid var(--filet); }
  .onde dd { font-size: 14px; }

  /* Le protocole en trois temps passe en rail */
  .temps {
    --rail-carte: min(82%, 320px);
    display: grid;
    grid-template-columns: none;
    grid-auto-flow: column;
    grid-auto-columns: var(--rail-carte);
    gap: 12px;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scroll-snap-type: x mandatory;
    scroll-padding-inline: var(--pad);
    margin-inline: calc(-1 * var(--pad));
    padding-inline: var(--pad);
    padding-bottom: 4px;
    scrollbar-width: none;
    border-top: 0;
  }
  .temps::-webkit-scrollbar { display: none; }
  .temps > * { scroll-snap-align: start; min-width: 0; }
  .temp { padding: 22px 20px; border: 1px solid var(--filet-verre, var(--filet)); border-radius: var(--r-lg); background: var(--blanc); }
  .temp + .temp { border-left: 1px solid var(--filet); border-top: 0; }

  /* Le contenu du coffret : une ligne par élément, mais compacte */
  .specs .champ { padding: 10px 0; }

  /* Les deux garanties côte à côte plutôt qu'empilées */
  .garanties { grid-template-columns: 1fr 1fr; }
  .garantie { padding: 13px 10px 13px 0; }
  .garantie + .garantie { border-left: 1px solid var(--filet-faible); border-top: 0; padding-left: 12px; }
  .garantie span { font-size: 11.5px; }

  /* La galerie et le panneau d'achat se resserrent */
  .buybox { padding-block: 16px 0; gap: 24px; }
  .achat { gap: 16px; }
  .tete { margin-bottom: 26px; }
  .bande { min-height: 62vh; }
}

@media (max-width: 560px) {
  .garanties { grid-template-columns: 1fr; }
  .garantie + .garantie { border-left: 0; border-top: 1px solid var(--filet-faible); padding-left: 0; }
}

/* --- 31. Compression verticale mobile ------------------------------------ */

@media (max-width: 900px) {
  /* Une image en 4/5 sur 350 px de large fait 437 px de haut : presque un
     écran entier pour une seule photo. En 3/2 elle en fait 233. */
  .duo .visuel--portrait { aspect-ratio: 3 / 2; }
  .duo .visuel img { object-position: 50% 35%; }

  /* La bande d'ambiance garde son rôle de respiration sans manger un écran */
  .bande { min-height: 52vh; }
  .bande__mot p { font-size: 1.25rem; }
  .bande__mot span { margin-top: 10px; font-size: 13.5px; }

  /* Les listes longues se resserrent */
  .prudence__liste li { padding: 8px 0 8px 18px; font-size: 13.5px; }
  .prudence__liste li::before { top: 16px; }
  .acc summary { padding: 16px 2px; font-size: 14.5px; }
  .acc__corps { padding-bottom: 18px; font-size: 14px; }
  .corps { font-size: 14.5px; }
  .plomb { font-size: 15px; }

  /* Le titre de section prend moins de place */
  .d2 { font-size: clamp(1.45rem, 5.6vw, 1.8rem); }
  .tete { gap: 12px; }
}

/* --- 32. Les blocs les plus hauts sur mobile ----------------------------- */

@media (max-width: 900px) {
  /* Le pied passait de quatre colonnes à une : deux suffisent et divisent
     sa hauteur par deux. */
  .pied__haut { grid-template-columns: 1fr 1fr; gap: 26px 20px; padding-block: 40px; }
  .pied__haut > *:first-child { grid-column: 1 / -1; }
  .lettre { max-width: none; }
  .pied ul { gap: 7px; }
  .pied a { font-size: 13px; }

  /* Le comparatif : le tableau défile déjà, il n'a pas besoin d'être aéré */
  .compa th, .compa td { padding: 11px 12px; font-size: 13.5px; }
  .compa-enrl table { min-width: 560px; }

  /* Les huit précautions sur deux colonnes : même contenu, moitié moins haut */
  .prudence__liste { grid-template-columns: 1fr 1fr; gap: 0 16px; }
  .prudence__liste li { border-top: 0; padding: 6px 0 6px 16px; font-size: 12.5px; line-height: 1.45; }
  .prudence__liste li::before { top: 13px; width: 4px; height: 4px; }
  .prudence { grid-template-columns: 1fr; gap: 12px; }
  .prudence > svg { display: none; }
}

@media (max-width: 430px) {
  .prudence__liste { grid-template-columns: 1fr; }
  .prudence__liste li { padding: 7px 0 7px 16px; }
}

/* --- 33. La section du spectre, la plus haute de la page ----------------- */

@media (max-width: 900px) {
  /* La planche des sept masques en 16/9 fait 197 px : lisible. Mais le duo
     macro + texte ajoute 600 px pour un argument secondaire. On le recadre
     court et on le passe sous le texte plutôt qu'à côté. */
  #lumieres .duo { gap: 18px; }
  #lumieres .duo .visuel { aspect-ratio: 16 / 9; }
  #lumieres .duo .visuel img { width: 100%; height: 100%; object-fit: cover; }
  #lumieres > .page > .visuel { margin-bottom: 22px !important; }

  /* L'axe spectral se resserre */
  .axe { padding-top: 28px; }
  .axe__marques b { font-size: 9.5px; }
  .fiche { padding: 20px 16px !important; }
}

/* --- 34. La coupure de presse menée par le chiffre ----------------------- */

/* Un logo de magazine sur une page de vente laisse entendre un partenariat.
   Un chiffre juste, lui, se lit en une demi-seconde et n'engage que nous. */
p.coupure__chiffre {
  font-size: clamp(2.6rem, 4.6vw, 3.4rem);
  font-variation-settings: 'wdth' 96;
  font-weight: 550;
  letter-spacing: -0.035em;
  line-height: 0.95;
  color: var(--encre);
}
p.coupure__chiffre span {
  font-size: 0.42em;
  font-weight: 450;
  letter-spacing: -0.01em;
  color: var(--encre-faible);
}
p.coupure__cle {
  font-size: 14px;
  line-height: 1.45;
  color: var(--encre);
  font-weight: 500;
  margin-top: -4px;
}
.coupure .regle { margin: 4px 0 2px; }
.coupure p:not(.coupure__chiffre):not(.coupure__cle) { font-size: 13.5px; }
.coupure--nous { background: var(--brume); }
.coupure--nous p.coupure__chiffre { color: var(--cuivre); }

/* --- 35. Le comparatif sur mobile ---------------------------------------- */

/* Le tableau reste un tableau — c'est ce qui se lit le mieux pour comparer.
   Mais à quatre colonnes sur 335 px, chaque cellule tombe à 84 px et tout se
   casse en trois lignes. On passe donc à trois colonnes : le critère, nous, et
   le concurrent direct. L'institut n'est pas un concurrent d'usage — son seul
   argument, le coût par séance, est déjà dans le texte sous le tableau. */
@media (max-width: 760px) {
  .compa-enrl { overflow-x: visible; }
  .compa-enrl table { min-width: 0; width: 100%; table-layout: fixed; }

  .compa th, .compa td { padding: 10px 6px; font-size: 12.5px; line-height: 1.35; }
  .compa thead th { font-size: 9px; letter-spacing: 0.08em; padding-bottom: 8px; }
  .compa tbody th { width: 30%; font-size: 12px; font-weight: 550; }
  .compa tbody th .mono { font-size: 9px; }

  /* La quatrième colonne sort : elle n'a pas la place, et c'est celle qui
     compte le moins pour quelqu'un qui compare deux appareils à domicile. */
  .compa tr > *:nth-child(4) { display: none; }

  .compa .col-nous { background: var(--blanc); }
  .compa thead .col-nous { font-size: 10.5px; letter-spacing: 0.04em; }
  .compa__oui svg, .compa__non svg { width: 12px; height: 12px; }
  .compa__oui, .compa__non { gap: 5px; align-items: flex-start; }
}

}

/* --- 36. Le logo de publication, avant le nom ---------------------------- */

/* Le logo se pose sur la ligne du nom, pas au-dessus : en flex il formait un
   item insécable qui repoussait le nom à la ligne suivante. En display block
   avec un logo inline-block, le nom s'enroule autour comme du texte. */
.coupure__source { display: block; line-height: 1.35; }
.coupure__logo {
  display: inline-block;
  vertical-align: -4px;
  margin-right: 9px;
  height: 20px;
  width: auto;
  max-width: 80px;
  object-fit: contain;
  object-position: left center;
  /* Laissés dans leurs couleurs d'origine : le liseré jaune de National
     Geographic et le bleu de Forbes sont ce qui se reconnaît à un mètre.
     Les désaturer reviendrait à mettre un logo pour n'en garder que la
     forme — autant ne pas en mettre. Une carte par logo, donc pas de
     mosaïque à craindre. */
}

/* --- 37. Le coffret, resserré ------------------------------------------- */

.specs--serre .champ {
  grid-template-columns: 2.4rem 1fr;
  gap: 4px 14px;
  align-items: baseline;
  padding: 9px 0;
}
.specs--serre .champ dd { font-size: 14.5px; }
@media (max-width: 900px) {
  .specs--serre .champ { grid-template-columns: 2rem 1fr; padding: 8px 0; }
  .specs--serre .champ dd { font-size: 13.5px; line-height: 1.4; }
  .specs--serre .champ dt { font-size: 9.5px; }
}

/* --- 38. Le mot-symbole dans le pied ------------------------------------- */

/* Dans une colonne étroite, `white-space: nowrap` + 0,26 em d'interlettrage
   fait déborder le mot-symbole. Dans le pied il se resserre et s'aligne à
   gauche, comme le reste de la colonne. */
.pied .marque { grid-column: 1 / -1; justify-self: start; }
.pied .mot { text-align: left; letter-spacing: 0.2em; padding-left: 0; font-size: 14px; }
.pied .mot__ville { text-align: left; letter-spacing: 0.28em; padding-left: 0; }
@media (max-width: 560px) {
  .pied .mot { letter-spacing: 0.16em; font-size: 13px; }
}

/* --- 39. Le choix du coffret --------------------------------------------- */

.coffrets { display: grid; gap: 0; border-top: 1px solid var(--filet); }
.coffret {
  display: grid;
  grid-template-columns: 18px 1fr auto;
  gap: 13px;
  align-items: start;
  padding: 14px 2px;
  border-bottom: 1px solid var(--filet-faible);
  cursor: pointer;
  transition: background-color .16s var(--sortie);
}
.coffret:hover { background: var(--blanc-tiede); }
.coffret input { position: absolute; opacity: 0; width: 0; height: 0; }
.coffret__case {
  width: 16px; height: 16px; margin-top: 3px;
  border: 1px solid var(--filet-fort);
  border-radius: 50%;
  transition: border-color .16s, box-shadow .16s;
}
/* L'indicateur principal passe par le frère adjacent, qui marche partout :
   le bouton radio précède immédiatement sa pastille. `:has()` ne sert plus
   qu'à teinter la ligne entière — un agrément, pas l'information. */
.coffret input:checked + .coffret__case {
  border-color: var(--encre);
  border-width: 5px;
}
.coffret input:focus-visible + .coffret__case { outline: 2px solid var(--encre); outline-offset: 2px; }
/* Le fond de la ligne cochée était identique à celui du survol : on ne
   distinguait plus « je passe dessus » de « c'est mon choix ». La brume
   marque le choix, le blanc tiède reste au survol. */
.coffret:has(input:checked) { background: var(--brume-clair); }
.coffret:has(input:checked):hover { background: var(--brume-clair); }

.coffret__txt { display: grid; gap: 3px; }
.coffret__nom { font-size: 14.5px; font-weight: 550; color: var(--encre); }
.coffret__note { font-size: 12.5px; color: var(--encre-faible); line-height: 1.45; }
.coffret__marque {
  display: inline-block;
  margin-left: 5px;
  font-family: var(--mono);
  font-size: 9.5px;
  font-weight: 400;
  letter-spacing: .08em;
  color: var(--cuivre);
  border: 1px solid currentColor;
  border-radius: var(--r);
  padding: 1px 5px;
  vertical-align: 1px;
}
.coffret__prix {
  font-family: var(--mono);
  font-size: 13.5px;
  color: var(--encre);
  white-space: nowrap;
  text-align: right;
}
.coffret__prix s { display: block; font-size: 11px; color: var(--encre-faible); }

/* L'étiquette qui marque les éléments réservés au coffret complet */
.coffret__tag {
  display: inline-block;
  font-family: var(--mono);
  font-size: 9px;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--cuivre);
  border: 1px solid currentColor;
  border-radius: var(--r);
  padding: 1px 5px;
  vertical-align: 2px;
  margin-left: 4px;
}

@media (max-width: 480px) {
  .coffret { grid-template-columns: 18px 1fr; gap: 10px; padding: 12px 2px; }
  .coffret__prix { grid-column: 2; text-align: left; margin-top: 4px; }
  .coffret__prix s { display: inline; margin-right: 8px; }
}

/* --- 40. Les avis relevés chez le fabricant ------------------------------ */

/* Le bloc de note : la moyenne à gauche, la distribution réelle à droite.
   La distribution est affichée entière — y compris l'unique avis à une
   étoile. Un score sans sa distribution n'est pas une preuve, c'est un
   argument ; c'est la répartition qui rend le chiffre crédible. */
.note {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: clamp(24px, 5vw, 56px);
  align-items: center;
  margin-bottom: 34px;
  padding: 26px clamp(22px, 3vw, 34px);
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
  background: var(--blanc);
}
.note__score { display: grid; gap: 8px; justify-items: start; }
.note__chiffre {
  font-family: var(--titre);
  font-size: clamp(40px, 6vw, 58px);
  line-height: 1;
  letter-spacing: -.02em;
  color: var(--encre);
}
.note__chiffre span { font-size: .4em; color: var(--encre-faible); letter-spacing: 0; }
.note__n { font-size: 12.5px; line-height: 1.5; color: var(--encre-faible); }

.etoiles { display: inline-flex; gap: 2px; }
.etoiles svg { width: 16px; height: 16px; fill: var(--cuivre); }
.etoiles--sm svg { width: 13px; height: 13px; }
.etoiles--4 svg:last-child { fill: var(--brume-sourd); }

.repart { display: grid; gap: 7px; align-content: center; min-width: 0; margin: 0; }
/* Même piège que blockquote : la feuille du navigateur pose margin-left: 40px
   sur dd, ce qui poussait les jauges et rejetait les compteurs hors de la
   carte. Les items de grille n'échappent pas à la marge de l'agent. */
.repart dd { margin: 0; }
.repart__ligne {
  display: grid;
  grid-template-columns: 34px 1fr 26px;
  gap: 12px;
  align-items: center;
}
.repart dt {
  font-family: var(--mono);
  font-size: 10.5px;
  color: var(--encre-doux);
  white-space: nowrap;
}
.repart dt i { font-style: normal; color: var(--cuivre); }
.repart__jauge {
  height: 5px;
  border-radius: 3px;
  background: var(--brume-clair);
  overflow: hidden;
}
.repart__jauge span { display: block; height: 100%; background: var(--cuivre); border-radius: 3px; }
.repart__n { font-family: var(--mono); font-size: 10.5px; color: var(--encre-faible); text-align: right; }

.avis-rail { --rail-carte: min(80%, 320px); }
.avis-carte {
  display: grid;
  gap: 13px;
  align-content: start;
  padding: 22px 22px 20px;
  border: 1px solid var(--filet);
  border-radius: var(--r-lg);
  background: var(--blanc);
}
.avis-carte blockquote {
  /* La feuille de style du navigateur pose margin: 1em 40px sur blockquote —
     d'où un renfoncement de 40 px qui décentrait tout le texte des cartes. */
  margin: 0;
  font-size: 14.5px;
  line-height: 1.62;
  color: var(--encre-doux);
}
.avis-carte__pied {
  display: grid;
  gap: 3px;
  padding-top: 12px;
  border-top: 1px solid var(--filet);
  font-family: var(--mono);
  font-size: 10px;
  letter-spacing: .07em;
  color: var(--encre-faible);
}
.avis-carte__pied span:first-child { color: var(--encre); }

/* La carte qui porte une réserve : assumée, pas cachée en bas de rail. */
.avis-carte--reserve { background: var(--blanc-tiede); }
.avis-carte__note {
  font-size: 12px;
  line-height: 1.5;
  color: var(--encre-faible);
  padding-left: 11px;
  border-left: 2px solid var(--cuivre-clair);
}

/* Huit cartes ne tiennent jamais dans la largeur, même sur grand écran :
   l'indice de parcours reste donc visible partout, sinon le rail se lit
   comme une rangée coupée au lieu d'une rangée qu'on pousse. */
#avis-ecrits .rail-indice { display: flex; }

.avis-source {
  margin-top: 22px;
  font-size: 12.5px;
  color: var(--encre-faible);
  max-width: 62ch;
}

@media (max-width: 760px) {
  .note { grid-template-columns: 1fr; gap: 20px; padding: 20px; }
  .note__score { grid-template-columns: auto auto; align-items: baseline; gap: 6px 12px; }
  .note__n { grid-column: 1 / -1; }
}

/* --- 41. Les deux sections neuves, resserrées sur mobile ----------------- */

@media (max-width: 900px) {
  /* Le masque de cou : le packshot carré coûte 340 px pour un objet large et
     plat. Recadré en 16/9 il dit exactement la même chose, et les quatre
     champs passent sur deux colonnes. */
  #cou .duo { gap: 18px; }
  #cou .visuel { aspect-ratio: 16 / 9; }
  #cou .visuel img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
  #cou .specs { grid-template-columns: 1fr 1fr; gap: 14px 16px; }
  #cou .champ dd { font-size: 13.5px; }

  /* Côte à côte, la colonne de gauche est dimensionnée par la phrase de
     légende : elle écrasait les jauges jusqu'à les faire déborder de la
     carte. Sur mobile on empile — la moyenne et ses étoiles sur une ligne,
     les cinq jauges pleine largeur dessous. */
  .note { grid-template-columns: 1fr; gap: 14px; padding: 18px; }
  .note__score { grid-template-columns: auto auto; align-items: center; gap: 4px 12px; }
  .note__chiffre { font-size: 34px; }
  .note__n { grid-column: 1 / -1; font-size: 11.5px; }
  .repart__ligne { grid-template-columns: 26px 1fr 22px; gap: 10px; }
  .repart { gap: 6px; }
  .avis-carte { padding: 18px 18px 16px; }
  .avis-carte blockquote { font-size: 13.5px; }
  .avis-source { font-size: 11.5px; margin-top: 16px; }
}

/* Les quatre champs tiennent sur deux colonnes jusqu'en bas de gamme :
   les valeurs ont été raccourcies pour ça, et la section y gagne 110 px. */

/* --- 42. Le choix du coffret, repris dans le bloc d'offre ---------------- */

/* La buybox est à 12 000 px de là sur mobile : qui arrive en bas après avoir
   lu le comparatif et les avis ne va pas remonter pour changer de coffret.
   Le même sélecteur est donc rejoué ici, synchronisé avec celui du haut. */
.coffrets--offre {
  max-width: 520px;
  border-bottom: 1px solid var(--filet);
}
.coffrets--offre .coffret { padding-inline: 4px; }
.coffrets--offre .coffret:last-child { border-bottom: 0; }

/* Le prix du titre suit le coffret choisi : « 139 € une fois. Puis plus rien. » */
.prix__titre { white-space: nowrap; }

@media (max-width: 480px) {
  .coffrets--offre .coffret { grid-template-columns: 18px 1fr; padding-inline: 2px; }
  .coffrets--offre .coffret__prix { grid-column: 2; text-align: left; margin-top: 4px; }
  .coffrets--offre .coffret__prix s { display: inline; margin-right: 8px; }
}

/* --- 43. Le coffret épuisé ---------------------------------------------- */

/* Liquid pose `disabled` sur le bouton radio et la classe sur le libellé quand
   la variante n'est plus disponible. Sans ça, la ligne restait cochable et
   écrivait son identifiant dans le formulaire — on vendait une rupture. */
.coffret--epuise { cursor: not-allowed; opacity: .5; }
.coffret--epuise:hover { background: transparent; }
.coffret--epuise .coffret__prix { text-decoration: line-through; }
.coffret__marque--epuise {
  color: var(--encre-faible);
  border-color: var(--filet-fort);
  text-transform: uppercase;
}