/* ---------- design tokens (palette validée : voir dataviz/references/palette.md) */
:root {
  color-scheme: light;
  --surface:      #fcfcfb;   /* surface des cartes/graphes */
  --plane:        #f9f9f7;   /* plan de page */
  --ink:          #0b0b0b;
  --ink-2:        #52514e;
  --muted:        #898781;
  --rule:         #e1e0d9;
  --border:       rgba(11,11,11,0.10);
  --accent:       #2a78d6;   /* teinte séquentielle (magnitude) */
  --accent-ink:   #1c5cab;   /* même rampe, pas assez clair pour du texte */
  --track:        #cde2fb;   /* piste = step clair de la MÊME rampe */
  --btn-bg:       #1c5cab;   /* bouton d'action : blanc sur accent-ink = 6,6:1 */
  --btn-ink:      #ffffff;
  /* palette catégorielle VALIDÉE (skill dataviz, slots 1-4 : all-pairs OK les 2 modes) */
  --viz-1: #2a78d6; --viz-2: #008300; --viz-3: #e87ba4; --viz-4: #eda100;
  --warn-wash:    rgba(237,161,0,0.16);   /* « manquant » : même lavis que le dashboard */
  --warn-ink:     #7a5200;
  --radius: 10px;
  --maxw: 1080px;
}
@media (prefers-color-scheme: dark) {
  :root:where(:not([data-theme="light"])) {
    color-scheme: dark;
    --surface: #1a1a19; --plane: #0d0d0d; --ink: #ffffff; --ink-2: #c3c2b7;
    --muted: #898781; --rule: #2c2c2a; --border: rgba(255,255,255,0.10);
    --accent: #3987e5; --accent-ink: #86b6ef; --track: #184f95;
    --btn-bg: #3987e5; --btn-ink: #0b0b0b;   /* blanc sur #3987e5 = 3,7:1 -> encre sombre */
    --viz-1: #3987e5; --viz-2: #008300; --viz-3: #d55181; --viz-4: #c98500;
    --warn-wash: rgba(237,161,0,0.22); --warn-ink: #fab219;
  }
}
:root[data-theme="dark"] {
  color-scheme: dark;
  --surface: #1a1a19; --plane: #0d0d0d; --ink: #ffffff; --ink-2: #c3c2b7;
  --muted: #898781; --rule: #2c2c2a; --border: rgba(255,255,255,0.10);
  --accent: #3987e5; --accent-ink: #86b6ef; --track: #184f95;
  --btn-bg: #3987e5; --btn-ink: #0b0b0b;
  --viz-1: #3987e5; --viz-2: #008300; --viz-3: #d55181; --viz-4: #c98500;
  --warn-wash: rgba(237,161,0,0.22); --warn-ink: #fab219;
}

/* ---------- base */
*, *::before, *::after { box-sizing: border-box; }
body {
  margin: 0; background: var(--plane); color: var(--ink);
  font: 16px/1.6 system-ui, -apple-system, "Segoe UI", sans-serif;
  -webkit-text-size-adjust: 100%;
}
a { color: var(--accent-ink); text-decoration-thickness: 1px; text-underline-offset: 2px; }
a:hover { text-decoration-thickness: 2px; }
img { max-width: 100%; }
.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 16px; }
h1, h2, h3 { line-height: 1.25; margin: 0 0 .4em; }
h1 { font-size: clamp(1.5rem, 1.1rem + 1.8vw, 2.1rem); letter-spacing: -0.01em; }
h2 { font-size: clamp(1.2rem, 1rem + .8vw, 1.45rem); margin-top: 2rem; }
h3 { font-size: 1.02rem; }
p { margin: 0 0 1rem; }
.lede { font-size: 1.06rem; color: var(--ink-2); }
.scope { font-size: .82rem; color: var(--muted); margin: -.2rem 0 .6rem; }
.muted { color: var(--muted); }
small { font-size: .82rem; }

/* ---------- header / footer */
header.site {
  background: var(--surface); border-bottom: 1px solid var(--rule);
  position: sticky; top: 0; z-index: 5;
}
header.site .wrap { display: flex; align-items: center; gap: 14px; min-height: 58px; flex-wrap: wrap; }
.brand { font-weight: 700; letter-spacing: -0.02em; color: var(--ink); text-decoration: none; font-size: 1.02rem; }
.brand span { color: var(--accent-ink); }
header.site nav { margin-left: auto; display: flex; gap: 14px; flex-wrap: wrap; }
header.site nav a { color: var(--ink-2); text-decoration: none; font-size: .92rem; }
header.site nav a:hover { color: var(--ink); text-decoration: underline; }
footer.site { border-top: 1px solid var(--rule); margin-top: 3rem; padding: 1.5rem 0 2.5rem; color: var(--ink-2); font-size: .88rem; background: var(--surface); }
footer.site a { color: var(--ink-2); }
.foot-links { display: flex; flex-wrap: wrap; gap: 6px 18px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--rule); font-size: .85rem; }

