/* =============================================================
   mq.css — IDENTITÉ GLOBALE MonQuiver (source unique)
   Chargé après le <style> inline de chaque page → fait autorité
   sur l'identité (typo, chrome, primitives éditoriales) sans
   casser les layouts spécifiques (cartes, grilles) des pages.
   Direction : Fraunces (titres) + Inter (texte), teal + corail,
   header flou collant, bandes sombres, filets 1px, reveal.
   ============================================================= */

/* ---- Tokens canoniques (réchauffés, surchargent les :root inline) ---- */
/* ---- Fonts auto-hébergées (RGPD : aucune requête tierce) ---- */
@font-face{font-family:'Fraunces';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/fraunces-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Fraunces';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/fraunces-latin-600-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:400;font-display:swap;src:url('fonts/inter-latin-400-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:500;font-display:swap;src:url('fonts/inter-latin-500-normal.woff2') format('woff2')}
@font-face{font-family:'Inter';font-style:normal;font-weight:600;font-display:swap;src:url('fonts/inter-latin-600-normal.woff2') format('woff2')}

:root{
  --ink:#16191e; --ink2:#54606a; --ink3:#8b8f88;
  --paper:#f4f1e9; --paper-2:#faf8f2; --bg:#ffffff; --line:#e4e1d6;
  --teal:#0f6e56; --teal-d:#0a5240; --teal-dd:#073a2e; --teal-2:#2a9b7d;
  --cta:#d9532b; --cta-d:#be4521;
  --coral:#d9532b; --coral-d:#be4521; --coral-dd:#8f3315; --coral-tint:#fbeae3; --coral-line:#f0cdbf;
  --amber:#c9760f; --amber-d:#b4690e; --amber-dd:#8a4f0a; --amber-tint:#fbf1e1; --amber-line:#ecd8b5;
  --tint:#e6efe9; --tint-line:#cfe1d8; --cream:#eef4ef;
  --line-dark:#2c463d;
  --r:5px;
  --sans:'Inter',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
  --serif:'Fraunces',Georgia,'Times New Roman',serif;
}

