/* ══════════════════════════════════════════════════════════════
   Tableau de bord sur mesure — Metrika
   Conçu mobile d'abord : tout se réorganise, rien ne déborde.
   ══════════════════════════════════════════════════════════════ */
:root{
  --bleu:#1C4FD1; --bleu-fonce:#15399B; --bleu-clair:#4A73DD;
  --bleu-voile:#EEF3FF; --bleu-bordure:#D6E1FF;
  --encre:#17211F; --gris:#5E6B68; --gris-fonce:#3A4643;
  --fond:#F7F8FA; --surface:#fff;
  --bordure:#E3E8E6; --bordure-claire:#EFF3F1;
  --violet:#7A3FD4; --magenta:#C13BC0; --vert:#0E7C5A; --vert-voile:#E9F7F1;
  --ambre:#B7791F;
  --rayon:16px;
  --ombre:0 1px 2px rgba(23,33,31,.04), 0 10px 28px -16px rgba(23,33,31,.14);
  --t:.35s cubic-bezier(.22,.68,.36,1);
}
*{box-sizing:border-box}
body{
  margin:0; background:var(--fond); color:var(--encre);
  font-family:'Inter',system-ui,sans-serif; font-size:15px; line-height:1.55;
  -webkit-font-smoothing:antialiased;
}
h1,h2{font-family:'Space Grotesk',sans-serif; margin:0; letter-spacing:-.015em; line-height:1.2}
a{color:var(--bleu); text-decoration:none}
a:hover{text-decoration:underline}
button{font:inherit; cursor:pointer}

