/* ════════════════════════════════════════════════════════════
   SolarScope — styles du site (deck 7 slides : accueil, données croisées, carte,
   autoconsommation, écologie, calculateur, à propos)
   ════════════════════════════════════════════════════════════ */
:root{
  /* Papier grège neutre : clair et net, jamais jauni. */
  --paper:   #f4f1ea;
  --paper-2: #ece7dc;
  --ink:     #1c1a17;
  --ink-soft:#5c574e;
  --line:    #d8d1c4;
  --accent:  #c2410c;
  --accent-2:#9a3409;          /* orange profond (dégradés, hover) */
  --gold:    #d97706;          /* doré solaire, complément chaud */
  --teal:    #0e7490;          /* bleu canard, contrepoint froid (moins bons) */
  --green:   #15803d;          /* vert franc : département sélectionné dans le nuage */
  --nodata:  #ddd7ca;
  --map-stroke: #5c4a2e;       /* contour des départements sur les cartes */
  /* Échelle séquentielle (clair -> foncé = faible -> élevé) */
  --c0:#fff3b0; --c1:#ffd166; --c2:#f4a259; --c3:#e07a3f; --c4:#c2410c; --c5:#7c2d12;
  /* Surfaces & textures dérivées (déclinées en sombre plus bas) */
  --surface:        rgba(255,255,255,.55);   /* cartes stat, vitres légères */
  --surface-panel:  rgba(244,241,234,.94);   /* panneaux carte (info, légende) */
  --surface-ctrl:   rgba(244,241,234,.96);   /* contrôles Leaflet */
  --surface-ctrl-hover:#ffffff;
  --row-alt:        rgba(28,26,23,.03);       /* lignes alternées / surlignages doux */
  --dot:            rgba(28,26,23,.06);       /* trame papier millimétré */
  --halo:           rgba(255,255,255,.65);    /* clair de lumière au centre de la carte */
  --map-grad-a:#f3efe6; --map-grad-b:#ebe5d8; /* fond dégradé du cadre carte */
  /* Fond « ciel » des slides : touches bleutées de jour en clair (voile bleu
     en haut + une éclaircie), trame papier conservée par-dessus. Décliné en
     ciel étoilé dans les blocs sombres. */
  --sky-bg:
    radial-gradient(150% 70% at 50% -18%, rgba(56,150,230,.16), transparent 60%) 0 0/100% 100% no-repeat,
    radial-gradient(45% 32% at 86% 6%, rgba(130,195,255,.14), transparent 72%) 0 0/100% 100% no-repeat,
    radial-gradient(40% 30% at 8% 30%, rgba(96,170,235,.10), transparent 75%) 0 0/100% 100% no-repeat,
    radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0/24px 24px;
  /* Grain fin (bruit fractal désaturé) : texture neutre, valable clair & sombre. */
  --grain:
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='150'%3E%3Cfilter id='g'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/%3E%3CfeColorMatrix type='saturate' values='0'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23g)' opacity='0.32'/%3E%3C/svg%3E")
    0 0/150px 150px;
  color-scheme: light;
}

