:root{
  /* palette reprise de previplus.fr */
  --navy:#042547;
  --navy-soft:#0a3560;
  --navy-2:#0a3560;
  --yellow:#f1c93b;
  --red:#d93025;
  --violet:#6d28d9;
  --violet-d:#4c1d95;
  --ink:#0d1117;
  --text:#1a1d24;
  --text-2:#4a5568;
  --text-3:#8a94a3;
  --muted:#4a5568;
  --bg:#ffffff;
  --bg-2:#f5f6f8;
  --bg-3:#eceef1;
  --line:#e3e6ea;
  --line-2:#d4d8de;
  --radius:12px;
  --maxw:1500px;
}
*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  font-family:'Inter',system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;
  color:var(--text);background:var(--bg);line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
h1,h2,h3,h4{font-family:'Inter',system-ui,sans-serif;line-height:1.18;font-weight:800;letter-spacing:-.02em}
a{color:var(--navy-soft)}
.wrap{max-width:var(--maxw);margin:0 auto;padding:0 16px}
.skip{
  position:absolute;left:-9999px;top:0;background:var(--yellow);color:var(--navy);
  padding:10px 16px;z-index:1000;font-weight:700;border-radius:0 0 8px 0;
}
.skip:focus{left:0}
:focus-visible{outline:3px solid var(--yellow);outline-offset:2px}

/* ---------- En-tête, calqué sur previplus.fr ---------- */
/* L'en-tête est collant : sans cette réserve, une ancre place le titre visé
   sous la barre de navigation. 118 px = 105 px d'en-tête et un peu d'air. */
html{scroll-padding-top:118px}

