/* ═══════════════════════════════════════════════════════════════════════════
   ACCUEIL — habillage propre à index.html.
   Sorti du <style> en ligne de index.html (79 Ko) le 04/08/2026 par Oignon 🧅.

   POURQUOI : la page la plus visible du site portait tout son CSS en ligne, donc
   jamais mis en cache, non partageable, et re-téléchargé à chaque visite. Ses
   jetons y vivaient en troisième exemplaire du même nuancier.

   Les JETONS sont partis dans /css/etal.css (vocabulaire unique du site) et ont
   été renommés vers ce vocabulaire — MÊMES VALEURS, autres noms :
     --bg→--bg   --text→--text   --text-2→--text-2   --border→--border
     --border-fort→--border-fort   --accent→--accent   --accent-aplat→--accent-aplat
     --accent-sur→--accent-sur   --accent-dim→--accent-dim   --shadow→--shadow
   Aucune valeur n'a changé. Vérifié au pixel : tools/qa/etal-snapshot.js.

   ORDRE DE CHARGEMENT : /css/etal.css PUIS /css/accueil.css. Ne pas inverser :
   la restriction color-scheme ci-dessous en dépend.

   Les @font-face restent ici : l'accueil sert trois graisses avec unicode-range,
   /objectifs/ sert une variable 200-800. Les fondre changerait le rendu du texte.
   ═══════════════════════════════════════════════════════════════════════════ */
/* ── Bricolage Grotesque, servie en local (aucun CDN). Deux chemins pour que le
      brouillon s'affiche aussi ouvert depuis ce sous-dossier. ────────────────── */
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:600;font-display:swap;
  src:url(/fonts/bricolage-2.woff2) format('woff2'),url(../fonts/bricolage-2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:700;font-display:swap;
  src:url(/fonts/bricolage-2.woff2) format('woff2'),url(../fonts/bricolage-2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}
@font-face{font-family:'Bricolage Grotesque';font-style:normal;font-weight:800;font-display:swap;
  src:url(/fonts/bricolage-2.woff2) format('woff2'),url(../fonts/bricolage-2.woff2) format('woff2');
  unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+2000-206F,U+20AC,U+2122,U+2212,U+FEFF,U+FFFD;}


/* L'accueil impose le clair par défaut (DA validée). etal.css déclare
   `color-scheme:light dark` pour tout le site ; on le restreint ici à
   l'identique de ce qui existait avant l'extraction. */
:root{color-scheme:light}
@media (prefers-color-scheme:dark){:root:where(:not([data-theme="light"])){color-scheme:dark}}
:root[data-theme="dark"]{color-scheme:dark}

/* ═══ BASE ════════════════════════════════════════════════════════════════════ */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:17px;line-height:1.62;
  -webkit-font-smoothing:antialiased;overflow-x:hidden;
}
/* Deux filets verticaux qui encadrent la colonne : la « page de journal d'étal ».
   Ce n'est ni une texture ni un motif — c'est une réglure. Écrans larges seulement. */
@media (min-width:1240px){
  body::before{
    /* z-index au-dessus du contenu (et non derrière) : les bandes sont opaques et
       masqueraient la réglure. Les deux filets tombent HORS de la colonne de texte
       (1120 px centrés), ils ne croisent jamais un caractère. */
    content:'';position:fixed;inset:0;z-index:5;pointer-events:none;
    background:
      linear-gradient(90deg,transparent calc(50% - 592px),var(--border) calc(50% - 592px),var(--border) calc(50% - 591px),transparent calc(50% - 591px)),
      linear-gradient(90deg,transparent calc(50% + 591px),var(--border) calc(50% + 591px),var(--border) calc(50% + 592px),transparent calc(50% + 592px));
  }
}
main,header,footer{position:relative;z-index:1}
img,svg{max-width:100%}
p{margin:0}
a{color:var(--accent);text-decoration-thickness:1px;text-underline-offset:3px}
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:4px}
.wrap{max-width:1120px;margin:0 auto;padding:0 22px}
@media (min-width:768px){.wrap{padding:0 34px}}
.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}
.saut{position:absolute;left:-9999px;top:0;background:var(--surface);color:var(--text);padding:12px 18px;z-index:100;border:2px solid var(--text)}
.saut:focus{left:16px;top:12px}