/* ── Mode sombre ───────────────────────────────────────────────
   Valeurs appliquées soit quand le navigateur le demande (sauf si
   l'utilisateur a forcé le clair via le bouton), soit quand le bouton
   force explicitement le sombre. Mêmes déclarations dans les deux cas. */
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:   #090706;
    --paper-2: #140f0b;
    --ink:     #f1ece2;
    --ink-soft:#c3b8a6;
    --line:    #39322a;
    --accent:  #fb7a33;
    --accent-2:#fdba74;
    --gold:    #fbbf24;
    --teal:    #1d7e9c;
    --green:   #4ade80;
    --nodata:  #2f2820;
    --map-stroke: #a89370;       /* contour éclairci, lisible sur fond sombre */
    --surface:        rgba(255,255,255,.05);
    --surface-panel:  rgba(33,27,21,.92);
    --surface-ctrl:   rgba(33,27,21,.95);
    --surface-ctrl-hover:#2d261e;
    --row-alt:        rgba(255,255,255,.045);
    --dot:            rgba(255,255,255,.05);
    --halo:           rgba(255,236,200,.10);
    --map-grad-a:#1f1813; --map-grad-b:#14100c;
    --sky-bg:
      radial-gradient(130% 78% at 50% -22%, rgba(64,84,142,.24), transparent 60%) 0 0/100% 100% no-repeat,
      radial-gradient(circle at 26px 38px,   #fff 0, #fff 1px, transparent 1.9px)                                   0 0/143px 167px,
      radial-gradient(circle at 104px 92px,  rgba(255,255,255,.92) 0, rgba(255,255,255,.92) .9px, transparent 1.7px) 0 0/197px 211px,
      radial-gradient(circle at 152px 150px, #fff 0, #fff 1.3px, transparent 2.1px)                                 0 0/271px 239px,
      radial-gradient(circle at 58px 196px,  rgba(255,255,255,.8) 0, rgba(255,255,255,.8) .85px, transparent 1.6px)  0 0/313px 281px,
      radial-gradient(circle at 210px 44px,  rgba(255,255,255,.7) 0, rgba(255,255,255,.7) .8px, transparent 1.5px)   0 0/359px 331px,
      radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0/24px 24px;
    --grain: none;   /* pas de grain en mode sombre */
    color-scheme: dark;
  }
}
:root[data-theme="dark"]{
  --paper:   #090706;
  --paper-2: #140f0b;
  --ink:     #f1ece2;
  --ink-soft:#c3b8a6;
  --line:    #39322a;
  --accent:  #fb7a33;
  --accent-2:#fdba74;
  --gold:    #fbbf24;
  --teal:    #1d7e9c;
  --green:   #4ade80;
  --nodata:  #2f2820;
  --map-stroke: #a89370;       /* contour éclairci, lisible sur fond sombre */
  --surface:        rgba(255,255,255,.05);
  --surface-panel:  rgba(33,27,21,.92);
  --surface-ctrl:   rgba(33,27,21,.95);
  --surface-ctrl-hover:#2d261e;
  --row-alt:        rgba(255,255,255,.045);
  --dot:            rgba(255,255,255,.05);
  --halo:           rgba(255,236,200,.10);
  --map-grad-a:#1f1813; --map-grad-b:#14100c;
  --sky-bg:
    radial-gradient(130% 78% at 50% -22%, rgba(64,84,142,.24), transparent 60%) 0 0/100% 100% no-repeat,
    radial-gradient(circle at 26px 38px,   #fff 0, #fff 1px, transparent 1.9px)                                   0 0/143px 167px,
    radial-gradient(circle at 104px 92px,  rgba(255,255,255,.92) 0, rgba(255,255,255,.92) .9px, transparent 1.7px) 0 0/197px 211px,
    radial-gradient(circle at 152px 150px, #fff 0, #fff 1.3px, transparent 2.1px)                                 0 0/271px 239px,
    radial-gradient(circle at 58px 196px,  rgba(255,255,255,.8) 0, rgba(255,255,255,.8) .85px, transparent 1.6px)  0 0/313px 281px,
    radial-gradient(circle at 210px 44px,  rgba(255,255,255,.7) 0, rgba(255,255,255,.7) .8px, transparent 1.5px)   0 0/359px 331px,
    radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0/24px 24px;
  --grain: none;   /* pas de grain en mode sombre */
  color-scheme: dark;
}

*{ box-sizing:border-box; }
html,body{ margin:0; height:100%; }
body{
  background:var(--paper);
  color:var(--ink);
  font-family:"Archivo", system-ui, sans-serif;
  -webkit-font-smoothing:antialiased;
  overflow:hidden;             /* le défilement se fait DANS chaque slide */
}

/* ─────────────────────────────────────────────────────────────
   Deck : deux slides côte à côte, translation horizontale.
   ───────────────────────────────────────────────────────────── */
.deck{
  display:flex;
  width:calc(7 * 100vw); height:100vh;
  /* Translation pilotée par --slide (posée par goToSlide) : généralise les N slides. */
  transform:translateX(calc(var(--slide,0) * -100vw));
  transition:transform .55s cubic-bezier(.6,.05,.25,1);
}
.deck.no-anim{ transition:none; }

.slide{
  width:100vw; height:100vh;
  flex:0 0 100vw;
  overflow-y:auto;
  overflow-x:hidden;
}
/* Trame de points façon papier millimétré : habille les zones vides des slides
   « contenu » sans les teinter (les nappes de couleur jaunissaient la page). */
.slide-accueil, .slide-donnees, .slide-apropos, .slide-autoconso, .slide-ecologie, .slide-calculateur{
  background:var(--grain), var(--sky-bg), var(--paper);
  /* Le ciel défile avec le contenu de la slide (conteneur de scroll). */
  background-attachment:local;
}
.slide-carte{
  display:grid; grid-template-columns:360px 1fr;
  overflow:hidden;             /* la carte occupe l'espace, pas de scroll */
  background:var(--grain), var(--sky-bg), var(--paper);
}
/* Tablette : le panneau passe au-dessus de la carte, qui prend le reste. */
@media (max-width:880px){
  .slide-carte{ grid-template-columns:1fr; grid-template-rows:auto 1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Flèches de navigation (slide suivante / précédente)
   ───────────────────────────────────────────────────────────── */
.nav-arrow{
  position:fixed; top:50%; transform:translateY(-50%);
  z-index:1500;
  display:flex; align-items:center; gap:8px;
  font-family:"Archivo",sans-serif; font-size:.8rem; font-weight:700;
  letter-spacing:.06em; text-transform:uppercase;
  color:#fff; background:linear-gradient(135deg, var(--gold), var(--accent) 60%, var(--accent-2));
  border:none; border-radius:999px;
  padding:14px 18px; cursor:pointer;
  box-shadow:0 6px 24px rgba(194,65,12,.32);
  transition:filter .15s ease, box-shadow .15s ease, opacity .3s ease;
}
.nav-arrow:hover{ filter:brightness(1.08); box-shadow:0 8px 28px rgba(194,65,12,.42); }
.nav-arrow:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(194,65,12,.35); }
.nav-arrow svg{ color:#ffd166; flex:0 0 auto; }
.nav-next{ right:18px; }
/* La flèche retour vit dans le flux du panneau, sous l'encart de lecture. */
.nav-prev{ position:static; transform:none; align-self:flex-start; }
/* Une seule flèche visible à la fois, selon la slide courante. */
body[data-slide="0"] .nav-prev,
body[data-slide="1"] .nav-next{ opacity:0; pointer-events:none; }

/* ─────────────────────────────────────────────────────────────
   Slide accueil — héro de présentation
   ───────────────────────────────────────────────────────────── */
.hero{
  position:relative; overflow:hidden;
  padding:clamp(48px,9vh,90px) clamp(20px,6vw,72px) 44px;
  /* Bande tricolore en tête + double halo chaud : coloré mais feutré.
     Pas de base opaque : le fond continu de la slide traverse le héro, sans
     couture avec les blocs suivants. */
  background:
    linear-gradient(90deg, var(--accent), var(--gold) 55%, var(--teal)) top/100% 5px no-repeat,
    radial-gradient(110% 130% at 100% 0%, rgba(194,65,12,.16), transparent 55%),
    radial-gradient(90% 120% at 0% 100%, rgba(217,119,6,.12), transparent 60%);
}
/* Soleil en anneaux concentriques, coin haut-droit du héro. Il « respire »
   (halo qui enfle et s'estompe doucement) en plus de ses rayons tournants. */
.hero::after{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-130px; top:-130px; width:460px; height:460px; border-radius:50%;
  background:
    radial-gradient(circle at center, rgba(217,119,6,.20), transparent 46%),
    repeating-radial-gradient(circle at center,
      rgba(194,65,12,.16) 0 2px, transparent 2px 30px);
  transform-origin:center;
  animation:sun-breathe 8s ease-in-out infinite;
}
@keyframes sun-breathe{
  0%,100%{ transform:scale(1);    opacity:.92; }
  50%    { transform:scale(1.06); opacity:.62; }
}
/* Rayons du même soleil, en rotation très lente derrière les anneaux. */
.hero::before{
  content:''; position:absolute; z-index:0; pointer-events:none;
  right:-130px; top:-130px; width:460px; height:460px; border-radius:50%;
  background:repeating-conic-gradient(
    rgba(217,119,6,.10) 0 6deg, transparent 6deg 30deg);
  animation:spin-slow 120s linear infinite;
}
/* Le contenu du héro passe au-dessus des motifs décoratifs. */
.hero > *{ position:relative; z-index:1; }

/* ── Animation d'entrée des slides : le contenu de la slide active monte en
   fondu, en cascade. Piloté par body[data-slide] → rejoué à chaque navigation. */
@keyframes slide-enter{
  from{ opacity:0; transform:translateY(18px); }
  to  { opacity:1; transform:none; }
}
body.loaded[data-slide="0"] .hero-text > *,
body.loaded[data-slide="1"] .hero-text > *,
body.loaded[data-slide="2"] .map-side  > *{
  animation:slide-enter .6s cubic-bezier(.2,.7,.3,1) both;
}
body.loaded[data-slide="0"] .hero-text > *:nth-child(2),
body.loaded[data-slide="1"] .hero-text > *:nth-child(2),
body.loaded[data-slide="2"] .map-side  > *:nth-child(2){ animation-delay:.08s; }
body.loaded[data-slide="0"] .hero-text > *:nth-child(3),
body.loaded[data-slide="1"] .hero-text > *:nth-child(3),
body.loaded[data-slide="2"] .map-side  > *:nth-child(3){ animation-delay:.16s; }
body.loaded[data-slide="0"] .hero-text > *:nth-child(4),
body.loaded[data-slide="1"] .hero-text > *:nth-child(4),
body.loaded[data-slide="2"] .map-side  > *:nth-child(4){ animation-delay:.24s; }
body.loaded[data-slide="0"] .hero-text > *:nth-child(5),
body.loaded[data-slide="1"] .hero-text > *:nth-child(5),
body.loaded[data-slide="2"] .map-side  > *:nth-child(5){ animation-delay:.32s; }
body.loaded[data-slide="0"] .hero-text > *:nth-child(n+6),
body.loaded[data-slide="1"] .hero-text > *:nth-child(n+6),
body.loaded[data-slide="2"] .map-side  > *:nth-child(n+6){ animation-delay:.40s; }

/* Héro mono-colonne : le récit seul, les chiffres clés vivent dans À propos. */
.hero-grid{
  max-width:1280px; margin:0 auto;
}
.stat{
  background:var(--surface);
  border:1px solid var(--line); border-radius:14px;
  border-top:4px solid var(--accent);
  padding:16px 18px;
  box-shadow:0 4px 16px rgba(28,26,23,.07);
}
.stat .num{
  font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(1.45rem,2.2vw,1.9rem); line-height:1.1;
  color:var(--accent-2); font-variant-numeric:tabular-nums; letter-spacing:-.01em;
}
.stat .lbl{
  margin-top:5px; font-size:.74rem; line-height:1.4; color:var(--ink-soft);
}
.stat.is-gold{ border-top-color:var(--gold); }
.stat.is-gold .num{ color:var(--gold); }
.stat.is-teal{ border-top-color:var(--teal); }
.stat.is-teal .num{ color:var(--teal); }

/* ── Animations décoratives : lentes, amples, jamais distrayantes ── */
@keyframes spin-slow{ to{ transform:rotate(360deg); } }
/* Accessibilité : aucun mouvement pour qui le refuse. On coupe TOUTES les
   animations ajoutées depuis (scintillement infini des étoiles du switch,
   pulsation des départements, entrées de slide, soleil), pas seulement le héros. */
@media (prefers-reduced-motion:reduce){
  .hero::before, .hero::after,
  .hero-text > *, .map-side > *,
  .theme-track::before, .theme-track::after,
  .dep-pulse{ animation:none !important; }
}
.eyebrow{
  display:inline-block;
  font-size:.72rem; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); font-weight:700; margin:0 0 14px;
  background:rgba(194,65,12,.10); border:1px solid rgba(194,65,12,.28);
  border-radius:999px; padding:7px 14px;
}
/* Mot-clé du titre mis en couleur. */
h1 .hl{ color:var(--accent); }
h1{
  font-family:"Fraunces", Georgia, serif;
  font-weight:900; font-size:clamp(2rem,4.4vw,3.4rem);
  line-height:1.02; margin:0; letter-spacing:-.01em; max-width:22ch;
}
.sub{
  margin:14px 0 0; color:var(--ink-soft); max-width:68ch;
  font-size:1rem; line-height:1.6;
}
.sub b{ color:var(--ink); }
.hero-cta{
  display:inline-block; margin-top:22px;
  font-weight:700; font-size:.92rem; text-decoration:none;
  color:#fff; background:linear-gradient(135deg, var(--gold), var(--accent) 60%, var(--accent-2));
  border-radius:999px; padding:13px 24px;
  box-shadow:0 4px 14px rgba(194,65,12,.25);
  transition:box-shadow .15s ease, filter .15s ease;
}
.hero-cta:hover{ filter:brightness(1.08); box-shadow:0 8px 22px rgba(194,65,12,.38); }

/* Cartes de présentation (rubrique À propos) */
.card{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; padding:20px 22px;
  border-top:4px solid var(--accent);
}
/* Chaque carte porte sa couleur (liseré + pastille du titre). */
.card.is-gold{ border-top-color:var(--gold); background:rgba(217,119,6,.07); }
.card.is-teal{ border-top-color:var(--teal); background:rgba(14,116,144,.06); }
.card.is-accent{ background:rgba(194,65,12,.06); }
.card h3{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.1rem;
  margin:0 0 8px;
  display:flex; align-items:center; gap:9px;
}
.card h3::before{
  content:''; width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--accent);
}
.card.is-gold h3::before{ background:var(--gold); }
.card.is-teal h3::before{ background:var(--teal); }
.card p{ margin:0; font-size:.88rem; line-height:1.55; color:var(--ink-soft); }

/* Blocs de contenu (classement, nuage) */
.block{
  position:relative; overflow:hidden;
  padding:42px clamp(20px,6vw,72px);
}
.block-inner{ position:relative; z-index:1; }
.block h2{
  font-family:"Fraunces",serif; font-weight:900;
  font-size:clamp(1.4rem,2.6vw,2rem); margin:0 0 8px; letter-spacing:-.01em;
}
/* Souligné dégradé sous chaque titre de section. */
.block h2::after{
  content:''; display:block; width:72px; height:4px; border-radius:2px;
  margin-top:10px; background:linear-gradient(90deg, var(--accent), var(--gold));
}
.block-sub{
  margin:0 0 22px; color:var(--ink-soft); max-width:68ch;
  font-size:.92rem; line-height:1.55;
}
.block-sub a{ color:var(--accent); text-decoration:underline; text-underline-offset:2px; }
/* Colonne centrée : les tableaux et le nuage vivent au milieu de la page,
   titres et textes alignés sur le même bord gauche que le contenu. */
.block-inner{ max-width:1280px; margin:0 auto; }

/* ─────────────────────────────────────────────────────────────
   Contrôles (selects, cases) — partagés entre les deux slides
   ───────────────────────────────────────────────────────────── */
.field{ display:flex; flex-direction:column; gap:6px; }
.field > label.field-label{
  font-size:.7rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
}
select#choix_type,
select#choix_indicateur,
select#choix_classement,
select#choix_departement{
  appearance:none; -webkit-appearance:none;
  font-family:"Archivo",sans-serif; font-size:1rem; font-weight:600;
  color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:10px;
  padding:11px 42px 11px 14px; min-width:240px; max-width:100%; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select#choix_type:focus,
select#choix_indicateur:focus,
select#choix_classement:focus,
select#choix_departement:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(194,65,12,.15);
}

/* Cases stylisées (normalisation). */
.types{ display:flex; flex-wrap:wrap; gap:8px 10px; }
.types .opt{
  display:inline-flex; align-items:center; gap:9px;
  font-size:.85rem; font-weight:600; color:var(--ink);
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:999px; padding:9px 15px; cursor:pointer;
  user-select:none; line-height:1;
  transition:border-color .15s ease, box-shadow .15s ease, background .15s ease;
}
.types .opt:hover{ border-color:var(--ink-soft); }
.types .opt:has(input:checked){
  border-color:var(--accent);
  box-shadow:inset 0 0 0 1px var(--accent);
  background:rgba(194,65,12,.08);
}
.types .opt input{
  appearance:none; -webkit-appearance:none; margin:0;
  width:16px; height:16px; flex:0 0 auto;
  border:1.6px solid var(--ink-soft); border-radius:5px;
  display:grid; place-content:center; cursor:pointer;
  transition:background .15s ease, border-color .15s ease;
}
.types .opt input:checked{ background:var(--accent); border-color:var(--accent); }
.types .opt input:checked::after{
  content:''; width:9px; height:9px; background:var(--paper);
  clip-path:polygon(14% 44%, 0 65%, 50% 100%, 100% 16%, 80% 0, 43% 62%);
}
.types .opt input:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(194,65,12,.25);
}
.types .opt.is-total{ font-weight:700; }
/* Contrôle sans effet pour l'indicateur courant (ex. ensoleillement). */
.types .opt.is-disabled{ opacity:.4; cursor:not-allowed; pointer-events:none; }