/* ── en-tête ── */
.tete{
  position:sticky; top:0; z-index:40;
  display:flex; align-items:center; justify-content:space-between; gap:14px; flex-wrap:wrap;
  padding:12px 20px; background:rgba(255,255,255,.9); backdrop-filter:blur(12px);
  border-bottom:1px solid var(--bordure);
}
.tete-gauche,.tete-droite{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.marque{font-family:'Space Grotesk',sans-serif; font-weight:700; font-size:1.15rem; color:var(--encre)}
.marque:hover{text-decoration:none}
.marque span{color:var(--bleu)}
.fil{
  font-size:.72rem; font-weight:600; letter-spacing:.07em; text-transform:uppercase;
  color:var(--bleu); background:var(--bleu-voile); border:1px solid var(--bleu-bordure);
  padding:4px 10px; border-radius:999px;
}
.retour{font-size:.86rem; color:var(--gris)}
.selecteur,.bascule{
  display:inline-flex; background:var(--fond); border:1px solid var(--bordure);
  border-radius:999px; padding:3px; gap:2px;
}
.selecteur button,.bascule button{
  border:0; background:transparent; color:var(--gris); font-weight:600;
  font-size:.8rem; padding:5px 13px; border-radius:999px; transition:all var(--t);
  white-space:nowrap;
}
.selecteur button:hover,.bascule button:hover{color:var(--encre)}
.selecteur button.actif,.bascule button.actif{background:var(--bleu); color:#fff}

/* ── mise en page ── */
main{padding:22px 20px 40px; max-width:1440px; margin:0 auto}
main[aria-busy="true"] .bloc,main[aria-busy="true"] .tuile{opacity:.5}
.bandeau{
  display:grid; gap:14px; margin-bottom:18px;
  grid-template-columns:repeat(auto-fit,minmax(210px,1fr));
}
.tuile{
  position:relative; overflow:hidden;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:18px 20px 14px; box-shadow:var(--ombre); transition:all var(--t);
}
.tuile:hover{transform:translateY(-3px); border-color:var(--bleu-bordure)}
.tuile-titre{display:block; font-size:.79rem; color:var(--gris); font-weight:500}
.tuile-valeur{
  display:block; font-family:'Space Grotesk',sans-serif; font-weight:700;
  font-size:1.75rem; margin-top:4px; font-variant-numeric:tabular-nums; line-height:1.15;
}
.tuile-detail{display:block; font-size:.78rem; color:var(--gris); margin-top:2px; min-height:1.2em}
.etincelle{position:absolute; right:0; bottom:0; width:60%; height:34px; opacity:.5}

.grille{display:grid; gap:16px; grid-template-columns:repeat(12,1fr)}
.bloc{
  grid-column:span 12;
  background:var(--surface); border:1px solid var(--bordure); border-radius:var(--rayon);
  padding:20px 22px; box-shadow:var(--ombre); min-width:0;
}
.bloc-tete{display:flex; justify-content:space-between; align-items:flex-start; gap:14px; flex-wrap:wrap; margin-bottom:14px}
.bloc h2{font-size:1.02rem}
.bloc-tete p{margin:3px 0 0; font-size:.82rem; color:var(--gris); max-width:52ch}
.jeton-reel{
  font-size:.7rem; font-weight:600; letter-spacing:.05em; text-transform:uppercase;
  color:var(--vert); background:var(--vert-voile); border:1px solid #C6E9DA;
  padding:4px 10px; border-radius:999px; white-space:nowrap;
}
.toile{width:100%; min-height:200px}
.toile svg{display:block; width:100%; height:auto; overflow:visible}
.toile-carte{min-height:260px}
.legende-carte{display:flex; align-items:center; gap:10px; margin-top:10px; font-size:.76rem; color:var(--gris); flex-wrap:wrap}
.echelle{height:9px; border-radius:5px; flex:1 1 140px; min-width:120px}

/* Sur grand écran, on répartit en colonnes ; sur mobile tout s'empile. */
@media (min-width:900px){
  .bloc-large{grid-column:span 12}
  .bloc-carte{grid-column:span 5}
  #bloc-segments{grid-column:span 7}
  #bloc-familles{grid-column:span 7}
}
@media (min-width:1200px){
  #bloc-evolution{grid-column:span 7}
  .bloc-carte{grid-column:span 5}
  #bloc-segments{grid-column:span 6}
  #bloc-familles{grid-column:span 6}
  #bloc-energie{grid-column:span 12}
}

/* ── éléments graphiques ── */
.axe{font-size:11px; fill:var(--gris)}
.grille-fond{stroke:var(--bordure-claire); stroke-width:1}
.aire-ca{fill:url(#degrade-bleu)}
.trace{fill:none; stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round}
.trace-ca{stroke:var(--bleu)}
.trace-marge{stroke:var(--vert)}
.trace-mrr{stroke:var(--violet)}
.curseur{stroke:var(--bleu); stroke-width:1; stroke-dasharray:3 3; opacity:0}
.pastille{fill:#fff; stroke:var(--bleu); stroke-width:2.5; opacity:0}
.zone-survol{fill:transparent; cursor:crosshair}
.barre-h{transition:opacity var(--t)}
.barre-h:hover{opacity:.78}
.etiq{font-size:12px; fill:var(--gris-fonce); font-weight:500}
.val{font-size:12px; fill:var(--encre); font-weight:600; font-variant-numeric:tabular-nums}
.region{stroke:#fff; stroke-width:1.1; cursor:pointer; transition:opacity var(--t)}
.region:hover{opacity:.72}
.region-etiq{font-size:10px; fill:#fff; font-weight:600; pointer-events:none; paint-order:stroke;
             stroke:rgba(0,0,0,.25); stroke-width:2.4}
.empile{transition:opacity var(--t)}

.infobulle{
  position:fixed; z-index:80; pointer-events:none; opacity:0; transition:opacity .14s;
  background:var(--encre); color:#fff; font-size:.78rem; line-height:1.45;
  padding:8px 11px; border-radius:9px; transform:translate(-50%,-125%); white-space:nowrap;
  box-shadow:0 8px 24px -8px rgba(0,0,0,.4);
}
.infobulle.visible{opacity:1}
.infobulle b{font-weight:600}
.infobulle .sec{color:rgba(255,255,255,.7)}

.pied{
  display:flex; justify-content:space-between; gap:14px; flex-wrap:wrap;
  margin-top:24px; padding-top:18px; border-top:1px solid var(--bordure);
  font-size:.8rem; color:var(--gris);
}

@media (max-width:520px){
  main{padding:16px 14px 32px}
  .bloc{padding:16px 15px}
  .tuile-valeur{font-size:1.5rem}
  .selecteur button,.bascule button{padding:5px 10px; font-size:.75rem}
  .fil,.retour{display:none}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none!important; transition:none!important}
}