/* fil d'ariane (aussi lu par Google via le JSON-LD) */
.crumb { font-size: .85rem; color: var(--muted); margin: 1rem 0 .6rem; }
.crumb a { color: var(--muted); }

/* ---------- cartes */
.card {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin: 0 0 16px;
}

/* ---------- stat tiles (label + valeur ; PAS un graphe à une barre) */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin: 1.2rem 0; }
.kpi { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; }
.kpi .k-label { font-size: .8rem; color: var(--ink-2); display: block; margin-bottom: 2px; }
/* chiffres proportionnels (pas tabular-nums) : c'est une valeur isolée, pas une colonne */
.kpi .k-value { font-size: 1.5rem; font-weight: 600; letter-spacing: -0.02em; display: block; }
.kpi .k-note { font-size: .76rem; color: var(--muted); }
.hero-figure { font-size: clamp(2.6rem, 2rem + 3vw, 3.4rem); font-weight: 650; letter-spacing: -0.03em; line-height: 1; }

/* ---------- barres de magnitude (UNE teinte, valeur en label direct) */
.bars { display: flex; flex-direction: column; gap: 2px; }      /* 2px = le surface gap */
.bar-row { display: grid; grid-template-columns: minmax(88px, 26%) 1fr auto; gap: 10px; align-items: center; }
.bar-label { font-size: .88rem; color: var(--ink-2); overflow-wrap: anywhere; }
/* ⚠️ display:block OBLIGATOIRE : un <span> reste inline, et `width` est ignoré sur un
   inline — les barres s'affichaient alors toutes pleines et identiques (une viz qui MENT).
   Le track est un grid item (donc déjà blockifié), mais le fill est imbriqué : il faut
   l'expliciter. */
