/* Style partagé du labo : mêmes typos, mêmes gammes et même panneau du ciel que le site.
   Ce fichier se charge APRÈS le style propre à chaque page : il en remplace les couleurs et les polices.
   Les échelles de couleurs des données (cartes, graphiques, niveaux) ne sont pas touchées : elles restent fixes et lisibles. */
@font-face{font-family:"Archivo NWH";src:url(archivo-400-800.woff2) format("woff2");font-weight:400 800;font-display:swap}
@font-face{font-family:"Unbounded";src:url(unbounded-500-800.woff2) format("woff2");font-weight:500 800;font-display:swap}
@font-face{font-family:"Anonymous Pro NWH";src:url(anonymous-bold-sub.woff2) format("woff2");font-weight:700;font-display:swap}

:root{
  /* valeurs par défaut (Jour · soleil), réécrites par nwh-gamme.js */
  --fond:#A9C1C9;--encre:#2F5BD8;--flash:#F5FF4D;--texte:#142C6B;
  --sur-encre:#FFFFFF;--sur-flash:#142C6B;--sur-texte:#A9C1C9;--accent:#2F5BD8;--accent-texte:#142C6B;--accent-encre:#F5FF4D;--accent-sur-texte:#F5FF4D;
  --papier:#FFFFFF;--texte-papier:#142C6B;--papier-doux:#D4E0E4;--filet:#5E7699;--filet-doux:#8DA2B4;--filet-papier:#5A6A93;
  /* les variables des pages du labo, branchées sur la gamme */
  --font-titre:"Unbounded","Archivo NWH",system-ui,sans-serif;
  --font-texte:"Archivo NWH",system-ui,sans-serif;
  --font-mention:"Anonymous Pro NWH","Anonymous Pro",ui-monospace,monospace;
  --font-chiffre:"Unbounded","Archivo NWH",system-ui,sans-serif;
  --light:var(--fond);--dark:var(--texte);
  --accent-labo:var(--encre);
  --d-bg:var(--accent-texte);--d-ink:var(--fond);--d-hl:var(--accent-encre);
  --hl:var(--accent-sur-texte);
  --line:var(--filet-doux);--line2:var(--filet);--pale:var(--papier-doux);
  --t:.6s;
}
html{background:var(--fond);transition:background var(--t)}
body{background:var(--fond)!important;color:var(--texte)!important;font-family:var(--font-texte)!important;transition:background var(--t),color var(--t)}
a{color:inherit}

/* titres : Unbounded, graisse 600 */
h1,h2,h3{font-family:var(--font-titre)!important;font-weight:600!important;font-stretch:100%!important;letter-spacing:-.035em!important}
h1{line-height:1!important}
.chiffre,.num{font-family:var(--font-chiffre)!important;font-weight:600!important;letter-spacing:-.03em}

/* surligné du titre : flash sur encre (ou l'inverse), toujours lisible */
.hl{background:var(--flash)!important;color:var(--sur-flash)!important}

/* bandeau « document de travail » */
.dt{background:var(--flash)!important;color:var(--sur-flash)!important;border-bottom-color:var(--texte)!important}
.dt .mention{background:var(--sur-flash)!important;color:var(--flash)!important}

/* en-tête et sous-navigation */
.top{border-bottom-color:var(--filet-doux)!important}
.top a,.sousnav a{color:var(--texte)!important}
/* le logo : la même typo que sur le site */
.top .wrap > a:first-child{font-family:var(--font-titre)!important;font-weight:600!important;text-transform:lowercase!important;letter-spacing:-.04em!important;font-size:20px!important;line-height:1}
.sousnav{background:var(--papier-doux)!important;border-bottom-color:var(--filet-doux)!important}
.sousnav a[aria-current="page"]{border-bottom-color:var(--texte)!important}

/* bandeau de tête des pages (23/10/2026) : ton sur ton (le fond un cran plus foncé), trame de points à l'encre.
   Le jour : pas de bandeau, le ciel descend vers le blanc (dégradé posé sur la page). Ancienne version : nwh_backup_avant-6gammes_2310.css */
