/* ============================================================
   WeSave Energy — Design System v3 « Clair »
   Base partagée tous marchés. L'accent se règle par site dans
   le bloc :root de chaque page (--accent / --accent-bg).
   Zéro dépendance externe, zéro webfont : performance maximale.
   ============================================================ */
:root{
  --ink:#1C2733;        /* texte principal */
  --ink-2:#46556A;      /* texte secondaire */
  --ink-3:#7A8699;      /* légendes, notes */
  --bg:#FAFBFD;         /* fond de page */
  --card:#FFFFFF;       /* cartes, tableaux */
  --line:#E4E9F0;       /* filets */
  --soft:#F1F5F9;       /* fonds de section doux */
  --accent:#3B82F6;      /* bleu clair réseau — surfaces (boutons, badges, favicon) */
  --accent-deep:#1D5FD6; /* même bleu, nuance texte — liens, kickers (contraste AA) */
  --accent-ink:#FFFFFF;  /* texte posé sur l'accent */
  --accent-bg:#EAF2FE;   /* fond doux teinté accent */
  --good:#0E7A4D; --good-bg:#E7F5EE;
  --bad:#B3261E;
  --radius:14px;
  --maxw:1160px;        /* colonne de contenu */
  --gut:24px;           /* gouttière latérale */
}
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",Arial,sans-serif;
  line-height:1.6;font-size:16px;-webkit-text-size-adjust:100%}
a{color:var(--accent-deep);text-decoration-thickness:1px;text-underline-offset:2px}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2.5px solid var(--accent);outline-offset:2px;border-radius:4px}
[id]{scroll-margin-top:88px}
.skip{position:absolute;left:-9999px;top:8px;background:var(--ink);color:var(--bg);padding:8px 14px;border-radius:8px;z-index:100}
.skip:focus{left:8px}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 var(--gut)}

/* ---------- Header ---------- */
.topbar{background:var(--card);border-bottom:1px solid var(--line);position:sticky;top:0;z-index:50;
  backdrop-filter:saturate(1.4) blur(6px)}
.topbar .wrap{display:flex;align-items:center;justify-content:space-between;gap:28px;min-height:68px}
.logo{display:flex;align-items:center;gap:10px;font-size:20px;font-weight:800;letter-spacing:-.015em;
  text-decoration:none;color:var(--ink);flex:none;white-space:nowrap}
.logo .bolt{width:30px;height:30px;border-radius:9px;background:var(--accent);display:grid;place-items:center;
  color:var(--accent-ink);flex:none;box-shadow:0 2px 6px rgba(59,130,246,.30)}
.logo .tld{color:var(--ink-3);font-weight:500}
/* Le menu se replie sur une deuxieme ligne plutot que de defiler : les
   marches ne portent pas tous le meme nombre d'entrees (six en France,
   neuf en Italie) et le dernier item est l'appel a l'outil. Avec un
   defilement horizontal, il restait hors du cadre a toute largeur, meme en
   1440 px. Une deuxieme ligne coute 30 px de hauteur et rend le menu entier
   visible d'un coup d'oeil. Le defilement ne revient que sur telephone,
   ou la hauteur, elle, est comptee. */
.nav{display:flex;align-items:center;gap:2px;font-size:15px;
  flex-wrap:wrap;justify-content:flex-end;row-gap:4px;
  scrollbar-width:none;-ms-overflow-style:none;margin-left:auto}
.nav::-webkit-scrollbar{display:none}
.nav a{text-decoration:none;color:var(--ink-2);font-weight:500;padding:9px 13px;border-radius:9px;
  white-space:nowrap;transition:background .12s ease,color .12s ease}
.nav a:hover{background:var(--soft);color:var(--ink)}
.nav a[aria-current="page"]{background:var(--accent-bg);color:var(--accent-deep);font-weight:600}
/* dernier item = appel à l'outil */
.nav a.nav-cta{background:var(--accent);color:var(--accent-ink);font-weight:700;margin-left:8px}
.nav a.nav-cta:hover{background:var(--accent-deep);color:var(--accent-ink)}

/* ---------- Bandeau indépendance ---------- */
.trustbar{background:var(--accent-bg);border-bottom:1px solid var(--line);font-size:13.5px;color:var(--ink-2)}
.trustbar .wrap{padding:9px var(--gut);display:flex;gap:9px;align-items:center;justify-content:center;text-align:center}
.trustbar strong{color:var(--ink)}
.trustbar .tick{color:var(--good);font-weight:700;flex:none}

