/* ═══════════════════════════════════════════════════════════════════════════
   BLOG — feuille commune des 60 pages.
   Générée par tools/gabarit-blog.js. Ne pas éditer à la main : relancer le script.
   Arbitrages : 00-Strategie-et-suivi/ARBITRAGE-2026-08-04-elio-css-blog-12-selecteurs.md

   D'OÙ ÇA VIENT : seize variantes du même habillage vivaient en ligne, une copie
   par page. Fusionnées ici, sélecteur par sélecteur, les conflits tranchés par
   Elio et écrits dans tools/gabarit/resolutions.js.

   VOCABULAIRE : le blog nommait les mêmes choses autrement (--tx, --acc, --line,
   --card). Tout est renommé vers le vocabulaire unique de /css/etal.css.

   LA SEULE VALEUR QUI CHANGE, ET C'EST VOULU : l'accent. Mesuré, #E23A6E échoue
   AA en texte sur une carte (4,11) et en blanc sur aplat (4,15). C'est lui qui
   produisait les 16 à 54 nœuds sous le seuil par page. Trois jetons le remplacent :
     --accent-aplat #E23A6E  remplissage seul, ne porte JAMAIS de texte
     --accent       #EE6C99  variante texte — 5,88:1 sur une carte ✓
     --accent-fonce #b32d57  aplat porteur de texte blanc — 6,12:1 ✓
   Visible : les liens du blog passent de #E23A6E à #EE6C99. Même famille.

   ⚠️ Le blog reste sombre, et son noir n'est pas celui du site (#140d16 contre
   #140A10). Ces pages sont le seul actif de référencement : les repeindre est
   une décision de direction artistique. Les valeurs sont donc RÉAFFIRMÉES
   ci-dessous sous les noms canoniques. Le jour où on bascule, on supprime ce
   bloc : une seule édition, plus soixante.
   ═══════════════════════════════════════════════════════════════════════════ */