/* ─────────────────────────────────────────────────────────────
   Tableau de classement (top 10)
   ───────────────────────────────────────────────────────────── */
.ranking-desc{
  margin:16px 0 14px; font-size:.88rem; color:var(--ink-soft);
  max-width:68ch; line-height:1.5;
}
/* Deux tableaux côte à côte : moins bons à gauche, meilleurs à droite. */
.tables-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:18px 28px;
  align-items:start;
}
@media (max-width:920px){
  .tables-duo{ grid-template-columns:1fr; }
}
.table-title{
  display:inline-block;
  font-family:"Fraunces",serif; font-weight:600; font-size:1rem;
  margin:0 0 12px; padding:7px 16px; border-radius:999px;
}
.table-title.is-best{
  color:var(--accent); background:rgba(194,65,12,.12);
  border:1px solid rgba(194,65,12,.3);
}
.table-title.is-worst{
  color:var(--teal); background:rgba(14,116,144,.10);
  border:1px solid rgba(14,116,144,.3);
}

.table-wrap{ overflow-x:auto; }
table.ranking{
  width:100%; margin:0 auto;
  border-collapse:collapse;
  font-size:.95rem; font-variant-numeric:tabular-nums;
}
table.ranking th{
  text-align:left; font-size:.7rem; letter-spacing:.12em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600; background:var(--paper-2);
  padding:10px 12px; border-bottom:2px solid var(--ink);
  white-space:nowrap;
}
/* L'en-tête reprend la couleur du camp : orange = meilleurs, canard = moins bons. */
#ranking-best  th{ border-bottom-color:var(--accent); }
#ranking-worst th{ border-bottom-color:var(--teal); }
table.ranking th .th-unit{
  display:block; font-weight:500; letter-spacing:.02em; text-transform:none;
  font-size:.68rem; margin-top:2px; white-space:normal; max-width:14ch;
  margin-left:auto;
}
table.ranking th.num, table.ranking td.num{ text-align:right; }
table.ranking td{
  padding:10px 12px; border-bottom:1px solid var(--line);
}
table.ranking td.rank{
  font-family:"Fraunces",serif; font-weight:900; color:var(--accent);
  width:2.4em; text-align:right;
}
table.ranking td.dep b{ font-weight:700; }
table.ranking td.dep .code{ color:var(--ink-soft); font-size:.82rem; margin-left:6px; }
table.ranking td.score{ font-weight:700; }
table.ranking tbody tr:nth-child(even){ background:var(--row-alt); }
#ranking-best  tbody tr:hover{ background:rgba(194,65,12,.07); }
#ranking-worst tbody tr:hover{ background:rgba(14,116,144,.07); }
/* Les champions de chaque camp sont surlignés dans leur couleur. */
#ranking-best  tbody tr:first-child{ background:rgba(194,65,12,.10); }
#ranking-worst tbody tr:first-child{ background:rgba(14,116,144,.09); }
/* Rangs : orange côté meilleurs, canard côté moins bons. */
#ranking-worst td.rank{ color:var(--teal); }