/* ---------- Hero ---------- */
.hero{padding:44px 0 8px}
.kicker{font-size:12.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--accent-deep);font-weight:700;margin:0 0 10px}
h1{font-size:clamp(29px,4.2vw,44px);line-height:1.1;letter-spacing:-.02em;margin:0 0 14px;font-weight:800;text-wrap:balance}
.lede{max-width:62ch;color:var(--ink-2);margin:0 0 24px;font-size:17px}

/* Hero à deux colonnes : texte + outil */
.hero-grid{display:grid;grid-template-columns:minmax(0,1fr);gap:28px;align-items:start}
@media (min-width:960px){
  .hero-grid{grid-template-columns:minmax(0,1.02fr) minmax(400px,.98fr);gap:40px}
  .hero-grid .hero{padding-top:48px}
  .hero-grid .lede{margin-bottom:20px}
}

/* ---------- Carte verdict (étiquette-prix) ---------- */
.verdict{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--radius);max-width:720px;overflow:hidden;box-shadow:0 6px 24px rgba(28,39,51,.07)}
.verdict-head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:11px 18px;background:var(--accent);color:var(--accent-ink)}
.verdict-head .t{letter-spacing:.07em;text-transform:uppercase;font-size:13px;font-weight:800}
.verdict-head .d{font-size:12.5px;opacity:.9;font-variant-numeric:tabular-nums}
.verdict-body{display:flex;gap:22px;padding:20px 18px;flex-wrap:wrap;align-items:center}
.verdict-body .price{font-size:42px;line-height:1;font-weight:800;font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.verdict-body .price small{display:block;font-size:13.5px;color:var(--ink-3);font-weight:500;margin-top:6px;letter-spacing:0}
.verdict-body .who{min-width:230px;flex:1}
.verdict-body .who b{font-size:17px;display:block;margin-bottom:4px}
.verdict-body .who span{display:block;font-size:14px;color:var(--ink-2)}
.verdict-foot{padding:12px 18px;border-top:1px dashed var(--line);font-size:12.5px;color:var(--ink-3)}
.btnrow{display:flex;gap:12px;margin:24px 0 0;flex-wrap:wrap}
.btn{display:inline-block;text-decoration:none;font-weight:700;border-radius:11px;padding:13px 22px;font-size:15.5px;transition:transform .12s ease,box-shadow .12s ease,filter .12s ease}
.btn-primary{background:var(--accent);color:var(--accent-ink);box-shadow:0 2px 8px rgba(28,39,51,.10)}
.btn-primary:hover{filter:brightness(1.06);transform:translateY(-1px);box-shadow:0 4px 14px rgba(28,39,51,.14)}
.btn-ghost{border:1.5px solid var(--line);color:var(--ink-2);background:var(--card)}
.btn-ghost:hover{border-color:var(--ink-3);transform:translateY(-1px)}
.btn:active{transform:translateY(0)}

/* ============================================================
   SIMULATEUR  (composant partagé — piloté par /assets/sim.js)
   ============================================================ */
.sim{background:var(--card);border:1.5px solid var(--accent);border-radius:var(--radius);
  overflow:hidden;box-shadow:0 10px 34px rgba(28,39,51,.09)}
.sim-head{padding:14px 20px;background:var(--accent);color:var(--accent-ink);
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;flex-wrap:wrap}
.sim-head h2,.sim-head .h{font-size:16.5px;font-weight:800;margin:0;letter-spacing:-.01em;color:var(--accent-ink)}
.sim-head .d{font-size:12px;opacity:.92;font-variant-numeric:tabular-nums}
.sim-body{padding:18px 20px 20px}
.sim-row{margin-bottom:15px}
.sim-row:last-of-type{margin-bottom:6px}
.sim-row > label,.sim-lab{display:block;font-size:13px;font-weight:700;color:var(--ink-2);
  margin-bottom:7px;letter-spacing:.01em}
.sim-hint{font-weight:400;color:var(--ink-3);font-size:12.5px}

/* Boutons segmentés */
.seg{display:flex;flex-wrap:wrap;gap:6px}
.seg input{position:absolute;opacity:0;width:0;height:0}
.seg label{flex:1 1 auto;min-width:74px;text-align:center;cursor:pointer;
  border:1.5px solid var(--line);background:var(--card);border-radius:10px;
  padding:9px 10px;font-size:13.5px;font-weight:600;color:var(--ink-2);
  transition:border-color .12s ease,background .12s ease,color .12s ease;user-select:none}
.seg label:hover{border-color:var(--accent);color:var(--ink)}
.seg input:checked + label{background:var(--accent-bg);border-color:var(--accent);color:var(--accent-deep)}
.seg input:focus-visible + label{outline:2.5px solid var(--accent);outline-offset:2px}

/* Champ nombre + select */
.sim-field{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.sim input[type=number],.sim select{
  font:inherit;font-size:15px;font-weight:600;color:var(--ink);background:var(--card);
  border:1.5px solid var(--line);border-radius:10px;padding:10px 12px;min-width:0;width:100%}
.sim input[type=number]{max-width:150px;font-variant-numeric:tabular-nums}
.sim input[type=number]:focus,.sim select:focus{border-color:var(--accent);outline:none}
.sim input[type=range]{width:100%;accent-color:var(--accent)}
.sim .unit{font-size:13.5px;color:var(--ink-3);font-weight:600}

/* Résultat */
.sim-out{margin-top:16px;border-top:1px dashed var(--line);padding-top:16px}
.sim-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
.sim-kpi{background:var(--soft);border-radius:11px;padding:12px 14px}
.sim-kpi .k{display:block;font-size:11.5px;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-3);font-weight:700;margin-bottom:4px}
.sim-kpi .v{display:block;font-size:26px;line-height:1.15;font-weight:800;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em;color:var(--ink)}
.sim-kpi .v small{font-size:14px;font-weight:600;color:var(--ink-2);letter-spacing:0}
.sim-kpi.is-accent{background:var(--accent-bg)}
.sim-kpi.is-accent .v{color:var(--accent-deep)}
.sim-note{font-size:12.5px;color:var(--ink-3);margin:13px 0 0;line-height:1.5}
.sim-cta{margin-top:14px}
.sim-cta .btn{width:100%;text-align:center;padding:12px 18px;font-size:15px}
.sim-foot{padding:11px 20px;background:var(--soft);border-top:1px solid var(--line);
  font-size:12px;color:var(--ink-3);line-height:1.5}
.sim noscript{display:block;font-size:13.5px;color:var(--ink-2)}

/* ---------- Sections ---------- */
section{padding:38px 0}
h2{font-size:clamp(22px,2.6vw,28px);margin:0 0 6px;letter-spacing:-.015em;font-weight:800}
h3{font-size:18px;margin:26px 0 8px;font-weight:700}
.sub{color:var(--ink-3);font-size:14.5px;margin:0 0 18px;max-width:80ch}
p{margin:0 0 14px}
ul,ol{margin:0 0 16px;padding-left:22px}
li{margin-bottom:6px}
.prose{max-width:74ch}
.note{background:var(--soft);border-left:3px solid var(--accent);border-radius:0 8px 8px 0;padding:13px 17px;font-size:14.5px;color:var(--ink-2);margin:18px 0}

/* Réponse courte mise en avant (bloc « answer-first » pour le SEO/GEO) */
.answer{background:var(--accent-bg);border:1px solid var(--accent);border-radius:var(--radius);
  padding:18px 20px;margin:0 0 22px;max-width:80ch}
.answer p:last-child{margin-bottom:0}
.answer .q{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.09em;
  font-weight:800;color:var(--accent-deep);margin-bottom:7px}

/* ---------- Tableaux ---------- */
.tablewrap{overflow-x:auto;border:1px solid var(--line);border-radius:var(--radius);background:var(--card);margin:18px 0}
table{border-collapse:collapse;width:100%;min-width:620px;font-size:14.5px}
caption{text-align:left;padding:12px 16px;font-weight:700;font-size:15px;border-bottom:1px solid var(--line)}
th{text-transform:uppercase;letter-spacing:.06em;font-size:11.5px;color:var(--ink-3);text-align:left;padding:11px 16px;border-bottom:1px solid var(--line);background:var(--soft)}
td{padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
tbody tr{transition:background .1s ease}
tbody tr:hover{background:var(--soft)}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;font-weight:600;white-space:nowrap}
.tag-best{display:inline-block;background:var(--good-bg);color:var(--good);font-size:11px;font-weight:800;letter-spacing:.04em;text-transform:uppercase;padding:3px 9px;border-radius:99px;vertical-align:middle}
/* lien « site officiel » dans les tableaux fournisseurs */
.extlink{white-space:nowrap;font-weight:600}
.extlink::after{content:"↗";font-size:11px;margin-left:3px;opacity:.7}

/* ---------- Cartes fournisseurs / méthode ---------- */
.grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin:18px 0}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:22px;transition:box-shadow .15s ease,border-color .15s ease}
.card:hover{box-shadow:0 4px 18px rgba(28,39,51,.07);border-color:var(--ink-3)}
.card h3{margin:0 0 8px;font-size:17px}
.card p{font-size:14.5px;color:var(--ink-2);margin:0 0 10px}
.card .n{display:inline-grid;place-items:center;width:30px;height:30px;border-radius:9px;background:var(--accent-bg);color:var(--accent-deep);font-weight:800;margin-bottom:10px}
.card .meta{font-size:13px;color:var(--ink-3);border-top:1px solid var(--line);padding-top:10px;margin-top:12px}
.card .meta a{font-weight:600}

