@font-face{font-family:'Outfit';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/outfit-latin-wght-normal.woff2) format('woff2')}
@font-face{font-family:'Onest';font-style:normal;font-weight:100 900;font-display:swap;src:url(fonts/onest-latin-wght-normal.woff2) format('woff2')}

/* Direction : « violet et jaune ». Un violet vif en grand aplat et son complémentaire, le jaune, pour les signaux (route, boutons, mots clés).
   Titres en Outfit, une géométrique nette et très grasse ; texte courant en Onest, net et lisible.
   Bandeau violet avec défilé de silhouettes sur une route, réglages à gauche, podium à droite. */
:root{
  --bg:#F4F1FD; --surface:#FAF8FF; --raise:#FFFFFF; --ink:#170B3B; --muted:#5D5383; --line:#E1D9F6;
  --chip:#ECE6FC; --accent:#621BE3; --accent-strong:#4C10BF; --accent-soft:#E9DFFF; --on-accent:#FFFFFF;
  --good:#0E9B4E; --mid:#B97800; --bad:#D9361E; --track:#E3DCF5;
  --s80:#0E9B4E; --s60:#FFC21A; --s40:#FF7417; --s0:#EB2F3A; --s60-ink:#241A00;
  --hero:#6620F0; --hero-2:#5213CC; --hero-ink:#FFFFFF; --hero-muted:#F3EDFF; --road:#FFD60A;
  --shadow:0 1px 2px rgba(23,11,59,.06),0 8px 22px rgba(23,11,59,.08); --score-ink:#FFFFFF;
  --f-display:"Outfit","Arial Black",Arial,sans-serif; --wd:100%;
  --f-body:"Onest","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --f-mono:"Onest","Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  --r:14px; --r-sm:9px;
}
@media (prefers-color-scheme: dark){:root:not([data-theme="light"]){
  --bg:#0C0620; --surface:#140A30; --raise:#1B0F40; --ink:#F1ECFF; --muted:#A99ECF; --line:#2A1C56;
  --chip:#21144A; --accent:#A88BFF; --accent-strong:#CBB8FF; --accent-soft:#2D1A68; --on-accent:#0C0620;
  --good:#3FD584; --mid:#F2B735; --bad:#FF6F55; --track:#281B52; --s80:#3FD584; --s60:#FFD23F; --s40:#FF8A3D; --s0:#FF5A5F; --s60-ink:#241A00;
  --hero:#5317C9; --hero-2:#400FA2; --hero-ink:#FFFFFF; --hero-muted:#EAE1FF; --road:#FFD60A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3); --score-ink:#04120A; color-scheme:dark}}
:root[data-theme="dark"]{
  --bg:#0C0620; --surface:#140A30; --raise:#1B0F40; --ink:#F1ECFF; --muted:#A99ECF; --line:#2A1C56;
  --chip:#21144A; --accent:#A88BFF; --accent-strong:#CBB8FF; --accent-soft:#2D1A68; --on-accent:#0C0620;
  --good:#3FD584; --mid:#F2B735; --bad:#FF6F55; --track:#281B52; --s80:#3FD584; --s60:#FFD23F; --s40:#FF8A3D; --s0:#FF5A5F; --s60-ink:#241A00;
  --hero:#5317C9; --hero-2:#400FA2; --hero-ink:#FFFFFF; --hero-muted:#EAE1FF; --road:#FFD60A;
  --shadow:0 1px 2px rgba(0,0,0,.35),0 10px 26px rgba(0,0,0,.3); --score-ink:#04120A; color-scheme:dark}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{background:var(--bg);color:var(--ink);font-family:var(--f-body);font-size:15px;line-height:1.5;margin:0}
.wrap{max-width:1260px;margin:0 auto;padding-inline:20px;padding-block:0 64px}
h1,h2,h3{font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;letter-spacing:-.005em;text-wrap:balance;margin:0;line-height:1.05}
button,input,select{font:inherit;color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.num{font-variant-numeric:tabular-nums}

/* Bandeau */
.hero{background:var(--hero);color:var(--hero-ink);position:relative;overflow:hidden}
.hero-in{max-width:1260px;margin:0 auto;padding-inline:20px;padding-block:34px 0;display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1fr);gap:18px 40px;align-items:end}
@media (max-width:900px){.hero-in{grid-template-columns:minmax(0,1fr);padding-block:26px 0}}
.kicker{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:13px;font-weight:600;color:var(--road)}
.hero h1{font-size:clamp(34px,5vw,60px);font-weight:800;text-transform:none;letter-spacing:-.015em;margin-top:6px}
.hero h1 span{color:var(--road)}
.hero p{margin:10px 0 0;color:var(--hero-muted);max-width:68ch;font-size:16px}
.stats{display:flex;gap:10px;flex-wrap:wrap;justify-self:end}
@media (max-width:900px){.stats{justify-self:start}}
.stats div{background:var(--hero-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:10px 16px;min-width:104px;font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:12px;color:var(--hero-muted)}
.stats b{display:block;font-size:30px;color:var(--hero-ink);letter-spacing:0;font-weight:700;line-height:1.05}
.stats .pitch{margin:0;max-width:300px;background:var(--hero-2);border:1px solid rgba(255,255,255,.08);border-radius:var(--r);padding:14px 18px;font-family:var(--f-display);font-stretch:var(--wd);font-size:21px;font-weight:600;line-height:1.25;color:var(--hero-ink)}
.stats .pitch b{display:inline;font-size:30px;color:var(--road);font-weight:700}
.parade{grid-column:1 / -1;display:flex;justify-content:space-between;align-items:flex-end;gap:12px;padding-top:18px;--tile-bg:var(--hero);overflow:hidden}
.parade svg{width:clamp(70px,11vw,132px);height:auto;color:var(--hero-ink);opacity:.92;flex:none}
.parade svg:nth-child(even){opacity:.55}
@media (max-width:640px){.parade svg:nth-child(n+4){display:none}}
.road{height:30px;background:var(--hero-2);position:relative}
.road::after{content:"";position:absolute;left:0;right:0;top:50%;height:4px;margin-top:-2px;background:repeating-linear-gradient(90deg,var(--road) 0 46px,transparent 46px 84px);opacity:.85}

.grid{display:grid;grid-template-columns:minmax(0,390px) minmax(0,1fr);gap:28px;align-items:start;margin-top:-6px;padding-top:30px}
@media (max-width:900px){.grid{grid-template-columns:minmax(0,1fr)}}

/* Panneau des critères */
.panel{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow)}
@media (min-width:901px){.panel{position:sticky;top:calc(env(safe-area-inset-top,0px) + 16px);max-height:calc(100vh - 32px);overflow:auto}}
.panel-head{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:16px 18px 12px}
.panel-head h2{font-size:22px;text-transform:none;letter-spacing:-.005em;white-space:nowrap}
.btn-link{white-space:nowrap;background:none;border:0;color:var(--accent);cursor:pointer;font-weight:600;padding:4px 0;font-size:14px}
.btn-link:hover{text-decoration:underline}
.example{margin:0 18px 6px;padding:10px 12px;font-size:13px;background:var(--accent-soft);border-radius:var(--r-sm);color:var(--ink)}
.grp{display:flex;align-items:center;gap:10px;padding:16px 18px 2px;font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;font-weight:700;color:var(--accent)}
.grp::after{content:"";flex:1;height:1px;background:var(--line)}
.crit{padding:12px 18px;border-bottom:1px solid var(--line)}
.crit:last-child{border-bottom:0}
.grp + .crit, .crit:has(+ .grp){border-bottom:0}
.crit-h{display:flex;align-items:center;gap:10px}
.crit-h label.t{flex:1;font-weight:600;cursor:pointer;display:flex;align-items:center;gap:10px;min-width:0}
.crit-h small{color:var(--muted);font-weight:400}
.switch{appearance:none;width:36px;height:21px;border-radius:21px;background:var(--track);position:relative;cursor:pointer;flex:none;margin:0;transition:background .15s}
.switch::after{content:"";position:absolute;top:3px;left:3px;width:15px;height:15px;border-radius:50%;background:var(--raise);box-shadow:0 1px 2px rgba(0,0,0,.25);transition:transform .15s}
.switch:checked{background:var(--accent)}
.switch:checked::after{transform:translateX(15px)}
.crit-b{margin-top:10px;display:grid;gap:10px}
.crit.off .crit-b{display:none}
.crit-b > .seg{justify-self:start}
.pw{display:flex;align-items:center;gap:8px;flex-wrap:wrap;font-size:14px}
.pw select{background:var(--raise);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font-variant-numeric:tabular-nums}
.prices{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.prices label{display:grid;grid-template-rows:1fr auto;align-items:end;gap:3px;font-size:12.5px;color:var(--muted)}
.prices input{width:100%;min-width:0;background:var(--raise);border:1px solid var(--line);border-radius:var(--r-sm);padding:5px 8px;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink)}
.kit{display:flex;gap:8px;align-items:flex-start;font-size:13.5px;cursor:pointer}
.kit input{accent-color:var(--accent);margin-top:3px}
.crit.settings{background:var(--surface);margin:0 12px 10px;border:1px solid var(--line);border-radius:var(--r-sm)}
.crit.settings h3{font-family:var(--f-body);font-size:14.5px;font-weight:600}
.hint{font-size:12.5px;color:var(--muted);margin:0}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.bodies{display:grid;grid-template-columns:repeat(auto-fill,minmax(104px,1fr));gap:6px}
.btile{--tile-bg:var(--surface);display:flex;flex-direction:column;align-items:center;gap:2px;border:1px solid var(--line);background:var(--tile-bg);border-radius:var(--r-sm);padding:7px 4px 6px;cursor:pointer;font-size:13px;color:var(--ink);line-height:1.2;transition:border-color .12s,background .12s}
.btile svg{width:96px;height:38px;display:block;color:var(--muted)}
.btile:hover{border-color:var(--accent)}
.btile:hover svg{color:var(--ink)}
.btile[aria-pressed="true"]{--tile-bg:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btile[aria-pressed="true"] svg{color:var(--on-accent)}
.flag{width:18px;height:12px;border-radius:2px;flex:none;display:inline-block;vertical-align:-1px}
.flag-lg{width:30px;height:20px;border-radius:3px;flex:none;display:inline-block;vertical-align:middle}
.chip.fl{display:inline-flex;align-items:center;gap:6px}
.nat{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:14px;margin-top:6px}
.chip{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:13.5px;cursor:pointer;line-height:1.3}
.chip:hover{border-color:var(--accent)}
.chip[aria-pressed="true"]{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.seg{display:inline-flex;border:1px solid var(--line);border-radius:999px;overflow:hidden;background:var(--surface);padding:2px;gap:2px}
.seg button{border:0;background:none;padding:4px 12px;cursor:pointer;font-size:14px;border-radius:999px}
.seg button[aria-pressed="true"]{background:var(--ink);color:var(--bg)}
.range-row{display:flex;align-items:center;gap:12px}
.range-row input[type=range]{flex:1;min-width:0;accent-color:var(--accent)}
.range-row output{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13.5px;min-width:92px;text-align:right;font-variant-numeric:tabular-nums;font-weight:500}
.sub{font-size:13px;color:var(--muted)}
.stars{display:inline-flex;gap:2px}
.stars button{background:none;border:0;cursor:pointer;font-size:22px;line-height:1;padding:0 2px;color:var(--track)}
.stars button.on{color:var(--mid)}
.weight{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted);flex-wrap:wrap}
.weight .seg button{font-size:12px;padding:2px 9px}
.weight .seg button[aria-pressed="true"]{background:var(--accent-soft);color:var(--accent-strong);font-weight:700}

/* Résultats */
.res-head{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:8px 16px;margin:0 0 12px}
.res-head h2{font-size:26px;text-transform:none;letter-spacing:-.005em}
.res-head h2 small{font-family:var(--f-body);text-transform:none;letter-spacing:0;font-size:14px;font-weight:500;color:var(--muted);margin-left:8px}
.controls{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;font-size:14px;color:var(--muted)}
.controls label{display:flex;align-items:center;gap:6px;cursor:pointer}
.controls input[type=checkbox]{accent-color:var(--accent)}

.best{background:var(--raise);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);display:grid;grid-template-columns:270px minmax(0,1fr);margin-bottom:22px;box-shadow:var(--shadow);overflow:hidden}
@media (max-width:700px){.best{grid-template-columns:minmax(0,1fr)}}
.gauge-pane{--ink:var(--hero-ink);--muted:var(--hero-muted);--track:rgba(255,255,255,.14);--good:#5FE0A5;--mid:#F2C94C;--bad:#FF8A65;--s80:#5FE0A5;--s60:#FAD860;--s40:#FF9A4D;--s0:#FF6B6B;background:var(--hero);color:var(--hero-ink);display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;padding:22px 18px 20px;position:relative}
.gauge-pane::after{content:"";position:absolute;left:0;right:0;bottom:0;height:4px;background:repeating-linear-gradient(90deg,var(--road) 0 26px,transparent 26px 46px);opacity:.8}
.gauge-pane .medal-ic{margin-bottom:4px;width:54px!important;height:68px!important;max-width:none}
.medal{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:13px;font-weight:700;color:var(--road)}
.gauge svg{width:100%;max-width:230px;height:auto;display:block}
.verdict{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:15px;font-weight:700;margin-top:-6px;text-align:center}
.best-body{padding:22px 26px 22px;min-width:0}
@media (max-width:640px){.best-body{padding:18px 16px}}
.eyebrow{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:13px;color:var(--accent);font-weight:700}
.best h3{font-size:clamp(32px,4.2vw,46px);font-weight:700;margin-top:2px}
.best .ver{color:var(--muted);margin:4px 0 14px}
.best-sil{float:right;width:min(210px,40%);margin:0 0 8px 12px;--tile-bg:var(--raise)}
.best-sil svg{width:100%;height:auto;color:var(--accent);display:block}
@media (max-width:640px){.best-sil{display:none}}
.price{font-family:var(--f-display);font-stretch:var(--wd);font-size:32px;font-weight:700;line-height:1}
.price small{font-size:14px;color:var(--muted);font-weight:500;letter-spacing:.02em}
.keyspecs{display:flex;flex-wrap:wrap;gap:6px;margin:14px 0 18px;clear:both}
.tag.ok{background:var(--accent-soft);color:var(--accent-strong);font-weight:700}
.tag.warn{background:var(--chip);color:var(--mid);font-weight:600;box-shadow:inset 0 0 0 1px var(--mid)}
.mini .good{color:var(--good);font-weight:600} .mini .bad{color:var(--bad)} .mini .warn-t{color:var(--mid);font-weight:600}
.tag{background:var(--chip);border-radius:999px;padding:3px 10px;font-size:13px;white-space:nowrap}

.breakdown{display:grid;gap:7px;margin:0;padding:0;list-style:none}
.breakdown li{display:grid;grid-template-columns:150px minmax(0,1fr) 92px 34px;align-items:center;gap:10px;font-size:13.5px}
.breakdown .bn{font-weight:600}
.breakdown .bv{color:var(--muted);overflow-wrap:anywhere}
.bar{height:7px;border-radius:4px;background:var(--track);overflow:hidden}
.bar i{display:block;height:100%;border-radius:4px}
.breakdown .bs{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12.5px;text-align:right}
@media (max-width:640px){.breakdown li{grid-template-columns:minmax(0,1fr) 70px 30px;row-gap:2px}.breakdown .bv{grid-column:1 / -1;grid-row:2}}
.weights-note{font-size:12.5px;color:var(--muted);margin:12px 0 0}

/* Podium (2e et 3e) */
.podium{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;margin-bottom:26px}
@media (max-width:640px){.podium{grid-template-columns:minmax(0,1fr)}}
.pcard{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:16px 16px 14px;display:grid;gap:8px;min-width:0;position:relative}
.pcard .place{position:absolute;top:10px;right:14px;display:flex;flex-direction:column;align-items:center;gap:0;font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;font-size:12px;letter-spacing:.07em;text-transform:uppercase;color:var(--muted);z-index:1}
.medal-ic{display:block;filter:drop-shadow(0 2px 3px rgba(0,0,0,.18))}
.reveal{font-family:var(--f-display);font-stretch:var(--wd);font-size:clamp(26px,3.4vw,38px);font-weight:600;margin:0 0 12px;color:var(--ink);letter-spacing:.01em}
.reveal em{font-style:normal;color:var(--accent)}
.reveal-row{display:flex;align-items:center;justify-content:space-between;gap:10px 16px;flex-wrap:wrap;margin:0 0 12px}
.reveal-row .reveal{margin:0}
.restart{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:var(--raise);color:var(--ink);border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer;white-space:nowrap;box-shadow:var(--shadow)}
.restart svg{width:16px;height:16px;flex:none}
.restart:hover{border-color:var(--accent);color:var(--accent)}
.restart-end{display:flex;justify-content:center;margin-top:14px}
.empty .acts{display:flex;justify-content:center;gap:10px;flex-wrap:wrap;margin-top:14px}
.empty .open-c{background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;padding:8px 16px;font-weight:700;font-size:14px;cursor:pointer}
@media (min-width:901px){.empty .open-c{display:none}}
.toast{display:flex;align-items:center;gap:12px}
.toast[hidden]{display:none}
.toast span{white-space:nowrap}
.toast button{background:none;border:1px solid var(--hero-muted);color:var(--road);border-radius:999px;padding:3px 12px;font-weight:700;cursor:pointer;font-size:13.5px}
.pcard .psil{--tile-bg:var(--surface);background:var(--surface);border-radius:var(--r-sm);display:flex;justify-content:center;padding:8px 0 4px}
.pcard .psil svg{width:150px;height:auto;color:var(--ink);opacity:.85}
.pcard h3{font-size:24px;font-weight:700}
.pcard .pver{color:var(--muted);font-size:13.5px;margin-top:3px}
.pcard .pfoot{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;margin-top:2px}
.pcard .pact{display:flex;gap:6px 8px;align-items:center;flex-wrap:wrap}
.fiche-btn{white-space:nowrap}
.fiche-btn{border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 12px;font-size:12.5px;cursor:pointer;font-weight:600;color:var(--ink)}
.fiche-btn:hover{border-color:var(--accent)}

/* Liste */
.list{display:grid;gap:8px}
.row{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);transition:border-color .12s}
.row:hover{border-color:color-mix(in srgb,var(--accent) 45%,var(--line))}
.row-top{display:flex;align-items:center;gap:8px;padding-right:12px}
.row-btn{flex:1;min-width:0;display:grid;grid-template-columns:40px 84px minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:10px 6px 10px 12px;background:none;border:0;text-align:left;cursor:pointer;border-radius:var(--r)}
.rsil{--tile-bg:var(--surface);background:var(--surface);border-radius:var(--r-sm);display:flex;align-items:center;justify-content:center;height:40px}
.rsil svg{width:76px;height:auto;color:var(--muted)}
.cmp{flex:none;border:1px solid var(--line);background:var(--surface);border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap;color:var(--muted);line-height:1.3}
.cmp:hover{border-color:var(--accent);color:var(--ink)}
.cmp[aria-pressed="true"]{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-strong);font-weight:700}
.price-row{display:flex;align-items:flex-end;gap:14px;flex-wrap:wrap}
.rk{font-family:var(--f-display);font-stretch:var(--wd);font-size:18px;color:var(--muted);font-weight:700;width:34px;height:34px;border-radius:50%;background:var(--chip);display:flex;align-items:center;justify-content:center;line-height:1}
.nm{font-weight:600;font-size:16px}
.nm span{font-weight:400;color:var(--muted)}
.mini{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px;color:var(--muted);margin-top:2px}
.pr{font-family:var(--f-display);font-stretch:var(--wd);font-size:20px;font-weight:700;text-align:right;white-space:nowrap;line-height:1.1}
.pr small,.price small.from{display:block;font-family:var(--f-body);font-size:11.5px;font-weight:500;color:var(--muted);letter-spacing:.02em}
.score{font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;font-size:18px;border-radius:999px;text-align:center;padding:7px 12px;line-height:1;color:var(--score-ink);white-space:nowrap;letter-spacing:0}
.row-btn .score{min-width:80px;padding-inline:10px}
@media (max-width:640px){.row-btn .score{min-width:70px;padding-inline:8px}}
.score small{font-size:10.5px;font-weight:600;opacity:.85;margin-left:1px}
@media (max-width:640px){
  .row-btn{grid-template-columns:34px minmax(0,1fr) auto;gap:10px;padding-left:10px}
  .rsil{display:none}
  .row-top{padding-right:8px}
  .row .cmp{padding:7px 12px;font-size:14px}
  .row .cmp .lbl{display:none}
  .row .pr{grid-column:2;grid-row:2;text-align:left;font-size:17px}
  .row .pr small{display:inline;margin-right:4px}
  .rk{width:28px;height:28px;font-size:15px}
}
.detail{padding:6px 18px 18px 72px;display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:20px 32px;border-top:1px dashed var(--line);margin-top:2px}
@media (max-width:760px){.detail{grid-template-columns:minmax(0,1fr);padding-left:14px}}
.detail h4{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:13px;color:var(--muted);margin:12px 0 8px;font-weight:700}
.specs{display:grid;grid-template-columns:auto minmax(0,1fr);gap:3px 16px;font-size:13.5px;margin:0}
.specs dt{color:var(--muted)}
.specs dd{margin:0;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12.8px;font-variant-numeric:tabular-nums}
.detail .breakdown li{grid-template-columns:120px minmax(0,1fr) 60px 30px}
@media (max-width:640px){.detail .breakdown li{grid-template-columns:minmax(0,1fr) 60px 30px}}
.more{margin:18px auto 0;display:block;background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;padding:11px 26px;font-weight:700;cursor:pointer}
.more:hover{background:var(--accent-strong)}
.empty{padding:40px 20px;text-align:center;color:var(--muted);background:var(--raise);border:1px dashed var(--line);border-radius:var(--r)}
footer{margin-top:40px;font-size:13px;color:var(--muted)}
footer details{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:12px 16px}
footer summary{cursor:pointer;font-weight:600;color:var(--ink)}
footer p{max-width:90ch;margin:8px 0 0}

/* Barre mobile */
/* Comparateur et fiche */
.tray{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:6;background:var(--hero);color:var(--hero-ink);border-radius:var(--r);display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;padding:8px 10px 8px 12px;width:min(760px,calc(100% - 32px));box-shadow:0 8px 28px rgba(0,0,0,.28)}
.tray .items{display:flex;flex-wrap:wrap;gap:6px;flex:1;min-width:0}
.tray .it{display:inline-flex;align-items:center;gap:2px;border:1px solid var(--hero-muted);border-radius:999px;padding:2px 2px 2px 10px;font-size:13px;max-width:220px}
.tray .it span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.tray .it button{background:none;border:0;color:inherit;cursor:pointer;font-size:16px;line-height:1;padding:0 6px}
.tray .msg{font-size:12.5px;opacity:.8}
.tray .clear{background:none;border:0;color:inherit;opacity:.8;cursor:pointer;font-size:13px;text-decoration:underline}
.tray .go{background:var(--road);color:#1B1A10;border:0;border-radius:999px;padding:7px 16px;font-weight:700;cursor:pointer;white-space:nowrap}
.tray .go:disabled{opacity:.45;cursor:not-allowed}
body.has-tray .wrap{padding-bottom:130px}
.overlay{position:fixed;inset:0;z-index:10;background:rgba(4,14,10,.62);display:flex;align-items:flex-start;justify-content:center;padding:calc(20px + env(safe-area-inset-top,0px)) 16px calc(20px + env(safe-area-inset-bottom,0px));overflow:auto}
.sheet{background:var(--raise);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);width:min(1100px,100%);padding:20px 22px 24px;box-shadow:0 20px 60px rgba(0,0,0,.35)}
.sheet.narrow{width:min(760px,100%)}
.sheet-h{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;margin-bottom:14px}
.sheet-h h2{font-size:28px;text-transform:none;letter-spacing:-.005em}
.sheet-h .c-ver{margin-top:4px}
.x{background:var(--surface);border:1px solid var(--line);border-radius:999px;padding:5px 14px;cursor:pointer;font-weight:600}
.fiche-grid{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:18px 30px}
@media (max-width:700px){.fiche-grid{grid-template-columns:minmax(0,1fr)}}
.fiche-grid h4{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:13px;color:var(--muted);margin:0 0 8px;font-weight:700}
.fiche-grid .breakdown li{grid-template-columns:120px minmax(0,1fr) 60px 30px}
.ctable-wrap{overflow-x:auto}
.ctable{border-collapse:collapse;width:100%;font-size:13.5px;table-layout:fixed}
.ctable col.lab{width:170px}
.ctable th,.ctable td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;overflow-wrap:anywhere}
.ctable thead th{vertical-align:bottom;border-bottom:2px solid var(--accent)}
.ctable tbody th{color:var(--muted);font-weight:500;position:sticky;left:0;background:var(--raise);z-index:1}
.ctable td{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12.8px;font-variant-numeric:tabular-nums}
.ctable tr.sec th{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;color:var(--accent);font-weight:700;font-size:13px;padding-top:18px}
.ctable td.win{color:var(--good);font-weight:600}
.ctable td.win::after{content:" ▲";font-size:10px}
.ctable td.lose{color:var(--bad);font-weight:600}
.ctable td.lose::after{content:" ▼";font-size:10px}
.c-name{font-family:var(--f-display);font-stretch:var(--wd);font-size:21px;font-weight:700;line-height:1.1}
.c-ver{font-size:12.5px;color:var(--muted);margin-top:2px}
.c-score{font-family:var(--f-display);font-stretch:var(--wd);font-size:34px;font-weight:700;line-height:1}
.rm{background:none;border:0;color:var(--accent);cursor:pointer;padding:0;font-size:12.5px;margin-top:6px}
.legend{font-size:12.5px;color:var(--muted);margin:12px 0 0}
@media (max-width:640px){.ctable col.lab{width:110px}.sheet{padding:14px 12px}}

/* Ergonomie : compteur, aide, saisie, point faible, versions, mobile */
.panel-head .count{font-size:12.5px;color:var(--muted);margin-top:2px;font-variant-numeric:tabular-nums}
.ph-actions{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end}
.close-crit,.close-bottom{display:none}
.close-crit{background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;padding:7px 14px;font-weight:700;cursor:pointer;font-size:14px;white-space:nowrap}
.close-bottom{padding:14px 18px calc(18px + env(safe-area-inset-bottom,0px));border-top:1px solid var(--line)}
.close-crit.big{width:100%;padding:13px 16px;font-size:16px}
.info{flex:none;width:22px;height:22px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--muted);font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;font-style:italic;font-size:13px;line-height:1;cursor:pointer;display:inline-flex;align-items:center;justify-content:center;padding:0}
.info:hover,.info[aria-expanded="true"]{border-color:var(--accent);color:var(--accent);background:var(--accent-soft)}
.crit-h h3{flex:1}
.crit .hint{display:none}
.crit.show-hint .hint{display:block}
.numbox{display:inline-flex;align-items:center;gap:4px;flex:none}
.num-in{width:86px;min-width:0;background:var(--raise);border:1px solid var(--line);border-radius:var(--r-sm);padding:4px 6px;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13.5px;color:var(--ink);text-align:right;font-variant-numeric:tabular-nums;-moz-appearance:textfield}
.num-in::-webkit-outer-spin-button,.num-in::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.num-in:focus{outline:2px solid var(--accent);outline-offset:1px;border-color:var(--accent)}
.numbox .unit{font-size:12.5px;color:var(--muted);min-width:26px}
.wp{color:var(--s40);font-weight:600}
.wp.ok{color:var(--good)}
.tag.wp-tag{background:color-mix(in srgb,var(--s40) 16%,transparent);color:var(--s40);font-weight:600}
.tag.ok{background:color-mix(in srgb,var(--good) 14%,transparent);color:var(--good);font-weight:600}
.vers-btn{flex:none;border:1px dashed var(--line);background:none;border-radius:999px;padding:4px 11px;font-size:12.5px;cursor:pointer;white-space:nowrap;color:var(--accent);font-weight:600;line-height:1.3}
.vers-btn:hover{border-color:var(--accent);border-style:solid}
.row-act{display:flex;flex-direction:column;align-items:stretch;gap:5px;flex:none}
.row-act > *{text-align:center}
.vlist{display:grid;gap:6px}
.vrow{display:grid;grid-template-columns:66px minmax(0,1fr) auto auto;align-items:center;gap:12px;padding:10px 12px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface)}
.vrow .pr{font-size:17px}
.sumtxt{width:100%;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:13px;line-height:1.5;padding:10px;border:1px solid var(--line);border-radius:var(--r-sm);background:var(--surface);color:var(--ink);resize:vertical}
.fab{display:none;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(14px + env(safe-area-inset-bottom,0px));z-index:5;background:var(--accent);color:var(--on-accent);border:0;border-radius:999px;padding:12px 22px;font-weight:700;font-size:15px;cursor:pointer;box-shadow:0 8px 24px rgba(0,0,0,.28);white-space:nowrap;align-items:center;gap:6px}
.fab b{font-weight:600;opacity:.85}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:calc(76px + env(safe-area-inset-bottom,0px));z-index:30;background:var(--hero);color:var(--hero-ink);border-radius:999px;padding:10px 18px;font-size:14px;box-shadow:0 8px 24px rgba(0,0,0,.3);max-width:calc(100% - 32px);text-align:center}
@media (max-width:900px){
  .fab{display:inline-flex}
  body.has-tray .fab{bottom:calc(84px + env(safe-area-inset-bottom,0px))}
  body:not(.has-tray) .wrap{padding-bottom:84px}
  body.has-tray .wrap{padding-bottom:190px}
  .panel{display:none}
  body.crit-open{overflow:hidden}
  body.crit-open .panel{display:block;position:fixed;inset:0;margin:0;z-index:20;border-radius:0;border:0;overflow:auto;max-height:none;overscroll-behavior:contain}
  body.crit-open .fab,body.crit-open .tray{display:none}
  .panel-head{position:sticky;top:0;background:var(--raise);z-index:2;border-bottom:1px solid var(--line);padding-top:calc(12px + env(safe-area-inset-top,0px));flex-wrap:wrap}
  .close-crit,.close-bottom{display:block}
  .grid{padding-top:22px}
}
@media (max-width:640px){
  .row-act{gap:6px}
  .row-act .lbl{display:none}
  .row .vers-btn{padding:7px 10px;font-size:14px}
  .vrow{grid-template-columns:58px minmax(0,1fr) auto;gap:8px 10px}
  .vrow .pr{grid-column:2;grid-row:2;text-align:left;font-size:15px}
  .vrow .pr small{display:inline;margin-right:4px}
  .vrow .cmp{grid-column:3;grid-row:1 / span 2}
  .vrow .score{font-size:16px}
}

