/* Watt Mile : « panneau d'autoroute américain ». Vert de signalisation, liseré blanc, lettrage condensé Barlow (dessinée d'après
   les panneaux des autoroutes de Californie), papier clair, graphite pour l'en-tête. Pastilles de classe : C1 vert, C2 ambre, C3 rouge.
   Jauge de batterie sur chaque fiche. Tableaux en cartes sous 600 px. DA : theme/DA.md */
:root{--vert:#00693e;--vert-f:#004f2f;--vert-c:#e3f1ea;--graphite:#1c2126;--graphite2:#2a3138;--ambre:#f2a900;--rouge:#c8102e;--lime:#c9f227;
--fond:#f7f6f1;--carte:#fff;--texte:#1b1f23;--doux:#5a636c;--ligne:#dcdad2;--accent:var(--vert);--accent-texte:#00663c;--aff:#fff8e1;--aff-ligne:#ecd9a0;
--cta:var(--vert);--ok:#147a43;--ko:#b3261e;--rayon:10px;--titres:"Barlow Condensed","Arial Narrow",system-ui,sans-serif;--corps:"Barlow",system-ui,-apple-system,"Segoe UI",sans-serif}
@media (prefers-color-scheme:dark){:root{--fond:#121519;--carte:#1a1f24;--texte:#e8ebe7;--doux:#a4ada8;--ligne:#2c343a;--accent-texte:#7fd8a8;--vert-c:#14302300;--aff:#272214;--aff-ligne:#4a3f1c;--ok:#5fd08f;--ko:#ff8a80}}
*{box-sizing:border-box}html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--fond);color:var(--texte);font:17px/1.62 var(--corps);font-variant-numeric:tabular-nums}
img{max-width:100%;height:auto}a{color:var(--accent-texte);text-underline-offset:3px;text-decoration-thickness:1px}
h1,h2,h3{font-family:var(--titres);line-height:1.08;letter-spacing:.005em}
h1{font-size:clamp(2rem,5.2vw,3.3rem);font-weight:800;margin:.15em 0 .3em;text-transform:none}
h2{font-size:clamp(1.45rem,3vw,1.95rem);font-weight:700;margin:2em 0 .5em}
h3{font-size:1.28rem;font-weight:700;margin:1.4em 0 .4em}
.evitement{position:absolute;left:-999px}.evitement:focus{left:8px;top:8px;z-index:99;background:var(--lime);color:var(--graphite);padding:8px 12px;border-radius:6px}
.cont{max-width:900px;margin:0 auto;padding:0 16px}
/* en-tête graphite */
.ent{background:var(--graphite);color:#fff;border-bottom:4px solid var(--vert)}
.ent__l{max-width:1180px;margin:0 auto;padding:10px 16px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px 22px}
.logo{display:inline-flex;align-items:center;gap:9px;color:#fff;text-decoration:none;font:800 1.55rem/1 var(--titres);letter-spacing:.01em;text-transform:uppercase}
.logo__borne{width:24px;height:30px;flex:none}.logo__borne rect{fill:var(--vert);stroke:#fff;stroke-width:2.2}.logo__borne path{fill:#fff}
.logo b{color:var(--lime);font-weight:800;margin-left:2px}
.ent ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:4px 6px}
.ent nav a{display:block;color:#dfe5e1;text-decoration:none;font:600 1rem/1 var(--titres);text-transform:uppercase;letter-spacing:.04em;padding:8px 11px;border-radius:6px}
.ent nav a:hover{background:var(--graphite2);color:#fff}.ent nav a[aria-current]{background:var(--vert);color:#fff}
/* héros : grand panneau vert à liseré blanc + compteur */
.heros{background:linear-gradient(180deg,var(--graphite) 0,var(--graphite) 38%,var(--fond) 38%);padding:22px 0 30px}
.heros__l{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1.05fr .95fr;gap:22px;align-items:start}
.panneau{background:var(--vert);color:#fff;border-radius:16px;padding:22px 24px 20px;box-shadow:inset 0 0 0 3px var(--vert),inset 0 0 0 6px #fff,0 10px 30px rgba(0,0,0,.18)}
.panneau__sur{display:inline-block;margin:6px 0 10px;font:700 .95rem/1 var(--titres);text-transform:uppercase;letter-spacing:.08em;background:#fff;color:var(--vert);padding:6px 10px;border-radius:5px}
.panneau h1{color:#fff;font-size:clamp(2.1rem,5.4vw,3.5rem);margin:.1em 0 .25em}
.panneau__chapo{margin:0 0 14px;color:#e6f3ec;font-size:1.06rem}
.panneau__km{list-style:none;margin:0 0 12px;padding:0;display:flex;flex-wrap:wrap;gap:8px}
.panneau__km li{background:var(--vert-f);border:2px solid #fff;border-radius:8px;padding:6px 10px;display:flex;flex-direction:column;min-width:92px}
.panneau__km strong{font:800 1.6rem/1 var(--titres)}.panneau__km span{font-size:.78rem;color:#d4eadf;text-transform:uppercase;letter-spacing:.05em}
.panneau__meta .signature,.panneau__meta .maj{color:#d4eadf}.panneau__meta a{color:#fff}
.compteur{background:var(--carte);border:1px solid var(--ligne);border-top:6px solid var(--lime);border-radius:16px;padding:16px 18px;box-shadow:0 10px 30px rgba(0,0,0,.12)}
.compteur__tete{display:flex;align-items:center;gap:10px}.compteur__tete h2{margin:0;font-size:1.6rem}
.compteur__jauge{display:inline-flex;gap:3px;padding:4px;border:2px solid var(--texte);border-radius:5px;position:relative}
.compteur__jauge::after{content:"";position:absolute;right:-6px;top:6px;width:4px;height:8px;background:var(--texte);border-radius:0 2px 2px 0}
.compteur__jauge i{display:block;width:7px;height:12px;background:var(--vert);border-radius:2px}.compteur__jauge i:last-child{background:var(--lime)}
.compteur__txt{color:var(--doux);margin:.4em 0 .2em;font-size:.95rem}.compteur__pied{margin:.6em 0 0;font-size:.92rem}
.compteur .outil{border:0;padding:0;margin:.4em 0 0;background:none}
/* sorties : les outils comme des panneaux de sortie */
.sorties{max-width:1180px;margin:0 auto 6px;padding:0 16px}
.sorties ul{list-style:none;margin:0;padding:0;display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
.sorties a{display:flex;flex-direction:column;height:100%;background:var(--vert);color:#fff;text-decoration:none;border-radius:10px;padding:12px 14px 14px;box-shadow:inset 0 0 0 2px var(--vert),inset 0 0 0 4px #fff}
.sorties a:hover{background:var(--vert-f)}
.sorties__num{align-self:flex-start;background:var(--ambre);color:#1b1f23;font:800 .85rem/1 var(--titres);text-transform:uppercase;letter-spacing:.06em;padding:4px 7px;border-radius:4px;margin-bottom:8px}
.sorties strong{font:700 1.35rem/1.05 var(--titres)}.sorties__txt{font-size:.86rem;color:#d4eadf;margin-top:6px}
/* bandeau des pages intérieures */
.bandeau{background:var(--graphite);color:#fff;padding:14px 0 22px;border-bottom:1px solid var(--ligne)}
.bandeau__l{max-width:900px;margin:0 auto;padding:0 16px}
.bandeau h1{color:#fff}.bandeau__chapo{margin:0 0 .6em;color:#cfd6d1;font-size:1.06rem;max-width:44em}
.bandeau .fil{color:#aab3ad}.bandeau .fil a{color:#dfe5e1}
.bandeau__meta{display:flex;flex-wrap:wrap;gap:4px 16px}.bandeau__meta p{color:#aab3ad}.bandeau__meta a{color:#fff}
.t-outil .bandeau{border-bottom:5px solid var(--lime)}
.fil{font-size:.86rem;margin:4px 0 6px}.signature,.maj{margin:0;font-size:.88rem;color:var(--doux)}.signature a{color:inherit}
/* corps */
.art{padding-top:8px}.art>p,.art li{max-width:46em}
.aff{background:var(--aff);border:1px solid var(--aff-ligne);border-radius:8px;padding:9px 13px;font-size:.88rem;margin:16px 0}
.encadre{background:var(--carte);border:1px solid var(--ligne);border-left:6px solid var(--vert);border-radius:8px;padding:12px 16px;margin:1.3em 0}
.encadre--alerte{border-left-color:var(--ambre)}
.btn{display:inline-block;background:var(--vert);color:#fff;text-decoration:none;padding:10px 16px;border-radius:8px;font-weight:700}
.btn:hover{background:var(--vert-f);color:#fff}
.petit{font-size:.82rem}.methode-lien{font-size:.84rem;margin:-.3em 0 1.2em}.methode-lien a{color:var(--doux)}
h2[id]{scroll-margin-top:12px}
/* bornes kilométriques devant les h2 */
.art h2{display:flex;align-items:baseline;gap:10px}
.art h2::before{content:"";flex:none;width:12px;height:20px;border-radius:3px;background:var(--vert);box-shadow:inset 0 0 0 2px #fff,0 0 0 1px var(--vert);transform:translateY(2px)}
.faq h2::before,.suite h2::before,.selection h2::before,.verdict h2::before{display:none}
/* tableaux */
table{width:100%;border-collapse:collapse;margin:1em 0 .4em;font-size:.92rem;display:block;overflow-x:auto;background:var(--carte);border-radius:8px;border:1px solid var(--ligne)}
th,td{border-bottom:1px solid var(--ligne);padding:8px 10px;text-align:left;vertical-align:top}
th{background:var(--graphite);color:#fff;font:600 .95rem/1.2 var(--titres);text-transform:uppercase;letter-spacing:.04em;white-space:nowrap}
tbody tr:nth-child(even) td{background:color-mix(in srgb,var(--fond) 55%,var(--carte))}
td s{color:var(--doux)}
@media (max-width:600px){
 table.tab{display:block;border:0;background:none;overflow:visible}
 table.tab thead{display:none}table.tab tbody,table.tab tr,table.tab td{display:block;width:100%}
 table.tab tr{background:var(--carte);border:1px solid var(--ligne);border-left:5px solid var(--vert);border-radius:8px;margin:0 0 10px;padding:6px 10px}
 table.tab td{border:0;padding:3px 0;background:none!important;display:grid;grid-template-columns:40% 1fr;gap:8px}
 table.tab td::before{content:attr(data-l);color:var(--doux);font:600 .8rem/1.3 var(--titres);text-transform:uppercase;letter-spacing:.03em}
 table.tab td:first-child{grid-template-columns:1fr;font-size:1.02rem}table.tab td:first-child::before{display:none}
 table.tab--duel td:first-child{font-weight:700}
}
/* outils */
.outil{background:var(--carte);border:1px solid var(--ligne);border-top:6px solid var(--lime);border-radius:12px;padding:16px;margin:1.2em 0}
.outil .grille{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:4px 14px}
.outil label{display:block;font:600 1rem/1.2 var(--titres);text-transform:uppercase;letter-spacing:.03em;margin:.7em 0 .25em}
.outil select,.outil input{width:100%;padding:10px;font:inherit;font-size:1rem;border:2px solid var(--ligne);border-radius:8px;background:var(--fond);color:var(--texte)}
.outil select:focus,.outil input:focus{outline:none;border-color:var(--vert)}
.outil .aide{font-size:.8rem;color:var(--doux);margin:.2em 0 0}
.res{margin-top:1em;font-size:1rem}
.res .gros,.gros{font:800 2.3rem/1 var(--titres);color:var(--accent-texte)}
.res .lecture{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:8px;margin:.6em 0}
.res .lecture div{background:var(--fond);border:1px solid var(--ligne);border-radius:8px;padding:8px 10px}
.res .lecture span{display:block;font-size:.76rem;color:var(--doux);text-transform:uppercase;letter-spacing:.04em}
.res .lecture strong{font:800 1.5rem/1.1 var(--titres)}
.res .ok{color:var(--ok)}.res .ko{color:var(--ko)}.res .att{color:#9a6a00}
.res .liste{list-style:none;padding:0;margin:.5em 0}
.res .liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:6px 10px;border-top:1px solid var(--ligne);padding:8px 0}
.res .liste li>span{flex:1 1 220px;min-width:0}
.res blockquote{margin:.4em 0;padding:6px 12px;border-left:4px solid var(--vert);background:var(--fond);font-size:.92rem}
.res h3{margin:1em 0 .3em}
@media (prefers-color-scheme:dark){.res .att{color:#ffcf5a}}
/* pastilles de classe */
.pastille{display:inline-block;font:800 .82rem/1 var(--titres);letter-spacing:.04em;padding:4px 6px;border-radius:4px;color:#fff;margin-right:3px}
.pastille.c1{background:var(--vert)}.pastille.c2{background:var(--ambre);color:#1b1f23}.pastille.c3{background:var(--rouge)}.pastille.c0{background:var(--doux)}
/* fiches produit */
.prod{display:flex;flex-direction:column;min-width:0;background:var(--carte);border:1px solid var(--ligne);border-radius:var(--rayon);padding:14px;margin:1.2em 0}
.prod--un{border:2px solid var(--vert)}
.prod__tete{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:6px}
.prod__badge{margin:0 0 .5em;background:var(--graphite);color:#fff;font:700 .9rem/1.2 var(--titres);text-transform:uppercase;letter-spacing:.03em;padding:5px 9px;border-radius:6px}
.prod__badge span{color:var(--lime);margin-right:6px}
.prod--un .prod__badge{background:var(--vert)}.prod--un .prod__badge span{color:#fff}
.prod__classes{margin:0 0 .4em}
.prod__nom{margin:.1em 0 .4em;font:700 1.45rem/1.1 var(--titres)}.prod__nom span{color:var(--doux);font-weight:600}
.jauge{position:relative;height:24px;border:2px solid var(--texte);border-radius:5px;margin:0 8px .7em 0;background:var(--fond);overflow:visible}
.jauge::after{content:"";position:absolute;right:-7px;top:6px;width:4px;height:8px;background:var(--texte);border-radius:0 2px 2px 0}
.jauge span{position:absolute;left:2px;top:2px;bottom:2px;background:repeating-linear-gradient(90deg,var(--vert) 0 14px,transparent 14px 16px);border-radius:2px;max-width:calc(100% - 4px)}
.jauge em{position:relative;z-index:1;display:block;text-align:right;padding-right:6px;font:700 .85rem/20px var(--titres);font-style:normal;color:var(--texte)}
.jauge--vide{border-style:dashed}.jauge--vide em{text-align:center;color:var(--doux)}
.prod__pourquoi{margin:0 0 .6em;font-size:.93rem}
.prod__caracs{margin:0 0 .6em;display:grid;grid-template-columns:1fr 1fr;gap:6px 12px;font-size:.86rem}
.prod__caracs div{min-width:0;border-top:1px solid var(--ligne);padding-top:4px}
.prod__caracs dt{color:var(--doux);font:600 .78rem/1.2 var(--titres);text-transform:uppercase;letter-spacing:.03em}
.prod__caracs dd{margin:0;font-weight:600;overflow-wrap:anywhere}
.prod__pm{display:grid;gap:4px;margin:0 0 .6em;font-size:.88rem}.prod__pm ul{list-style:none;margin:0;padding:0}
.prod__pm li{position:relative;padding-left:1.3em;margin:.15em 0}.prod__pm li::before{position:absolute;left:0;font-weight:800}
.prod__plus li::before{content:"+";color:var(--ok)}.prod__moins li::before{content:"\2212";color:var(--ko)}
.prod__achat{margin-top:auto}
.prod__prix{margin:0 0 .5em;line-height:1.3}.prod__prix strong{font:800 1.75rem/1 var(--titres)}.prod__prix s{color:var(--doux);margin-left:.4em}
.prod__prix span{display:block;color:var(--doux);font-size:.76rem;margin-top:3px}
.cta{display:block;background:var(--cta);color:#fff;text-align:center;text-decoration:none;font:700 1.12rem/1.2 var(--titres);text-transform:uppercase;letter-spacing:.04em;padding:13px 16px;border-radius:8px;min-height:48px;box-shadow:inset 0 0 0 2px var(--cta),inset 0 0 0 4px #fff}
.cta::after{content:" \203A"}.cta:hover,.cta:focus-visible{background:var(--vert-f);color:#fff}
.cta--petit,.cta--tab{display:inline-block;font-size:.95rem;padding:9px 12px;min-height:0;white-space:nowrap}
/* sélection */
.selection{background:var(--carte);border:2px solid var(--graphite);border-radius:16px;padding:0 0 12px;margin:1.4em 0;overflow:hidden}
.selection__tete{background:var(--graphite);color:#fff;padding:12px 16px 14px}
.selection__sur{display:inline-flex;align-items:center;gap:6px;margin:0 0 4px;background:var(--ambre);color:#1b1f23;font:800 .85rem/1 var(--titres);text-transform:uppercase;letter-spacing:.06em;padding:5px 8px;border-radius:4px}
.selection__sur svg{width:14px;height:14px;fill:none;stroke:#1b1f23;stroke-width:2.4}
.selection__titre{margin:.1em 0 .1em;font-size:1.9rem;color:#fff}.selection__intro{margin:0;color:#cfd6d1;font-size:.94rem}
.selection__grille{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:12px;padding:12px}
.selection .prod{margin:0}.selection__pied{margin:0;padding:0 14px;font-size:.8rem;color:var(--doux)}.selection__pied a{color:var(--doux)}
/* chiffres clés */
.chiffres{list-style:none;padding:0;margin:1em 0;display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px}
.chiffres li{background:var(--carte);border:1px solid var(--ligne);border-left:6px solid var(--vert);border-radius:8px;padding:10px 12px}
.chiffres strong{display:block;font:800 1.7rem/1.05 var(--titres)}.chiffres span{font-size:.85rem;color:var(--doux)}
/* sommaire, verdict, FAQ, suite */
.sommaire{background:var(--carte);border:1px solid var(--ligne);border-radius:10px;padding:8px 14px;margin:1em 0}
.sommaire summary{font:700 1.05rem/1.3 var(--titres);text-transform:uppercase;letter-spacing:.04em}.sommaire ol{margin:.5em 0 .2em;padding-left:1.3em;font-size:.95rem}
.verdict{background:var(--carte);border:1px solid var(--ligne);border-left:6px solid var(--vert);border-radius:10px;padding:4px 16px 14px;margin:2em 0 1em}
.verdict__liste{list-style:none;margin:0;padding:0}.verdict__liste li{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px;padding:8px 0;border-top:1px solid var(--ligne)}
details{border-bottom:1px solid var(--ligne);padding:10px 0}summary{cursor:pointer;font-weight:700}
.faq{margin-top:2.4em}
.cartes{list-style:none;padding:0;display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:12px}
.cartes a{display:block;height:100%;background:var(--carte);border:1px solid var(--ligne);border-top:5px solid var(--vert);border-radius:10px;padding:12px 14px;text-decoration:none;color:var(--texte)}
.cartes strong{font:700 1.25rem/1.1 var(--titres)}.cartes span{display:block;color:var(--doux);font-size:.9rem;margin-top:4px}
.illu{margin:0 0 1.5rem}.illu img{display:block;width:100%;border-radius:10px}
.mois{display:none}
/* pied */
.pied{background:var(--graphite);color:#cfd6d1;margin-top:56px;padding:26px 0 34px;font-size:.9rem}
.pied__l{max-width:1180px;margin:0 auto;padding:0 16px;display:grid;grid-template-columns:1.3fr 1fr;gap:10px 30px}
.pied a{color:#fff}.pied__marque p{margin:.6em 0;max-width:34em}
.pied__nav ul{list-style:none;margin:0;padding:0;display:flex;flex-wrap:wrap;gap:6px 14px}.pied__legal,.pied .petit{grid-column:1/-1;margin:.3em 0}
/* barre collante mobile */
.collant{display:none}
@media (max-width:760px){
.collant.vu{display:flex;align-items:center;gap:10px;position:fixed;left:0;right:0;bottom:0;z-index:50;background:var(--graphite);color:#fff;border-top:4px solid var(--vert);padding:9px 12px calc(9px + env(safe-area-inset-bottom))}
.collant__borne{flex:none;background:var(--vert);color:#fff;font:800 .95rem/1 var(--titres);padding:7px 6px;border-radius:5px;box-shadow:inset 0 0 0 2px #fff}
.collant__txt{flex:1;min-width:0;line-height:1.25}.collant__txt strong,.collant__txt span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.collant__txt strong{font:700 1.05rem/1.2 var(--titres)}.collant__txt span{font-size:.78rem;color:#cfd6d1}
.cta--collant{flex:none;font-size:1rem;padding:10px 12px;min-height:44px}
.collant__x{flex:none;background:none;border:0;color:#cfd6d1;font-size:1.4rem;line-height:1;padding:6px;cursor:pointer}
body.a-collant{padding-bottom:78px}}
/* responsive */
@media (max-width:900px){.heros__l{grid-template-columns:1fr}.heros{background:var(--graphite);padding-bottom:20px}.sorties ul{grid-template-columns:repeat(2,1fr)}.sorties{margin-top:14px}}
@media (max-width:600px){.outil .grille{grid-template-columns:1fr}.prod__caracs{grid-template-columns:1fr 1fr}.pied__l{grid-template-columns:1fr}
 .panneau{padding:18px 16px}.sorties ul{grid-template-columns:1fr}.ent nav a{font-size:.9rem;padding:7px 8px}}