:root{
  --encre:#0f2f3d; --teal:#1b5468; --teal-clair:#2f7186;
  --brique:#c05426; --brique-clair:#d97846;
  --papier:#f2efe6; --craie:#fbfaf6; --trait:#ddd6c6; --trait-fort:#c4baa5;
  --texte:#16323c; --texte-doux:#5b7480; --texte-faible:#8a9ba3;
  --r:9px; --ombre:0 1px 2px rgba(15,47,61,.06), 0 4px 14px rgba(15,47,61,.05);
}
@media (prefers-color-scheme:dark){
  :root{
    --encre:#071c25; --papier:#0c242e; --craie:#12303b; --trait:#1f4653; --trait-fort:#2c5a69;
    --texte:#e6eef1; --texte-doux:#9db3bc; --texte-faible:#6d8794;
    --brique:#e07f4d; --brique-clair:#ee9668; --teal:#2a6d84; --teal-clair:#4e9db8;
    --ombre:0 1px 2px rgba(0,0,0,.3), 0 4px 14px rgba(0,0,0,.25);
  }
}
:root[data-theme="light"]{
  --encre:#0f2f3d; --teal:#1b5468; --teal-clair:#2f7186; --brique:#c05426; --brique-clair:#d97846;
  --papier:#f2efe6; --craie:#fbfaf6; --trait:#ddd6c6; --trait-fort:#c4baa5;
  --texte:#16323c; --texte-doux:#5b7480; --texte-faible:#8a9ba3;
}
:root[data-theme="dark"]{
  --encre:#071c25; --papier:#0c242e; --craie:#12303b; --trait:#1f4653; --trait-fort:#2c5a69;
  --texte:#e6eef1; --texte-doux:#9db3bc; --texte-faible:#6d8794;
  --brique:#e07f4d; --brique-clair:#ee9668; --teal:#2a6d84; --teal-clair:#4e9db8;
}
*{box-sizing:border-box}
body{margin:0; background:var(--papier); color:var(--texte);
  font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif; font-size:15.5px; line-height:1.6;
  -webkit-font-smoothing:antialiased}