/* ---- Base typo ---- */
html{scroll-behavior:smooth}
body{font-family:var(--sans);-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
.serif,h1,h2,.hero h1,.hero2 h1{font-family:var(--serif)}
h1,h1.serif,.hero2 h1{font-weight:600;letter-spacing:-.02em}
h2,h2.serif{font-weight:600;letter-spacing:-.015em}
.eyebrow{font-family:var(--sans)}

/* ---- Chrome : header flou collant ---- */
header{position:sticky;top:0;z-index:50;
  border-top:3px solid var(--teal);
  background:rgba(248,246,239,.82);
  -webkit-backdrop-filter:saturate(150%) blur(11px);
  backdrop-filter:saturate(150%) blur(11px);
  border-bottom:1px solid var(--line);
  box-shadow:0 1px 0 rgba(0,0,0,.03);
}
@supports not ((backdrop-filter:blur(1px)) or (-webkit-backdrop-filter:blur(1px))){
  header{background:var(--paper-2)}
}
/* Header collant : un overflow-x:hidden sur html/body casse position:sticky.
   On passe en overflow-x:clip (ne crée pas de conteneur de défilement) là où
   c'est supporté ; sinon on garde hidden (pas de scroll horizontal parasite). */
html,body{overflow-x:hidden}
@supports (overflow-x:clip){ html,body{overflow-x:clip} }

/* Alignement des cartes : .wrap et .cwrap doivent partager le même gouttière
   (sinon décalage de 8px entre l'intro et le panneau outil). */
.wrap,.cwrap{padding-left:24px;padding-right:24px}

/* ---- Retour tactile boutons / cartes ---- */
.btn,.bigcard,.hubcard,.seccard{transition:transform .15s ease,box-shadow .15s ease,border-color .15s ease}
.btn:active,.bigcard:active,.hubcard:active{transform:scale(.985)}

/* ---- Bande sombre de réassurance ---- */
.band{background:var(--teal-dd);border-top-color:var(--line-dark);border-bottom-color:var(--line-dark);color:#cfe4d9}
.band h1,.band h2,.band h3{color:#fff}
.band .value,.band p{color:#bfe0d4}

/* ---- Filets fins ---- */
.blocksep{height:1px;background:linear-gradient(90deg,transparent, var(--line) 12%, var(--line) 88%, transparent)}

/* ---- Reveal au scroll (piloté par mq.js) ---- */
.mq-reveal{opacity:0;transform:translateY(16px)}
.mq-reveal.in{opacity:1;transform:none;transition:opacity .7s ease, transform .7s ease}

/* ---- Accessibilité : on désactive tout mouvement ---- */
@media (prefers-reduced-motion: reduce){
  html{scroll-behavior:auto}
  .mq-reveal{opacity:1 !important;transform:none !important;transition:none !important}
  .btn:active,.bigcard:active,.hubcard:active{transform:none}
}

/* =============================================================
   DESIGN SYSTEM v2 — « atelier vivant » (charte figée 2026-06-30)
   Réf : concept/11_home.html + CHARTE.md. Chargé en dernier =
   fait autorité sur la CHROME (header/footer/bandeau de tête)
   de TOUTES les pages, sans toucher au corps des fiches (phase 2).
   ============================================================= */
@font-face{font-family:'Space Grotesk';src:url('fonts/space-grotesk-700.woff2') format('woff2');font-weight:700;font-style:normal;font-display:swap}
:root{
  --paper:#ece9e1; --line:#e0dccf;
  --energy:#e35427; --energy-d:#c4421a; --energy-dd:#a3350f; --energy-tint:#fbeae2;
  --gold:#d39a32; --gold-d:#a9761c; --gold-tint:#f6edda; --gold-line:#e7d4a8;
  --char:#15181d; --char2:#23282f; --char-line:#2c323a;
  --disp:'Space Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;
}

/* ---- HEADER : barre uniforme, transparente, accent teal en tête ---- */
header{position:relative;top:auto;z-index:5;
  border-top:3px solid var(--teal);border-bottom:0;
  background:transparent;-webkit-backdrop-filter:none;backdrop-filter:none;box-shadow:none}
header .wrap.nav,header .nav{display:flex;align-items:center;gap:18px;height:64px;max-width:1140px;
  margin:0 auto;justify-content:flex-start;position:relative}
.nav .brand{display:flex;align-items:center;gap:0;font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,Helvetica,Arial,sans-serif;font-weight:700;
  font-size:26px;letter-spacing:-.015em;color:var(--ink);text-decoration:none}
.nav .brand .qv{color:var(--energy)}
.nav .brand .mark{display:none}
.nav .links{flex:1;display:flex;justify-content:center;gap:26px;font-size:14.5px;flex-wrap:nowrap}
.nav .links a{display:inline-flex;align-items:center;gap:0;color:var(--ink2);font-weight:500;white-space:nowrap;text-decoration:none}
.nav .links a svg{display:none}
.nav .links a:hover{color:var(--ink)}
.nav .links a.on{color:var(--ink);font-weight:700}
.nav .cta{font-family:var(--disp);font-weight:700;font-size:14px;color:#fff;background:var(--energy);
  border-radius:10px;padding:9px 16px;text-decoration:none;white-space:nowrap;transition:background .15s;
  box-shadow:0 6px 18px -8px rgba(227,84,39,.7)}
.nav .cta:hover{background:var(--energy-d);color:#fff}
.navtoggle{display:none;background:none;border:0;cursor:pointer;padding:6px;margin:0;color:var(--ink);line-height:0}
@media(max-width:760px){
  .navtoggle{display:inline-flex;order:3;margin-left:auto}
  .nav .cta{order:2}
  .nav .links{position:absolute;top:calc(100% + 6px);right:0;left:auto;min-width:230px;flex:none;
    flex-direction:column;align-items:stretch;gap:0;background:#fff;border:1px solid rgba(0,0,0,.08);
    border-radius:12px;box-shadow:0 12px 30px rgba(0,0,0,.16);padding:6px 0;display:none;z-index:60}
  .nav.open .links{display:flex}
  .nav .links a{padding:12px 18px;font-size:15px;justify-content:flex-start}
}

/* ---- BANDEAU DE TÊTE (.phead) : ambiance par surface ---- */
.phead{position:relative;overflow:hidden;border-bottom:1px solid var(--line);
  background:radial-gradient(120% 150% at 86% -30%, rgba(15,110,86,.16), transparent 56%),
    radial-gradient(90% 130% at -8% 130%, rgba(211,154,50,.10), transparent 60%),
    linear-gradient(180deg,#f1ece2 0%,var(--paper) 100%)}
.phead.orange{background:radial-gradient(120% 150% at 86% -30%, rgba(227,84,39,.20), transparent 56%),
    radial-gradient(90% 130% at -8% 130%, rgba(211,154,50,.14), transparent 60%),
    linear-gradient(180deg,#f3ece1 0%,var(--paper) 100%)}
.phead.gold{background:radial-gradient(120% 150% at 86% -30%, rgba(211,154,50,.24), transparent 56%),
    radial-gradient(90% 130% at -8% 130%, rgba(15,110,86,.10), transparent 60%),
    linear-gradient(180deg,#f1e9d6 0%,var(--paper) 100%)}
.phead.teal{background:radial-gradient(120% 150% at 86% -30%, rgba(15,110,86,.22), transparent 56%),
    radial-gradient(90% 130% at -8% 130%, rgba(211,154,50,.10), transparent 60%),
    linear-gradient(180deg,#e7efe9 0%,var(--paper) 100%)}
.phead header{border-top:0}
.phead>.motif{position:absolute;top:-40px;right:-30px;width:300px;height:300px;z-index:0;opacity:.10;pointer-events:none;color:var(--teal)}
.phead.orange>.motif{color:var(--energy)} .phead.gold>.motif{color:var(--gold)} .phead.teal>.motif{color:var(--teal)}
.phead>.motif svg{width:100%;height:100%;stroke:currentColor;fill:none;stroke-width:1.4}
.phead-in{position:relative;z-index:1;max-width:1140px;margin:0 auto;padding:6px 24px 32px;min-height:180px}
.phead .crumb{font-size:12.5px;color:var(--ink3);margin:18px 0 0}
.phead .crumb a{color:var(--ink3)}.phead .crumb a:hover{color:var(--ink2)}.phead .crumb b{color:var(--ink2);font-weight:600}
.phead .pk{display:inline-flex;align-items:center;gap:8px;font-size:11.5px;letter-spacing:.14em;
  text-transform:uppercase;color:var(--teal-d);font-weight:700;margin:16px 0 10px}
.phead.orange .pk{color:var(--energy-d)} .phead.gold .pk{color:var(--gold-d)} .phead.teal .pk{color:var(--teal-d)}
.phead .pk::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--teal)}
.phead.orange .pk::before{background:var(--energy)} .phead.gold .pk::before{background:var(--gold)} .phead.teal .pk::before{background:var(--teal)}
.phead .ptitle{font-family:var(--disp);font-size:36px;letter-spacing:-.02em;color:var(--ink);font-weight:700;margin:0;line-height:1.05}
.phead .ptitle em{font-style:normal;color:var(--teal)}
.phead.orange .ptitle em{color:var(--energy)} .phead.gold .ptitle em{color:var(--gold-d)} .phead.teal .ptitle em{color:var(--teal)}
.phead .plead{font-size:14.5px;color:var(--ink2);margin:11px 0 0;max-width:66ch}

/* ---- FOOTER : charbon multi-colonnes ---- */
footer{margin-top:42px;padding:0;color:#c4c9c7;border:0;
  background:radial-gradient(85% 140% at 90% 0%, rgba(227,84,39,.12), transparent 55%),
    radial-gradient(80% 130% at 4% 100%, rgba(15,110,86,.14), transparent 60%),
    linear-gradient(180deg,#16191e 0%,#101317 100%)}
footer .ft{max-width:1140px;margin:0 auto;padding:42px 24px 24px;display:block}
.ft-top{display:flex;justify-content:space-between;gap:30px 48px;flex-wrap:wrap}
.ft-brand{max-width:300px}
.ft-brand .b{display:inline-flex;align-items:baseline;font-family:var(--disp);font-weight:700;font-size:24px;letter-spacing:-.015em;color:#fff}
.ft-brand .b .qv{color:#ff8a5c}
.ft-brand p{margin:13px 0 0;font-size:13.5px;line-height:1.55;color:#9aa0a0}
.ft-cols{display:flex;gap:54px;flex-wrap:wrap}
.ft-col h4{font-family:var(--disp);font-size:12px;text-transform:uppercase;letter-spacing:.08em;color:#7f8689;font-weight:700;margin:2px 0 13px}
.ft-col a{display:block;font-size:13.5px;color:#c4c9c7;margin:0 0 9px;text-decoration:none;transition:color .15s}
.ft-col a:hover{color:#fff}
.ft-bottom{display:flex;justify-content:space-between;align-items:center;gap:14px 26px;flex-wrap:wrap;
  margin-top:30px;padding-top:18px;border-top:1px solid rgba(255,255,255,.08);font-size:12.5px;color:#7f8689}
.ft-bottom b{color:#b9bebd;font-weight:600}
.ft-sig{display:flex;gap:22px;flex-wrap:wrap}
.ft-sig .jf{display:flex;align-items:center;gap:7px;font-size:12.5px;color:#aeb4b3}
.ft-sig .jf .dot{width:8px;height:8px;border-radius:50%;background:var(--teal)}
.ft-sig .jf .dot.g{background:var(--gold)} .ft-sig .jf .dot.o{background:var(--energy)}

/* ---- PAGES INFO (.legal) : éditorial à la charte (paper, pas de carte) ---- */
/* Surcharge le style inline hérité (carte blanche teal) des pages a-propos /
   affiliation / mentions-legales / confidentialite / contact. Texte calme sur
   paper, titres Space Grotesk, accents teal/energy. Cf. CHARTE / WEB.md. */
.legal{max-width:760px;margin:14px auto 8px;background:transparent;border:0;border-radius:0;
  box-shadow:none;padding:18px 0 40px}
.legal .eyebrow{display:inline-flex;align-items:center;gap:9px;font-family:var(--disp);
  font-size:11.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--teal-d);
  font-weight:700;margin:0 0 14px}
.legal .eyebrow::before{content:"";width:18px;height:2px;border-radius:2px;background:var(--teal)}
.legal h1{font-family:var(--disp);font-size:38px;line-height:1.05;font-weight:700;
  letter-spacing:-.02em;color:var(--ink);margin:0 0 8px}
.legal .upd{font-family:var(--sans);font-size:13.5px;color:var(--ink3);font-style:normal;margin:0 0 30px}
.legal h2{font-family:var(--disp);font-size:21px;font-weight:700;letter-spacing:-.01em;
  color:var(--ink);margin:36px 0 10px}
.legal p,.legal li{font-family:var(--sans);font-size:15.5px;line-height:1.72;color:var(--ink2)}
.legal b,.legal strong{color:var(--ink);font-weight:600}
.legal ul{margin:8px 0;padding-left:20px}.legal li{margin:4px 0}
.legal a{color:var(--teal-d);font-weight:600;text-decoration:none}
.legal a:hover{text-decoration:underline}
.legal .box{background:var(--tint);border:1px solid var(--tint-line);border-left:3px solid var(--teal);
  border-radius:12px;padding:16px 20px;margin:20px 0;font-size:15.5px;color:var(--ink2)}
.legal .note{font-size:13px;color:var(--ink3);font-style:italic;margin-top:30px}
@media(max-width:640px){.legal h1{font-size:30px}}

/* ---- Filtre catalogue (boutons marque / famille) ---- */
.catfilter{display:flex;flex-wrap:wrap;gap:8px;margin:4px 0 24px}
.catfilter button{font:inherit;font-size:13.5px;font-weight:600;color:var(--ink2);cursor:pointer;
  background:#fff;border:1px solid var(--line);border-radius:999px;padding:7px 14px;line-height:1;
  transition:border-color .12s,background .12s,color .12s;white-space:nowrap}
.catfilter button:hover{border-color:var(--teal-2);color:var(--teal-dd)}
.catfilter button.on{background:var(--teal);border-color:var(--teal);color:#fff}
.catfilter button span{opacity:.6;font-weight:400;margin-left:2px}
.catfilter button.on span{opacity:.85}
.catsec.hide{display:none}
.catfilter-none{display:none;color:var(--ink3);font-style:italic;font-size:14px;margin:2px 0 20px}
.catfilter-none.on{display:block}

/* ---- Anti débordement horizontal mobile ---- */
/* le body en flex-column laisse un enfant grandir à sa min-content (multicol = 2 col) : on borne */
body>.wrap,.catsec{min-width:0}
/* en flex-column, la cross-size d'un enfant peut être poussée à sa min-content
   (ex. table.geo des guides) et ni min-width:0 ni le stretch ne la bornent :
   on plafonne la .wrap au viewport en mobile -> la table scrolle en interne. */
@media(max-width:640px){body>.wrap{max-width:100%}ul.cat,ul.rel{columns:1}}
.cat li,.cat li a{overflow-wrap:anywhere}

/* ==== FICHE PRODUIT : corps 2 colonnes + colonne d'achat collante (gen_velo/piece) ==== */
article.fiche{background:transparent;border:0;border-radius:0;padding:0;margin:22px 0 8px}
.flayout{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:0 34px;align-items:start}
.flayout .fmain{min-width:0}
.flayout .fmain>*:first-child{margin-top:0}
.faside{position:sticky;top:16px;display:flex;flex-direction:column;gap:14px}
.fcard{background:#fff;border:1px solid var(--line);border-radius:14px;padding:20px 24px;margin:0 0 18px}
.fcard>*:first-child{margin-top:0}.fcard>*:last-child{margin-bottom:0}
.fcard h2:first-child{margin-top:0}
.fphoto{border:1px solid var(--line);border-radius:14px;background:#fff;padding:14px;text-align:center}
.fphoto img{max-width:100%;height:auto;border-radius:8px;display:block;margin:0 auto}
.fphoto figcaption{font-size:11.5px;color:var(--ink3);margin-top:8px}
.fphoto.ph{display:flex;align-items:center;justify-content:center;min-height:188px;background:linear-gradient(180deg,#fbfaf6,#f1eee6)}
.fphoto.ph svg{width:92px;height:92px;stroke:var(--tint-line);fill:none;stroke-width:1.3}
.buybox{background:var(--tint);border:1px solid var(--tint-line);border-radius:14px;padding:15px 18px}
.buybox .priceh{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);margin:0 0 2px}
.buybox .price{font-family:var(--disp);font-size:25px;font-weight:700;color:var(--teal-dd);line-height:1.1;margin:0}
.buybox .dispo{font-size:12.5px;color:var(--ink2);margin:9px 0 12px;display:flex;align-items:center;gap:7px}
.buybox .dispo::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--teal-2);flex:none}
.buybox .buys{display:flex;flex-direction:column;gap:8px;margin:0}
.buybox .buy{display:block;text-align:center}
/* CRO : hiérarchie CTA — 1 marchand principal proéminent + « aussi chez » discret */
.buy.primary{padding:11px 14px;font-size:14.5px;font-weight:700;border-radius:10px}
.buys-more{display:flex;flex-wrap:wrap;align-items:baseline;gap:4px 10px;margin:2px 0 0;font-size:12.5px;line-height:1.5}
.buys-more-lbl{color:var(--ink3)}
.buy-lite{color:var(--teal-dd);font-weight:600;text-decoration:underline;text-underline-offset:2px;white-space:nowrap}
.buy-lite:hover{color:var(--teal-d)}
/* CRO : CTA au moment de plus haute intention (après la compat) */
.intent-cta{margin:16px 0;padding:15px 16px;border:1px solid var(--tint-line);background:var(--tint);border-radius:12px;text-align:center}
.intent-cta-q{margin:0 0 11px;font-weight:600;color:var(--ink)}
.intent-cta .buy.primary{display:inline-block;min-width:min(320px,100%)}
.intent-cta-alt{display:block;margin-top:10px;font-size:12.5px}
/* CRO : barre d'achat collante mobile (l'aside cesse d'être sticky à 820px) */
.mbuybar{display:none}
@media(max-width:820px){
  .mbuybar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:60;align-items:center;gap:12px;
    padding:9px 14px;background:#fff;border-top:1px solid var(--line);box-shadow:0 -3px 14px rgba(0,0,0,.10)}
  .mbb-price{font-family:var(--disp);font-weight:700;font-size:19px;color:var(--teal-dd);white-space:nowrap;line-height:1}
  .mbb-noprice{font-size:14px;font-weight:600;color:var(--ink2)}
  .mbuybar .buy.primary{flex:1;margin:0;padding:12px 14px}
  body{padding-bottom:64px}
}
/* CRO : signaux de confiance collés au CTA */
.buytrust{list-style:none;margin:10px 0 0;padding:0;display:flex;flex-direction:column;gap:5px}
.buytrust li{position:relative;padding-left:20px;font-size:12px;color:var(--ink2);line-height:1.35}
.buytrust li::before{content:"✓";position:absolute;left:0;top:0;color:var(--teal);font-weight:700}
.buybox .btn{display:block;text-align:center;margin-top:8px;padding:10px 14px;font-size:13.5px}
.buybox .bnote{font-size:11px;color:var(--ink3);font-style:italic;margin:11px 0 0}
.buybox .bnote a{color:var(--teal-dd)}
.fkeys{border:1px solid var(--line);border-radius:14px;background:#fff;padding:4px 18px 13px}
.fkeys h3{font-size:12px;text-transform:uppercase;letter-spacing:.06em;color:var(--teal-d);font-weight:700;margin:14px 0 2px}
.kf{display:flex;justify-content:space-between;gap:14px;font-size:13.5px;padding:8px 0;border-top:1px solid var(--line)}
.fkeys .kf:first-of-type{border-top:0}
.kf .k{color:var(--ink2)}
.kf .v{font-weight:700;color:var(--ink);text-align:right}
.fdot{display:inline-block;width:7px;height:7px;border-radius:50%;margin-left:6px;vertical-align:1px}
.fdot.h{background:#1d9e75}.fdot.m{background:#d39a32}.fdot.f{background:#d9532b}
@media(max-width:820px){.flayout{grid-template-columns:1fr}.faside{position:static;margin-bottom:18px}}
.buybox .psub{font-size:11.5px;color:var(--ink3);margin:5px 0 0;line-height:1.45}
/* CRO : bande de specs vélo (Charge max en avant) — 2026-07-04 */
.vspecs{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin:0 0 22px}
.vspec{border:1px solid var(--line);border-radius:12px;background:#fff;padding:10px 12px;display:flex;flex-direction:column;gap:2px}
.vspec-k{font-size:11px;text-transform:uppercase;letter-spacing:.05em;color:var(--ink3);font-weight:700}
.vspec-v{font-size:16px;font-weight:700;color:var(--ink);line-height:1.2}
.vspec-sub{font-size:11px;color:var(--ink2)}
.vspec.charge{background:var(--tint);border-color:var(--tint-line)}
.vspec.charge .vspec-k{color:var(--teal-d)}
.vspec.charge .vspec-v{color:var(--teal-dd)}
/* CRO palier 1 : verdict interactif poids — 2026-07-04 */
.vwidget{border:1px solid var(--tint-line);border-radius:14px;background:var(--paper-2);padding:18px 20px;margin:0 0 26px}
.vw-h{font-family:var(--serif);font-size:21px;font-weight:600;color:var(--ink);margin:0 0 6px}
.vw-lab{font-size:13px;color:var(--ink2);margin:0 0 10px;line-height:1.5}
.vw-line{display:flex;align-items:center;gap:14px;margin:0 0 12px}
.vw-line input[type=range]{flex:1;accent-color:var(--teal);min-width:0}
.vw-num{font-size:20px;color:var(--ink);white-space:nowrap}
.vw-num b{font-size:24px;font-variant-numeric:tabular-nums}
.vw-verdict{border-radius:10px;padding:12px 14px;margin:0 0 10px;border:1px solid var(--line)}
.vw-verdict.ok{background:var(--tint);border-color:var(--tint-line)}
.vw-verdict.warn{background:var(--amber-tint);border-color:var(--amber-line)}
.vw-verdict.no{background:var(--coral-tint);border-color:var(--coral-line)}
.vw-t{font-weight:700;font-size:15px;margin:0 0 3px}
.vw-verdict.ok .vw-t{color:var(--teal-dd)}
.vw-verdict.warn .vw-t{color:var(--amber-dd)}
.vw-verdict.no .vw-t{color:var(--coral-dd)}
.vw-d{font-size:13.5px;color:var(--ink2);margin:0;line-height:1.5}
.vw-src{font-size:11.5px;color:var(--ink3);margin:0 0 12px;line-height:1.5}
.vw-src b{color:var(--ink2)}
.vw-btn{display:inline-block}
@media(max-width:560px){.vwidget{padding:14px 14px}.vw-line{gap:10px}}
/* CRO palier 2 : Fait pour toi — ou pas */
.fit2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin:10px 0 6px}
.fitcol{border:1px solid var(--line);border-radius:12px;padding:14px 16px;background:var(--paper-2)}
.fitcol h3{font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.04em;margin:0 0 8px}
.fitcol.yes h3{color:var(--teal-d)}
.fitcol.no h3{color:var(--coral-dd)}
.fitcol ul{list-style:none;margin:0;padding:0}
.fitcol li{font-size:13.5px;color:var(--ink);line-height:1.5;padding:7px 0 7px 22px;position:relative;border-top:1px solid var(--line)}
.fitcol li:first-child{border-top:0;padding-top:0}
.fitcol li::before{position:absolute;left:0;font-weight:700}
.fitcol.yes li::before{content:"✓";color:var(--teal)}
.fitcol.no li::before{content:"✕";color:var(--coral)}
.fitcol li small{display:block;font-size:11px;color:var(--ink3);margin-top:2px;line-height:1.4}
@media(max-width:640px){.fit2{grid-template-columns:1fr}}
/* CRO palier 3 : similaires pertinents */
.sims{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px;margin:10px 0 6px}
.sim{display:block;border:1px solid var(--line);border-radius:12px;background:var(--paper-2);padding:12px 14px;text-decoration:none;transition:border-color .15s}
.sim:hover{border-color:var(--teal)}
.sim-m{display:block;font-weight:700;font-size:14.5px;color:var(--teal-dd);margin-bottom:3px}
.sim-why{display:block;font-size:12px;color:var(--ink2);line-height:1.45}
/* CRO palier 4 : compat repliee (accordeons) */
details.cgrp{background:var(--bg);border:1px solid var(--line);border-radius:12px;margin:10px 0 12px;overflow:hidden}
details.cgrp summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:10px;padding:13px 16px;font-weight:600;font-size:14.5px;color:var(--ink)}
details.cgrp summary::-webkit-details-marker{display:none}
details.cgrp summary:hover{background:var(--paper-2)}
.cg-n{font-weight:600;font-size:12px;color:var(--teal-d);background:var(--tint);border:1px solid var(--tint-line);border-radius:99px;padding:2px 10px;white-space:nowrap}
.chev{margin-left:auto;color:var(--ink3);transition:transform .2s;font-size:18px;line-height:1}
details[open] .chev{transform:rotate(90deg)}
details.cgrp>ul,details.cgrp>dl,details.cgrp>.note,details.cgrp>p{margin-left:16px;margin-right:16px}
details.cgrp>*:last-child{margin-bottom:14px}
details.cgrp>table.geo{width:calc(100% - 32px);margin:4px 16px 14px}
/* Guides : encadré « L'essentiel » */
.ess{background:var(--tint);border:1px solid var(--tint-line);border-left:3px solid var(--teal);border-radius:12px;padding:14px 18px;margin:20px 0 8px}
.ess-t{font-family:var(--disp);font-weight:700;font-size:12.5px;letter-spacing:.07em;text-transform:uppercase;color:var(--teal-dd);margin:0 0 7px}
.ess ul{margin:0;padding-left:18px}
.ess li{margin:5px 0;line-height:1.55}
/* Phase 2 : hero charbon fiche vélo (maquette concept/14) */
.phead.char{background:radial-gradient(120% 85% at 82% 2%, rgba(227,84,39,.26), transparent 55%),radial-gradient(95% 90% at 6% 28%, rgba(15,110,86,.24), transparent 60%),linear-gradient(180deg,#1c2026 0%,#15181d 60%,#101317 100%);border-bottom:1px solid var(--char-line)}
.phead.char>.motif{color:#e8ebe9;opacity:.06}
.phead.char .nav .brand{color:#fff}
.phead.char .nav .links a{color:#c8cfcc}
.phead.char .nav .links a:hover,.phead.char .nav .links a.on{color:#fff}
.phead.char .navtoggle{color:#e8ebe9}
@media(max-width:760px){.phead.char .nav .links{background:var(--char2);border-color:var(--char-line)}}
.phead.char .crumb{color:#8f9aa0}.phead.char .crumb a{color:#9fe3cf}.phead.char .crumb b{color:#e8ebe9}
.phead.char .pk{color:#9fe3cf}.phead.char .pk::before{background:var(--teal-2)}
.phead.char .ptitle{color:#fff;font-size:clamp(30px,4.6vw,44px)}
.phead-in.hero2{display:grid;grid-template-columns:1.25fr .9fr;gap:34px;align-items:start;padding-bottom:38px}
@media(max-width:880px){.phead-in.hero2{grid-template-columns:1fr;gap:20px}}
.badges{display:flex;flex-wrap:wrap;gap:8px;margin:14px 0 0}
.badge{font-size:12.5px;font-weight:600;color:#cfd8d4;border:1px solid rgba(255,255,255,.16);border-radius:99px;padding:4px 11px}
.keynums{display:flex;gap:26px;margin:22px 0 0;flex-wrap:wrap}
.kn .n{font-family:var(--disp);font-weight:700;font-size:26px;color:#fff;letter-spacing:-.01em}
.kn .l{font-size:11.5px;color:#8f9aa0;letter-spacing:.05em;text-transform:uppercase}
.kn.energy .n{color:#ff8a5c}
/* carte verdict sombre dans le hero (identité seulement en charbon ; la donnée garde sa source lisible) */
.phead.char .vwidget{background:linear-gradient(165deg,#1e232b 0%,#14171c 100%);border:1px solid rgba(255,255,255,.09);box-shadow:0 22px 48px -34px rgba(0,0,0,.7);margin:18px 0 0}
.phead.char .vw-h{font-family:var(--disp);color:#fff;font-size:19px}
.phead.char .vw-lab{color:#9aa4a1}.phead.char .vw-lab b{color:#e8ebe9}
.phead.char .vw-line input[type=range]{accent-color:var(--energy)}
.phead.char .vw-num{color:#fff}
.phead.char .vw-verdict{border:1px solid transparent}
.phead.char .vw-verdict.ok{background:rgba(15,110,86,.18);border-color:rgba(42,155,125,.45)}
.phead.char .vw-verdict.warn{background:rgba(211,154,50,.14);border-color:rgba(211,154,50,.4)}
.phead.char .vw-verdict.no{background:rgba(227,84,39,.14);border-color:rgba(227,84,39,.45)}
.phead.char .vw-verdict.ok .vw-t{color:#7fd6b8}
.phead.char .vw-verdict.warn .vw-t{color:#e9bf6e}
.phead.char .vw-verdict.no .vw-t{color:#ff8a5c}
.phead.char .vw-verdict.ok .vw-d{color:#c9e9dd}
.phead.char .vw-verdict.warn .vw-d{color:#ecd9b4}
.phead.char .vw-verdict.no .vw-d{color:#f3c4b1}
.phead.char .vw-src{color:#7d8785}.phead.char .vw-src b{color:#aab4b0}
.phead.char .vw-src .cert{color:#7fd6b8}
.phead.char .vw-btn{display:block;text-align:center;font-family:var(--disp);font-weight:700;color:#fff;background:var(--energy);border:0;border-radius:11px;padding:12px 18px;box-shadow:0 10px 26px -12px rgba(227,84,39,.8)}
.phead.char .vw-btn:hover{background:var(--energy-d);color:#fff}
/* Fiches guides : bandeau aligné sur la colonne de lecture (article à 840px) */
.phead.guide .phead-in{max-width:840px}

/* --- Nutrition : tableau statique SEO / no-JS (opti SEO n°1, 2026-07-02) --- */
.ssr{margin:48px 0 8px;border-top:1px solid var(--line);padding-top:28px}
.ssr>h2{font-size:1.5rem;margin:0 0 6px}
.ssr-intro{color:var(--ink2);max-width:70ch;margin:0 0 18px}
.ssr-count{font-size:.85rem;color:var(--ink3);margin:0 0 14px}
.ssr-h{font-size:1.05rem;margin:22px 0 8px;color:var(--teal-d)}
.ssr-h .ssr-n{color:var(--ink3);font-weight:400;font-size:.85rem}
.ssr-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;border:1px solid var(--line);border-radius:10px}
.ssr-table{border-collapse:collapse;width:100%;font-size:.83rem;background:var(--bg)}
.ssr-table th,.ssr-table td{padding:7px 10px;text-align:left;white-space:nowrap;border-bottom:1px solid var(--line)}
.ssr-table thead th{position:sticky;top:0;background:var(--cream);font-weight:600;color:var(--ink);z-index:1}
.ssr-table tbody tr:nth-child(even){background:var(--paper)}
.ssr-table tbody tr:hover{background:var(--tint)}
.ssr-table td b{font-weight:600}
.ssr-table a{color:var(--teal-d);text-decoration:underline}

/* --- FAQ nutrition (indexable, opti SEO #3) --- */
.faq{max-width:820px;margin:38px auto 8px}
.faq>h2{font-size:1.5rem;color:var(--teal-d);margin:0 0 14px}
.faq-item{border:1px solid var(--line);border-radius:10px;background:var(--bg);margin:8px 0;padding:0 14px}
.faq-item summary{list-style:none;cursor:pointer;padding:13px 0;display:flex;align-items:center;justify-content:space-between;gap:12px}
.faq-item summary::-webkit-details-marker{display:none}
.faq-item summary h3{margin:0;font-size:1rem;font-weight:600;color:var(--ink)}
.faq-item summary::after{content:"+";font-size:1.3rem;color:var(--teal);line-height:1;flex:0 0 auto}
.faq-item[open] summary::after{content:"–"}
.faq-item>p{margin:0 0 14px;color:var(--ink2);font-size:.92rem;line-height:1.55}

/* --- pages d'atterrissage nutrition (opti SEO #4) --- */
.nlead{margin:26px 0 6px}
.nlaw{margin:14px 0 0;font-size:13px;color:var(--ink2);background:var(--cream);
  border:1px solid var(--tint-line);border-radius:10px;padding:10px 14px}
.nlaw b{color:var(--teal-d)}
.lp-cta{margin:18px 0 6px}
.lp-more{margin:22px 0 40px;font-size:.9rem;color:var(--ink2)}
.lp-more a{color:var(--teal-d)}
/* hero charbon composant : carte CTA compatibilité (colonne droite) */
.phead.char .ccard{background:rgba(255,255,255,.06);border:1px solid rgba(255,255,255,.14);border-radius:14px;padding:18px 20px}
.phead.char .ccard .cc-t{margin:0 0 6px;font-family:var(--disp);font-size:19px;color:#fff}
.phead.char .ccard .cc-d{margin:0 0 14px;font-size:13.5px;line-height:1.5;color:#c8cfcc}
.phead.char .ccard .cc-btn{display:block;text-align:center;background:var(--energy);color:#fff;font-weight:700;border-radius:10px;padding:11px 14px;text-decoration:none}
.phead.char .ccard .cc-btn:hover{filter:brightness(1.08)}
.phead.char .ccard .cc-n{margin:10px 0 0;font-size:11.5px;color:#9aa4a0;text-align:center}
/* hero charbon slim (index) : plead lisible sur fond sombre */
.phead.char .plead{color:#c8cfcc}
/* hero charbon : accent du titre (em) lisible sur fond sombre */
.phead.char .ptitle em{color:#ff8a5c}