.hero{background:var(--fond-fonce)!important;color:var(--texte)!important}
.hero .mention,.hero p,.hero h1{color:var(--texte)!important}
.hero::after{background-image:radial-gradient(circle,var(--encre) 1.5px,transparent 1.8px)!important;opacity:.32}
html[data-sombre] .hero::after{background-image:radial-gradient(circle,var(--accent) 1.5px,transparent 1.8px)!important}
.kpis{border-top-color:var(--texte)!important}
.kpi .chiffre{color:var(--accent-texte)!important}
html[data-jour]{background:var(--papier)}
html[data-jour] body{background:linear-gradient(180deg,var(--fond) 0,var(--fond) 320px,var(--papier) 1100px) no-repeat,var(--papier)!important}
html[data-jour] .hero{background:transparent!important}
html[data-jour] .top{border-bottom-color:transparent!important}
/* aurore et crépuscule (23/10/2026) : le fond est le dégradé du ciel, du haut vers l'horizon, sur toute la page.
   Le bandeau reste ton sur ton mais laisse passer le ciel. */
html[data-aube]{background:var(--ciel-bas)}
html[data-aube] body{background:linear-gradient(180deg,var(--ciel-haut) 0,var(--fond) 55%,var(--ciel-bas) 100%) no-repeat,var(--ciel-bas)!important;min-height:100vh}
html[data-aube] .hero{background:color-mix(in srgb,var(--fond-fonce) 45%,transparent)!important}

/* tailles (23/10/2026) : titres moyens, 52 px au plus */
.hero .wrap{padding-top:40px!important;padding-bottom:44px!important}
.hero h1{font-size:clamp(32px,4.6vw,52px)!important;margin:14px 0 16px!important}
.hero p,.hero .chapo{font-size:18px!important}
.kpi .chiffre{font-size:clamp(24px,3vw,32px)!important}
h2{font-size:clamp(22px,2.6vw,28px)!important}
.carte h2{font-size:clamp(18px,1.8vw,21px)!important}
.kpi.ml{background:var(--flash)!important;color:var(--sur-flash)!important}
.kpi.ml .chiffre,.kpi.ml .k,.kpi.ml .l{color:var(--sur-flash)!important}

/* sections */
section.bloc{border-bottom-color:var(--filet-doux)!important}
section.bloc > .wrap > .mention{color:var(--texte)!important}
.encart{border-left-color:var(--encre)!important}
ol.etapes li{border-top-color:var(--texte)!important}
ol.etapes li::before{color:var(--encre)!important}
html[data-sombre] ol.etapes li::before{color:var(--accent)!important}

/* cartes de projets (23/10/2026) : sur papier, filet fin, le citron seulement sur le bouton et le badge */
.carte,.carte.live{background:var(--papier)!important;color:var(--texte-papier)!important;border:1.5px solid var(--filet-doux)!important}
.carte h2{color:var(--texte-papier)!important}
.carte .num,.carte.live .num{color:var(--accent-texte)!important}
.carte.live .tags,.carte .tags{color:var(--texte-papier)!important;opacity:.85}
.carte .voir,.carte.live .voir{background:var(--flash)!important;color:var(--sur-flash)!important}
.carte.live .badge{background:var(--flash)!important;color:var(--sur-flash)!important}
.carte:hover,.carte.live:hover{box-shadow:5px 5px 0 var(--fond-fonce)!important;border-color:var(--texte-papier)!important}
.carte.prive{background:var(--papier-doux)!important;color:var(--texte)!important;border:2px dashed var(--filet)!important}
.carte.prive h2,.carte.prive p{color:var(--texte)!important;opacity:1!important}
.carte.prive .num,.carte.prive .tags{color:var(--texte)!important}
.carte.prive .badge{background:var(--papier)!important;border-color:var(--filet)!important;color:var(--texte-papier)!important}
.carte.prive .voir{background:transparent!important;border-color:var(--texte)!important;color:var(--texte)!important}
.carte.prive:hover{box-shadow:6px 6px 0 var(--filet)!important}
.carte.bientot{background:transparent!important;color:var(--texte)!important;border-color:var(--filet)!important}
.carte.bientot h2,.carte.bientot p{color:var(--texte)!important;opacity:1!important}
.carte.bientot .badge{border-color:var(--filet)!important;color:var(--texte)!important}
/* cartes « tester le site » (projet 05) */
.carte.tst{background:var(--flash)!important;color:var(--sur-flash)!important;border-color:var(--texte)!important}
.carte.tst h2,.carte.tst .num{color:var(--sur-flash)!important}
.carte.tst .voir{background:var(--sur-flash)!important;color:var(--flash)!important}
.carte.tst.ancienne{background:var(--papier)!important;color:var(--texte-papier)!important}
.carte.tst.ancienne h2,.carte.tst.ancienne .num{color:var(--texte-papier)!important}
.carte.tst.ancienne .voir{background:var(--texte-papier)!important;color:var(--papier)!important}
.sousnav .tester{color:var(--texte)!important}