.topbar{background:var(--navy);color:#fff;position:sticky;top:0;z-index:900}
.header-top{display:flex;align-items:center;gap:13px;height:58px}
.brand{font-size:22px;font-weight:900;letter-spacing:-.6px;color:#fff;text-decoration:none;margin-right:auto}
.brand .plus{font-weight:800;color:var(--yellow)}
.header-utility{display:flex;align-items:center;gap:2px}
.util{
  display:flex;align-items:center;gap:7px;padding:8px 12px;border-radius:6px;
  font-size:13px;font-weight:500;color:rgba(255,255,255,.82);text-decoration:none;
  white-space:nowrap;transition:.15s;
}
.util:hover{background:rgba(255,255,255,.08);color:#fff}
.util svg{width:16px;height:16px;fill:currentColor}
.reddot{width:8px;height:8px;border-radius:50%;background:var(--red);animation:blink 1.4s infinite}
@keyframes blink{50%{opacity:.3}}
.header-nav{border-top:1px solid rgba(255,255,255,.09)}
/* Le trait de l'onglet actif est posé en absolu au bas de la barre. Dessiné en
   flux, il ajoutait de la hauteur au seul onglet actif, dont le texte remontait
   par rapport aux autres. Ici tous les onglets ont exactement la même boîte. */
.header-nav-inner{display:flex;align-items:stretch;height:46px;gap:0;overflow-x:auto}
.header-nav a{
  position:relative;display:flex;align-items:center;
  font-size:13.5px;font-weight:600;color:rgba(255,255,255,.86);text-decoration:none;
  padding:0 13px;white-space:nowrap;transition:color .15s;
}
.header-nav a::after{
  content:"";position:absolute;left:13px;right:13px;bottom:0;height:3px;
  background:#fff;border-radius:2px 2px 0 0;
  opacity:0;transform:scaleX(.35);transform-origin:center;
  transition:opacity .2s ease, transform .2s ease;
}
.header-nav a:hover{color:#fff}
.header-nav a.active{color:#fff}
.header-nav a.active::after{opacity:1;transform:none}
@media(prefers-reduced-motion:reduce){.header-nav a::after{transition:none}}
.nav-vsep{width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 8px;flex:none;align-self:center}
@media(max-width:820px){.header-utility .util span{display:none}.header-utility .util{padding:8px}}

/* ---------- Hero ---------- */
.hero{background:linear-gradient(165deg,#2b1263 0%,var(--navy) 62%,var(--navy-soft) 100%);color:#fff;padding:44px 0 38px}
.hero .kicker b{font-variant-numeric:tabular-nums;color:#fff;font-weight:800}
.cd-short{display:none}
@media(max-width:680px){
  .hero .kicker{font-size:12px;padding:6px 14px;letter-spacing:.04em}
  .cd-long{display:none}
  .cd-short{display:inline}
}
.hero .kicker{
  display:inline-flex;align-items:center;gap:8px;
  background:rgba(255,255,255,.14);border:1px solid rgba(255,255,255,.22);
  padding:5px 13px;border-radius:100px;font-size:12.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px;
}
.hero h1{font-size:clamp(28px,4vw,46px);font-weight:900;letter-spacing:-.03em;margin-bottom:14px;max-width:21ch}
.hero .lead{font-size:clamp(15px,1.4vw,18px);max-width:62ch;color:rgba(255,255,255,.9)}
.stats{display:flex;gap:14px;flex-wrap:wrap;margin-top:26px}
.stat{
  background:rgba(255,255,255,.1);border:1px solid rgba(255,255,255,.16);
  border-radius:var(--radius);padding:12px 18px;min-width:150px;
}
.stat b{display:block;font-size:24px;font-weight:900;color:#fff;font-variant-numeric:tabular-nums;line-height:1.2}
.stat span{font-size:12.5px;color:rgba(255,255,255,.82)}

/* ---------- Bloc carte ---------- */
.mapsec{padding:30px 0 12px;background:var(--bg-2)}
.maplayout{
  display:grid;gap:16px;align-items:start;
  grid-template-columns:1fr;
  grid-template-areas:"map" "search" "legend";
}
.area-search{grid-area:search}
.area-map{grid-area:map}
.area-legend{grid-area:legend}
@media(min-width:1000px){
  .maplayout{grid-template-columns:minmax(0,1fr) 360px;gap:20px;
             grid-template-areas:"map search" "map legend"}
  .area-search{position:sticky;top:112px}
}

.mapcard{background:#fff;border:1px solid var(--line);border-radius:var(--radius);overflow:hidden}
.mapviewport{position:relative}
#map{height:620px;width:100%;background:#e9edf1;z-index:1}
@media(max-width:1000px){#map{height:460px}}
@media(max-width:560px){#map{height:400px}}
#veil{position:absolute;inset:0;pointer-events:none;z-index:400;filter:blur(3px);transition:opacity .25s}
.mapfail{
  display:flex;align-items:center;justify-content:center;height:100%;
  padding:30px;text-align:center;color:var(--muted);font-size:14.5px;background:var(--bg-2);
}
#veil.hidden{opacity:0}
#pins{position:absolute;inset:0;pointer-events:none;z-index:460}
.pin{position:absolute;transform:translate(-50%,-50%);text-align:center;white-space:nowrap}
.pin b{
  display:inline-block;background:rgba(255,255,255,.94);color:#241d33;
  font-size:11.5px;font-weight:800;padding:2px 7px;border-radius:100px;
  box-shadow:0 1px 4px rgba(0,0,0,.35);font-variant-numeric:tabular-nums;
}
.pin span{display:block;font-size:10px;font-weight:700;color:#1b2430;margin-top:1px;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 1px 2px #fff}
.pin.me b{background:var(--yellow)}
/* Repère de position : pastille bleue à halo, convention connue de tous */
.locmark{position:absolute;transform:translate(-50%,-50%);z-index:1}
.locmark .dot{
  position:relative;width:16px;height:16px;border-radius:50%;
  background:#1a73e8;border:3px solid #fff;
  box-shadow:0 1px 5px rgba(0,0,0,.55),0 0 0 1px rgba(0,0,0,.12);
}
.locmark .halo{
  position:absolute;left:50%;top:50%;width:16px;height:16px;margin:-8px 0 0 -8px;
  border-radius:50%;background:rgba(26,115,232,.4);
  animation:locpulse 2.2s cubic-bezier(.2,.6,.3,1) infinite;
}
@keyframes locpulse{
  0%{transform:scale(1);opacity:.6}
  70%{transform:scale(4);opacity:0}
  100%{transform:scale(4);opacity:0}
}
.locmark .cap{
  position:absolute;left:50%;top:16px;transform:translateX(-50%);
  font-size:10.5px;font-weight:800;white-space:nowrap;color:#1b2430;
  text-shadow:0 0 3px #fff,0 0 3px #fff,0 1px 2px #fff;
}
.locmark.me .cap{color:#0b4ea2}
.locmark.pick .dot{background:#6d28d9}
.locmark.pick .halo{background:rgba(109,40,217,.28);animation:none;transform:scale(2.4);opacity:.3}
.totchip{
  position:absolute;left:12px;bottom:12px;z-index:460;
  background:rgba(36,29,51,.9);color:#fff;font-size:12px;font-weight:600;
  padding:7px 12px;border-radius:100px;box-shadow:0 2px 8px rgba(0,0,0,.35);
}
.totchip[hidden]{display:none}
@media(max-width:999px){
  /* en bas, la mention des sources prend toute la largeur : on remonte l'indicateur */
  .totchip{
    top:12px;right:12px;left:auto;bottom:auto;
    max-width:calc(100% - 96px);font-size:11px;padding:6px 11px;
    white-space:normal;line-height:1.35;text-align:right;
  }
}
.totdot{
  position:absolute;transform:translate(-50%,-50%);z-index:455;
  width:18px;height:18px;border-radius:50%;border:3px solid #fff;
  background:#241d33;box-shadow:0 0 0 2px rgba(0,0,0,.4);
}
#cross{
  position:absolute;left:50%;top:50%;z-index:470;
  transform:translate(-50%,-50%);pointer-events:none;text-align:center;
}
#cross .ring{
  width:26px;height:26px;border-radius:50%;margin:0 auto;
  border:2.5px solid var(--yellow);background:rgba(241,201,59,.2);
  box-shadow:0 0 0 1.5px rgba(0,0,0,.45);
}
#cross .ring::before,#cross .ring::after{
  content:"";position:absolute;left:50%;top:50%;background:var(--yellow);
  box-shadow:0 0 2px rgba(0,0,0,.6);
}
#cross .ring::before{width:1.5px;height:11px;transform:translate(-50%,-50%)}
#cross .ring::after{width:11px;height:1.5px;transform:translate(-50%,-50%)}
#cross .val{
  position:absolute;left:50%;bottom:calc(100% + 7px);transform:translateX(-50%);
  background:var(--yellow);color:#3a2c00;font-size:12.5px;font-weight:800;
  padding:3px 10px;border-radius:100px;white-space:nowrap;
  font-variant-numeric:tabular-nums;box-shadow:0 2px 7px rgba(0,0,0,.4);
}
#cross .sub{
  position:absolute;left:50%;top:calc(100% + 5px);transform:translateX(-50%);
  font-size:10px;font-weight:700;color:#1b2430;white-space:nowrap;
  text-shadow:0 0 3px #fff,0 0 3px #fff;
}
.spark{display:block;width:100%;height:auto;margin:2px 0 10px}

.leaflet-bar a.geoctl{font-size:17px;line-height:26px;text-align:center;text-decoration:none;color:#241d33}
/* Mention des sources : bloc opaque et bordé, lisible même sur un voile très sombre */
.leaflet-control-attribution{
  background:rgba(255,255,255,.94)!important;
  border:1px solid rgba(0,0,0,.14);
  border-radius:8px 0 0 0;
  padding:4px 9px!important;
  font-size:11px!important;
  line-height:1.45;
  color:#33414f!important;
  box-shadow:0 -1px 4px rgba(0,0,0,.14);
}
.leaflet-control-attribution a{color:#0a3a6b!important;text-decoration:underline}

.maptools{
  display:flex;flex-wrap:wrap;gap:10px;align-items:center;
  padding:12px 14px;border-top:1px solid var(--line);background:#fff;
}
.segbtn{display:flex;background:var(--bg-2);border:1px solid var(--line);border-radius:100px;padding:3px}
.segbtn button{
  border:0;background:transparent;color:var(--muted);cursor:pointer;
  font:600 13.5px/1 "Inter",system-ui,sans-serif;padding:9px 16px;border-radius:100px;
}
.segbtn button[aria-pressed="true"]{background:var(--violet);color:#fff}
.tl{display:flex;align-items:center;gap:10px;flex:1;min-width:260px}
.tl[hidden]{display:none}
.tl output{font-weight:800;font-variant-numeric:tabular-nums;min-width:56px;font-size:15px}
.tl input[type=range]{flex:1;accent-color:var(--violet);min-width:120px}
.btn{
  border:1px solid var(--line);background:#fff;color:var(--ink);cursor:pointer;
  font:600 13.5px/1 "Inter",system-ui,sans-serif;padding:10px 14px;border-radius:10px;
  display:inline-flex;align-items:center;gap:7px;
}
/* Le survol ne s'applique qu'aux appareils qui en ont un : sur mobile, l'état
   restait collé après le tap et vidait le bouton Lecture de son contraste. */
@media(hover:hover){ .btn:hover{background:var(--bg-2)} }
.btn-play{background:var(--violet);color:#fff;border-color:var(--violet)}
.btn-play:hover,.btn-play:focus{background:#5b21b6;color:#fff;border-color:#5b21b6}
.opa{display:flex;align-items:center;gap:8px;font-size:12.5px;color:var(--muted)}
.opa input{width:88px;accent-color:var(--violet)}

/* Curseur de temps intégré à la fiche : sur mobile, la carte est trop haut
   pour qu'on puisse jouer l'animation tout en lisant les valeurs locales. */
.tlmini{display:none}
@media(max-width:999px){
  /* barre compacte, posée juste au-dessus de l'illustration qu'elle pilote */
  .tlmini{
    display:flex;align-items:center;gap:9px;
    margin:12px 0 2px;padding:6px 8px 6px 6px;
    background:var(--bg-2);border:1px solid var(--line);border-radius:100px;
  }
  .tlmini .lab{display:none}
  .tlmini .row{display:contents}
  .tlmini .pl{
    flex:none;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
    background:var(--violet);color:#fff;font-size:12px;line-height:1;
  }
  .tlmini input[type=range]{flex:1;min-width:0;accent-color:var(--violet);height:18px}
  .tlmini output{
    font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;
    min-width:44px;text-align:right;color:var(--text);
  }
}

/* ---------- Légende d'usage de la carte ---------- */
.howto{list-style:none;margin-top:12px;display:grid;gap:10px;grid-template-columns:1fr}
@media(min-width:640px){.howto{grid-template-columns:1fr 1fr}}
@media(min-width:1060px){.howto{grid-template-columns:repeat(3,1fr)}}
.howto li{
  display:flex;gap:13px;align-items:flex-start;padding:14px 16px;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);
}
.howto .gl{flex:none;width:34px;height:34px;position:relative;margin-top:1px}
.howto .gl .ring{
  position:absolute;left:50%;top:50%;width:24px;height:24px;margin:-12px 0 0 -12px;
  border-radius:50%;border:2.5px solid var(--yellow);background:rgba(241,201,59,.22);
}
.howto .gl .ring::before,.howto .gl .ring::after{
  content:"";position:absolute;left:50%;top:50%;background:#c9a52c;
}
.howto .gl .ring::before{width:1.5px;height:10px;transform:translate(-50%,-50%)}
.howto .gl .ring::after{width:10px;height:1.5px;transform:translate(-50%,-50%)}
.howto .gl .pindot{
  position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:#6d28d9;border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.howto .gl .pinhalo{
  position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;background:rgba(109,40,217,.16);
}
.howto .gl .geodot{
  position:absolute;left:50%;top:50%;width:15px;height:15px;margin:-7.5px 0 0 -7.5px;
  border-radius:50%;background:#1a73e8;border:3px solid #fff;
  box-shadow:0 1px 4px rgba(0,0,0,.4);
}
.howto .gl .geohalo{
  position:absolute;left:50%;top:50%;width:32px;height:32px;margin:-16px 0 0 -16px;
  border-radius:50%;background:rgba(26,115,232,.2);
  animation:locpulse 2.2s cubic-bezier(.2,.6,.3,1) infinite;
}
.btn-loc{
  background:#1a73e8;color:#fff;border-color:#1a73e8;margin-top:9px;
  padding:9px 14px;font-size:13px;
}
.btn-loc:hover,.btn-loc:focus{background:#1660c9;color:#fff;border-color:#1660c9}
.btn-loc svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round}
.btn-loc:disabled{opacity:.6;cursor:progress}
.howto b{display:block;font-size:13.5px;font-weight:700;margin-bottom:2px}
.howto p{font-size:12.5px;color:var(--text-2);line-height:1.45;margin:0;max-width:none}
.mapcredit{font-size:11.5px;color:var(--text-3);margin-top:9px;padding:0 2px}

/* ---------- Panneau ---------- */
.panel{display:flex;flex-direction:column;gap:14px;position:sticky;top:74px}
@media(max-width:1000px){.panel{position:static}}
@media(max-width:420px){.res-grid{grid-template-columns:1fr 1fr}}
.card{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.card h2{font-size:16px;font-weight:800;margin-bottom:4px}
.card p.hint{font-size:13px;color:var(--muted);margin-bottom:12px}
.searchrow{display:flex;gap:8px}
.searchrow input{
  flex:1;min-width:0;border:1px solid var(--line);border-radius:10px;
  padding:11px 12px;font:400 14px/1.2 "Inter",system-ui,sans-serif;color:var(--ink);
}
.searchrow input:focus{border-color:var(--violet)}
.sugg{list-style:none;margin-top:8px;border:1px solid var(--line);border-radius:10px;overflow:hidden}
.sugg:empty{display:none}
.sugg li button{
  width:100%;text-align:left;border:0;background:#fff;cursor:pointer;
  padding:10px 12px;font:500 13.5px/1.3 "Inter",system-ui,sans-serif;color:var(--ink);
}
.sugg li+li button{border-top:1px solid var(--line)}
.sugg li button:hover,.sugg li button:focus{background:var(--bg-2)}

/* Le bloc de résultat était collé au champ de recherche, sans aucune respiration :
   le pourcentage semblait faire partie du formulaire. Un filet et une marge
   séparent maintenant la saisie de la réponse. */
.result{display:none}
.result.on{display:block;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
@media(max-width:999px){.result.on{margin-top:18px;padding-top:18px}}
.res-head{display:flex;align-items:center;gap:14px;margin-bottom:12px}
.res-pct{
  font-size:34px;font-weight:800;color:var(--violet-d);font-variant-numeric:tabular-nums;
  line-height:1;letter-spacing:-.02em;white-space:nowrap;flex:none;
}
.res-place{font-weight:700;font-size:15px}
.res-place span{display:block;font-weight:400;font-size:12.5px;color:var(--muted)}
.res-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--line);border:1px solid var(--line);border-radius:10px;overflow:hidden}
.res-grid div{background:#fff;padding:9px 11px}
.res-grid dt{font-size:11.5px;color:var(--muted)}
.res-grid dd{font-size:14.5px;font-weight:700;font-variant-numeric:tabular-nums}
.scene{display:block;width:100%;height:auto;border-radius:10px;
  margin:14px 0 12px;border:1px solid var(--line);background:#dfe9f2}
.horizon{display:block;width:100%;height:auto;margin:0 0 16px}
.gauge-t{
  font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;
  color:var(--text-3);margin:2px 0 4px;
}
.res-note{font-size:12px;color:var(--muted);margin-top:10px}

.legend ul{list-style:none;display:flex;flex-direction:column;gap:5px;margin-top:8px}
.legend li{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--muted)}
.legend i{width:30px;height:13px;border-radius:3px;flex:none;box-shadow:inset 0 0 0 1px rgba(0,0,0,.08)}
.legend b{color:var(--ink);font-weight:600;font-variant-numeric:tabular-nums}

/* ---------- Contenu ---------- */
.content{padding:44px 16px;max-width:var(--maxw);margin:0 auto}
.content section+section,
.content .pub+section,
.content section+.pub,
.content .pub{margin-top:40px}
/* En tête de zone de contenu, la marge s'ajoutait au retrait du conteneur et
   creusait un vide de 84 px. Le bloc reprend alors le rythme des autres. */
.content > .pub:first-child{margin-top:0}
.content h2{font-size:clamp(21px,2.2vw,28px);font-weight:900;margin-bottom:14px}
.content h3{font-size:18px;margin:22px 0 6px}
.content p{max-width:74ch;margin-bottom:12px;color:#26333f}
.content ul.body{margin:0 0 12px 20px;max-width:74ch;color:#26333f}
.content ul.body li{margin-bottom:6px}
.alert{
  border-left:5px solid #d4351c;background:#fff5f4;border-radius:0 10px 10px 0;
  padding:16px 18px;max-width:74ch;
}
.alert h3{margin-top:0;color:#a92c17}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:18px;margin-top:16px}
.tile{border:1px solid var(--line);border-radius:var(--radius);padding:16px;background:#fff}
.tile h3{margin-top:0;font-size:16px}
.tile p{font-size:14px;margin-bottom:0}


/* ---------- Emplacement publicitaire ----------
   Règle de Google : un bloc non servi ne doit rien laisser à l'écran. On s'appuie
   sur l'attribut data-ad-status, qu'AdSense pose lui-même sur l'élément quand
   aucune annonce n'est disponible (support.google.com/adsense/answer/10762946).

   Tant qu'aucun code n'est branché, le conteneur est vide et sans hauteur : la
   page se comporte exactement comme s'il n'existait pas.

   La hauteur n'est réservée que sur l'élément ins lui-même, donc uniquement quand
   une annonce est en cours de chargement. Cela évite le décalage de mise en page
   sans jamais laisser de cadre vide.

   Contraintes de taille rappelées par Google pour les formats fixes : largeur
   minimale 120 px, hauteur minimale 50 px, aucune dimension au-delà de 1200 px,
   une seule dimension peut dépasser 450 px. Le format automatique employé ici
   les respecte de lui-même. */
.pub{margin:0;display:block}
.pub-slot{display:block}

/* Le libellé n'apparaît qu'accompagné d'une annonce réellement servie. */
.pub-l{
  display:none;text-align:center;font-size:10.5px;font-weight:700;
  text-transform:uppercase;letter-spacing:.08em;color:var(--text-3);margin:0 0 6px;
}
.pub:has(ins.adsbygoogle:not([data-ad-status="unfilled"])) .pub-l{display:block}

/* Réserve d'espace pendant le chargement, repliée si l'annonce n'est pas servie. */
.pub-slot ins.adsbygoogle{display:block;min-height:250px}
@media(min-width:900px){.pub-slot ins.adsbygoogle{min-height:280px}}
ins.adsbygoogle[data-ad-status="unfilled"]{display:none !important}

/* Aperçu de maquette : ajouter class="apercu-pub" sur la balise html pour
   matérialiser l'emplacement. À ne jamais activer en production. */
.apercu-pub .pub-l{display:block}
.apercu-pub .pub-slot:empty{
  min-height:250px;display:flex;align-items:center;justify-content:center;
  background:var(--bg-2);border:1px dashed var(--line-2);border-radius:var(--radius);
}
.apercu-pub .pub-slot:empty::before{
  content:"Emplacement publicitaire";font-size:13px;font-weight:600;color:var(--text-3);
}
@media(min-width:900px){.apercu-pub .pub-slot:empty{min-height:280px}}

.tablewrap{border:1px solid var(--line);border-radius:var(--radius);overflow:hidden;background:#fff}
.tabletools{display:flex;gap:10px;align-items:center;padding:12px 14px;border-bottom:1px solid var(--line);flex-wrap:wrap}
.tabletools input{border:1px solid var(--line);border-radius:10px;padding:9px 12px;font:400 14px "Inter",system-ui,sans-serif;min-width:220px}
.tabletools .count{font-size:13px;color:var(--muted);margin-left:auto}
.scroller{max-height:460px;overflow:auto}
table{border-collapse:collapse;width:100%;font-size:14px}
caption{text-align:left;padding:0 14px 10px;font-size:13px;color:var(--muted)}
th,td{padding:9px 14px;text-align:left;border-bottom:1px solid var(--line);white-space:nowrap}
thead th{
  position:sticky;top:0;background:var(--bg-2);z-index:1;
  font-size:12.5px;text-transform:uppercase;letter-spacing:.04em;color:var(--muted);
}
thead th button{border:0;background:none;cursor:pointer;font:inherit;color:inherit;padding:0;display:inline-flex;gap:5px;align-items:center}
td.num{font-variant-numeric:tabular-nums;font-weight:600}
tbody tr:hover{background:var(--bg-2)}
tbody tr.hi{background:#fdf6dd}
tbody tr[hidden]{display:none}
tbody td a{color:var(--navy);font-weight:600;text-decoration:none;border-bottom:1px solid rgba(4,37,71,.28)}
@media(hover:hover){tbody td a:hover{border-bottom-color:var(--navy);background:#fdf6dd}}

.deptwrap{margin-top:14px}
.deptgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:6px}
@media(max-width:700px){
  .deptgrid{grid-template-columns:repeat(auto-fill,minmax(148px,1fr));gap:5px}
  .deptwrap{
    max-height:300px;overflow-y:auto;-webkit-overflow-scrolling:touch;
    border:1px solid var(--line);border-radius:var(--radius);padding:10px;background:var(--bg-2);
  }
  .deptgrid a{padding:7px 9px;font-size:13px}
}
.deptgrid a{
  display:flex;gap:8px;align-items:baseline;padding:8px 11px;border:1px solid var(--line);
  border-radius:9px;background:#fff;font-size:13.5px;line-height:1.3;color:var(--navy);
  text-decoration:none;hyphens:auto;
}
.deptgrid a b{font-variant-numeric:tabular-nums;color:var(--muted);font-weight:700;font-size:12px;flex:none}
@media(hover:hover){.deptgrid a:hover{border-color:var(--navy);background:var(--bg-2)}}

/* ---------- Pied de page, calqué sur previplus.fr ---------- */
.footer{background:var(--navy);color:#fff;margin-top:24px}
.footer-main{
  padding:36px 0 32px;display:grid;grid-template-columns:1fr;gap:32px;
  border-bottom:1px solid rgba(255,255,255,.1);
}
@media(min-width:900px){.footer-main{grid-template-columns:340px 1fr;gap:48px}}
.footer-logo{font-size:24px;font-weight:900;letter-spacing:-.5px}
.footer-logo .plus{color:var(--yellow)}
.footer-tagline{font-size:13px;color:rgba(255,255,255,.55);line-height:1.55;max-width:340px;margin-top:14px}
.footer-cta{
  display:inline-flex;align-items:center;gap:8px;margin-top:18px;
  background:rgba(255,255,255,.08);border:1px solid rgba(255,255,255,.22);
  color:#fff;text-decoration:none;font-size:13.5px;font-weight:700;
  padding:10px 16px;border-radius:10px;transition:.15s;
}
@media(hover:hover){ .footer-cta:hover{background:rgba(255,255,255,.15)} }
.footer-cta .ar{color:#fff;font-weight:800}
.footer-legal{font-size:13px;color:rgba(255,255,255,.6);line-height:1.6;max-width:34ch}


.footer-cols{display:grid;grid-template-columns:1fr 1fr;gap:28px 20px}
@media(min-width:640px){.footer-cols{grid-template-columns:repeat(2,1fr);gap:32px}}
.footer-col h3{
  font-size:11.5px;font-weight:700;text-transform:uppercase;letter-spacing:.8px;
  color:rgba(255,255,255,.45);margin-bottom:12px;
}
.footer-col a{display:block;font-size:13.5px;color:rgba(255,255,255,.72);padding:6px 0;text-decoration:none;transition:.15s}
.footer-col a:hover{color:#fff}
.footer-col p.footer-legal a{display:inline;padding:0;color:#fff;text-decoration:underline}
.footer-bottom{
  padding:18px 0 34px;display:flex;flex-direction:column;gap:11px;
  align-items:center;text-align:center;
}
.footer-copy{font-size:11.5px;color:rgba(255,255,255,.35)}
.footer-bottom-links a{
  font-size:12px;color:rgba(255,255,255,.5);padding:2px 11px;text-decoration:none;
  border-right:1px solid rgba(255,255,255,.15);
}
.footer-bottom-links a:last-child{border-right:0}
.footer-bottom-links a:hover{color:#fff}

.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
/* ---------- Bloc application ---------- */
.appcta{
  background:var(--navy);color:#fff;
  border-radius:var(--radius);overflow:hidden;margin-top:16px;
}
.appcta-in{
  padding:24px 22px 26px;display:grid;gap:22px;align-items:start;
  grid-template-columns:1fr;
}
@media(min-width:1000px){
  .appcta-in{grid-template-columns:1.08fr .92fr;gap:34px;padding:26px 26px 28px}
  .appcta h2{font-size:26px}
  .appcta p{font-size:14px}
}
.appcta-k{
  display:inline-block;font-size:11px;font-weight:800;text-transform:uppercase;
  letter-spacing:.9px;color:rgba(255,255,255,.72);margin-bottom:10px;
}
.appcta h2{font-size:clamp(21px,2.4vw,29px);font-weight:900;margin-bottom:12px;max-width:20ch}
.appcta p{font-size:14.5px;color:rgba(255,255,255,.78);max-width:56ch;margin-bottom:8px}
.appcta p strong{color:#fff}
.stores{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
.store{
  display:flex;align-items:center;gap:10px;text-decoration:none;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.16);
  border-radius:10px;padding:9px 16px;transition:.15s;
}
@media(hover:hover){ .store:hover{background:rgba(255,255,255,.13)} }
.store .ic-store{width:26px;height:26px;flex:none}
.store b{display:block;color:#fff;font-size:14.5px;font-weight:700;line-height:1.15}
.store span{display:block;color:rgba(255,255,255,.55);font-size:9.5px;text-transform:uppercase;letter-spacing:.7px}
.appcta-list{list-style:none;display:flex;flex-direction:column;gap:11px;margin-top:4px}
.appcta-list li{
  display:flex;gap:11px;align-items:flex-start;font-size:14px;
  color:rgba(255,255,255,.85);line-height:1.5;
}
.appcta-list .tick{
  flex:none;width:22px;height:22px;border-radius:50%;background:rgba(255,255,255,.16);
  color:#fff;font-weight:900;font-size:12px;display:flex;
  align-items:center;justify-content:center;margin-top:1px;
}

/* ---------- Priorité mobile : accès rapide à la carte et au chiffre ---------- */
@media(max-width:760px){
  /* fiche commune : tout doit tenir sans défilement pendant l'animation */
  .res-pct{font-size:27px;letter-spacing:-.03em}
  .res-head{gap:11px;margin-bottom:8px;align-items:baseline}
  .res-place{font-size:14px;min-width:0;flex:1}
  .res-place span{font-size:11.5px;line-height:1.35}
  .res-place span:last-child{
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap;display:block;
  }
  .scene{margin:8px 0 8px}
  .gauge-t{font-size:10px;margin:0 0 2px}
  .horizon{margin:0 0 10px}
  .res-grid dd{font-size:13.5px}
  .res-grid div{padding:8px 9px}
  .spark{margin:0 0 8px}

  /* bloc application : marges, boutons pleine largeur, listes qui respirent */
  .appcta-in{padding:22px 18px 26px;gap:18px}
  .appcta h2{font-size:23px;max-width:none;letter-spacing:-.5px}
  .appcta p{font-size:14px;max-width:none}
  .stores{gap:8px;margin-top:16px}
  .store{flex:1 1 100%;justify-content:center;padding:11px 16px}
  .appcta-list{gap:13px}
  .appcta-list li{font-size:13.5px;padding-right:4px}
  .appcta-list .tick{width:20px;height:20px;font-size:11px}

  .hero{padding:22px 0 20px}
  .hero .kicker{font-size:11px;padding:4px 11px;margin-bottom:10px}
  .hero h1{font-size:25px;margin-bottom:9px;max-width:none}
  .hero .lead{font-size:14.5px}
  .hero .lead .more{display:none}
  .stats{margin-top:16px;gap:8px;flex-wrap:nowrap;overflow-x:auto;
         padding-bottom:4px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .stats::-webkit-scrollbar{display:none}
  .stat{min-width:142px;flex:none;padding:9px 13px}
  .stat b{font-size:19px}
  .stat span{font-size:11px}
  .mapsec{padding:14px 0 10px}
  .card{padding:14px}
  .content{padding:32px 16px}
  .content section+section,
  .content .pub+section,
  .content section+.pub,
  .content .pub{margin-top:30px}
}

@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}
.leaflet-container{font-family:inherit}


/* ================= Spécifique aux pages commune et département ================= */
.fil{font-size:13px;color:var(--muted);margin:0 0 14px}
.fil a{color:var(--muted);text-decoration:none;border-bottom:1px solid transparent}
@media(hover:hover){.fil a:hover{color:var(--navy);border-bottom-color:var(--line)}}
.fil span[aria-current]{color:var(--ink);font-weight:600}

.hero-c{
  display:grid;grid-template-columns:1fr;gap:20px;align-items:start;
  background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:22px;
}
/* Sur mobile, le visuel passe avant la grille des chiffres : c'est lui qui donne
   envie de rester, la donnée détaillée peut attendre le défilement suivant. */
.hc-head{order:1}.hero-c .viz{order:2}.hc-figs{order:3}
@media(min-width:900px){
  .hero-c{
    grid-template-columns:minmax(0,1fr) 360px;
    grid-template-areas:"head viz" "figs viz";
    column-gap:32px;row-gap:20px;padding:28px;align-content:start;
  }
  .hc-head{grid-area:head}.hero-c .viz{grid-area:viz}
  .hc-figs{grid-area:figs;align-self:start}
}
.hero-c .figs{margin:0}
.hc-head .appmini{margin:18px 0 0}
.hero-c .lede{margin:16px 0 0;font-size:15px;line-height:1.62;color:#26333f;max-width:60ch}
.hero-c h1{margin:0 0 6px;font-size:27px;line-height:1.15;letter-spacing:-.5px}
@media(min-width:900px){.hero-c h1{font-size:34px}}
.hero-sub{margin:0 0 18px;color:var(--muted);font-size:15px}
.bigpct{font-size:60px;font-weight:900;line-height:.95;letter-spacing:-2px;color:var(--navy);font-variant-numeric:tabular-nums}
@media(min-width:900px){.bigpct{font-size:74px}}
.bigpct em{font-style:normal;font-size:.42em;font-weight:800;letter-spacing:-.5px;margin-left:4px}
.bigpct-l{font-size:13px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700;margin:0 0 4px}
.keyrow{display:flex;flex-wrap:wrap;gap:10px;margin-top:16px}
.keyrow div{border:1px solid var(--line);border-radius:11px;padding:9px 13px;background:var(--bg-2);min-width:96px}
.keyrow dt{font-size:11.5px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.keyrow dd{margin:2px 0 0;font-size:17px;font-weight:800;font-variant-numeric:tabular-nums}
.keyrow p{margin:1px 0 0;font-size:11.5px;color:var(--text-3);line-height:1.3;font-weight:600}

.figs{display:grid;grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:10px;margin:0}
.figs > div{border:1px solid var(--line);border-radius:12px;padding:12px 14px;background:#fff}
.figs dt{font-size:12px;text-transform:uppercase;letter-spacing:.05em;color:var(--muted);font-weight:700}
.figs dd{margin:3px 0 0;font-size:18px;font-weight:800;font-variant-numeric:tabular-nums}
.figs p{margin:2px 0 0;font-size:11.5px;color:var(--text-3);line-height:1.3;font-weight:600;max-width:none}

/* Définitions : trois colonnes sur grand écran, empilées ensuite. */
.defs{display:grid;grid-template-columns:1fr;gap:14px;margin-top:12px}
@media(min-width:820px){.defs{grid-template-columns:repeat(3,1fr);gap:18px}}
.defs > div{border:1px solid var(--line);border-radius:12px;background:#fff;padding:15px 16px}
.defs h3{margin:0 0 6px;font-size:15px}
.defs p{margin:0;font-size:14px;line-height:1.6;color:var(--muted);max-width:none}

.viz{background:#fff;border:1px solid var(--line);border-radius:var(--radius);padding:16px}
.viz .scene{margin:12px 0}
.viz .horizon{margin:0}
.viz .gauge-t{margin:14px 0 2px}
.rasant{
  margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:13px;line-height:1.5;
  background:#fff6f0;border:1px solid #f3d9c9;color:#8a3517;font-weight:600;
}
.viz .res-note{font-size:13px;line-height:1.5;color:var(--muted);margin-top:12px;max-width:none}

/* Barre de lecture, même langage visuel que celle de la carte d'accueil :
   pilule claire, bouton violet, curseur à accent violet. */
.player{
  display:flex;align-items:center;gap:9px;margin:0;padding:6px 8px 6px 6px;
  background:var(--bg-2);border:1px solid var(--line);border-radius:100px;
}
.player .pl{
  flex:none;width:32px;height:32px;border-radius:50%;border:0;cursor:pointer;
  background:var(--violet);color:#fff;font-size:12px;line-height:1;display:grid;place-items:center;
}
.player .pl:hover{color:#fff}
@media(hover:hover){.player .pl:hover{filter:brightness(1.1)}}
.player input[type=range]{flex:1;min-width:0;accent-color:var(--violet);height:18px}
.player output{
  font-size:13.5px;font-weight:800;font-variant-numeric:tabular-nums;
  min-width:68px;text-align:right;color:var(--text);
}
.liveline{display:flex;gap:10px;align-items:baseline;margin:12px 0 0;flex-wrap:wrap}
.liveline b{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;color:var(--navy)}
.liveline span{font-size:13px;color:var(--muted)}

/* Mention discrète de l'application, placée haut : beaucoup de visiteurs arrivent
   ici sans passer par l'accueil et repartent avant le bloc détaillé du bas. */
.appmini{
  display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  background:var(--bg-2);border:1px solid var(--line);border-radius:var(--radius);padding:13px 16px;
}
.appmini p{margin:0;flex:1;min-width:240px;font-size:14px;line-height:1.5;color:var(--text)}
/* Badges compacts : pastille claire, logo et texte en bleu marine. La surenchère
   colorée des vignettes officielles alourdissait un bloc qui doit rester secondaire. */
.stores-mini{margin-top:0;flex:none;gap:8px}
.stores-mini .store{
  background:#fff;border:1px solid var(--line-2);border-radius:9px;padding:7px 12px;gap:7px;
}
.stores-mini .store .ic-store{width:17px;height:17px}
.stores-mini .store .ic-store path{fill:var(--navy)}
.stores-mini .store span{display:none}
.stores-mini .store b{color:var(--navy);font-size:13px;font-weight:800;white-space:nowrap}
@media(hover:hover){.stores-mini .store:hover{border-color:var(--navy);background:var(--bg-2)}}
@media(max-width:560px){
  .stores-mini{width:100%}
  .stores-mini .store{flex:1;justify-content:center}
  /* la cloche doit rester sur la ligne du texte, pas occuper un rang à elle seule */
  .appmini p{min-width:0}
  .appmini{align-items:flex-start;gap:11px}
  .ping{margin-top:-2px}
}

/* Petit signal de notification : une cloche sobre et un anneau qui s'écarte,
   assez pour attirer l'œil sans colorer le bloc. */
.ping{position:relative;flex:none;width:34px;height:34px;display:grid;place-items:center}
.ping svg{
  width:19px;height:19px;fill:none;stroke:var(--navy);stroke-width:1.9;
  stroke-linecap:round;stroke-linejoin:round;position:relative;z-index:1;
  transform-origin:50% 15%;animation:cloche 4.5s ease-in-out infinite;
}
.ping::before,.ping::after{
  content:"";position:absolute;inset:0;border-radius:50%;
  border:1.5px solid var(--navy);opacity:0;animation:onde 4.5s ease-out infinite;
}
.ping::after{animation-delay:.45s}
@keyframes cloche{
  0%,72%,100%{transform:rotate(0)}
  76%{transform:rotate(11deg)}  80%{transform:rotate(-9deg)}
  84%{transform:rotate(6deg)}   88%{transform:rotate(-4deg)}  92%{transform:rotate(0)}
}
@keyframes onde{
  0%,70%{transform:scale(.55);opacity:0}
  76%{opacity:.34}
  100%{transform:scale(1.35);opacity:0}
}
@media(prefers-reduced-motion:reduce){
  .ping svg{animation:none}
  .ping::before,.ping::after{animation:none}
}

/* Renvoi vers la carte de France : présent haut et bas, c'est le point d'entrée
   principal pour un visiteur qui arrive directement sur une page commune. */
.gomap{
  display:grid;grid-template-columns:1fr;gap:16px;align-items:center;
  background:var(--bg-2);border:1px solid var(--line);
  border-radius:var(--radius);padding:22px;color:var(--text);
}
@media(min-width:760px){.gomap{grid-template-columns:1fr auto;gap:26px;padding:24px 28px}}
.gomap h2{margin:0 0 6px;font-size:20px;color:var(--navy)}
.gomap p{margin:0;font-size:14.5px;color:var(--muted);line-height:1.55}
.gomap-b{
  display:inline-flex;align-items:center;gap:9px;background:var(--navy);color:#fff;
  border-radius:12px;padding:13px 20px;font-weight:800;font-size:15px;text-decoration:none;white-space:nowrap;
}
@media(hover:hover){.gomap-b:hover{background:var(--navy-soft)}}
.gomap-b:hover{color:#fff}
.gomap-b svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}

.prose h2{font-size:21px;margin:26px 0 10px}
.prose h3{font-size:17px;margin:20px 0 8px}
.prose p{font-size:15.5px;line-height:1.68}

.voisins{display:grid;grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:8px;margin-top:14px}
.voisins a{
  display:flex;justify-content:space-between;align-items:baseline;gap:10px;
  border:1px solid var(--line);border-radius:11px;padding:11px 13px;background:#fff;
  text-decoration:none;color:var(--navy);font-weight:700;font-size:14.5px;
}
.voisins a b{font-variant-numeric:tabular-nums;color:var(--ink);font-weight:800;white-space:nowrap;flex:none}
.voisins a span{min-width:0;display:flex;flex-direction:column;gap:1px}
.voisins a i{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
.voisins a i{font-style:normal;font-size:12px;color:var(--muted);font-weight:600}
@media(hover:hover){.voisins a:hover{border-color:var(--navy);background:var(--bg-2)}}

.faq details{border:1px solid var(--line);border-radius:12px;background:#fff;margin-top:8px}
.faq summary{cursor:pointer;padding:14px 16px;font-weight:700;font-size:15.5px;list-style:none;display:flex;justify-content:space-between;gap:12px;align-items:center}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+';font-size:20px;font-weight:400;color:var(--muted);flex:none}
.faq details[open] summary::after{content:'−'}
.faq details p{margin:0;padding:0 16px 15px;font-size:15px;line-height:1.62;color:var(--ink)}

.safety{border:1px solid #f3d9c9;background:#fff6f0;border-radius:var(--radius);padding:16px 18px}
.safety p{margin:0;font-size:14.5px;line-height:1.6}
.safety strong{color:#a92c17}

/* La courbe d'évolution est un graphique de lecture rapide : au-delà de 560 px
   elle n'apporte plus rien et ses libellés deviennent disproportionnés. */
.prose .spark{max-width:560px;margin:16px auto 4px}
.spark-l{max-width:560px;margin:0 auto 6px;text-align:center;font-size:12px;
  text-transform:uppercase;letter-spacing:.06em;color:var(--muted);font-weight:700}

/* ================= Spécifique aux pages département ================= */
/* Le chiffre de tête n'est plus une valeur mais une fourchette : le petit
   membre de gauche porte le minimum, le grand chiffre porte le maximum. */
.bigpct .fourchette{
  display:inline-block;vertical-align:baseline;margin-right:10px;
  font-size:19px;font-weight:800;line-height:1.15;letter-spacing:0;
  color:var(--muted);text-align:right;
}
@media(min-width:900px){.bigpct .fourchette{font-size:22px}}

.viz-t{
  margin:0 0 10px;font-size:11.5px;font-weight:700;text-transform:uppercase;
  letter-spacing:.06em;color:var(--text-3);
}
.viz .scene{margin-top:0}

.voisins-dep{grid-template-columns:repeat(auto-fill,minmax(150px,1fr))}
.voisins-dep a{justify-content:flex-start}
.voisins-dep a span{flex-direction:row;align-items:baseline;gap:8px}
.voisins-dep a i{font-variant-numeric:tabular-nums}

/* Le tableau départemental n'a pas d'outils de filtre : il tient à l'écran. */
#communes .scroller{max-height:none}
#communes table thead th{position:static}