/* ---------- FAQ ---------- */
details{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);margin-bottom:10px}
summary{cursor:pointer;padding:15px 18px;font-weight:600;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px}
summary::-webkit-details-marker{display:none}
summary::after{content:"+";color:var(--accent-deep);font-size:19px;font-weight:700}
details[open] summary::after{content:"–"}
details .a{padding:0 18px 16px;font-size:14.5px;color:var(--ink-2);max-width:74ch}

/* ---------- Fil d'Ariane ---------- */
.crumbs{font-size:13px;color:var(--ink-3);padding:16px 0 0}
.crumbs a{color:var(--ink-3);text-decoration:none}
.crumbs a:hover{color:var(--ink)}

/* ---------- Footer clair ---------- */
footer{background:var(--soft);border-top:1px solid var(--line);margin-top:44px}
footer .wrap{padding:34px var(--gut);display:grid;gap:26px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));font-size:14px}
footer h4{text-transform:uppercase;letter-spacing:.08em;font-size:11.5px;color:var(--ink-3);margin:0 0 10px}
footer a{color:var(--ink-2);text-decoration:none;display:block;margin-bottom:7px}
footer a:hover{color:var(--ink)}
footer .stamp{grid-column:1/-1;border-top:1px solid var(--line);padding-top:14px;font-size:12.5px;color:var(--ink-3);font-variant-numeric:tabular-nums}

