/* ============================================================
   Loire Vive — design system
   Interface sobre de plateforme de données : une famille sans-
   serif, surfaces neutres, un accent bleu unique. Les couleurs
   de DONNÉES (marques de graphiques) sont validées CVD et
   contraste ; les états hydrologiques portent toujours un
   libellé, jamais la couleur seule.
   ============================================================ */

:root{
  /* surfaces */
  --bg:#FFFFFF;
  --bg-2:#F6F7F9;
  --bg-3:#EEF1F4;
  --carte:#FFFFFF;
  --sombre:#101B24;
  --sombre-2:#18242F;

  /* encre */
  --ink:#1A2530;
  --ink-2:#44525D;
  --ink-3:#68757F;
  --ink-inverse:#E8EDF1;
  --ink-inverse-2:#9DB0BD;

  /* traits */
  --border:#E2E6EA;
  --border-strong:#CBD3DA;

  /* accent */
  --accent:#175E8C;
  --accent-fonce:#11486C;
  --accent-pale:#EAF2F8;

  /* données (marques de graphiques uniquement — jamais du texte) */
  --data-loire:#2273A3;
  --data-sable:#B26F1D;

  /* états hydrologiques : fond clair + texte foncé + libellé obligatoire */
  --etat-normale-bg:#E3EEF5;   --etat-normale-fg:#17506F;
  --etat-basse-bg:#F5ECD8;     --etat-basse-fg:#6E5215;
  --etat-tres-basse-bg:#F8E3D3;--etat-tres-basse-fg:#7C3D10;
  --etat-crise-bg:#F9DEDA;     --etat-crise-fg:#7C1F16;
  --etat-haute-bg:#E2E9F8;     --etat-haute-fg:#27436E;

  --sans:"Inter","Segoe UI",system-ui,-apple-system,sans-serif;
  --mono:"IBM Plex Mono",ui-monospace,"SFMono-Regular",Menlo,monospace;

  --pad-page:clamp(1.2rem, 5vw, 4.5rem);
  --largeur-max:1240px;
  --r-carte:8px;
  --r-ctrl:6px;
}