.bar-track { display: block; background: var(--track); border-radius: 3px; height: 14px; }
.bar-fill {
  display: block; background: var(--accent); height: 14px;       /* <= 24px */
  border-radius: 0 4px 4px 0;                                    /* 4px côté valeur, carré à la base */
  min-width: 2px;
}
/* barre de PLAGE (min -> max, ex. prix par marque) : détachée de la base -> arrondie des 2 côtés */
.bar-fill.range { border-radius: 4px; }
.bar-val { font-size: .84rem; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- régions dépliables (drill-down départements SANS JS, via <details>) */
details.reg { border-bottom: 1px solid var(--border); }
details.reg > summary { list-style: none; cursor: pointer; display: grid;
  grid-template-columns: minmax(150px, 32%) 1fr auto; gap: 10px; align-items: center;
  padding: 7px 0; font-weight: 600; }
details.reg > summary::-webkit-details-marker { display: none; }
details.reg > summary .reg-name::before { content: "▸"; color: var(--muted); margin-right: 6px; }
details.reg[open] > summary .reg-name::before { content: "▾"; }
.reg-track { display: block; background: var(--track); border-radius: 3px; height: 14px; }
.reg-fill { display: block; background: var(--accent); height: 14px; border-radius: 0 4px 4px 0; min-width: 2px; }
.reg-val { font-size: .84rem; font-weight: 400; color: var(--ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.reg-depts { margin: 0 0 10px; padding-left: 16px; border-left: 3px solid var(--accent); }
.reg-depts .bar-row { padding: 2px 0; }
.reg-depts .bar-label { font-size: .84rem; }
.reg-depts .bar-fill { opacity: .5; }   /* teinte plus claire pour distinguer dept de région */
@media (max-width: 560px) {
  details.reg > summary { grid-template-columns: 1fr auto; }
  .reg-track { display: none; }          /* barre masquée en mobile étroit (nom + valeur suffisent) */
}

/* ---------- tableaux (scrollent seuls, jamais la page) */
.table-wrap { overflow-x: auto; border: 1px solid var(--border); border-radius: var(--radius); background: var(--surface); }
table { border-collapse: collapse; width: 100%; font-size: .9rem; }
th, td { padding: 9px 12px; text-align: left; border-bottom: 1px solid var(--rule); white-space: nowrap; }
th { font-weight: 600; color: var(--ink-2); font-size: .82rem; position: sticky; top: 0; background: var(--surface); }
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: color-mix(in srgb, var(--accent) 5%, transparent); }
td.num { text-align: right; font-variant-numeric: tabular-nums; }  /* colonne -> tabular */
td.best { font-weight: 650; }
.na { color: var(--muted); }
.missing { background: var(--warn-wash); color: var(--warn-ink); border-radius: 4px; padding: 0 5px; font-size: .8rem; }
/* tendance (part de marché) : hausse = vert de la palette viz, baisse = ambre du « manquant » */
.tr-up { color: var(--viz-2); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-dn { color: var(--warn-ink); font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-flat { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- listes de liens (marques / modèles) */
.grid-links { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; padding: 0; margin: 0; list-style: none; }
.grid-links a {
  display: block; padding: 10px 12px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--ink);
}
.grid-links a:hover { border-color: var(--accent); }
.grid-links .sub { display: block; font-size: .78rem; color: var(--muted); }

/* ---------- héro (accueil) : la recherche EST le produit -> utilisable dès le 1er écran.
   Formulaire GET pur HTML (action=/recherche/) : la home reste ZÉRO JS, c'est /recherche/
   qui lit les query params. */
.hero { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: clamp(18px, 3.5vw, 32px); margin: 1.2rem 0; }
.hero-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px; align-items: end; margin: 1.2rem 0 1rem; }
.hero-form label { display: block; font-size: .8rem; font-weight: 600; color: var(--ink-2);
  margin-bottom: 4px; }
.hero-form input, .hero-form select { width: 100%; padding: 9px 10px; border: 1px solid var(--rule);
  border-radius: 8px; background: var(--plane); color: var(--ink); font: inherit; font-size: .95rem; }
.btn { display: inline-block; background: var(--btn-bg); color: var(--btn-ink); border: 0;
  border-radius: 8px; padding: 10px 18px; font: inherit; font-size: .95rem; font-weight: 650;
  cursor: pointer; text-align: center; text-decoration: none; }
.btn:hover { filter: brightness(1.12); }
.hero-alt { font-size: .9rem; color: var(--ink-2); margin-bottom: .6rem; }

/* chips = liens facettes compacts (pilules) sous le formulaire */
.chips { list-style: none; display: flex; flex-wrap: wrap; gap: 8px; padding: 0; margin: 0; }
.chips a { display: inline-block; padding: 5px 12px; border: 1px solid var(--border);
  border-radius: 999px; background: var(--plane); color: var(--ink); text-decoration: none;
  font-size: .86rem; }
.chips a:hover { border-color: var(--accent); }
.chips .chip-n { color: var(--muted); font-variant-numeric: tabular-nums; }

/* CTA header : la recherche est l'action n°1 du site, partout */
header.site nav a.nav-cta { background: var(--btn-bg); color: var(--btn-ink);
  padding: 6px 14px; border-radius: 999px; font-weight: 600; }
header.site nav a.nav-cta:hover { color: var(--btn-ink); text-decoration: none; filter: brightness(1.12); }

/* ---------- comparateur (/comparer/) : 1 slot = cascade marque -> modèle -> version */
.cmp-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
  gap: 14px; background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px; margin: 1rem 0; }
.cmp-form .slot { display: flex; flex-direction: column; gap: 7px; min-width: 0; }
.cmp-form .f-lab { font-size: .8rem; color: var(--ink-2); font-weight: 600; }
.cmp-form select { width: 100%; padding: 7px 9px; border: 1px solid var(--rule);
  border-radius: 7px; background: var(--plane); color: var(--ink); font: inherit;
  font-size: .92rem; }
.cmp-form select:disabled { opacity: .45; }

/* ---------- duo vidéo + fiche technique (page modèle, desktop) */
.duo { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 0 28px; align-items: start; }

/* ---------- courbes SVG (dossier énergie) : traits 2px, grille discrète, étiquettes
   directes en fin de ligne (le WARN contraste clair de viz-3/viz-4 est couvert par ces
   étiquettes + la vue tableau, règle du secours du skill dataviz) */
.viz { display: block; width: 100%; height: auto; }
.viz text { font: 12px system-ui, -apple-system, "Segoe UI", sans-serif; fill: var(--ink-2); }
.viz .grid { stroke: var(--rule); }
.viz .lbl { fill: var(--ink); font-weight: 600; }
.legend { display: flex; gap: 4px 16px; flex-wrap: wrap; font-size: .85rem;
  color: var(--ink-2); margin: .2rem 0 .5rem; }
.legend .dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block;
  margin-right: 5px; vertical-align: -1px; }

/* ---------- encadrés */
.note { border-left: 3px solid var(--accent); background: var(--surface); padding: 10px 14px; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: .9rem; color: var(--ink-2); }
.note strong { color: var(--ink); }

/* ---------- emplacement publicitaire (réservé, VIDE : rien n'est servi tant que
   le site n'est pas en ligne ; on réserve la place pour ne pas casser la mise en
   page le jour où une régie est branchée) */
.ad-slot { min-height: 90px; display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--rule); border-radius: var(--radius); color: var(--muted);
  font-size: .75rem; margin: 1.5rem 0; }