/* ─────────────────────────────────────────────────────────────
   Nuage de points (SVG)
   ───────────────────────────────────────────────────────────── */
.scatter-wrap{
  position:relative;
  max-width:980px;
  background:var(--paper-2);
  border:1px solid var(--line); border-radius:14px;
  border-top:4px solid var(--gold);
  padding:10px 12px 6px;
}
#scatter{ display:block; width:100%; height:auto; }
#scatter .axis line, #scatter .axis path{ stroke:var(--line); stroke-width:1; }
#scatter .grid line{ stroke:var(--line); stroke-width:.6; stroke-dasharray:3 4; }
#scatter .tick text{
  font-family:"Archivo",sans-serif; font-size:11px; fill:var(--ink-soft);
}
#scatter .axis-label{
  font-family:"Archivo",sans-serif; font-size:12px; font-weight:600;
  fill:var(--ink-soft); letter-spacing:.04em;
}
#scatter circle.pt{
  fill:#a39c8d; fill-opacity:.55; stroke:var(--paper); stroke-width:1;
  cursor:pointer;
  transition:r .14s ease, fill-opacity .14s ease, stroke-width .14s ease, filter .14s ease;
}
/* Point mis en valeur depuis le survol d'une ligne de classement. */
#scatter circle.pt.is-linked{
  r:9.5; fill-opacity:1; stroke:var(--gold); stroke-width:2;
  filter:drop-shadow(0 0 6px rgba(217,119,6,.75));
}
#scatter circle.pt.is-top{
  fill:var(--accent); fill-opacity:.92;
}
#scatter circle.pt.is-low{
  fill:var(--teal); fill-opacity:.9;
}
#scatter circle.pt:hover{ fill-opacity:1; }
/* Département ciblé (clic ou sélecteur) : vert franc + halo, prime sur top/low. */
#scatter circle.pt.is-selected{
  fill:var(--green) !important; fill-opacity:1; stroke:var(--paper); stroke-width:2.5;
  filter:drop-shadow(0 0 5px rgba(21,128,61,.5));
}

/* Nuage + panneau latéral : le graphique à gauche, le sélecteur et la fiche
   du département ciblé à droite (intégrés à la zone du graphique). */
.scatter-layout{
  display:flex; gap:20px; align-items:stretch;
}
.scatter-layout .scatter-wrap{ flex:1 1 auto; min-width:0; }
.scatter-side{
  flex:0 0 270px; display:flex; flex-direction:column; gap:14px;
}
.scatter-side .field{ width:100%; }
.scatter-side select#choix_departement{ width:100%; min-width:0; }
.scatter-side-hint{
  margin:0; color:var(--ink-soft); font-size:.82rem; line-height:1.5;
}
/* Quand la fiche est visible, le texte d'invite est masqué côté JS. */
.scatter-readout{
  background:var(--paper-2); border:1px solid var(--line);
  border-left:4px solid var(--gold); border-radius:10px;
  padding:10px 14px; font-size:.82rem; line-height:1.55;
}
.scatter-readout .dep{
  font-family:"Fraunces",serif; font-weight:600; font-size:.98rem; margin-bottom:2px;
}
.scatter-readout .dep .code{
  font-family:"Archivo",sans-serif; font-size:.72rem; color:var(--ink-soft);
}
.scatter-readout .row{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.scatter-readout .row b{ color:var(--ink); }

.scatter-tip{
  position:absolute; z-index:10; pointer-events:none;
  /* Surface adaptée au thème (claire/sombre) : sinon texte clair sur fond clair en mode sombre. */
  background:var(--surface-panel); backdrop-filter:blur(3px);
  border:1px solid var(--line);
  border-radius:10px; box-shadow:0 6px 24px rgba(28,26,23,.14);
  padding:10px 12px; font-size:.8rem; line-height:1.5;
  min-width:150px;
}
.scatter-tip .dep{ font-family:"Fraunces",serif; font-weight:600; font-size:.95rem; }
.scatter-tip .row{ color:var(--ink-soft); font-variant-numeric:tabular-nums; }
.scatter-tip .row b{ color:var(--ink); }

/* ─────────────────────────────────────────────────────────────
   Rubrique À propos : chiffres clés, cartes méthode, journal
   ───────────────────────────────────────────────────────────── */
.about-stats{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(220px, 1fr));
  gap:14px; margin:0 0 22px;
}
.about-cards{
  display:grid; gap:18px;
  grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));
  margin:0 0 26px;
}

/* Téléchargement de la table maître (CSV généré + parquet brut). */
.downloads{ margin:0 0 26px; max-width:760px; }
.downloads-title{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.1rem; margin:0 0 6px;
}
.downloads-sub{
  margin:0 0 14px; font-size:.85rem; color:var(--ink-soft);
  line-height:1.55; max-width:68ch;
}
.downloads-btns{ display:flex; flex-wrap:wrap; gap:12px; }
.dl-btn{
  display:inline-flex; align-items:center; gap:9px;
  cursor:pointer; text-decoration:none; font-family:inherit;
  font-weight:700; font-size:.88rem; color:var(--accent);
  background:rgba(194,65,12,.08); border:1px solid rgba(194,65,12,.3);
  border-radius:999px; padding:11px 20px;
  transition:background .15s ease, filter .15s ease;
}
.dl-btn:hover{ background:rgba(194,65,12,.14); }
.dl-btn.is-primary{
  color:#fff; border-color:transparent;
  background:linear-gradient(135deg, var(--gold), var(--accent) 60%, var(--accent-2));
  box-shadow:0 4px 14px rgba(194,65,12,.25);
}
.dl-btn.is-primary:hover{ filter:brightness(1.08); background:linear-gradient(135deg, var(--gold), var(--accent) 60%, var(--accent-2)); }
.dl-btn:disabled{ opacity:.5; cursor:not-allowed; }