*{margin:0;padding:0;box-sizing:border-box}
html{scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *,*::before,*::after{transition:none !important;animation:none !important}
}
body{
  background:var(--bg);
  color:var(--ink);
  font-family:var(--sans);
  font-size:15.5px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
}
::selection{background:var(--accent);color:#fff}
img,svg{max-width:100%}
a{color:var(--accent)}
a:hover{color:var(--accent-fonce)}

h1,h2,h3{letter-spacing:-0.015em}

/* ---------- header / navigation ---------- */
.site-header{
  position:sticky;top:0;z-index:60;
  background:rgba(255,255,255,.94);
  backdrop-filter:blur(6px);
  border-bottom:1px solid var(--border);
}
.site-header .interieur{
  max-width:var(--largeur-max);
  margin:0 auto;
  padding:.7rem var(--pad-page);
  display:flex;align-items:center;gap:2rem;flex-wrap:wrap;
}
.brand{
  display:flex;align-items:center;gap:.55rem;
  text-decoration:none;color:var(--ink);
}
.brand svg{display:block}
.brand .name{font-weight:650;font-size:1.05rem;letter-spacing:-0.01em}
.brand .sub{
  font-size:.7rem;font-weight:500;color:var(--ink-3);
  border:1px solid var(--border);border-radius:99px;
  padding:.08rem .5rem;margin-left:.2rem;
}
.site-nav{display:flex;gap:1.4rem;flex-wrap:wrap;margin-left:auto}
.site-nav a{
  font-size:.88rem;font-weight:500;
  color:var(--ink-2);text-decoration:none;
  padding:.35rem 0;
  border-bottom:2px solid transparent;
}
.site-nav a:hover{color:var(--ink)}
.site-nav a[aria-current="page"]{color:var(--ink);border-bottom-color:var(--accent)}

/* ---------- structure de page ---------- */
main{max-width:var(--largeur-max);margin:0 auto;padding:0 var(--pad-page) 3.5rem}
.page-head{padding:3rem 0 1.2rem;max-width:76ch}
.surtitre{
  font-size:.8rem;font-weight:600;color:var(--accent);
  text-transform:uppercase;letter-spacing:.06em;
  margin-bottom:.7rem;
}
.surtitre .sep{color:var(--ink-3);font-weight:400}
h1.page-title{
  font-size:clamp(1.9rem,3.6vw,2.6rem);
  font-weight:650;line-height:1.15;
}
.page-head p.lede{margin-top:.9rem;color:var(--ink-2);max-width:64ch;font-size:1.02rem}

section.bloc{padding:2.4rem 0 2rem;border-top:1px solid var(--border)}
section.bloc.sans-trait{border-top:none}
h2.bloc-title{font-size:clamp(1.3rem,2.4vw,1.6rem);font-weight:650;line-height:1.2;margin-bottom:.35rem}
.bloc-intro{color:var(--ink-2);max-width:68ch;margin-bottom:1.5rem}

/* ---------- hero (accueil) ---------- */
.hero{border-bottom:1px solid var(--border);background:var(--bg)}
.hero .interieur{
  max-width:var(--largeur-max);margin:0 auto;
  padding:4.2rem var(--pad-page) 3rem;
}
.hero h1{
  font-size:clamp(2.2rem,5vw,3.4rem);
  font-weight:650;line-height:1.08;max-width:22ch;
}
.hero p.lede{
  max-width:62ch;margin-top:1.1rem;
  font-size:1.08rem;color:var(--ink-2);
}
.hero .actions{display:flex;gap:.7rem;margin-top:1.8rem;flex-wrap:wrap}
.hero .reperes{
  display:flex;flex-wrap:wrap;
  margin-top:3rem;border-top:1px solid var(--border);
}
.hero .repere{
  padding:1.1rem 1.6rem 0 0;margin-right:1.6rem;
}
.hero .repere b{
  display:block;font-size:1.5rem;font-weight:650;
  font-variant-numeric:tabular-nums;line-height:1.2;
}
.hero .repere span{font-size:.82rem;color:var(--ink-3)}

/* ---------- boutons ---------- */
.btn{
  display:inline-block;text-decoration:none;cursor:pointer;
  font-size:.88rem;font-weight:550;
  padding:.55rem 1.05rem;border-radius:var(--r-ctrl);
  border:1px solid var(--border-strong);color:var(--ink);
  background:var(--bg);
  transition:background .12s ease,border-color .12s ease,color .12s ease;
}
.btn:hover{border-color:var(--ink-3);color:var(--ink)}
.btn.primaire{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primaire:hover{background:var(--accent-fonce);border-color:var(--accent-fonce);color:#fff}
.btn.inverse{border-color:#3A4A57;color:var(--ink-inverse);background:transparent}
.btn.inverse:hover{border-color:var(--ink-inverse-2);color:#fff}

/* ---------- cartes / grilles ---------- */
.grille{
  display:grid;gap:1rem;
  grid-template-columns:repeat(auto-fill,minmax(300px,1fr));
}
.carte-item{
  background:var(--carte);
  border:1px solid var(--border);
  border-radius:var(--r-carte);
  padding:1.25rem 1.3rem 1.35rem;
}
.carte-item h3{font-size:1.02rem;font-weight:625;line-height:1.3;margin-bottom:.45rem}
.carte-item p{font-size:.9rem;color:var(--ink-2)}
.carte-item.sombre{background:var(--sombre);border-color:var(--sombre);color:var(--ink-inverse)}
.carte-item.sombre h3{color:#fff}
.carte-item.sombre p{color:var(--ink-inverse-2)}

.tag{
  display:inline-block;
  font-size:.7rem;font-weight:600;
  letter-spacing:.04em;text-transform:uppercase;
  padding:.16rem .55rem;border-radius:99px;margin-bottom:.7rem;
  background:var(--accent-pale);color:var(--accent-fonce);
}
.tag.sable{background:#F5ECD8;color:#6E5215}
.tag.neutre{background:var(--bg-3);color:var(--ink-2)}
.carte-item.sombre .tag{background:rgba(255,255,255,.1);color:var(--ink-inverse)}

/* ---------- tuiles de station (tableau de bord) ---------- */
.tuiles{display:grid;gap:1rem;grid-template-columns:repeat(auto-fill,minmax(310px,1fr))}
.tuile{
  background:var(--carte);
  border:1px solid var(--border);
  border-radius:var(--r-carte);
  padding:1.1rem 1.2rem .95rem;
  display:flex;flex-direction:column;gap:.5rem;
}
.tuile .entete{display:flex;justify-content:space-between;align-items:baseline;gap:.6rem}
.tuile .lieu{font-weight:625;font-size:1.05rem;line-height:1.2}
.tuile .pk{font-size:.74rem;color:var(--ink-3);white-space:nowrap;font-variant-numeric:tabular-nums}
.tuile .valeur{
  font-size:1.9rem;font-weight:650;line-height:1;
  display:flex;align-items:baseline;gap:.4rem;
  letter-spacing:-0.01em;
}
.tuile .valeur .unite{font-size:.85rem;font-weight:450;color:var(--ink-3);letter-spacing:0}
.tuile .delta{font-size:.82rem;color:var(--ink-2)}
.tuile .pied{
  display:flex;justify-content:space-between;align-items:center;gap:.6rem;
  border-top:1px solid var(--bg-3);padding-top:.55rem;margin-top:.15rem;
  font-size:.73rem;color:var(--ink-3);
}
.tuile .pied a{color:var(--accent);text-decoration:none}
.tuile .pied a:hover{text-decoration:underline}

/* tuile entière cliquable vers la page station */
a.tuile.lien{color:inherit;text-decoration:none;transition:border-color .12s ease,box-shadow .12s ease}
a.tuile.lien:hover{border-color:var(--border-strong);box-shadow:0 4px 14px -8px rgba(26,37,48,.18)}
a.tuile.lien:hover .lieu{color:var(--accent)}

/* chip d'état hydrologique : pastille + libellé, jamais couleur seule */
.etat{
  display:inline-flex;align-items:center;gap:.4rem;
  font-size:.74rem;font-weight:600;
  padding:.2rem .6rem;border-radius:99px;white-space:nowrap;
}
.etat::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.etat.normale{background:var(--etat-normale-bg);color:var(--etat-normale-fg)}
.etat.haute{background:var(--etat-haute-bg);color:var(--etat-haute-fg)}
.etat.basse{background:var(--etat-basse-bg);color:var(--etat-basse-fg)}
.etat.tres-basse{background:var(--etat-tres-basse-bg);color:var(--etat-tres-basse-fg)}
.etat.crise{background:var(--etat-crise-bg);color:var(--etat-crise-fg)}
.etat.inconnu{background:var(--bg-3);color:var(--ink-2)}

/* ---------- graphiques ---------- */
.graphique{position:relative}
.graphique svg{display:block;width:100%;height:auto}
.graphique .axe{font-family:var(--sans);font-size:11px;fill:var(--ink-3)}
.graphique .axe.annote{font-weight:600;fill:var(--ink-2)}
.graphique .gril{stroke:var(--bg-3);stroke-width:1}
.graphique .serie{stroke:var(--data-loire);stroke-width:2.25;fill:none;stroke-linejoin:round;stroke-linecap:round}
.graphique .pointe{fill:var(--data-loire);stroke:var(--carte);stroke-width:2}
.graphique .etiquette{font-family:var(--sans);font-size:12px;font-weight:650;fill:var(--ink)}

/* carte porteuse d'un grand graphique : en-tête valeur + état */
.carte-graphique{padding:1.4rem 1.5rem 1.2rem}
.entete-graphique{
  display:flex;justify-content:space-between;align-items:flex-start;gap:1rem;
  flex-wrap:wrap;margin-bottom:1rem;
}
.libelle-mesure{font-size:.82rem;color:var(--ink-3)}
.mesure-courante{display:flex;align-items:center;gap:.7rem;flex-wrap:wrap;margin:.15rem 0}
.valeur-hero{
  font-size:2.6rem;font-weight:650;line-height:1;
  letter-spacing:-0.02em;
}
.unite-hero{font-size:1rem;color:var(--ink-3);margin-left:-.3rem}
.legende-graphique{font-size:.82rem;color:var(--ink-3);margin-top:.7rem}

/* fil d'Ariane */
.fil-ariane{padding:1.6rem 0 0;font-size:.84rem;color:var(--ink-3)}
.fil-ariane a{color:var(--ink-2);text-decoration:none}
.fil-ariane a:hover{color:var(--accent);text-decoration:underline}
.fil-ariane span{margin:0 .15rem}

/* rail de stations (navigation d'amont en aval) */
.rail-stations{display:flex;gap:.6rem;flex-wrap:wrap}
.pastille-station{
  display:inline-flex;align-items:baseline;gap:.55rem;
  border:1px solid var(--border);border-radius:99px;
  padding:.45rem 1rem;text-decoration:none;color:var(--ink);
  background:var(--carte);font-size:.88rem;
  transition:border-color .12s ease;
}
.pastille-station:hover{border-color:var(--accent);color:var(--accent)}
.pastille-station .nom{font-weight:550}
.pastille-station .debit{font-size:.78rem;color:var(--ink-3);font-variant-numeric:tabular-nums}
.pastille-station.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pastille-station.active .debit{color:#CFE2EF}

.lien-carte{text-decoration:none;color:inherit}
.lien-carte:hover{color:var(--accent)}

/* grille limitée à deux colonnes (paires de graphiques) */
.grille-2{grid-template-columns:repeat(auto-fit,minmax(320px,1fr))}

/* barres d'usage (prélèvements) */
.usages{display:flex;flex-direction:column;gap:.65rem}
.usage-entete{display:flex;justify-content:space-between;gap:.6rem;font-size:.85rem}
.usage-part{color:var(--ink-3);font-variant-numeric:tabular-nums}
.usage-barre{height:8px;border-radius:99px;background:var(--bg-3);overflow:hidden;margin:.25rem 0 .15rem}
.usage-barre>div{height:100%;border-radius:99px;background:var(--data-loire)}
.usage-volume{font-size:.76rem;color:var(--ink-3)}

/* bloc de code (page données) */
pre.code{
  background:var(--sombre);color:var(--ink-inverse);
  border-radius:var(--r-ctrl);padding:.9rem 1.05rem;
  font-family:var(--mono);font-size:.8rem;line-height:1.6;
  overflow-x:auto;
}

/* statut d'avancement d'une idée (page projet) */
.statut{
  display:inline-flex;align-items:center;gap:.35rem;
  font-size:.7rem;font-weight:600;
  padding:.14rem .55rem;border-radius:99px;
  margin:.1rem 0 .6rem;
}
.statut::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none}
.statut.en-ligne{background:#DFF0E2;color:#1D5E2E}
.statut.apercu{background:var(--etat-haute-bg);color:var(--etat-haute-fg)}
.statut.chantier{background:var(--etat-basse-bg);color:var(--etat-basse-fg)}
.statut.convention{background:var(--etat-tres-basse-bg);color:var(--etat-tres-basse-fg)}
.statut.communaute{background:#EBE4F4;color:#4D3A73}
.statut.prospective{background:var(--bg-3);color:var(--ink-2)}
.statut a{color:inherit}
.carte-item.sombre .statut.en-ligne{background:rgba(78,180,106,.22);color:#9FE0B0}

.info-bulle{
  position:absolute;pointer-events:none;z-index:20;
  background:var(--sombre);color:var(--ink-inverse);
  font-size:.76rem;line-height:1.5;
  font-variant-numeric:tabular-nums;
  padding:.4rem .6rem;border-radius:6px;
  transform:translate(-50%,calc(-100% - 12px));
  white-space:nowrap;opacity:0;transition:opacity .1s ease;
}
.info-bulle b{font-weight:650;color:#fff}
.info-bulle.visible{opacity:1}
.reticule{stroke:var(--border-strong);stroke-width:1;opacity:0}
.reticule.visible{opacity:1}

/* ---------- bannières ---------- */
.avis{
  border:1px solid var(--border);border-left:3px solid var(--data-sable);
  background:#FBF6EC;border-radius:var(--r-ctrl);
  padding:.8rem 1rem;font-size:.88rem;color:#5C431A;
  margin:1rem 0;
}
.avis.info{border-left-color:var(--accent);background:var(--accent-pale);color:#17506F}
.avis strong{font-weight:650}
.avis[hidden]{display:none}

.skeleton{
  background:linear-gradient(90deg,var(--bg-3) 25%,#E5E9ED 37%,var(--bg-3) 63%);
  background-size:400% 100%;animation:shimmer 1.4s ease infinite;
  border-radius:4px;color:transparent !important;
}
@keyframes shimmer{0%{background-position:100% 0}100%{background-position:0 0}}

/* ---------- tableaux ---------- */
.defilable{overflow-x:auto}
table.donnees{
  width:100%;border-collapse:collapse;background:var(--carte);
  border:1px solid var(--border);border-radius:var(--r-ctrl);
  font-size:.86rem;
}
table.donnees th,table.donnees td{
  padding:.5rem .8rem;text-align:left;border-bottom:1px solid var(--bg-3);
}
table.donnees th{
  font-size:.72rem;letter-spacing:.04em;
  text-transform:uppercase;color:var(--ink-3);font-weight:600;
  background:var(--bg-2);
}
table.donnees td.num{font-variant-numeric:tabular-nums;text-align:right}
table.donnees tr:last-child td{border-bottom:none}

/* ---------- feuille de route ---------- */
.roadmap{
  display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));
  gap:1rem;
}
.roadmap>div{
  background:var(--sombre-2);
  border:1px solid #23313D;
  border-radius:var(--r-carte);
  padding:1.2rem 1.2rem 1.3rem;
}
.roadmap b{
  display:block;font-size:.78rem;font-weight:650;
  letter-spacing:.05em;text-transform:uppercase;
  color:#D9A75B;margin-bottom:.5rem;
}
.roadmap span{font-size:.88rem;color:var(--ink-inverse-2)}

/* ---------- bande sombre / CTA ---------- */
.bande-sombre{
  margin-top:3rem;
  background:var(--sombre);color:var(--ink-inverse);
  border-radius:var(--r-carte);
  padding:2.8rem clamp(1.4rem,4vw,3rem) 3rem;
}
.bande-sombre .surtitre{color:#D9A75B}
.bande-sombre h2{
  font-size:clamp(1.5rem,3vw,2.1rem);font-weight:650;
  max-width:30ch;line-height:1.2;margin-bottom:1rem;color:#fff;
}
.bande-sombre p{max-width:62ch;color:var(--ink-inverse-2);margin-bottom:1.6rem}

/* ---------- pied de page ---------- */
.site-footer{
  border-top:1px solid var(--border);
  background:var(--bg-2);
  color:var(--ink-3);
  font-size:.8rem;line-height:1.9;
}
.site-footer .interieur{
  max-width:var(--largeur-max);margin:0 auto;
  padding:1.8rem var(--pad-page) 2.2rem;
}
.site-footer a{color:var(--ink-2);text-decoration:none}
.site-footer a:hover{color:var(--ink);text-decoration:underline}
.site-footer .sources{margin-top:.2rem}

/* ---------- carte Leaflet ---------- */
.disposition-carte{
  display:grid;grid-template-columns:minmax(0,1fr) 350px;
  gap:1rem;align-items:start;
}
#carte-fleuve{
  height:min(72vh,660px);border:1px solid var(--border);
  border-radius:var(--r-carte);background:var(--bg-2);
}
.panneau-station{
  background:var(--carte);border:1px solid var(--border);
  border-radius:var(--r-carte);padding:1.15rem 1.2rem;
  position:sticky;top:64px;
  max-height:min(72vh,660px);overflow-y:auto;
}
.panneau-station .vide{color:var(--ink-3);font-size:.88rem}
.legende-carte{
  display:flex;gap:1.1rem;flex-wrap:wrap;margin-top:.7rem;
  font-size:.8rem;color:var(--ink-2);
}
.legende-carte span{display:inline-flex;align-items:center;gap:.4rem}
.legende-carte i{width:10px;height:10px;border-radius:50%;border:2px solid #fff;box-shadow:0 0 0 1px var(--border-strong)}
.marqueur-station{
  width:14px;height:14px;border-radius:50%;
  background:var(--data-loire);border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(26,37,48,.35);
  cursor:pointer;
}
.marqueur-station.choisie{background:var(--data-sable);transform:scale(1.25)}

/* badge de débit en direct des lieux suivis */
.marqueur-debit{
  display:inline-flex;align-items:center;gap:.45rem;
  white-space:nowrap;cursor:pointer;
  background:#fff;border:1px solid var(--border-strong);
  border-radius:99px;padding:.2rem .55rem .2rem .65rem;
  font-family:var(--sans);font-size:11px;line-height:1.2;
  box-shadow:0 2px 8px -3px rgba(26,37,48,.35);
  position:absolute;
}
.marqueur-debit.pos-0{transform:translate(-50%,calc(-100% - 16px))}
.marqueur-debit.pos-1{transform:translate(-50%,16px)}
.marqueur-debit.echantillon{position:static;transform:none;box-shadow:none}
.marqueur-debit .ville{font-weight:650;color:var(--ink)}
.marqueur-debit .val{
  font-weight:600;font-variant-numeric:tabular-nums;
  padding:.06rem .45rem;border-radius:99px;
}
.marqueur-debit.etat-normale .val{background:var(--etat-normale-bg);color:var(--etat-normale-fg)}
.marqueur-debit.etat-haute .val{background:var(--etat-haute-bg);color:var(--etat-haute-fg)}
.marqueur-debit.etat-basse .val{background:var(--etat-basse-bg);color:var(--etat-basse-fg)}
.marqueur-debit.etat-tres-basse .val{background:var(--etat-tres-basse-bg);color:var(--etat-tres-basse-fg)}
.marqueur-debit.etat-crise .val{background:var(--etat-crise-bg);color:var(--etat-crise-fg)}
.marqueur-debit.etat-inconnu .val{background:var(--bg-3);color:var(--ink-2)}
.marqueur-debit.choisi{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-pale),0 2px 8px -3px rgba(26,37,48,.35)}

/* ---------- formulaires légers ---------- */
.filtres{display:flex;gap:.7rem;flex-wrap:wrap;align-items:center;margin-bottom:1.3rem}
.filtres label{font-size:.82rem;font-weight:550;color:var(--ink-2)}
.filtres select{
  font-family:var(--sans);font-size:.9rem;color:var(--ink);
  background:var(--bg);border:1px solid var(--border-strong);
  border-radius:var(--r-ctrl);
  padding:.42rem .65rem;
}
.filtres select:focus-visible{outline:2px solid var(--accent);outline-offset:1px}

/* méta en petites capitales techniques (usage parcimonieux) */
.meta{font-family:var(--mono);font-size:.68rem;letter-spacing:.05em;color:var(--ink-3)}

@media (max-width:860px){
  .disposition-carte{grid-template-columns:1fr}
  .panneau-station{position:static;max-height:none}
}
@media (max-width:640px){
  .site-nav{margin-left:0;gap:1rem}
}