/* tableaux et données : sur papier, couleurs des données inchangées */
.tableau,table{background:var(--papier);color:var(--texte-papier)}
thead th{background:var(--papier-doux)!important;color:var(--texte)!important}
th,td{border-bottom-color:var(--filet-papier)!important}
.audit td.ok{background:#E6F7EE!important;color:#143C78!important}.audit td.ko{background:#FDE2DD!important;color:#143C78!important}
html[data-sombre] thead th{background:var(--papier)!important;color:var(--texte-papier)!important}
#carte,#carte-ecarts,.leaflet-container{background:#FFFFFF}
main img{background:#FFFFFF;border-radius:2px}
html[data-sombre] main img,html[data-sombre] .leaflet-container{box-shadow:0 0 0 6px #FFFFFF}

.retenu td{color:#143C78!important}
caption,.sous{color:var(--texte)!important}
.projets > .wrap > .mention,th small,.src .mention{color:var(--texte)!important}
.e-manque,.e-manque *{color:#143C78!important}
/* pied de page */
footer .mention{color:var(--texte)}
footer a{color:var(--texte)!important}

/* focus visible partout */
:focus-visible{outline:3px solid currentColor!important;outline-offset:3px}

/* panneau du ciel (le même que sur le site) */
.gamme{position:fixed;left:16px;bottom:16px;z-index:1000;font-family:var(--font-texte);color:var(--texte-papier)}
.gamme-btn{display:flex;align-items:center;gap:8px;background:var(--papier);color:var(--texte-papier);border:1.5px solid var(--texte-papier);border-radius:999px;padding:6px 12px 6px 6px;font-family:var(--font-mention);font-weight:700;font-size:11px;letter-spacing:.06em;text-transform:uppercase;cursor:pointer;box-shadow:0 8px 24px -12px rgba(0,0,0,.45)}
.gamme-btn .pastille{width:20px;height:20px;border-radius:50%;background:conic-gradient(var(--fond) 0 33%,var(--encre) 0 66%,var(--flash) 0);box-shadow:inset 0 0 0 1.5px var(--texte-papier)}
.gamme-panneau{display:none;position:absolute;left:0;bottom:calc(100% + 10px);width:min(360px,calc(100vw - 32px));background:var(--papier);color:var(--texte-papier);border:1.5px solid var(--texte-papier);padding:16px;box-shadow:0 18px 40px -16px rgba(0,0,0,.5)}
.gamme.ouvert .gamme-panneau{display:block}
.gamme-panneau .gamme-fermer{float:right;margin:-6px -6px 6px 10px;border:1.5px solid var(--texte-papier);border-radius:999px;background:var(--papier);color:var(--texte-papier);font:700 13px var(--font-texte);padding:5px 10px;cursor:pointer}
.gamme-panneau .gamme-fermer span{font-size:16px;line-height:0;vertical-align:-1px;margin-left:2px}
.gamme-panneau .gamme-fermer:hover{background:var(--texte-papier);color:var(--papier)}
.gamme-panneau .mention{font-family:var(--font-mention);font-weight:700;text-transform:uppercase;letter-spacing:.1em;font-size:11px;margin:0 0 8px;display:block}
.gamme-panneau .phrase{font-family:var(--font-titre);font-weight:600;letter-spacing:-.03em;font-size:17px;line-height:1.25;margin:0 0 12px;max-width:none}
.gamme-panneau select{width:100%;font:600 14px var(--font-texte);padding:8px 10px;border:1.5px solid var(--filet-papier);background:transparent;color:inherit;margin-bottom:14px}
.gamme-panneau select option{color:#142C6B}
.gamme-panneau .rang{display:flex;flex-wrap:wrap;gap:6px;margin-bottom:14px}
.gamme-panneau .rang button{font:600 13.5px var(--font-texte);border:1.5px solid var(--filet-papier);background:transparent;color:inherit;border-radius:999px;padding:6px 11px;cursor:pointer}
.gamme-panneau .rang button[aria-pressed="true"]{background:var(--texte-papier);border-color:var(--texte-papier);color:var(--papier)}
.gamme-panneau .rang button:disabled{opacity:.35;cursor:default}
.gamme-panneau p.note{margin:0;font-size:12.5px;line-height:1.45;opacity:.85;max-width:none}
.gamme-panneau button:focus-visible,.gamme-btn:focus-visible{outline-color:var(--texte-papier)!important}
footer{padding-bottom:80px!important}
@media (prefers-reduced-motion:reduce){:root{--t:0s}}