/* Journal des refresh : panneau repliable, chargé à l'ouverture. */
.log-details{ max-width:760px; }
.log-details summary{
  display:inline-flex; align-items:center; gap:9px;
  cursor:pointer; user-select:none; list-style:none;
  font-weight:700; font-size:.92rem; color:var(--accent);
  background:rgba(194,65,12,.08); border:1px solid rgba(194,65,12,.3);
  border-radius:999px; padding:11px 20px;
  transition:background .15s ease;
}
.log-details summary::-webkit-details-marker{ display:none; }
.log-details summary::before{
  content:'▸'; font-size:.85em;
  transition:transform .15s ease;
}
.log-details[open] summary::before{ transform:rotate(90deg); }
.log-details summary:hover{ background:rgba(194,65,12,.14); }
.log-intro{
  margin:14px 0 12px; font-size:.85rem; color:var(--ink-soft);
  line-height:1.55; max-width:68ch;
}
.log-panel{ display:grid; gap:12px; }
.log-empty{ margin:0; font-size:.88rem; color:var(--ink-soft); }
.log-entry{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:12px; padding:14px 16px;
}
.log-entry header{
  display:flex; justify-content:space-between; align-items:center;
  gap:12px; flex-wrap:wrap;
}
.log-date{ font-family:"Fraunces",serif; font-weight:600; font-size:.95rem; }
.log-badge{
  font-size:.72rem; font-weight:700; letter-spacing:.06em; text-transform:uppercase;
  border-radius:999px; padding:4px 12px;
}
.log-badge.is-ok{
  color:#166534; background:rgba(22,101,52,.10);
  border:1px solid rgba(22,101,52,.3);
}
.log-badge.is-fail{
  color:var(--accent-2); background:rgba(194,65,12,.10);
  border:1px solid rgba(194,65,12,.3);
}
.log-lastok{
  margin:10px 0 0; padding:8px 12px;
  font-size:.84rem; color:var(--accent-2);
  background:rgba(194,65,12,.08); border:1px solid rgba(194,65,12,.25);
  border-radius:8px;
}
.log-entry table{
  width:100%; margin-top:10px; border-collapse:collapse;
  font-size:.84rem; font-variant-numeric:tabular-nums;
}
.log-entry th{
  text-align:left; font-size:.68rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--ink-soft); font-weight:600;
  padding:6px 10px; border-bottom:2px solid var(--line);
}
.log-entry td{ padding:6px 10px; border-bottom:1px solid var(--line); }
.log-entry th:last-child, .log-entry td:last-child{ text-align:right; }
.log-entry tbody tr:last-child td{ border-bottom:none; }

/* ─────────────────────────────────────────────────────────────
   Slide carte
   ───────────────────────────────────────────────────────────── */
/* ── Panneau latéral : titre, contrôles, lecture ── */
.map-side{
  position:relative; overflow-y:auto;
  display:flex; flex-direction:column; gap:22px;
  padding:30px 26px;
  border-right:1px solid var(--line);
  background:
    linear-gradient(90deg, var(--accent), var(--gold) 55%, var(--teal)) top/100% 5px no-repeat,
    var(--grain),
    radial-gradient(140% 90% at 0% 0%, rgba(194,65,12,.10), transparent 55%),
    var(--sky-bg),
    var(--paper);
  background-attachment:local;
}
.map-title{
  font-size:clamp(1.35rem,1.8vw,1.7rem); margin:0;
}
.map-sub{
  margin:10px 0 0; font-size:.88rem; line-height:1.55; color:var(--ink-soft);
}
.map-side .eyebrow{ margin-bottom:12px; }
.map-side select#choix_type,
.map-side select#choix_indicateur{ width:100%; min-width:0; }
.map-side-foot{
  margin-top:auto; padding-top:14px; border-top:1px solid var(--line);
  font-size:.74rem; line-height:1.5; color:var(--ink-soft);
}
.readout{
  font-size:.85rem; color:var(--ink-soft); line-height:1.5;
  background:var(--paper-2); border:1px solid var(--line); border-radius:10px;
  border-left:4px solid var(--gold);
  padding:12px 14px;
}
.readout b{ color:var(--ink); font-variant-numeric:tabular-nums; }

/* ── Scène : la carte dans un grand cadre arrondi, halo sur la France ── */
.map-stage{
  display:flex; min-height:320px;
  padding:clamp(12px,2vw,26px);
  background:var(--paper);
}
.map-frame{
  position:relative; flex:1; min-height:0;
  border-radius:22px; overflow:hidden;
  border:1px solid var(--line);
  /* Trame + clair de lumière au centre : la France baigne dans le halo. */
  background:
    radial-gradient(var(--dot) 1px, transparent 1.3px) 0 0/24px 24px,
    radial-gradient(72% 68% at 50% 44%, var(--halo), transparent 72%),
    linear-gradient(180deg, var(--map-grad-a), var(--map-grad-b));
  box-shadow:
    0 18px 48px rgba(28,26,23,.16),
    inset 0 0 90px rgba(124,45,18,.06);
}
#map{ position:absolute; inset:0; background:transparent; }
.leaflet-container{ background:transparent; font-family:"Archivo",sans-serif; }

/* ── Fenêtre « comment c'est calculé » (panneau latéral, repliable) ── */
.formula-panel{
  background:var(--paper-2); border:1px solid var(--line); border-radius:12px;
  border-left:4px solid var(--gold);
  font-size:.8rem; line-height:1.5; color:var(--ink-soft);
}
.formula-panel[hidden]{ display:none; }
/* Le summary fait office de bouton « déplier ». */
.fp-summary{
  cursor:pointer; list-style:none;
  padding:11px 14px; font-weight:700; color:var(--ink); font-size:.85rem;
  display:flex; align-items:center; justify-content:space-between; gap:8px;
}
.fp-summary::-webkit-details-marker{ display:none; }
.fp-summary::after{
  content:"+"; font-weight:700; color:var(--gold); font-size:1.1rem; line-height:1;
}
.formula-panel[open] .fp-summary::after{ content:"–"; }
.fp-summary:hover{ color:var(--accent); }
.fp-body{ padding:0 14px 14px; }
.fp-formulas{ display:flex; flex-direction:column; gap:6px; margin-bottom:10px; }
.fp-line{
  display:flex; flex-wrap:wrap; gap:2px 8px;
  padding:7px 11px; border-radius:9px; background:var(--row-alt);
}
.fp-line.is-active{ background:rgba(245,158,11,.14); }
.fp-name{ font-weight:600; color:var(--ink); }
.fp-eq{ font-variant-numeric:tabular-nums; }
.fp-values{ margin-bottom:10px; }
.fp-values b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.fp-ex{
  background:var(--paper); border:1px solid var(--line); border-radius:10px;
  padding:10px 13px; margin-bottom:10px;
}
.fp-ex-dep{ font-weight:700; color:var(--ink); margin-bottom:5px; }
.fp-ex-dep .code{ color:var(--ink-soft); font-weight:500; }
.fp-ex-row{ display:flex; flex-wrap:wrap; gap:3px 10px; padding:2px 0; }
.fp-ex-row > span{ min-width:66px; color:var(--ink-soft); }
.fp-ex-row b{ color:var(--ink); font-variant-numeric:tabular-nums; }
.fp-ex--empty{ font-style:italic; }
.fp-note{
  font-size:.76rem; color:var(--ink-soft);
  border-top:1px solid var(--line); padding-top:9px;
}
.fp-note b{ color:var(--accent); }

/* La France se détache du fond par une ombre portée chaude. */
.leaflet-overlay-pane svg{
  filter:drop-shadow(0 10px 22px rgba(124,45,18,.22));
}

/* Transition douce des polygones : la couleur de remplissage fond d'un indicateur
   à l'autre, et le liseré suit au survol / à la (dé)sélection. */
.dep-path{
  transition:fill .35s ease, stroke .18s ease, stroke-width .18s ease, fill-opacity .18s ease;
}

/* Pulsation jouée une fois à la sélection et à la désélection d'un département.
   On fait varier l'épaisseur du liseré pour un « pop » bref et discret. */
@keyframes depPulse{
  0%   { stroke-width:1.2; }
  45%  { stroke-width:5;   }
  100% { /* épaisseur finale portée par le style Leaflet en cours */ }
}
.dep-pulse{
  animation:depPulse .38s ease-out;
}

/* Département épinglé (sélectionné) : on le « détache » nettement de la carte par
   un halo (liseré blanc épais porté par le style Leaflet + double ombre portée),
   pour qu'il reste repérable au premier coup d'œil, même entouré de voisins. */
.dep-pinned{
  filter:drop-shadow(0 0 3px rgba(0,0,0,.65)) drop-shadow(0 0 8px var(--accent));
}