/* ── Deux voix typographiques ───────────────────────────────────────────────── */
h1,h2,h3{margin:0;font-family:var(--serif);font-weight:400;letter-spacing:0;line-height:1.06}
h1{font-size:clamp(2.6rem,6.6vw,4.7rem)}
h1 em{font-style:italic;color:var(--ton-t,var(--accent))}
h2{font-size:clamp(1.95rem,4.2vw,3.05rem);line-height:1.08}
h3{font-size:1.28rem;line-height:1.25}
.lead{margin-top:20px;font-size:1.08rem;color:var(--text-2);max-width:34em}
.mini{font-size:.86rem;color:var(--text-2)}

/* ── TAMPON : le libellé de section. Double anneau, capitales espacées, rotation
      légère. Remplace l'« eyebrow » générique. ─────────────────────────────── */
.tampon{
  display:inline-flex;align-items:center;gap:9px;
  font-family:var(--grot);font-weight:800;font-size:.66rem;letter-spacing:.17em;
  text-transform:uppercase;color:var(--ton-t,var(--accent));
  border:1.5px solid currentColor;border-radius:999px;padding:7px 15px;
  transform:rotate(-1.6deg);margin:0 0 26px 5px;position:relative;
}
.tampon::before{content:'';width:7px;height:7px;border-radius:50%;background:currentColor;flex:none}
/* Le second anneau du tampon. Un `outline` décalé redessine un rectangle arrondi
   aux extrémités de la pilule : il faut un vrai anneau, en pseudo-élément. */
.tampon::after{
  content:'';position:absolute;inset:-4.5px;border:1.5px solid currentColor;
  border-radius:999px;opacity:.75;pointer-events:none;
}

/* ── BOUTONS : imprimés, pas des pilules. Rayon 8 px + ombre dure. ──────────── */
.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:9px;
  min-height:50px;min-width:48px;padding:13px 24px;border-radius:8px;
  font-family:var(--grot);font-weight:700;font-size:1rem;letter-spacing:-.005em;
  text-decoration:none;border:1.5px solid transparent;cursor:pointer;
  box-shadow:var(--shadow);
  transition:transform .15s var(--ease),box-shadow .15s var(--ease),background .15s var(--ease);
}
.btn:hover{transform:translate(-1px,-1px);box-shadow:var(--shadow-fort)}
.btn:active{transform:translate(1px,2px);box-shadow:0 0 0 rgba(0,0,0,0)}
.btn-1{background:var(--accent-aplat);color:var(--accent-sur);border-color:var(--accent-aplat)}
.btn-2{background:var(--surface);color:var(--text);border-color:var(--border-fort)}
.btn-2:hover{border-color:var(--text)}
.btn-sm{min-height:44px;padding:10px 17px;font-size:.93rem}
.btns{display:flex;gap:14px;flex-wrap:wrap;align-items:center;margin-top:30px}
.cta-hint{font-size:.86rem;color:var(--text-2);margin-top:14px}
/* L'astérisque de la mention « gratuit » : un vrai exposant, cliquable, qui renvoie
   à la note du colophon. Discret mais repérable — il ne doit jamais devenir décoratif. */
.ast{font-family:var(--sans);font-size:.78em;vertical-align:.42em;line-height:1;
  font-weight:700;color:var(--accent);text-decoration:none;padding:0 1px}
.ast:hover{text-decoration:underline}