:root{
  --accent-aplat:#E23A6E; --accent:#EE6C99; --accent-fonce:#b32d57;
  --leaf:#3DA35D;   /* « sourcé ». Était en dur trois fois : .cmp .y, .chip.new, .progress. */
  --bg:#140d16; --surface-3:#1c1320; --surface:#221829; --surface-2:#2a1d31;
  --text:#f4edf2; --text-2:#a99cb2; --border:#332836;
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--text);font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;line-height:1.72;-webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{opacity:.85}
.wrap{max-width:760px;margin:0 auto;padding:0 22px}
.progress{position:fixed;top:0;left:0;height:3px;width:0;background:linear-gradient(90deg,var(--accent),#3DA35D);z-index:30;transition:width .1s linear}
header.nav{position:sticky;top:0;background:rgba(20,13,22,.82);backdrop-filter:blur(10px);border-bottom:1px solid var(--border);z-index:20}
.nav .row{max-width:980px;margin:0 auto;padding:0 22px;display:flex;align-items:center;justify-content:space-between;height:62px}
.brand{font-weight:800;font-size:1.32rem;color:var(--accent);letter-spacing:-.5px}
.nav nav a{color:var(--text-2);margin-left:20px;font-size:.94rem;font-weight:600}
.nav nav a.btn{background:var(--accent);color:#fff;padding:8px 16px;border-radius:999px}
.nav nav a.btn:hover{background:var(--accent-fonce);opacity:1}
.hero{max-width:980px;margin:0 auto;padding:64px 22px 26px;position:relative;overflow:clip}
.hero::after{content:"";position:absolute;top:-40px;right:-60px;width:340px;height:340px;background:radial-gradient(circle,rgba(226,58,110,.30),transparent 70%);filter:blur(20px);z-index:-1}
.hero h1{font-size:2.9rem;line-height:1.08;margin:.1em 0 .25em;letter-spacing:-1px}
.hero p{color:var(--text-2);font-size:1.2rem;max-width:560px}
.vstrip{display:flex;gap:10px;flex-wrap:wrap;margin-top:22px}
.vstrip span{font-size:.82rem;font-weight:700;background:var(--surface);border:1px solid var(--border);color:var(--text);padding:7px 13px;border-radius:999px}
.searchbar{max-width:980px;margin:14px auto 0;padding:0 22px}
.searchbar input{width:100%;background:var(--surface);border:1px solid var(--border);color:var(--text);border-radius:14px;padding:14px 18px;font-size:1rem;outline:none}
.searchbar input:focus{border-color:var(--accent)}
.cards{max-width:980px;margin:22px auto 0;padding:0 22px;display:grid;grid-template-columns:1fr 1fr;gap:18px}
.bcard{background:var(--surface);border:1px solid var(--border);border-radius:20px;padding:22px;transition:transform .25s,border-color .25s,box-shadow .25s;opacity:0;transform:translateY(18px)}
.bcard.in{opacity:1;transform:none}
.bcard:hover{transform:translateY(-4px);border-color:var(--accent);box-shadow:0 16px 40px rgba(0,0,0,.4)}
.bcard.feat{grid-column:1/-1;display:flex;flex-direction:column}
.chip{display:inline-block;font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.5px;color:var(--accent);background:rgba(226,58,110,.12);border:1px solid rgba(226,58,110,.3);padding:4px 10px;border-radius:999px;margin-bottom:12px}
.bcard h2{margin:.1em 0 .35em;font-size:1.3rem;line-height:1.25}
.bcard.feat h2{font-size:1.7rem}
.bcard h2 a{color:#fff}
.bcard p{color:var(--text-2);margin:.2em 0 .9em;font-size:.97rem}
.bmeta{font-size:.82rem;color:var(--text-2);display:flex;align-items:center;gap:8px}
.readmore{color:var(--accent);font-weight:700;font-size:.92rem}
.nores{max-width:980px;margin:30px auto;padding:0 22px;color:var(--text-2);display:none}
article{padding:26px 0 10px}
.crumb{color:var(--text-2);font-size:.9rem;display:inline-block;margin-bottom:18px}
article h1{font-size:2.3rem;line-height:1.15;margin:.1em 0 .25em;letter-spacing:-.6px}
.ameta{color:var(--text-2);font-size:.92rem;margin-bottom:26px;display:flex;gap:10px;align-items:center}
.lead{font-size:1.18rem;color:#ece2f0}
article h2{font-size:1.45rem;margin:1.7em 0 .5em;color:#fff}
article p{margin:.8em 0}
article ul{margin:.6em 0 .6em 1.1em}
article li{margin:.34em 0}
.faq{margin-top:32px;border-top:1px solid var(--border);padding-top:20px}
.faq h3{font-size:1.08rem;margin:1.1em 0 .2em}
.cta{display:block;background:linear-gradient(135deg,var(--accent),var(--accent-fonce));border-radius:22px;padding:30px 26px;text-align:center;margin:40px 0;color:#fff!important}
.cta b{font-size:1.4rem;display:block;margin-bottom:4px}
.cta span{opacity:.92;font-size:.98rem;display:block;margin-bottom:16px}
.cta .go{display:inline-block;background:#fff;color:var(--accent)!important;font-weight:800;padding:12px 26px;border-radius:999px}
.disc{color:var(--text-2);font-size:.82rem;font-style:italic;margin:22px 0}
.methodo{background:var(--surface);border:1px solid var(--border);border-left:3px solid var(--leaf);border-radius:12px;padding:14px 17px;margin:18px 0;font-size:.9rem;color:var(--text-2)}
.methodo strong{color:var(--text)}
.methodo a{font-weight:700}
.related{max-width:760px;margin:8px auto 0}
.related h3{font-size:1.1rem;margin-bottom:12px}
.rgrid{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.rcard{background:var(--surface);border:1px solid var(--border);border-radius:14px;padding:15px 17px}
.rcard:hover{border-color:var(--accent)}
.rcard .chip{margin-bottom:7px}
.rcard a{color:#fff;font-weight:700;font-size:.98rem}
footer{border-top:1px solid var(--border);margin-top:48px;padding:30px 0;color:var(--text-2);font-size:.86rem;text-align:center}
footer a{color:var(--text-2)}
footer .ft-cta{color:var(--accent);font-weight:700}
article h3{font-size:1.2rem;margin:1.5em 0 .3em;color:var(--text)}
.tbl{width:100%;border-collapse:collapse;margin:1em 0;font-size:.92rem}
.tbl th,.tbl td{border:1px solid var(--border);padding:8px 10px;text-align:left}
.tbl th{background:var(--surface-2);color:#fff}
.tbl td{color:var(--text-2)}
figure.shot{margin:26px auto;max-width:340px}
figure.shot img{width:100%;height:auto;border-radius:18px;border:1px solid var(--border);display:block}
figure.shot figcaption{font-size:.78rem;color:var(--text-2);text-align:center;margin-top:8px}
.tblwrap{overflow-x:auto;-webkit-overflow-scrolling:touch;margin:16px 0 4px;border:1px solid var(--border);border-radius:14px;background:var(--surface)}
.cmp th,.cmp td{padding:11px 13px;border-bottom:1px solid var(--border);text-align:left;vertical-align:top;line-height:1.45}
.cmp thead th{background:var(--surface-2);color:#fff;font-size:.8rem;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
.cmp tbody tr:last-child th,.cmp tbody tr:last-child td{border-bottom:none}
.cmp tbody th{color:var(--text-2);font-weight:600;font-size:.86rem}
.cmp th.rad,.cmp td.rad{background:rgba(226,58,110,.10)}
.cmp thead th.rad{color:var(--accent)}
.cmp .y{color:var(--leaf);font-weight:700}
.cmp .n{color:var(--text-2);font-weight:700}
.cmp .p{color:#D9A441;font-weight:700}
.tnote{color:var(--text-2);font-size:.84rem;font-style:italic;margin:10px 0 0}
.src{border-top:1px solid var(--border);padding-top:14px;margin:22px 0;font-size:.84rem;color:var(--text-2)}
.src b{color:var(--text)}
.ptable{width:100%;border-collapse:collapse;margin:1em 0}
.ptable th,.ptable td{text-align:left;padding:9px 10px;border-bottom:1px solid var(--border);font-size:.95rem}
.ptable th{color:var(--text-2);font-weight:700;font-size:.8rem;text-transform:uppercase;letter-spacing:.3px}
.filters{max-width:980px;margin:14px auto 0;padding:0 22px;display:flex;gap:8px;flex-wrap:wrap}
.fbtn{background:var(--surface);border:1px solid var(--border);color:var(--text-2);padding:7px 15px;border-radius:999px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:inherit;transition:border-color .2s,color .2s}
.fbtn:hover{border-color:var(--accent);color:var(--text)}
.fbtn.on{background:rgba(226,58,110,.14);border-color:var(--accent);color:var(--accent)}
.chip.new{color:#3DA35D;background:rgba(61,163,93,.12);border-color:rgba(61,163,93,.35)}
.cmp{width:100%;border-collapse:collapse;font-size:.9rem;min-width:480px}
.cmp caption{caption-side:top;text-align:left;padding:13px 14px 4px;color:var(--text-2);font-size:.84rem}
.cmp .s{display:block;font-size:.76rem;color:var(--text-2);margin-top:3px}
.methodo b{color:var(--text)}
.srcs{font-size:.84rem;color:var(--text-2)}
.srcs li{margin:.3em 0}

/* ── Réécritures de palette (§ 0 de l'arbitrage) ─────────────────────── */
.nav nav a.btn{background:var(--accent-fonce);color:#fff;padding:8px 16px;border-radius:999px;min-height:44px;display:inline-flex;align-items:center}
.nav nav a.btn:hover{background:var(--accent-aplat);color:var(--bg);opacity:1}
.cta{display:block;background:var(--accent-fonce);border-radius:22px;padding:30px 26px;text-align:center;margin:40px 0;color:#fff!important}
.cta .go{display:inline-flex;align-items:center;justify-content:center;min-height:44px;background:#fff;color:var(--accent-fonce)!important;font-weight:800;padding:12px 26px;border-radius:999px}
.nav .brand{display:inline-flex;align-items:center;min-height:44px}
.nav nav a{display:inline-flex;align-items:center;min-height:44px}
.readmore{color:var(--accent);font-weight:700;font-size:.92rem;position:relative}
.readmore::after{content:'';position:absolute;inset:-10px -8px;border-radius:8px}
footer .ft-cta{color:var(--accent);font-weight:700;position:relative}
footer .ft-cta::after{content:'';position:absolute;inset:-14px -10px;border-radius:8px}
.fbtn{background:var(--surface);border:1px solid var(--border);color:var(--text-2);padding:7px 15px;border-radius:999px;font-size:.86rem;font-weight:700;cursor:pointer;font-family:inherit;position:relative;transition:border-color .2s,color .2s}
.fbtn::after{content:'';position:absolute;inset:-6px;border-radius:999px}
/* ⚠️ HORS des 12 arbitrages d'Elio — 13ᵉ changement, en attente de sa validation.
   Mesuré : sans cette ligne, `micronutriments-supplementation-ciqual-usda(-en)`
   déborde de 17 px et 5 px à 320 px de large (table `.tbl` à 6 colonnes). `anywhere`
   et non `break-word` : seul `anywhere` réduit la largeur min-content, donc seul lui
   corrige le débordement. Contrepartie : la coupure peut tomber au milieu d'un mot
   (« Vitamine B12 ») — l'alternative propre est `.tblwrap` autour de ces deux tables,
   ce qui touche le HTML et relève d'Elio. Seul effet mesuré ailleurs : aucun.
   Retirer cette ligne = réintroduire un débordement horizontal : voir tools/qa/blog-controles-elio.js n° 3. */
.tbl th,.tbl td{overflow-wrap:anywhere}

/* ── Points de rupture, en dernier pour rester prioritaires ───────────── */
@media(max-width:720px){.nav .row{height:54px}.brand{font-size:1.05rem}.nav nav a{margin-left:9px;font-size:.82rem}.nav nav a.btn{padding:6px 11px}.cards{grid-template-columns:1fr}.hero h1{font-size:2.1rem}article h1{font-size:1.9rem}.tbl{font-size:.82rem}}
@media(max-width:600px){.rgrid{grid-template-columns:1fr}}