/* Contrôles de zoom au thème du site. */
.leaflet-control-zoom{
  border:none !important; border-radius:12px; overflow:hidden;
  box-shadow:0 6px 24px rgba(28,26,23,.16);
}
.leaflet-control-zoom a{
  width:36px !important; height:36px !important; line-height:36px !important;
  background:var(--surface-ctrl) !important; color:var(--accent) !important;
  font-weight:700; border:none !important;
  border-bottom:1px solid var(--line) !important;
}
.leaflet-control-zoom a:last-child{ border-bottom:none !important; }
.leaflet-control-zoom a:hover{ background:var(--surface-ctrl-hover) !important; color:var(--accent-2) !important; }
/* On réserve le coin haut-droit au bouton de thème : l'infobulle démarre dessous. */
.leaflet-top.leaflet-right{ margin-top:48px; }

/* ─────────────────────────────────────────────────────────────
   Bascule de thème clair / sombre (switch soleil ↔ lune)
   ───────────────────────────────────────────────────────────── */
.theme-toggle{
  position:fixed; top:14px; right:16px; z-index:1200;
  padding:0; border:none; background:none; cursor:pointer; line-height:0;
  -webkit-tap-highlight-color:transparent;
}
.theme-toggle:focus-visible{ outline:none; }
.theme-toggle:focus-visible .theme-track{ box-shadow:0 0 0 3px rgba(194,65,12,.35); }
.theme-track{
  display:inline-block; position:relative; width:60px; height:30px;
  border-radius:999px; border:1px solid var(--line);
  /* Thème clair = ciel solaire chaud. */
  background:linear-gradient(120deg, #ffe39a, #fbbf24);
  box-shadow:inset 0 1px 3px rgba(124,45,18,.25), 0 4px 12px rgba(28,26,23,.16);
  transition:background .45s ease, border-color .45s ease, box-shadow .25s ease;
}
.theme-thumb{
  position:absolute; top:3px; left:3px; z-index:1; width:24px; height:24px;
  border-radius:50%; display:grid; place-items:center;
  background:#fffdf6; color:#f59e0b;
  box-shadow:0 2px 5px rgba(28,26,23,.35);
  /* Léger rebond à la bascule du curseur. */
  transition:transform .45s cubic-bezier(.55,-0.28,.3,1.5), background .45s ease, color .45s ease;
}
.theme-thumb .ico{
  grid-area:1 / 1; transition:opacity .3s ease, transform .45s ease;
}
.ico-moon{ opacity:0; transform:rotate(-70deg) scale(.4); }
.ico-sun { opacity:1; transform:none; }
.theme-toggle:hover .theme-track{ filter:brightness(1.04); }

/* Ciel étoilé : deux nappes d'étoiles (côté ciel ouvert), masquées en clair
   et révélées en sombre avec un léger scintillement décalé. */
.theme-track::before,
.theme-track::after{
  content:""; position:absolute; inset:0; border-radius:inherit;
  pointer-events:none; opacity:0; transition:opacity .45s ease;
}
.theme-track::before{
  background-image:
    radial-gradient(1.3px 1.3px at 11px 9px,  rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px     at 27px 8px,  rgba(255,255,255,.45), transparent),
    radial-gradient(1.4px 1.4px at 15px 22px, rgba(255,255,255,.6), transparent);
}
.theme-track::after{
  background-image:
    radial-gradient(1.5px 1.5px at 24px 13px, rgba(255,255,255,.6), transparent),
    radial-gradient(1px 1px     at 31px 21px, rgba(255,255,255,.4), transparent);
}
@keyframes twinkleA{ 0%,100%{ opacity:1; } 50%{ opacity:.5; } }
@keyframes twinkleB{ 0%,100%{ opacity:.6; } 50%{ opacity:1; } }

/* État sombre : appliqué soit par choix explicite (bouton), soit par le
   navigateur tant que l'utilisateur n'a pas forcé le clair. Mêmes règles. */
:root[data-theme="dark"] .theme-track{
  background:linear-gradient(120deg, #334155, #0f172a);
  box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
}
:root[data-theme="dark"] .theme-thumb{ transform:translateX(30px); background:#e9eef6; color:#475569; }
:root[data-theme="dark"] .ico-sun { opacity:0; transform:rotate(70deg) scale(.4); }
:root[data-theme="dark"] .ico-moon{ opacity:1; transform:none; }
:root[data-theme="dark"] .theme-track::before{ opacity:1; animation:twinkleA 3.2s ease-in-out infinite; }
:root[data-theme="dark"] .theme-track::after { opacity:1; animation:twinkleB 2.4s ease-in-out infinite; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme-track{
    background:linear-gradient(120deg, #334155, #0f172a);
    box-shadow:inset 0 1px 3px rgba(0,0,0,.5), 0 4px 12px rgba(0,0,0,.4);
  }
  :root:not([data-theme="light"]) .theme-thumb{ transform:translateX(30px); background:#e9eef6; color:#475569; }
  :root:not([data-theme="light"]) .ico-sun { opacity:0; transform:rotate(70deg) scale(.4); }
  :root:not([data-theme="light"]) .ico-moon{ opacity:1; transform:none; }
  :root:not([data-theme="light"]) .theme-track::before{ opacity:1; animation:twinkleA 3.2s ease-in-out infinite; }
  :root:not([data-theme="light"]) .theme-track::after { opacity:1; animation:twinkleB 2.4s ease-in-out infinite; }
}

/* Légende + infobulle */
.panel{
  background:var(--surface-panel); backdrop-filter:blur(3px);
  border:1px solid var(--line); border-radius:12px;
  border-top:4px solid var(--accent);
  box-shadow:0 6px 24px rgba(28,26,23,.12);
  padding:14px 16px;
}
.legend{ border-top-color:var(--gold); }
.legend .title{ font-weight:700; font-size:.78rem; margin-bottom:9px; letter-spacing:.02em;
                color:var(--accent-2); }
.legend .row{ display:flex; align-items:center; gap:9px; font-size:.78rem; color:var(--ink-soft);
              font-variant-numeric:tabular-nums; line-height:1.55; }
.legend .sw{ width:18px; height:12px; border-radius:2px; flex:0 0 auto;
             box-shadow:inset 0 0 0 1px rgba(0,0,0,.06); }
.info{ min-width:180px; }
.info .dep{ font-family:"Fraunces",serif; font-weight:600; font-size:1.05rem; }
.info .code{ color:var(--ink-soft); font-weight:400; font-size:.85rem; }
.info .val{ margin-top:6px; font-size:1.4rem; font-weight:700; font-variant-numeric:tabular-nums; }
.info .unit{ font-size:.8rem; color:var(--ink-soft); font-weight:500; }
.info .hint{ margin-top:4px; font-size:.74rem; color:var(--ink-soft); }

/* ─────────────────────────────────────────────────────────────
   Overlay statut / erreur (plein écran, au-dessus du deck)
   ───────────────────────────────────────────────────────────── */
#status{
  position:fixed; inset:0; z-index:2000;
  display:flex; align-items:center; justify-content:center; flex-direction:column; gap:14px;
  background:var(--paper); text-align:center; padding:24px;
}
#status.hidden{ display:none; }
.spinner{ width:34px; height:34px; border-radius:50%;
          border:3px solid var(--line); border-top-color:var(--accent);
          animation:spin .8s linear infinite; }
@keyframes spin{ to{ transform:rotate(360deg); } }
#status .msg{ font-size:.95rem; color:var(--ink-soft); max-width:46ch; line-height:1.5; }
#status.error .spinner{ display:none; }
#status.error .msg{ color:var(--ink); }
#status code{ background:var(--paper-2); padding:2px 6px; border-radius:5px;
              font-size:.85em; border:1px solid var(--line); }

/* ─────────────────────────────────────────────────────────────
   Pieds de page
   ───────────────────────────────────────────────────────────── */
footer{
  border-top:1px solid var(--line); padding:14px clamp(20px,5vw,64px);
  font-size:.78rem; color:var(--ink-soft); background:var(--paper-2);
  display:flex; justify-content:space-between; gap:16px; flex-wrap:wrap;
}
.slide-accueil footer{ border-top:none; }
footer a{ color:var(--accent); text-decoration:none; }

/* Le fond diffus (ciel + nappes) est désormais porté d'un seul tenant par la
   slide (.slide-accueil), pour qu'aucune couture n'apparaisse entre les
   rubriques. Les anciens motifs par-section, tranchés par leur overflow:hidden,
   ont été retirés. */

/* ─────────────────────────────────────────────────────────────
   Téléphones : mise en page compacte, lisible au pouce.
   On garde le deck à deux slides (navigation par flèches flottantes
   + swipe horizontal, cf. app.js) ; seuls les espacements, tailles
   et grilles internes s'adaptent au petit écran.
   ───────────────────────────────────────────────────────────── */
@media (max-width:640px){
  /* Flèches plus discrètes : icône seule, posée près du bord. */
  .nav-arrow .nav-label{ display:none; }
  .nav-arrow{ padding:12px; }
  .nav-next{ right:12px; }
  /* La flèche retour est dans le flux du panneau : libellé et padding conservés. */
  .nav-prev{ padding:14px 18px; }
  .nav-prev .nav-label{ display:inline; }

  /* Héro : moins d'air, titre fluide qui tient en largeur. */
  .hero{ padding:clamp(30px,6vh,52px) 18px 30px; }
  .hero::after, .hero::before{ width:300px; height:300px; right:-110px; top:-110px; }
  h1{ font-size:clamp(1.7rem,8.4vw,2.3rem); max-width:none; }
  .sub{ font-size:.94rem; }
  .eyebrow{ font-size:.66rem; letter-spacing:.16em; padding:6px 12px; }
  .hero-cta{ display:block; text-align:center; }

  /* Blocs de contenu : marges réduites. */
  .block{ padding:30px 18px; }
  .block h2{ font-size:clamp(1.3rem,6.4vw,1.7rem); }
  .block-sub{ font-size:.9rem; }

  /* Contrôles : sélecteurs pleine largeur, faciles à viser. */
  select#choix_type,
  select#choix_indicateur,
  select#choix_classement,
  select#choix_departement{ width:100%; min-width:0; }
  /* Sur téléphone, le panneau passe sous le graphique (plus de côte à côte). */
  .scatter-layout{ flex-direction:column; gap:16px; }
  .scatter-side{ flex:1 1 100%; }

  /* Tableaux de classement : sur téléphone, 5 colonnes ne tiennent pas.
     On masque la colonne contextuelle (3ᵉ : ensoleillement / revenu, donnée
     secondaire aussi visible dans le nuage) pour garder l'essentiel — rang,
     département, taux d'équipement et indice — lisible SANS défilement
     horizontal. Le nom du département passe son code à la ligne pour ne pas
     élargir la colonne. */
  table.ranking th:nth-child(3),
  table.ranking td:nth-child(3){ display:none; }
  table.ranking{ font-size:.82rem; }
  table.ranking th{ padding:7px 6px; }
  table.ranking td{ padding:8px 6px; }
  table.ranking th .th-unit{ max-width:10ch; }
  table.ranking td.dep{ line-height:1.25; }
  table.ranking td.dep .code{ display:block; margin-left:0; margin-top:1px; }
  /* Le défilement horizontal reste un filet de sécurité si un nom très long
     déborde malgré tout. */
  .table-wrap{ -webkit-overflow-scrolling:touch; }

  /* Chiffres clés et cartes méthode : une colonne. */
  .about-stats{ grid-template-columns:1fr; }
  .about-cards{ grid-template-columns:1fr; }
  .downloads-btns{ flex-direction:column; }
  .dl-btn{ justify-content:center; }

  /* Pied de page empilé. */
  footer{ flex-direction:column; gap:6px; padding:14px 18px; }

  /* Nuage : on agrandit la typo du SVG, sinon illisible une fois mise
     à l'échelle du petit écran (le viewBox réduit tout). */
  #scatter .tick text{ font-size:15px; }
  #scatter .axis-label{ font-size:16px; }

  /* ── Slide carte sur téléphone ──
     Le panneau passe au-dessus, la carte garde une hauteur exploitable,
     et la slide défile verticalement plutôt que d'écraser la carte. */
  .slide-carte{
    grid-template-columns:1fr; grid-template-rows:auto auto;
    overflow-y:auto;
  }
  .map-side{
    padding:22px 18px 24px; gap:16px;
    border-right:none; border-bottom:1px solid var(--line);
  }
  .map-stage{ height:66vh; min-height:340px; padding:12px; }
  .map-side-foot{ font-size:.7rem; }
}

/* ─────────────────────────────────────────────────────────────
   Accueil (synthèse) : deux cartes statiques côte à côte.
   ───────────────────────────────────────────────────────────── */
.maps-duo{
  display:grid; grid-template-columns:1fr 1fr; gap:24px;
  align-items:start; margin-top:18px;
}
.map-card{
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:14px; border-top:4px solid var(--gold);
  padding:14px 16px 16px;
}
.map-card h3{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.05rem;
  margin:0 0 12px;
}
.map-card .mini-map{
  height:440px; border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
}
/* Les cartes statiques ne réagissent pas au pointeur (pas de zoom/pan) :
   seul le survol des départements affiche l'infobulle. */
.map-card .mini-map .leaflet-container{ background:var(--paper); cursor:default; }

/* En-tête réduit pour la slide « Données croisées » (pas de pleine hauteur). */
.hero-compact{ padding-top:clamp(34px,6vh,60px); padding-bottom:24px; }

/* Tablette / téléphone : cartes empilées. */
@media (max-width:900px){
  .maps-duo{ grid-template-columns:1fr; }
  .map-card .mini-map{ height:360px; }
}

/* ─────────────────────────────────────────────────────────────
   Slides Autoconsommation & Analyse écologique (réutilisent .block,
   .about-stats/.stat, .about-cards/.card). Quelques compléments.
   ───────────────────────────────────────────────────────────── */
/* Carte pleine largeur (part d'autoconsommation), statique comme les mini-cartes. */
.mini-map-wide{
  height:640px; margin-top:10px;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
}
.mini-map-wide .leaflet-container{ background:var(--paper); cursor:default; }
.map-card-title{
  font-family:"Fraunces",serif; font-weight:600; font-size:1.15rem;
  margin:26px 0 6px;
}
@media (max-width:900px){ .mini-map-wide{ height:360px; } }

/* Encart « bilan net » de l'écologie : le .readout existant, un peu aéré. */
.eco-net{ margin-top:18px; line-height:1.6; }
.eco-sources-wrap{ margin-top:24px; }
.eco-sources{ margin:8px 0 0; padding-left:18px; line-height:1.85; }
.eco-sources a{ color:var(--accent); text-decoration:none; }
.eco-sources a:hover{ text-decoration:underline; }

/* Périmètre (type) rappelé dans l'exemple chiffré de la fenêtre « formule ». */
.fp-ex-scope{ font-size:.72rem; font-weight:600; color:var(--accent); margin-left:6px; }

/* Exemple « installation type » de l'écologie : les .about-stats existants, aérés. */
.eco-example{ margin-top:8px; }
.eco-example-note{ margin-top:16px; line-height:1.6; }

/* ─────────────────────────────────────────────────────────────
   Slide Calculateur (réutilise .block, .field, .about-stats, .readout).
   Formulaire en grille, champs avec unité accolée.
   ───────────────────────────────────────────────────────────── */
.calc-form{ margin-top:18px; }
.calc-grid{
  display:grid; gap:18px 22px;
  grid-template-columns:repeat(2, minmax(0, 1fr));
}
.calc-field-wide{ grid-column:1 / -1; }

/* Champs texte / nombre + le select d'orientation : même habillage que les
   selects de la carte (cohérence visuelle). */
.calc-form input[type="text"],
.calc-form input[type="number"],
select#calc-orientation{
  appearance:none; -webkit-appearance:none;
  font-family:"Archivo",sans-serif; font-size:1rem; font-weight:600;
  color:var(--ink); background:var(--paper-2);
  border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; width:100%; max-width:100%;
  transition:border-color .15s ease, box-shadow .15s ease;
}
select#calc-orientation{
  padding-right:42px; cursor:pointer;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%23c2410c' stroke-width='3'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat:no-repeat; background-position:right 14px center;
}
.calc-form input:focus,
select#calc-orientation:focus{
  outline:none; border-color:var(--accent);
  box-shadow:0 0 0 3px rgba(194,65,12,.15);
}
/* Champ nombre avec unité accolée (kWc, °). */
.calc-input-unit{ position:relative; }
.calc-input-unit input{ padding-right:48px; }
.calc-unit{
  position:absolute; right:14px; top:50%; transform:translateY(-50%);
  font-size:.85rem; font-weight:600; color:var(--ink-soft); pointer-events:none;
}
.calc-hint{ font-size:.74rem; color:var(--ink-soft); margin:2px 0 0; }