/* ═══ EN-TÊTE — filet double de broadsheet, aucun flou ════════════════════════ */
header.nav{position:sticky;top:0;z-index:40;background:var(--bg);border-bottom:3px double var(--border-fort)}
.nav .row{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:68px}
.marque{
  font-family:var(--serif);font-size:1.5rem;color:var(--text);text-decoration:none;
  display:inline-flex;align-items:center;gap:10px;letter-spacing:.01em;
}
.marque .mark{width:22px;height:26px;flex:none}
.nav-liens{display:flex;align-items:center;gap:2px}
.nav-liens a:not(.btn){
  color:var(--text-2);text-decoration:none;font-family:var(--grot);font-size:.9rem;font-weight:700;
  padding:12px 13px;min-height:44px;display:inline-flex;align-items:center;border-radius:6px;
}
.nav-liens a:not(.btn):hover{color:var(--text);background:var(--surface-2)}
.theme-btn{
  min-width:44px;min-height:44px;border-radius:8px;border:1.5px solid var(--border-fort);
  background:var(--surface);color:var(--text);cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;margin-right:6px;
}
.theme-btn[hidden]{display:none}
.ico{width:20px;height:20px;flex:none;stroke:currentColor;fill:none;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
/* .hide-m masquait Sources/Blog/langue sous 720px SANS repli — remplacé par le
   menu hamburger de css/nav-mobile.css (`.menu-mobile`/`.menu-btn`). */

/* ═══ BANDES — chaque section est portée par une mascotte et prend SA couleur ══
   Le voile de couleur est très bas (6 %) : il colore la page sans jamais toucher
   au contraste du texte, qui reste encre sur papier.                            */
.bande{position:relative;padding:88px 0;background:var(--bg)}
@supports (background:color-mix(in srgb,red 6%,white)){
  .bande.teinte{background:color-mix(in srgb,var(--ton) 6%,var(--bg))}
}
@media (max-width:700px){.bande{padding:64px 0}}
/* Bord dentelé façon papier d'étiquette (ciseaux cranteurs), 18 × 9 px.
   Décoratif : aria-hidden implicite (pseudo-élément). */
.bande.teinte::before{
  content:'';position:absolute;top:-9px;left:0;right:0;height:9px;pointer-events:none;
  background:radial-gradient(circle at 9px 9px,var(--bg) 8px,transparent 8.5px);
  background-size:18px 9px;background-repeat:repeat-x;
}
@supports (background:color-mix(in srgb,red 6%,white)){
  .bande.teinte::before{background:
    radial-gradient(circle at 9px 9px,color-mix(in srgb,var(--ton) 6%,var(--bg)) 8px,transparent 8.5px);
    background-size:18px 9px;background-repeat:repeat-x;}
}

/* ── Duo mascotte + propos : asymétrique, alterné, jamais centré ────────────── */
.duo{display:grid;grid-template-columns:1fr;gap:34px;align-items:center}
@media (min-width:900px){
  .duo{grid-template-columns:minmax(0,7fr) minmax(0,5fr);gap:56px}
  .duo.inverse{grid-template-columns:minmax(0,5fr) minmax(0,7fr)}
  .duo.inverse .propos{order:2}
  .duo.inverse .scene{order:1}
}
.scene{display:flex;flex-direction:column;align-items:center;gap:0;min-width:0}
/* Taille réelle, pas des vignettes. --mh corrige l'ÉCART OPTIQUE entre personnages :
   les boîtes du générateur incluent les accessoires (l'haltère de Brock, la lanterne
   de Hilal), donc à hauteur CSS égale, ces deux-là paraissent plus petits. */
/* `color` pilote l'ombre au sol des personnages (elle est en `currentColor` dans
   les SVG, et `fill` s'hérite à travers <use> — contrairement à `opacity`).
   Papier : une ombre prune douce. Aubergine : elle s'efface, il fait nuit. */
.mas{display:block;height:calc(var(--mh,1) * clamp(215px,29vw,335px));width:auto;max-width:100%;color:#2E2B25}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .mas{color:#000}}
:root[data-theme="dark"] .mas{color:#000}
.mas-sm{height:calc(var(--mh,1) * clamp(112px,14vw,142px))}
/* Réplique : bulle à rayon volontairement dissymétrique (18/18/18/4), posée à la
   main sur la gauche de la scène — elle chevauche l'aplomb du personnage. */
.replique{
  position:relative;max-width:26ch;background:var(--surface);
  align-self:flex-start;margin:-18px 0 0 clamp(0px,3vw,34px);transform:rotate(-1deg);
  border:1.5px solid var(--ton-t,var(--border-fort));border-radius:18px 18px 18px 4px;
  padding:14px 18px;font-family:var(--serif);font-style:italic;font-size:1.06rem;
  line-height:1.4;color:var(--text);box-shadow:var(--shadow);
}
.replique b{
  display:block;font-family:var(--grot);font-style:normal;font-weight:800;
  font-size:.64rem;letter-spacing:.16em;text-transform:uppercase;
  color:var(--ton-t);margin-bottom:6px;
}

/* ── ÉTIQUETTE DE CAGEOT — le composant signature. Œillet poinçonné, ficelle,
      filet intérieur, ombre dure. Sert pour les codes source et les principes. ─ */
.etiquette{
  position:relative;display:block;background:var(--surface);
  border:1.5px solid var(--ton-t,var(--border-fort));border-radius:3px;
  padding:20px 20px 20px 40px;box-shadow:var(--shadow);
}
.etiquette::before{ /* l'œillet */
  content:'';position:absolute;left:15px;top:22px;width:11px;height:11px;border-radius:50%;
  background:var(--bg);border:1.5px solid var(--ton-t,var(--border-fort));
}
.etiquette::after{ /* la ficelle qui sort de l'œillet */
  content:'';position:absolute;left:-16px;top:6px;width:34px;height:22px;
  border-left:1.5px solid var(--ton-t,var(--border-fort));
  border-bottom:1.5px solid var(--ton-t,var(--border-fort));
  border-radius:0 0 0 16px;opacity:.55;
}
.etiquette .code{
  font-family:var(--mono);font-size:.74rem;letter-spacing:.02em;color:var(--text-2);
  display:block;margin-bottom:8px;
}
.etiquette h3{margin-bottom:8px}
.etiquette p{color:var(--text-2);font-size:.96rem}
/* `align-items:start` : chaque étiquette garde SA hauteur. Étirées à la même
   hauteur, elles redeviendraient une grille de cartes — exactement ce qu'on fuit. */
.etiquettes{display:grid;grid-template-columns:1fr;gap:22px;margin-top:44px;align-items:start}
@media (min-width:820px){.etiquettes{grid-template-columns:repeat(3,minmax(0,1fr));gap:26px}}
/* Rotations minuscules et INÉGALES : trois étiquettes posées à la main, pas une grille. */
.etiquettes .etiquette:nth-child(1){transform:rotate(-.7deg)}
.etiquettes .etiquette:nth-child(2){transform:rotate(.5deg)}
.etiquettes .etiquette:nth-child(3){transform:rotate(-.35deg)}
/* 4ᵉ étiquette (bande « Ton journal ne part nulle part », 04/08) : sans cette règle
   elle serait la seule parfaitement droite du site — la main se verrait. */
.etiquettes .etiquette:nth-child(4){transform:rotate(.6deg)}

/* ── FICHE ALIMENT — composée comme une étiquette collée sur le cageot ──────── */
.fiche{
  background:var(--surface);border:1.5px solid var(--ton-t);border-radius:3px;
  max-width:440px;box-shadow:var(--shadow);overflow:hidden;
}
.fiche .tete{padding:22px 24px 16px;border-bottom:1.5px dashed var(--border-fort)}
.fiche .tete h3{font-size:1.34rem}
.fiche .por{font-size:.86rem;color:var(--text-2);margin-top:4px}
.fiche .code{font-family:var(--mono);font-size:.74rem;color:var(--text-2);margin-top:12px;display:block}
.fiche .badge{
  float:right;margin-left:12px;font-family:var(--grot);font-weight:800;font-size:.64rem;
  letter-spacing:.14em;text-transform:uppercase;color:var(--ton-t);
  border:1.5px solid currentColor;border-radius:2px;padding:5px 9px;transform:rotate(2deg);
}
.fiche .ligne{
  display:flex;align-items:baseline;gap:10px;padding:12px 24px;font-size:.97rem;
  border-bottom:1px solid var(--border);
}
.fiche .ligne:last-child{border-bottom:0}
.fiche .ligne .pts{flex:1 1 auto;border-bottom:1.5px dotted var(--border-fort);transform:translateY(-4px);min-width:20px}
/* Le qualificatif (« valeur approchée par la table ») passe SOUS le nom du nutriment :
   sur une seule ligne il écrasait le trait de conduite jusqu'à le faire disparaître. */
.fiche .ligne em{display:block;font-size:.83em;font-style:italic;color:var(--text-2);margin-top:1px}
.fiche .ligne b{font-family:var(--grot);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap}
.fiche .estim{color:var(--t-avo-t)}
.fiche .vide{font-family:var(--sans);font-weight:400;font-style:italic;color:var(--text-2)}
.fiche .note{padding:14px 24px 18px;font-size:.8rem;color:var(--text-2);background:var(--surface-2)}

/* ── ARDOISE — le relevé du catalogue en registre à points de conduite.
      Grands nombres en serif, libellés en grotesque : les deux voix. ────────── */
.ardoise{margin-top:44px;border-top:3px double var(--border-fort);border-bottom:3px double var(--border-fort)}
.ardoise .l{
  display:flex;align-items:baseline;gap:12px;padding:20px 2px;
  border-bottom:1px solid var(--border);
}
.ardoise .l:last-child{border-bottom:0}
.ardoise .lib{
  font-family:var(--grot);font-weight:700;font-size:.9rem;letter-spacing:.01em;
  color:var(--text);flex:0 1 auto;
}
.ardoise .lib span{display:block;font-weight:600;font-size:.8rem;color:var(--text-2);letter-spacing:0}
.ardoise .pts{flex:1 1 auto;border-bottom:1.5px dotted var(--border-fort);transform:translateY(-5px);min-width:24px}
.ardoise .val{
  font-family:var(--serif);font-size:clamp(1.6rem,3.6vw,2.35rem);line-height:1;
  font-variant-numeric:tabular-nums;color:var(--ton-t);white-space:nowrap;flex:none;
}
/* La barre de couverture : un filet, pas un composant de dashboard. */
.jauge{height:3px;background:var(--border);margin-top:10px;position:relative;overflow:hidden}
.jauge i{position:absolute;inset:0 auto 0 0;width:var(--w);background:var(--ton-t);
  transform-origin:left center;animation:remplir .5s var(--ease) both .15s}
@keyframes remplir{from{transform:scaleX(0)}to{transform:scaleX(1)}}
.ardoise .l.avec-jauge{display:block}
.ardoise .l.avec-jauge .haut{display:flex;align-items:baseline;gap:12px}

/* ── LE FIL — index du cast, sur une ficelle tendue ─────────────────────────── */
.fil{border-top:1px solid var(--border);border-bottom:1px solid var(--border);padding:14px 0;background:var(--bg)}
.fil ul{
  display:flex;gap:6px;list-style:none;margin:0;padding:0;
  overflow-x:auto;scrollbar-width:none;overscroll-behavior-x:contain;
}
.fil ul::-webkit-scrollbar{display:none}
.fil a{
  display:inline-flex;align-items:center;gap:8px;white-space:nowrap;
  padding:10px 13px;min-height:44px;border-radius:6px;text-decoration:none;
  font-family:var(--grot);font-weight:700;font-size:.85rem;color:var(--text-2);
}
.fil a:hover{background:var(--surface-2);color:var(--text)}
/* 20/08 — pastille en --ton-t (variante calibrée), PAS en --ton (aplat brut) :
   une pastille est un élément d'interface, seuil WCAG 1.4.11 = 3:1. Mesuré
   avant correction en sombre : Pep 1,64:1, Aube 1,58:1, Oli 2,53:1. */
.fil .pt{width:9px;height:9px;border-radius:50%;background:var(--ton-t,var(--ton));flex:none}

/* ── LE CAST — sept personnages en rang, chacun sur sa couleur ──────────────── */
.cast{
  display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-top:44px;
}
@media (min-width:620px){.cast{grid-template-columns:repeat(4,minmax(0,1fr))}}
@media (min-width:1000px){.cast{grid-template-columns:repeat(7,minmax(0,1fr));gap:10px}}
.cast a{
  display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;
  padding:18px 8px 16px;text-decoration:none;color:var(--text);
  border:1.5px solid transparent;border-radius:4px;min-height:44px;
  transition:transform .16s var(--ease),border-color .16s var(--ease),background .16s var(--ease);
}
.cast a:hover{transform:translateY(-4px);border-color:var(--ton-t);background:var(--surface)}
/* Socle : hauteur commune, personnages calés en bas. Sans ça, les sept lignes de
   sol et les sept prénoms partent chacun à une hauteur différente — un rang de
   mascottes doit se lire comme un rang, pas comme sept vignettes indépendantes. */
.cast .socle{display:flex;align-items:flex-end;justify-content:center;
  height:calc(1.14 * clamp(112px,14vw,142px));width:100%}
.cast .nom{font-family:var(--serif);font-size:1.3rem;line-height:1.1;margin-top:4px}
/* min-height : « Bien manger avec l'âge » passe sur deux lignes, les cinq autres
   non. Sans réserve de hauteur, le rang se désaligne sur la dernière ligne. */
.cast .obj{font-family:var(--grot);font-weight:600;font-size:.74rem;color:var(--text-2);
  line-height:1.3;min-height:2.6em}
.cast .pt{width:7px;height:7px;border-radius:50%;background:var(--ton-t,var(--ton));margin-top:2px}

/* ── CTA FINAL — le seul bloc centré de la page, et il l'assume ─────────────── */
.final{
  position:relative;background:var(--surface);border:1.5px solid var(--ton-t);
  border-radius:4px;padding:52px 26px 0;text-align:center;box-shadow:var(--shadow);
  overflow:hidden;
}
.final .btns{justify-content:center}
.final .lead{margin-left:auto;margin-right:auto;text-align:center}
/* Les mascottes dépassent du bord bas, comme derrière un étal. */
.rangee{display:flex;justify-content:center;align-items:flex-end;gap:clamp(2px,1.6vw,22px);margin-top:34px}
.rangee .mas{height:clamp(96px,14vw,140px);margin-bottom:-14px}

/* ── PIED DE PAGE — colophon. Dense, composé, il porte les mentions. ────────── */
footer{border-top:3px double var(--border-fort);margin-top:0;padding:52px 0 44px;background:var(--bg)}
.colophon{display:grid;grid-template-columns:1fr;gap:32px}
@media (min-width:840px){.colophon{grid-template-columns:1.15fr 1fr 1fr;gap:44px}}
.colophon h2{font-size:2.1rem}
.colophon .cf{font-family:var(--grot);font-weight:800;font-size:.66rem;letter-spacing:.16em;
  text-transform:uppercase;color:var(--text-2);margin:0 0 14px}
.colophon ul{list-style:none;margin:0;padding:0;font-size:.92rem}
.colophon li{margin-bottom:2px}
.colophon a{color:var(--text-2);text-decoration:none;display:inline-flex;align-items:center;
  min-height:44px;padding:6px 0}
.colophon a:hover{color:var(--text);text-decoration:underline}
.colophon .src{color:var(--text-2);font-size:.92rem;line-height:1.7}
.notes{
  margin-top:40px;padding-top:22px;border-top:1px solid var(--border);
  font-size:.775rem;line-height:1.62;color:var(--text-2);max-width:78ch;
}
.notes p{margin-bottom:9px}
.notes p:target{background:var(--accent-dim);outline:2px solid var(--accent);outline-offset:4px;border-radius:3px}
.notes .marq{font-family:var(--grot);font-weight:800;color:var(--text)}

/* ── Entrée en cascade : n'agit QUE si /js/accueil-store.js s'est exécuté ───── */
.js-reveal .reveal{opacity:0;transform:translateY(16px);
  transition:opacity .34s var(--ease),transform .34s var(--ease);
  transition-delay:calc(var(--i,0) * 60ms)}
.js-reveal .reveal.vu{opacity:1;transform:none}

@media (prefers-reduced-motion:reduce){
  *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
  .jauge i{transform:none}
  .js-reveal .reveal{opacity:1!important;transform:none!important}
}