/* ---------- logos marques (SVG monochromes inline, fill=currentColor -> ok light+dark).
   Usage RÉFÉRENTIEL (identifier la marque) ; mention « marques déposées » au footer. */
.blogo { width: 22px; height: 22px; flex: 0 0 auto; vertical-align: -4px; color: var(--ink-2); }
h1 .blogo, .brand-head .blogo { width: 34px; height: 34px; vertical-align: -6px; margin-right: 6px; }
/* flex UNIQUEMENT sur les cartes à logo : ailleurs, .sub doit rester EMPILÉ sous le titre
   (un flex global mettait « 16 modèles » à côté du nom au lieu de dessous). */
.grid-links a.with-logo { display: flex; align-items: center; gap: 10px; }
.grid-links a.with-logo .txt { display: block; min-width: 0; }
/* repli texte quand pas de SVG (Cupra/Lexus) : badge initiale, même gabarit */
.blogo-badge { display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border: 1.5px solid var(--ink-2); border-radius: 6px;
  font-size: .7rem; font-weight: 700; color: var(--ink-2); flex: 0 0 auto; }
h1 .blogo-badge { width: 34px; height: 34px; font-size: 1rem; margin-right: 6px; vertical-align: -6px; }

/* ---------- façade vidéo YouTube : RIEN de Google ne charge avant le clic (perf + RGPD).
   La miniature vient d'i.ytimg.com (lazy) ; l'iframe youtube-nocookie n'est injectée qu'au clic. */
.yt { max-width: 640px; margin: 1rem 0; }
.yt-play { position: relative; display: block; width: 100%; padding: 0; border: 1px solid var(--border);
  border-radius: var(--radius); overflow: hidden; cursor: pointer; background: #000; aspect-ratio: 16/9; }
.yt-play img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .92; }
.yt-btn { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; }
.yt-btn::before { content: "▶"; font-size: 1.4rem; color: #fff; background: rgba(0,0,0,.72);
  border-radius: 50%; width: 64px; height: 64px; display: flex; align-items: center;
  justify-content: center; padding-left: 6px; transition: background .15s; }
.yt-play:hover .yt-btn::before { background: var(--accent); }
.yt-frame { width: 100%; aspect-ratio: 16/9; border: 0; border-radius: var(--radius); display: block; }
.yt-cap { font-size: .8rem; color: var(--muted); margin-top: 6px; }

/* ---------- outil de recherche (page /recherche/ : le JS est permis ICI, pas sur les pages SEO) */
.search-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 14px;
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 16px; margin: 1rem 0; }
.search-form fieldset { border: 0; padding: 0; margin: 0; min-width: 0; }
.search-form legend, .search-form label.f-lab { font-size: .8rem; color: var(--ink-2);
  font-weight: 600; display: block; margin-bottom: 4px; padding: 0; }
.search-form input[type="number"], .search-form select {
  width: 100%; padding: 7px 9px; border: 1px solid var(--rule); border-radius: 7px;
  background: var(--plane); color: var(--ink); font: inherit; font-size: .92rem; }
.search-form .checks { display: flex; flex-wrap: wrap; gap: 4px 12px; }
.search-form .checks label { font-size: .88rem; display: inline-flex; align-items: center; gap: 5px; }
.feat-checks { columns: 2; column-gap: 14px; }
.feat-checks label { display: flex; align-items: flex-start; gap: 6px; font-size: .85rem;
  break-inside: avoid; margin-bottom: 3px; }
.res-count { font-weight: 650; margin: 1rem 0 .5rem; }
#reset-btn { background: none; border: 1px solid var(--rule); border-radius: 7px; padding: 6px 12px;
  color: var(--ink-2); cursor: pointer; font: inherit; font-size: .85rem; }
#reset-btn:hover { border-color: var(--accent); color: var(--ink); }

@media (max-width: 560px) {
  /* Écran étroit : label et valeur sur la MÊME ligne, barre pleine largeur dessous.
     (Sans positions explicites, l'auto-placement empilait label / barre / valeur sur
     trois lignes — la valeur se détachait de son libellé.) */
  .bar-row { grid-template-columns: 1fr auto; row-gap: 2px; }
  .bar-label { grid-row: 1; grid-column: 1; }
  .bar-val   { grid-row: 1; grid-column: 2; }
  .bar-track { grid-row: 2; grid-column: 1 / -1; }
  .bars { gap: 10px; }        /* les barres ne se touchent plus -> vraie respiration */
}
@media print { header.site, footer.site, .ad-slot { display: none; } }