.wrap{max-width:88rem; margin:0 auto; padding:0 1.6rem}
a{color:var(--teal-clair)}
:focus-visible{outline:2px solid var(--brique); outline-offset:2px; border-radius:3px}
.skip{position:absolute; left:-9999px; top:0; background:var(--brique); color:#fff; padding:.6rem 1rem; z-index:50}
.skip:focus{left:0}

header{background:var(--encre); color:#e8f0f3}
.hd{display:flex; align-items:center; gap:1.4rem; padding:.7rem 1.6rem; flex-wrap:wrap; max-width:88rem; margin:0 auto}
.brand{display:flex; align-items:center; gap:.5rem; font-weight:700; font-size:.94rem; letter-spacing:-.015em;
  color:#fff; text-decoration:none; flex:none}
.brand svg{width:23px;height:23px}
nav.top{display:flex; gap:1rem; flex-wrap:wrap; font-size:.85rem}
nav.top a{color:#bcd4dd; text-decoration:none; padding:.15rem 0; border-bottom:2px solid transparent}
nav.top a:hover{color:#fff; border-bottom-color:var(--brique-clair)}

.fil{font-size:.8rem; color:var(--texte-doux); padding:.9rem 1.6rem .2rem}
.fil a{color:var(--texte-doux)}
.fil em{font-style:normal; color:var(--texte-faible); margin:0 .1rem}

main{padding-bottom:2rem}
h1{font-size:clamp(1.45rem,3.4vw,2.05rem); line-height:1.16; margin:.5rem 0 .7rem; letter-spacing:-.025em;
  text-wrap:balance}
h2{font-size:1.1rem; margin:0 0 .7rem; letter-spacing:-.015em}
h2 a{text-decoration:none}
/* Le chapô suivait la ligne de lecture classique (62 caractères), ce qui le coupait au
   tiers de la page sur grand écran alors que le titre, lui, allait au bout. Porté à 100
   caractères : on occupe la largeur sans aller jusqu'à la ligne de 1 400 px, illisible. */
.lede{color:var(--texte-doux); margin:0 0 1.5rem; max-width:100ch}
.bloc{margin:2rem 0 0; padding-top:1.4rem; border-top:1px solid var(--trait)}
.note{font-size:.85rem; color:var(--texte-doux); margin:.9rem 0 0}
.plus{margin:.7rem 0 0; font-size:.87rem}
.vide{color:var(--texte-doux)}

.kpi{display:grid; grid-template-columns:repeat(auto-fit,minmax(9.5rem,1fr)); gap:0;
  margin:0 0 1.4rem; background:var(--craie); border:1px solid var(--trait);
  border-radius:var(--r); overflow:hidden}
.kpi div{padding:.8rem 1rem .85rem; border-right:1px solid var(--trait); min-width:0;
  border-top:3px solid var(--acc, var(--trait-fort))}
.kpi div:last-child{border-right:0}
.kpi div:nth-child(6n+1){--acc:#e8352b}
.kpi div:nth-child(6n+2){--acc:#0f9bd8}
.kpi div:nth-child(6n+3){--acc:#f5a623}
.kpi div:nth-child(6n+4){--acc:#00a35c}
.kpi div:nth-child(6n+5){--acc:#8b5cf6}
.kpi div:nth-child(6n+6){--acc:#0ea5a5}
.kpi dt{color:var(--acc)!important; font-weight:700}
.kpi dt{font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-faible); margin:0}
.kpi dd{margin:.05rem 0 0; font-size:1.4rem; font-weight:700; letter-spacing:-.02em; font-variant-numeric:tabular-nums}

ul.grille{list-style:none; margin:0; padding:0;
  display:grid; grid-template-columns:repeat(auto-fill,minmax(15.5rem,1fr)); gap:.5rem}
ul.grille li a,ul.grille li.off{display:flex; align-items:baseline; gap:.6rem; text-decoration:none; color:inherit;
  background:var(--craie); border:1px solid var(--trait); border-radius:7px; padding:.55rem .8rem}
ul.grille li a:hover{border-color:var(--brique)}
ul.grille li.off{opacity:.5}
ul.grille .l{flex:1; min-width:0; font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.c{font-size:.82rem; color:var(--texte-doux); font-variant-numeric:tabular-nums; flex:none}

ul.puces{list-style:none; margin:0; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(14rem,1fr)); gap:.15rem .9rem; font-size:.9rem}
ul.puces li{display:flex; gap:.5rem; align-items:baseline; padding:.15rem 0}
ul.puces li>a,ul.puces li>span:first-child{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}

ol.fiches{list-style:none; margin:0 0 1rem; padding:0; display:grid;
  grid-template-columns:repeat(auto-fill,minmax(19rem,1fr)); gap:.6rem}
.f{background:var(--craie); border:1px solid var(--trait); border-radius:var(--r); padding:.75rem .9rem}
.f .n{margin:0 0 .2rem; font-weight:600; font-size:.94rem; letter-spacing:-.01em; line-height:1.35}
.f .ens{font-weight:400; color:var(--texte-doux); font-size:.86rem}
.f .a{margin:0 0 .45rem; font-size:.85rem; color:var(--texte-doux)}
.f .m{margin:0; display:flex; gap:.35rem; flex-wrap:wrap; align-items:center}
.tag{font-size:.7rem; padding:.1rem .45rem; border:1px solid var(--trait-fort); border-radius:100px;
  color:var(--texte-doux); white-space:nowrap}
.siret{font-size:.7rem; color:var(--texte-faible); font-variant-numeric:tabular-nums;
  font-family:ui-monospace,SFMono-Regular,Menlo,monospace; margin-left:auto}
/* Pagination des listings (§2.2) */
.pagination{display:flex; flex-wrap:wrap; gap:.35rem; align-items:center; margin:1.2rem 0 .4rem}
.pagination a,.pagination .pg-cur{display:inline-block; min-width:2.1rem; text-align:center;
  padding:.32rem .55rem; border:1px solid var(--trait); border-radius:7px; font-size:.85rem;
  font-variant-numeric:tabular-nums; text-decoration:none; background:var(--craie)}
.pagination a:hover{border-color:var(--trait-fort)}
.pagination .pg-cur{background:var(--encre); color:var(--craie); border-color:var(--encre); font-weight:600}
.pagination .pg-nav{font-weight:600}
.pagination .pg-ell{padding:0 .15rem; color:var(--texte-faible)}

/* --- Palmarès de densité : lecture en une passe, barre proportionnelle --- */
.pal-tete{display:grid; grid-template-columns:repeat(auto-fit,minmax(9rem,1fr)); gap:.8rem;
  margin:0 0 1.4rem; padding:1rem 1.1rem; background:var(--craie);
  border:1px solid var(--trait); border-radius:var(--r)}
.pal-tete div{min-width:0}
.pal-tete dt{font-size:.69rem; letter-spacing:.1em; text-transform:uppercase; color:var(--texte-faible); margin:0}
.pal-tete dd{margin:.05rem 0 0; font-size:1.25rem; font-weight:700; letter-spacing:-.02em;
  font-variant-numeric:tabular-nums}
.pal-tete .u{font-size:.72rem; font-weight:400; color:var(--texte-doux); margin-left:.2rem}

ol.palmares{list-style:none; margin:0; padding:0; font-variant-numeric:tabular-nums}
ol.palmares>li{display:grid; align-items:center; gap:.5rem .9rem;
  grid-template-columns:2.6rem minmax(7rem,1.1fr) 4.2rem 4.6rem minmax(6rem,2fr) 4.2rem;
  padding:.3rem .5rem; border-radius:5px; border-bottom:1px solid var(--trait)}
ol.palmares>li:hover{background:var(--craie)}
ol.palmares .rg{color:var(--texte-faible); font-size:.8rem; text-align:right}
ol.palmares .nm{font-size:.9rem; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; text-decoration:none}
ol.palmares .num{font-size:.8rem; color:var(--texte-doux); text-align:right}
ol.palmares .vl{font-size:.88rem; font-weight:600; text-align:right}
/* La barre est décorative : la valeur chiffrée la précède toujours en texte. */
.bar{position:relative; height:.62rem; background:var(--trait); border-radius:100px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--teal-clair); border-radius:100px}
.bar.b-haut i{background:var(--brique)}
/* Repère de médiane, pour situer chaque commune sans lire tout le tableau. */
.pal-med{position:relative; height:1.1rem; margin:.2rem 0 .6rem}
.pal-med span{position:absolute; top:0; transform:translateX(-50%); font-size:.7rem;
  color:var(--texte-faible); white-space:nowrap}
.pal-med::before{content:""; position:absolute; top:-.35rem; height:.5rem; width:1px; background:var(--trait-fort)}
ol.palmares .ent{display:none}
@media (max-width:720px){
  ol.palmares>li{grid-template-columns:2.2rem 1fr 4.2rem; gap:.15rem .6rem}
  ol.palmares .num,.pal-cols .num{display:none}
  ol.palmares .bar{grid-column:2 / -1}
}
.pal-cols{display:grid; gap:.5rem .9rem; align-items:end;
  grid-template-columns:2.6rem minmax(7rem,1.1fr) 4.2rem 4.6rem minmax(6rem,2fr) 4.2rem;
  padding:0 .5rem .3rem; font-size:.7rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texte-faible); border-bottom:1px solid var(--trait-fort)}
.pal-cols span:nth-child(n+3){text-align:right}
@media (max-width:720px){ .pal-cols{grid-template-columns:2.2rem 1fr 4.2rem} }

.src{margin:2.2rem 0 0; padding:1rem 1.1rem; background:var(--craie); border-left:3px solid var(--brique);
  border-radius:0 var(--r) var(--r) 0; font-size:.86rem; color:var(--texte-doux)}
.src p{margin:0 0 .5rem}
.src p:last-child{margin:0}
.src strong{color:var(--texte)}
.src .p{font-size:.83rem}

footer{background:var(--encre); color:#a9c4ce; margin-top:2.5rem; padding:1.9rem 0 2.2rem; font-size:.85rem}
.fl{display:grid; grid-template-columns:repeat(auto-fit,minmax(11rem,1fr)); gap:1.6rem}
.fl h4{color:#fff; font-size:.73rem; letter-spacing:.11em; text-transform:uppercase; margin:0 0 .5rem}
.fl ul{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:.28rem}
footer a{color:#a9c4ce; text-decoration:none}
footer a:hover{color:#fff; text-decoration:underline}
.fb{margin:1.5rem 0 0; padding-top:1rem; border-top:1px solid #234a58; font-size:.79rem; color:#88a8b4}
.fb a{color:#bcd4dd; text-decoration:underline}
@media (prefers-reduced-motion:reduce){*{transition:none!important}}

/* --- fiche établissement --- */
.quals{margin:0 0 1.3rem; display:flex; gap:.35rem; flex-wrap:wrap}
.q{font-size:.76rem; font-weight:600; padding:.2rem .6rem; border-radius:100px;
  background:var(--brique); color:#fff; cursor:help}
dl.fic{display:grid; grid-template-columns:auto 1fr; gap:.45rem 1.4rem; margin:0 0 1.5rem;
  padding:1.1rem 1.2rem; background:var(--craie); border:1px solid var(--trait); border-radius:var(--r)}
dl.fic dt{color:var(--texte-doux); font-size:.87rem}
dl.fic dd{margin:0; font-size:.93rem}
dl.fic dd.mn{font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-variant-numeric:tabular-nums; font-size:.88rem}
.ni{color:var(--texte-faible); font-size:.83rem}
@media (max-width:560px){ dl.fic{grid-template-columns:1fr; gap:.1rem}
  dl.fic dt{margin-top:.6rem} }

/* --- liens d'annonce (module Actualités) --- */
.f .lk{font-size:.78rem}
.f .lk+.lk{margin-left:.5rem}
.f .lk a{color:var(--teal-clair)}

/* --- Graphiques rendus au build (SVG statique, aucun JS) --------------------
   Les couleurs de série sont posées en dur dans le SVG : saturées et de valeur
   moyenne, elles tiennent sur les deux fonds du site. Seuls le texte et les axes
   suivent le thème. */
.gr-anneau{display:grid; grid-template-columns:minmax(200px,260px) minmax(15rem,1fr);
  gap:1.4rem 2rem; align-items:center; margin:0 0 1rem}
.gr-anneau svg{width:100%; height:auto}
.gr-anneau .ct-n{text-anchor:middle; font-size:26px; font-weight:700; fill:var(--texte);
  letter-spacing:-.02em}
.gr-anneau .ct-l{text-anchor:middle; font-size:11px; fill:var(--texte-faible);
  letter-spacing:.06em; text-transform:uppercase}
ol.gr-leg{list-style:none; margin:0; padding:0; font-variant-numeric:tabular-nums}
ol.gr-leg li{display:grid; grid-template-columns:.8rem 1fr 3.4rem 4.2rem; gap:.6rem;
  align-items:baseline; padding:.2rem 0; font-size:.87rem; border-bottom:1px solid var(--trait)}
ol.gr-leg li:last-child{border-bottom:0}
ol.gr-leg .pu{width:.8rem; height:.8rem; border-radius:3px; align-self:center}
ol.gr-leg .lg{min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
ol.gr-leg .pc{text-align:right; font-weight:600}
ol.gr-leg .nb{text-align:right; color:var(--texte-doux); font-size:.82rem}
@media (max-width:640px){ .gr-anneau{grid-template-columns:1fr} }

.gr-aires{margin:0; padding:0}
.gr-aires svg{width:100%; height:auto; overflow:visible}
.gr-g{stroke:var(--trait); stroke-width:1}
.gr-yl{text-anchor:end; font-size:10px; fill:var(--texte-faible)}
.gr-xl{text-anchor:middle; font-size:10px; fill:var(--texte-faible)}
.gr-pt{fill:var(--papier); stroke:#0f9bd8; stroke-width:2}
.gr-pt-part{stroke-dasharray:2 2}
.gr-lgd{display:flex; gap:1.2rem; flex-wrap:wrap; font-size:.8rem; color:var(--texte-doux);
  margin:.5rem 0 0; align-items:center}
.gr-lgd i{display:inline-block; width:.9rem; height:.55rem; margin-right:.35rem;
  vertical-align:middle; border-radius:2px}

/* Tableau de comparaison territoriale : défile seul plutôt que de déborder la page. */
.tab-comp{overflow-x:auto; margin:0 0 .6rem}
.tab-comp table{border-collapse:collapse; width:100%; min-width:34rem; font-size:.9rem}
.tab-comp th,.tab-comp td{padding:.45rem .7rem; text-align:right; border-bottom:1px solid var(--trait);
  font-variant-numeric:tabular-nums}
.tab-comp thead th{font-size:.72rem; letter-spacing:.06em; text-transform:uppercase;
  color:var(--texte-faible); font-weight:600; border-bottom:1px solid var(--trait-fort)}
.tab-comp thead th:first-child,.tab-comp tbody th{text-align:left; font-weight:500}
.tab-comp tbody th{color:var(--texte-doux); font-size:.87rem}
.tab-comp tbody tr:hover{background:var(--craie)}
.tab-comp td:nth-child(2){font-weight:700}

/* Explication d'un indicateur : un chiffre nu n'informe pas. */
.kpi .ex{margin:.15rem 0 0; font-size:.74rem; line-height:1.35; color:var(--texte-faible)}
.kpi dd{margin:.1rem 0 0; font-size:1.5rem; line-height:1.1}
@media (max-width:560px){ .kpi div{border-right:0; border-bottom:1px solid var(--trait)} }
.pal-tete .ex{margin:.2rem 0 0; font-size:.74rem; color:var(--texte-doux)}

/* Secteurs regroupés dans l'anneau mais détaillés en légende : décalés et allégés,
   pour qu'on lise d'un coup d'œil qu'ils composent la ligne « Autres » au-dessus. */
ol.gr-leg li.min{font-size:.82rem; color:var(--texte-doux)}
ol.gr-leg li.min .pu{width:.55rem; height:.55rem; margin-left:.25rem; opacity:.75}
ol.gr-leg li.min .lg{padding-left:.35rem}
ol.gr-leg li.min .pc{font-weight:400}