#calc-submit{ margin-top:20px; }

/* Choix du mode de localisation : segmented control (adresse / carte). */
.calc-mode{
  display:flex; gap:6px; margin-bottom:18px;
  background:var(--paper-2); border:1px solid var(--line);
  border-radius:12px; padding:4px;
}
.calc-mode-btn{
  flex:1; display:inline-flex; align-items:center; justify-content:center; gap:8px;
  padding:10px 14px; border:none; border-radius:9px; cursor:pointer;
  font-family:"Archivo",sans-serif; font-size:.92rem; font-weight:600;
  color:var(--ink-soft); background:transparent;
  transition:background .15s ease, color .15s ease;
}
.calc-mode-btn svg{ width:18px; height:18px; flex:0 0 auto; }
.calc-mode-btn:hover{ color:var(--ink); }
.calc-mode-btn.is-active{
  background:var(--paper); color:var(--accent);
  box-shadow:0 1px 3px rgba(0,0,0,.08);
}
.calc-mode-btn:focus-visible{
  outline:none; box-shadow:0 0 0 3px rgba(194,65,12,.25);
}

/* Panneau de localisation : un seul affiché à la fois selon le mode. */
.calc-loc-panel[hidden]{ display:none; }
.calc-map-intro{ margin:0 0 10px; color:var(--ink-soft); font-size:.92rem; line-height:1.5; }