.site-btn{display:inline-flex;align-items:center;gap:7px;background:var(--accent);color:var(--on-accent);border-radius:999px;padding:7px 15px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;line-height:1.2}
.site-btn:hover{background:var(--accent-strong)}
.site-btn svg,.site-link svg{width:14px;height:14px;flex:none}
.site-link{display:inline-flex;align-items:center;gap:5px;color:var(--accent);font-weight:600;font-size:12.5px;text-decoration:none;white-space:nowrap;padding:4px 2px}
.site-link:hover{text-decoration:underline}
.sheet-site{margin-top:10px}
.det-site{grid-column:1 / -1;margin-top:8px}
.ctable .site-link{display:flex;margin:4px 0 2px}

/* Notre avis */
.avis{border:1px solid var(--line);border-radius:var(--r);background:var(--surface);padding:14px 16px;display:grid;gap:10px;margin:12px 0}
.avis.band{grid-column:1 / -1;margin:0;border:0;border-top:1px solid var(--line);border-radius:0;padding:20px 26px 22px;background:color-mix(in srgb,var(--accent) 5%,var(--raise))}
.avis.wide{grid-column:1 / -1;margin:4px 0 0}
.avis-h{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.avis-k{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-weight:700;font-size:13px;color:var(--accent)}
.avis-sub{font-size:12px;color:var(--muted)}
.avis-v{margin:0;font-size:15.5px;line-height:1.5;font-weight:500}
.avis-cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 22px}
@media (max-width:640px){.avis-cols{grid-template-columns:minmax(0,1fr)}.avis.band{padding:16px}}
.avis h5{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.avis h5.pl{color:var(--good)} .avis h5.mn{color:var(--s40)}
.avis ul,.c-ul{list-style:none;margin:0;padding:0;display:grid;gap:3px;font-size:14px}
.avis ul li,.c-ul li{position:relative;padding-left:18px;line-height:1.4}
ul.pl li::before,ul.mn li::before{position:absolute;left:0;top:0;font-weight:700}
ul.pl li::before{content:"+";color:var(--good)}
ul.mn li::before{content:"−";color:var(--s40)}
.avis-q,.avis-s,.avis-x{margin:0;font-size:14px;line-height:1.45}
.avis-q b,.avis-s b,.avis-x b{font-weight:700;margin-right:4px}
.avis-x{background:var(--raise);border-left:3px solid var(--accent);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 12px}
.avis-s{background:var(--raise);border-left:3px solid var(--road);border-radius:0 var(--r-sm) var(--r-sm) 0;padding:8px 12px}
.avis.band .avis-s{background:var(--raise)}
.avis-mini{margin:0;font-size:13px;line-height:1.45;color:var(--ink);display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.avis-mini b{color:var(--accent);font-weight:700;margin-right:4px}
.c-txt{font-family:var(--f-body);font-size:13.5px;line-height:1.45;display:block;white-space:normal}
.c-ul{font-family:var(--f-body);font-size:13px}

/* ===== Résultats aérés ===== */
.rr-act{display:flex;gap:8px;flex-wrap:wrap}
.restart.ghost{box-shadow:none;background:transparent}
.best-body{padding:26px 30px 24px;display:flex;flex-direction:column;gap:16px}
.best-body > *{margin:0}
.best h3{margin:0;line-height:1.02}
.best .ver{margin:-8px 0 0;display:flex;align-items:center;gap:8px;color:var(--muted);font-size:15px}
.best .price-row{margin-top:2px}
.best-body{position:relative}
.best-sil{position:absolute;top:22px;right:26px;width:min(170px,30%);margin:0}
.best h3{padding-right:min(190px,32%)}
@media (max-width:640px){.best h3{padding-right:0}}
.acts2{display:flex;flex-wrap:wrap;align-items:center;gap:8px 10px}
.bdgs{display:flex;flex-wrap:wrap;gap:6px}
.bdg{font-size:13px;font-weight:600;border-radius:999px;padding:4px 11px;line-height:1.3}
.bdg.wp{background:color-mix(in srgb,var(--s40) 14%,transparent);color:var(--s40)}
.bdg.ok{background:var(--accent-soft);color:var(--accent-strong)}
.bdg.aid{background:color-mix(in srgb,var(--good) 15%,transparent);color:var(--good)}
.bdg.warn{background:var(--chip);color:var(--mid);box-shadow:inset 0 0 0 1px var(--mid)}
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r);overflow:hidden;clear:both}
.tile{padding:12px 14px;display:flex;flex-direction:column;gap:2px;min-width:0}
.tile + .tile{border-left:1px solid var(--line)}
.tile b{font-family:var(--f-display);font-stretch:var(--wd);font-size:clamp(19px,1.8vw,24px);font-weight:700;line-height:1.05;white-space:nowrap}
.tile span{font-size:12px;color:var(--muted);letter-spacing:.02em}
@media (max-width:640px){.tiles{grid-template-columns:repeat(2,minmax(0,1fr))}.tile:nth-child(3){border-left:0}.tile:nth-child(n+3){border-top:1px solid var(--line)}.tile b{font-size:21px}}
blockquote.lead{margin:0;padding:2px 0 2px 16px;border-left:3px solid var(--accent);font-size:16px;line-height:1.55;color:var(--ink)}
blockquote.lead .avis-k{display:block;margin-bottom:4px}
.folds{display:grid;gap:0;border-top:1px solid var(--line)}
details.fold{border-bottom:1px solid var(--line)}
details.fold > summary{list-style:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;gap:12px;padding:13px 2px;font-weight:600;font-size:15px;color:var(--ink)}
details.fold > summary::-webkit-details-marker{display:none}
details.fold > summary::after{content:"";width:8px;height:8px;border-right:2px solid var(--accent);border-bottom:2px solid var(--accent);transform:rotate(45deg);margin:-4px 6px 0 0;transition:transform .15s;flex:none}
details.fold[open] > summary::after{transform:rotate(225deg);margin:4px 6px 0 0}
details.fold > summary:hover{color:var(--accent)}
.fold-b{padding:2px 2px 18px}
.fold-b.avis{background:none;border:0;padding:2px 2px 18px;margin:0;display:grid;gap:12px}
/* podium */
.pcard{gap:12px;padding:18px 18px 16px}
.pcard .pspec{font-size:13.5px;color:var(--muted);margin-top:6px}
.pcard .bdgs{margin-top:-2px}
/* lignes */
.row-btn{grid-template-columns:40px 84px minmax(0,1fr) auto auto;padding:14px 8px 14px 14px;gap:16px}
.rmain{min-width:0;display:flex;flex-direction:column;gap:4px}
.rmain .nm{font-size:16.5px}
.rver{font-size:13.5px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rflags{display:flex;flex-wrap:wrap;gap:4px 12px;font-size:13px}
.rflags .wp{font-weight:600}
.aidt{color:var(--good);font-weight:600}
.list{gap:10px}
.detail{display:block;padding:4px 18px 18px 72px}
.det-in{display:flex;flex-direction:column;gap:16px;max-width:820px;padding-top:14px}
@media (max-width:760px){.detail{padding:4px 14px 16px}}
@media (max-width:640px){
  .row-btn{grid-template-columns:30px minmax(0,1fr) 58px;gap:10px;padding:12px 6px 12px 10px}
  .rver{white-space:normal}
  .row .row-act{display:none}
  .row-top{padding-right:0}
  .row-btn{grid-template-columns:30px minmax(0,1fr) 62px;padding-right:12px}
  .best-body{padding:20px 16px;gap:14px}
}
/* fiche (fenêtre) */
#cmp-sheet.narrow > .acts2,#cmp-sheet.narrow > .bdgs,#cmp-sheet.narrow > .tiles,#cmp-sheet.narrow > .lead{margin-bottom:14px}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* ===== Site multipage : navigation, pages modèle, marques, textes ===== */
a{color:var(--accent)}
.topnav{max-width:1260px;margin:0 auto;padding:14px 20px 0;display:flex;align-items:center;justify-content:space-between;gap:10px 20px;flex-wrap:wrap;position:relative;z-index:2}
.topnav .logo{font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;font-size:20px;text-transform:none;letter-spacing:-.005em;color:var(--hero-ink);text-decoration:none}
.topnav-links{display:flex;gap:4px 18px;flex-wrap:wrap}
.topnav-links a{color:var(--hero-muted);text-decoration:none;font-weight:600;font-size:14.5px;padding:4px 0;border-bottom:2px solid transparent}
.topnav-links a:hover,.topnav-links a[aria-current="page"]{color:var(--hero-ink);border-bottom-color:var(--road)}
.hero-sm .hero-in{padding-block:22px 18px;grid-template-columns:minmax(0,1fr) auto;align-items:center}
.hero-sm h1{font-size:clamp(32px,4.6vw,54px)}
.hero-sm .kicker{display:flex;align-items:center;gap:8px}
.hero-sil{width:min(240px,32vw);color:var(--hero-ink);--tile-bg:var(--hero)}
.hero-sil svg{width:100%;height:auto;display:block}
@media (max-width:640px){.hero-sm .hero-in{grid-template-columns:minmax(0,1fr)}.hero-sil{width:170px}}
.page{padding-top:22px;display:flex;flex-direction:column;gap:18px}
.crumbs{font-size:13.5px;color:var(--muted)}
.crumbs a{color:var(--muted)}
.card{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:20px 22px;display:flex;flex-direction:column;gap:14px;min-width:0}
.card h2,.sec-title{font-size:22px;text-transform:none;letter-spacing:-.005em}
.sec-title{margin-bottom:12px}
.card h3{font-size:18px;margin-bottom:8px}
.sum-top{display:flex;align-items:flex-end;justify-content:space-between;gap:12px 20px;flex-wrap:wrap}
.fiche-link{display:inline-flex;align-items:center;border:1px solid var(--accent);color:var(--accent);background:transparent;border-radius:999px;padding:6px 14px;font-weight:700;font-size:14px;text-decoration:none;white-space:nowrap;line-height:1.2}
.fiche-link:hover{background:var(--accent-soft)}
.avis-bloc{display:grid;gap:12px}
.avis-bloc + .avis-bloc{border-top:1px solid var(--line);padding-top:16px}
.small{font-size:12.5px;color:var(--muted);margin:0}
.vt-wrap{overflow-x:auto;margin:0 -4px}
.vtable{border-collapse:collapse;width:100%;min-width:860px;font-size:13.5px}
.vtable th,.vtable td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;vertical-align:top}
.vtable thead th{font-size:12px;text-transform:uppercase;letter-spacing:.07em;color:var(--muted);font-weight:700;white-space:nowrap}
.vtable tbody th{font-weight:600}
.vtable td.num{font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-size:12.8px;white-space:nowrap}
.vtable td.pr{font-weight:600}
.card .specs{grid-template-columns:repeat(2,auto minmax(0,1fr));gap:8px 18px;font-size:14px}
@media (max-width:760px){.card .specs{grid-template-columns:auto minmax(0,1fr)}}
.mgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:10px}
.mcard{display:grid;gap:3px;background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:12px 14px;text-decoration:none;color:var(--ink);transition:border-color .12s}
.mcard:hover{border-color:var(--accent)}
.msil{--tile-bg:var(--surface);background:var(--surface);border-radius:var(--r-sm);display:flex;justify-content:center;padding:6px 0;margin-bottom:6px}
.msil svg{width:120px;height:auto;color:var(--ink);opacity:.8}
.mname{font-weight:700;font-size:15.5px;display:flex;align-items:center;gap:6px}
.mmeta{font-size:13px;color:var(--muted)}
.mprice{font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;font-size:18px}
.jump{display:flex;flex-wrap:wrap;gap:6px;position:sticky;top:0;z-index:3;background:var(--bg);padding:10px 0}
.jump a{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--line);background:var(--raise);border-radius:999px;padding:4px 11px;font-size:13.5px;text-decoration:none;color:var(--ink)}
.jump a:hover{border-color:var(--accent)}
.brand-sec{scroll-margin-top:70px}
.brand-sec h2{display:flex;align-items:center;gap:10px;flex-wrap:wrap;font-size:26px;text-transform:none;letter-spacing:-.005em;margin:10px 0 12px}
.brand-sec h2 small{font-family:var(--f-body);text-transform:none;font-size:14px;font-weight:500;color:var(--muted)}
.prose{max-width:820px;font-size:16px;line-height:1.65}
.prose h2{font-size:24px;text-transform:none;letter-spacing:-.005em;margin-top:18px}
.prose p,.prose ul{margin:0}
.site-foot{background:var(--hero);color:var(--hero-muted);padding:26px 0 30px;margin-top:30px;font-size:14px}
.site-foot .wrap{padding-block:0;display:grid;gap:8px}
.site-foot p{margin:0}
.site-foot b{color:var(--hero-ink)}
.site-foot a{color:var(--hero-ink)}
.site-foot .small{color:var(--hero-muted)}
.avis-bloc h5{margin:0 0 4px;font-size:12px;text-transform:uppercase;letter-spacing:.07em;font-weight:700}
.avis-bloc h5.pl{color:var(--good)} .avis-bloc h5.mn{color:var(--s40)}
.avis-bloc .c-ul{font-size:14.5px;gap:4px}
.mgrid{grid-template-columns:repeat(auto-fill,minmax(175px,1fr))}
.card .specs dd{font-family:var(--f-body);font-size:14px}
/* Photos constructeurs */
img.ph{display:block;width:100%;height:100%;object-fit:cover}
.best-photo{margin:-26px -30px 4px;position:relative;aspect-ratio:16/8;overflow:hidden;background:var(--surface)}
.best-photo img{width:100%;height:100%;object-fit:cover;display:block}
.best-photo figcaption,.hero-photo figcaption{position:absolute;right:8px;bottom:6px;font-size:11px;color:#fff;background:rgba(0,0,0,.45);padding:1px 7px;border-radius:999px}
@media (max-width:640px){.best-photo{margin:-20px -16px 4px}}
.pcard .psil.has-ph{padding:0;overflow:hidden;aspect-ratio:16/9}
.rsil.has-ph{overflow:hidden;padding:0}
.msil.has-ph{padding:0;overflow:hidden;aspect-ratio:16/9}
.hero-photo{margin:0;position:relative;width:min(420px,42vw);aspect-ratio:16/10;border-radius:var(--r);overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.3)}
.hero-photo img{width:100%;height:100%;object-fit:cover;display:block}
@media (max-width:640px){.hero-photo{width:100%}}