/* ---------- Divers ---------- */
.pill{display:inline-block;background:var(--soft);border:1px solid var(--line);border-radius:99px;padding:3px 11px;font-size:12.5px;color:var(--ink-2);margin:0 6px 6px 0}
summary{transition:color .1s ease}
summary:hover{color:var(--accent)}

@media (max-width:900px){
  :root{--gut:18px}
  .nav{font-size:14px}
  .nav a{padding:8px 10px}
}
/* Seuil de bascule du menu : 960 px et non 900, parce qu'entre les deux le
   menu tient encore sur une ligne mais l'appel au simulateur, dernier item,
   passait sous le bord. Les libelles varient beaucoup d'une langue a l'autre
   (l'allemand est le plus long) : on bascule des que la place se resserre. */
@media (max-width:960px){
  /* Le menu passe sur une deuxieme ligne, pleine largeur.
     Sur une seule ligne, le logo (flex:none) ne laissait au menu que la
     place restante — 115 px sur un telephone : un seul lien visible, et
     les cinq autres, dont l'appel au simulateur, dans une bande defilante
     sans le moindre signal. La bande occupe maintenant toute la largeur et
     deborde dans les gouttieres pour que le dernier item soit coupe : le
     lecteur voit qu'il y a une suite, un degrade a droite le confirme.
     Aucun JavaScript — le menu reste entier sans. */
  .topbar .wrap{flex-wrap:wrap;gap:0;min-height:0;padding-top:9px}
  .logo{width:100%;padding-bottom:7px}
  .nav{width:100%;margin:0 calc(var(--gut) * -1);padding:0 var(--gut) 9px;
    flex-wrap:nowrap;justify-content:flex-start;overflow-x:auto;
    scroll-padding-inline:var(--gut);-webkit-overflow-scrolling:touch;
    -webkit-mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent);
    mask-image:linear-gradient(to right,#000 calc(100% - 26px),transparent)}
}
@media (max-width:640px){
  .hero{padding-top:28px}
  h1{font-size:clamp(26px,7vw,32px)}
  .verdict-body .price{font-size:34px}
  .logo{font-size:17.5px}
  .logo .bolt{width:27px;height:27px}
  .nav a{padding:8px 9px;font-size:13.5px}
  .nav a.nav-cta{margin-left:4px}
  .btnrow .btn{flex:1;text-align:center}
  .trustbar .wrap{text-align:left;justify-content:flex-start}
  .seg label{min-width:64px;font-size:13px;padding:8px}
  .sim-kpi .v{font-size:23px}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none!important}
}
@media print{.topbar,.trustbar,footer,.btnrow,.sim-cta{display:none}body{background:#fff}}