/* Paramètres du toit en 3 colonnes (sous le panneau de localisation). */
.calc-params{ grid-template-columns:repeat(3, minmax(0,1fr)); margin-top:20px; }

/* Rappel « relancez le calcul » quand le lieu a changé après un résultat. */
.calc-recalc{
  margin:12px 0 0; padding:10px 14px; border-radius:10px;
  font-size:.85rem; font-weight:600; line-height:1.5;
  color:var(--accent); background:rgba(194,65,12,.07);
  border:1px solid var(--accent);
}
.calc-recalc[hidden]{ display:none; }
/* Résultat grisé tant qu'il ne reflète plus le lieu courant. */
.calc-result.is-stale{ opacity:.45; transition:opacity .15s ease; }

/* Bandeau de statut (chargement / erreur) sous le formulaire. */
.calc-status{
  margin-top:18px; padding:12px 16px; border-radius:10px;
  font-size:.9rem; font-weight:600; line-height:1.5;
  background:var(--paper-2); border:1px solid var(--line); color:var(--ink-soft);
}
.calc-status.is-loading{
  border-color:var(--accent); color:var(--accent);
  background:rgba(194,65,12,.06);
}
.calc-status.is-error{
  border-color:#b91c1c; color:#b91c1c; background:rgba(185,28,28,.07);
}

/* Carte de sélection du lieu (clic = point). */
.calc-map{
  height:420px; margin-top:6px;
  border-radius:12px; overflow:hidden;
  border:1px solid var(--line); background:var(--paper);
}
.calc-map .leaflet-container{ background:var(--paper); cursor:crosshair; }

.calc-result{ margin-top:22px; }
.calc-result-loc{
  font-size:.9rem; color:var(--ink-soft); margin:0 0 12px;
}
.calc-result-loc b{ color:var(--ink); }
.calc-result .readout{ margin-top:16px; line-height:1.6; }

@media (max-width:760px){
  .calc-grid{ grid-template-columns:1fr; }
  .calc-params{ grid-template-columns:1fr; }
}

/* ─────────────────────────────────────────────────────────────
   Panneaux carte compacts (correctif recouvrement) : la légende et la
   valeur survolée des cartes d'accueil restent sur la carte mais en
   version réduite et translucide, posées dans des coins « mer ».
   ───────────────────────────────────────────────────────────── */
.panel.info-compact{ min-width:0; padding:7px 10px; max-width:240px; width:max-content; }
.panel.info-compact .dep{ font-size:.82rem; }
.panel.info-compact .code{ font-size:.72rem; }
.panel.info-compact .val{ margin-top:2px; font-size:1rem; }
/* L'invitation tient sur une ligne : sans cela, la boîte se réduit à la largeur
   du mot le plus long et empile « Survole / un / département. » (rendu cassé). */
.panel.info-compact .hint{ font-size:.7rem; white-space:nowrap; }
.panel.legend-compact{ padding:8px 10px; opacity:.96; }
.panel.legend-compact .title{ font-size:.68rem; margin-bottom:6px; }
.panel.legend-compact .row{ font-size:.68rem; gap:7px; line-height:1.4; }
.panel.legend-compact .sw{ width:14px; height:10px; }

/* ─────────────────────────────────────────────────────────────
   Menu latéral droit : navigation entre les slides. Fixe (suit le
   défilement), entrée active surlignée par app.js (.is-active).
   ───────────────────────────────────────────────────────────── */
.slide-menu{
  position:fixed; right:18px; top:50%; transform:translateY(-50%);
  z-index:1500;
  display:flex; flex-direction:column; gap:6px;
  padding:10px; border-radius:20px;
  background:var(--surface-panel); backdrop-filter:blur(6px);
  border:1px solid var(--line);
  box-shadow:0 6px 24px rgba(28,26,23,.14);
}
.slide-menu-item{
  display:flex; align-items:center; gap:10px;
  border:none; background:none; cursor:pointer; text-align:left;
  font-family:"Archivo",sans-serif; font-size:.82rem; font-weight:600;
  color:var(--ink-soft); white-space:nowrap;
  padding:7px 12px; border-radius:999px;
  transition:color .15s ease, background .15s ease;
}
.slide-menu-item .sm-dot{
  width:10px; height:10px; border-radius:50%; flex:0 0 auto;
  background:var(--line); transition:background .15s ease, transform .15s ease;
}
.slide-menu-item:hover{ color:var(--ink); background:rgba(194,65,12,.06); }
.slide-menu-item:hover .sm-dot{ background:var(--gold); }
.slide-menu-item:focus-visible{ outline:none; box-shadow:0 0 0 3px rgba(194,65,12,.25); }
.slide-menu-item.is-active{ color:var(--accent); }
.slide-menu-item.is-active .sm-dot{ background:var(--accent); transform:scale(1.35); }

/* Téléphone / tablette : menu compact, pastilles seules. */
@media (max-width:880px){
  .slide-menu{ right:10px; gap:8px; padding:9px; border-radius:999px; }
  .slide-menu-item{ padding:6px; }
  .slide-menu-item .sm-label{ display:none; }
}