/* ===== Page d'accueil ===== */
.hero-link{color:var(--road);font-weight:600}
.stats .pitch-sm{font-size:16px;padding:10px 16px;max-width:none}
.stats .pitch-sm b{font-size:22px}
.empty.start{text-align:left;padding:26px 28px;border-style:solid;background:var(--raise)}
.empty.start b{font-family:var(--f-display);font-stretch:var(--wd);font-size:24px;text-transform:none;letter-spacing:-.005em;color:var(--ink)}
.empty.start p{margin:8px 0 0;max-width:60ch;color:var(--muted);font-size:15px}
.empty.start .acts{justify-content:flex-start}
.home-hero .home-in{max-width:1260px;margin:0 auto;padding:28px 20px 4px;position:relative;z-index:1}
.home-hero h1{font-size:clamp(44px,6vw,80px);line-height:.95;margin-top:8px}
.home-hero .home-lead{max-width:80ch;font-size:clamp(16px,1.4vw,18px)!important;line-height:1.5;color:var(--hero-muted);margin-top:12px!important}
.home-lead b{color:var(--hero-ink);font-weight:600}
.home-ctas{display:flex;flex-wrap:wrap;gap:12px;margin-top:20px}
.cta{display:inline-flex;align-items:center;justify-content:center;border-radius:999px;padding:12px 24px;font-weight:700;font-size:16px;text-decoration:none;transition:transform .12s,background .12s}
.cta:hover{transform:translateY(-1px)}
.cta-main{background:var(--road);color:#1B1A10}
.cta-main:hover{background:#ffd84d}
.cta-alt{border:1.5px solid rgba(255,255,255,.45);color:var(--hero-ink)}
.cta-alt:hover{border-color:var(--hero-ink);background:rgba(255,255,255,.06)}
.home-parade{max-width:1260px;margin:14px auto 0;padding:0 20px}
.home-parade svg{width:clamp(60px,8vw,104px)}
@media (max-width:640px){.cta{width:100%}.home-hero .home-in{padding-top:22px}}
.home{gap:34px;padding-top:34px}
.step-list{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;counter-reset:none}
@media (max-width:860px){.step-list{grid-template-columns:minmax(0,1fr)}}
.step-list li{background:var(--raise);border:1px solid var(--line);border-radius:var(--r);padding:20px 22px;box-shadow:var(--shadow);position:relative}
.step-n{display:inline-flex;align-items:center;justify-content:center;width:36px;height:36px;border-radius:50%;background:var(--accent);color:var(--on-accent);font-family:var(--f-display);font-stretch:var(--wd);font-weight:700;font-size:20px;margin-bottom:10px}
.step-list h3{font-size:21px;margin-bottom:6px}
.step-list p{margin:0;color:var(--muted);font-size:15px;line-height:1.55}
.note-card{display:grid;grid-template-columns:minmax(0,1.1fr) minmax(0,1fr);gap:26px 36px;padding:28px 30px;align-items:start}
@media (max-width:900px){.note-card{grid-template-columns:minmax(0,1fr);padding:22px 18px}}
.note-txt{display:grid;gap:12px;font-size:15.5px;line-height:1.6}
.note-txt p{margin:0}
.note-txt h3{font-size:19px;margin-top:6px}
.rules{margin:0;padding-left:18px;display:grid;gap:8px}
.ex-card{margin:0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:18px 18px 16px;display:grid;gap:12px}
.ex-card figcaption{display:grid;gap:2px}
.ex-k{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:12px;font-weight:700;color:var(--accent)}
.ex-card figcaption b{font-family:var(--f-display);font-stretch:var(--wd);font-size:22px}
.ex-card figcaption small{color:var(--muted);font-size:13px}
.ex-list{list-style:none;margin:0;padding:0;display:grid;gap:12px}
.ex-list li{display:grid;grid-template-columns:minmax(0,1fr) auto;grid-template-areas:"c w" "bar s" "why why";gap:3px 12px;align-items:center}
.ex-c{grid-area:c;display:flex;gap:8px;align-items:baseline;flex-wrap:wrap}
.ex-c small{color:var(--muted);font-size:12.5px}
.ex-w{grid-area:w;font-size:12.5px;color:var(--muted);white-space:nowrap}
.ex-w em{font-style:normal;font-family:var(--f-mono);font-variant-numeric:tabular-nums;color:var(--accent-strong);font-weight:600;margin-left:3px}
.ex-bar{grid-area:bar;height:8px;border-radius:99px;background:var(--track);overflow:hidden}
.ex-bar i{display:block;height:100%;background:var(--s80);border-radius:99px}
.ex-s{grid-area:s;font-family:var(--f-mono);font-variant-numeric:tabular-nums;font-weight:600;font-size:14px;text-align:right;min-width:28px}
.ex-why{grid-area:why;font-size:12.5px;color:var(--muted)}
.ex-total{display:flex;align-items:center;justify-content:space-between;gap:12px;border-top:1px solid var(--line);padding-top:12px}
.ex-total span{display:grid;font-weight:700}
.ex-total small{font-weight:400;color:var(--muted);font-size:12.5px}
.ex-total b{font-family:var(--f-display);font-stretch:var(--wd);font-size:40px;line-height:1;color:var(--s80)}
.ex-total b small{font-size:16px;color:var(--muted)}
.facts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:var(--r);background:var(--raise);overflow:hidden}
@media (max-width:760px){.facts{grid-template-columns:repeat(2,minmax(0,1fr))}.fact:nth-child(3){border-left:0}.fact:nth-child(n+3){border-top:1px solid var(--line)}}
.fact{padding:18px 20px;display:grid;gap:4px}
.fact + .fact{border-left:1px solid var(--line)}
.fact b{font-family:var(--f-display);font-stretch:var(--wd);font-size:38px;line-height:1;color:var(--accent)}
.fact span{font-size:13.5px;color:var(--muted)}
.choice-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
@media (max-width:760px){.choice-grid{grid-template-columns:minmax(0,1fr)}}
.choice{display:grid;gap:6px;background:var(--raise);border:1px solid var(--line);border-radius:calc(var(--r) + 4px);padding:24px 26px;text-decoration:none;color:var(--ink);box-shadow:var(--shadow);transition:border-color .12s,transform .12s}
.choice:hover{border-color:var(--accent);transform:translateY(-2px)}
.choice-k{font-family:var(--f-display);font-stretch:var(--wd);text-transform:uppercase;letter-spacing:.07em;font-size:12.5px;font-weight:700;color:var(--accent)}
.choice b{font-family:var(--f-display);font-stretch:var(--wd);font-size:30px;text-transform:none;letter-spacing:-.005em;line-height:1.05}
.choice span{color:var(--muted);font-size:15px}
.choice .choice-go{color:var(--accent);font-weight:700;margin-top:6px}
.choice:first-child{background:var(--hero);border-color:var(--hero);color:var(--hero-ink)}
.choice:first-child span{color:var(--hero-muted)}
.choice:first-child .choice-k,.choice:first-child .choice-go{color:var(--road)}
#resultats.is-empty > .res-head{display:none}
@media (max-width:640px){.topnav-links{gap:2px 14px}.topnav-links a{font-size:14px}}
/* Exemples défilants de la page d'accueil */
.ex-slider{display:grid;gap:10px;min-width:0}
.ex-track{display:grid;grid-auto-flow:column;grid-auto-columns:100%;gap:16px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain;border-radius:var(--r)}
.ex-track::-webkit-scrollbar{display:none}
.ex-track:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.ex-track>.ex-card{scroll-snap-align:start;align-content:start}
.ex-track>.ex-card .ex-total{margin-top:auto}
.ex-card figcaption a{color:inherit;text-decoration:underline;text-decoration-color:var(--line);text-underline-offset:2px}
.ex-card figcaption a:hover{text-decoration-color:currentColor}
.ex-nav{display:flex;align-items:center;justify-content:center;gap:12px}
.ex-nav>button{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:var(--surface);color:var(--ink);font-size:22px;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0 0 3px}
.ex-nav>button:hover{border-color:var(--accent);color:var(--accent-strong)}
.ex-dots{display:flex;gap:6px}
.ex-dots button{width:9px;height:9px;border-radius:50%;border:0;padding:0;background:var(--track);cursor:pointer}
.ex-dots button[aria-current]{background:var(--accent);width:22px;border-radius:99px}
.ex-count{font-size:12.5px;color:var(--muted);min-width:38px;text-align:center}
/* Nom Mioto : signature sous le logo et sous le titre de l'accueil */
.topnav .logo{display:inline-flex;align-items:center;gap:12px}
.topnav .logo .logo-svg{display:block;height:30px;width:auto;flex:none}
.topnav .logo .logo-tag{font-family:var(--f-body,inherit);font-stretch:normal;font-weight:500;font-size:13px;letter-spacing:0;color:var(--hero-muted);opacity:.85}
@media (max-width:720px){.topnav .logo .logo-tag{display:none}}
.home-hero .home-slogan{font-family:var(--f-display);font-weight:600;font-size:clamp(20px,2.4vw,30px);line-height:1.15;color:var(--road);margin:10px 0 0!important;max-width:44ch}
/* Marques et modèles : sur mobile, la liste des marques est repliée dans un menu collant */
.jump-mob{display:none}
.brand-sec{scroll-margin-top:72px}
@media (max-width:760px){
  .jump-desk{display:none}
  .jump-mob{display:block;position:sticky;top:0;z-index:5;margin:0 -16px 8px;padding:8px 16px;background:var(--bg);border-bottom:1px solid var(--line)}
  .jump-mob summary{list-style:none;display:flex;align-items:center;justify-content:space-between;gap:10px;cursor:pointer;border:1px solid var(--line);background:var(--raise);border-radius:12px;padding:11px 14px;font-weight:600;color:var(--ink)}
  .jump-mob summary::-webkit-details-marker{display:none}
  .jump-mob summary small{margin-left:auto;font-weight:500;color:var(--muted)}
  .jump-mob summary::after{content:"";width:9px;height:9px;border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:rotate(45deg) translateY(-3px);transition:transform .15s}
  .jump-mob[open] summary::after{transform:rotate(-135deg) translateY(-1px)}
  .jump-list{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:6px;max-height:58vh;overflow:auto;padding:10px 0 4px}
  .jump-list a{display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:var(--raise);border-radius:10px;padding:9px 10px;font-size:14px;text-decoration:none;color:var(--ink);min-width:0}
  .brand-sec{scroll-margin-top:80px}
}
/* Curseur de prix à deux poignées */
.dual{position:relative;height:30px;margin:2px 0 6px}
.dual-track{position:absolute;left:10px;right:10px;top:50%;height:6px;transform:translateY(-50%);border-radius:3px;
  background:linear-gradient(to right,var(--line) var(--a),var(--accent) var(--a),var(--accent) var(--b),var(--line) var(--b))}
.dual input[type=range]{position:absolute;inset:0;width:100%;height:30px;margin:0;background:none;pointer-events:none;-webkit-appearance:none;appearance:none;z-index:2}
.dual input[type=range]::-webkit-slider-runnable-track{background:none;border:0;height:30px}
.dual input[type=range]::-moz-range-track{background:none;border:0}
.dual input[type=range]::-webkit-slider-thumb{-webkit-appearance:none;pointer-events:auto;width:20px;height:20px;margin-top:5px;border-radius:50%;background:var(--accent);border:3px solid var(--raise);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab}
.dual input[type=range]::-moz-range-thumb{pointer-events:auto;width:14px;height:14px;border-radius:50%;background:var(--accent);border:3px solid var(--raise);box-shadow:0 1px 4px rgba(0,0,0,.35);cursor:grab}
.dual input[type=range]:focus-visible::-webkit-slider-thumb{outline:2px solid var(--accent);outline-offset:2px}
.dual-nums{display:flex;align-items:center;justify-content:space-between;gap:10px;flex-wrap:wrap;font-size:14px;color:var(--muted)}
.dual-nums label{display:inline-flex;align-items:center;gap:6px}
/* Marques et modèles (ordinateur) : index des marques en grille régulière, discret et non collant */
.jump.jump-desk{display:block;column-count:8;column-gap:6px;position:static;
  margin:4px 0 20px;padding:12px 14px;background:var(--raise);border:1px solid var(--line);border-radius:14px}
.jump.jump-desk a{display:flex;break-inside:avoid;border:0;background:none;border-radius:8px;padding:6px 8px;font-size:14px;line-height:1.2;justify-content:flex-start;gap:8px;min-width:0}
.jump.jump-desk a:hover{background:var(--chip);color:var(--accent-strong)}
.jump.jump-desk a .flag,.jump.jump-desk a svg{flex:none;width:18px;height:12px}
@media (min-width:761px){.brand-sec{scroll-margin-top:16px}}
/* index des marques : 8 colonnes × 5 lignes (40 marques) sur grand écran, 5 colonnes × 8 lignes en dessous */
@media (max-width:1199px){.jump.jump-desk{column-count:5}}
@media (max-width:899px){.jump.jump-desk{column-count:4}}
.jump.jump-desk a{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
@media (min-width:1200px){.jump.jump-desk{padding:12px 10px}.jump.jump-desk a{font-size:13.5px;padding:6px 6px;gap:7px}}
/* Malus 2026 */
.ml-note{font-size:13px;color:var(--mid);font-weight:600;margin-top:2px}
.vtable .mlt{display:block;font-size:11.5px;font-weight:500;color:var(--muted);white-space:nowrap}
.chk{display:flex;align-items:center;gap:8px;font-size:13.5px;color:var(--ink);margin:8px 0 4px;cursor:pointer}
.chk input{accent-color:var(--accent);width:16px;height:16px}
.pr small.mlp{display:block;font-family:var(--f-body);font-size:11.5px;font-weight:600;color:var(--mid);letter-spacing:0;margin-top:2px}
@media (max-width:640px){.row .pr small.mlp,.vrow .pr small.mlp{display:block;margin:1px 0 0}}
/* Sélections thématiques */
.sel-intro{max-width:80ch;font-size:16px;line-height:1.55;color:var(--ink);margin:4px 0 16px}
.sel-crits{display:flex;align-items:center;justify-content:space-between;gap:16px 24px;flex-wrap:wrap;margin-bottom:18px}
.sel-crits h2{font-size:17px;margin:0 0 6px}
.sel-crits ul{margin:0;padding-left:18px;font-size:14.5px;color:var(--muted)}
.sel-crits ul b{color:var(--ink);font-weight:600}
.sel-list{list-style:none;margin:0 0 14px;padding:0;display:grid;gap:10px}
.sel-item{display:grid;grid-template-columns:40px minmax(0,1fr) auto;gap:14px;align-items:center;background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:14px 16px}
.sel-rank{font-family:var(--f-display);font-weight:700;font-size:22px;color:var(--accent);text-align:center}
.sel-main{min-width:0;display:flex;flex-direction:column;gap:2px}
.sel-name{font-family:var(--f-display);font-weight:700;font-size:18px;color:var(--ink);text-decoration:none;display:inline-flex;align-items:center;gap:8px}
.sel-name:hover{color:var(--accent)}
.sel-ver{font-size:14px;color:var(--muted)}
.sel-facts{font-size:13.5px;color:var(--ink)}
.sel-avis{margin:4px 0 0;font-size:14px;line-height:1.45;color:var(--muted);font-style:italic}
.sel-side{display:flex;flex-direction:column;align-items:flex-end;gap:8px}
.sel-pr{font-family:var(--f-display);font-weight:700;font-size:17px;text-align:right;white-space:nowrap}
.sel-pr small{display:block;font-family:var(--f-body);font-size:11.5px;font-weight:500;color:var(--muted)}
.sel-pr small.mlp{color:var(--mid);font-weight:600}
@media (max-width:640px){.sel-item{grid-template-columns:28px minmax(0,1fr);padding:12px}.sel-side{grid-column:2;flex-direction:row;align-items:center;justify-content:space-between}.sel-pr{text-align:left}.sel-rank{font-size:18px}}
.sel-more ul{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:8px 0 0}
.sel-more a{display:inline-block;border:1px solid var(--line);background:var(--raise);border-radius:999px;padding:6px 12px;font-size:14px;text-decoration:none;color:var(--ink)}
.sel-more a:hover{border-color:var(--accent);color:var(--accent)}
.sel-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;margin-bottom:16px}
.sel-card{display:flex;flex-direction:column;gap:6px;background:var(--raise);border:1px solid var(--line);border-radius:14px;padding:16px;text-decoration:none;color:var(--ink);transition:border-color .12s,transform .12s}
.sel-card:hover{border-color:var(--accent);transform:translateY(-1px)}
.sel-card b{font-family:var(--f-display);font-size:17px;line-height:1.25}
.sel-card span{font-size:14px;display:inline-flex;align-items:center;gap:6px}
.sel-card small{font-size:12.5px;color:var(--muted)}
.sel-cta{display:flex;flex-direction:column;align-items:flex-start;gap:6px}
.sel-cta small{font-size:12.5px;color:var(--muted);max-width:32ch}
.sel-crits{text-align:left;align-items:flex-end}
.sel-crits>div:first-child{flex:1 1 380px}
.home-sel{margin:28px 0}
.home-sel-list{display:flex;flex-wrap:wrap;gap:8px;list-style:none;padding:0;margin:10px 0 0}
.home-sel-list a{display:inline-block;border:1px solid var(--line);background:var(--raise);border-radius:999px;padding:8px 14px;font-size:14.5px;font-weight:500;text-decoration:none;color:var(--ink)}
.home-sel-list a:hover{border-color:var(--accent);color:var(--accent)}
.card.sel-crits{flex-direction:row;align-items:center;justify-content:space-between}
@media (max-width:640px){.card.sel-crits{flex-direction:column;align-items:flex-start}}
@media (max-width:640px){.card.sel-crits>div:first-child{flex:none}}

/* logo : grand format sur l'accueil, texte du titre réservé aux lecteurs d'écran */
.hero h1.home-logo{margin:14px 0 18px;line-height:0}
.home-logo-svg{display:block;width:clamp(190px,26vw,300px);height:auto}
.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}
.topnav .logo .logo-svg{height:32px}