/* La Note des Écoles — feuille de style, version 3 (septembre 2026).

   Direction : « institution moderne, en vert ». Le vert est l'identité du site :
   un vert doux et sûr, celui d'un tableau d'école ou d'un bulletin tamponné,
   jamais criard. Il porte les liens, les boutons, la marque et le bandeau de
   tête. La couleur de verdict (A à E) reste à part : elle ne dit qu'une chose,
   la classe obtenue.

   Partis pris, dans l'ordre où ils gouvernent le reste :
   1. LA SOURCE EST VISIBLE PARTOUT. Chaque page rappelle que les chiffres
      viennent du ministère, avec le millésime, la date de mise à jour et la
      licence. C'est un composant, pas une phrase qu'on oublie.
   2. LA RÉGLETTE dit la note : échelle 0-100 découpée aux vrais seuils, curseur
      à la position exacte.
   3. LA PHOTO dit le lieu : chaque fiche s'ouvre sur l'établissement lui-même,
      photo attribuée à son auteur, ou vue depuis la rue.
   4. LA COULEUR DIT LE VERDICT, UNE FOIS. Le liseré, le chiffre et la réglette
      prennent la couleur de la classe ; le reste est vert.
   5. UNE SEULE RÈGLE D'ESPACEMENT, vérifiée par script.
   6. UNE SEULE SÉQUENCE ANIMÉE au chargement : les jauges se remplissent, les
      chiffres montent, les cartes se posent en entrant dans l'écran. */

/* ==========================================================================
   1. Jetons
   ========================================================================== */

:root {
  --fond: #F6F8F5;
  --fond-2: #EDF3EE;
  --surface: #FFFFFF;
  --bord: #E0E8E2;
  --bord-fort: #C7D3CB;
  --piste: #E8EFEA;
  --encre: #15251D;
  --encre-2: #55655C;
  --encre-3: #849289;

  /* Le bandeau sombre : un vert forêt profond, éclairé d'une lueur menthe.
     Distinct du bleu de l'État : on inspire confiance, on n'usurpe rien. */
  --foret: #0F3327;
  --foret-2: #164737;
  --foret-3: #1F5A47;
  --menthe: #9EDBB9;
  --sur-foret: #FFFFFF;
  --sur-foret-2: #C7DED1;
  --sur-foret-3: #8FB3A1;
  /* Anciens noms, encore lus par quelques règles : ils pointent sur le vert. */
  --marine: var(--foret);
  --sur-marine: var(--sur-foret);
  --sur-marine-2: var(--sur-foret-2);
  --sur-marine-3: var(--sur-foret-3);

  --primaire: #2E7D5B;
  --primaire-sombre: #22624A;
  --primaire-pale: #E8F3EC;
  --primaire-bord: #C4DFD0;
  --primaire-lueur: rgba(46, 125, 91, .18);

  --A: #1E9A5E;  --A-pale: #E6F5EC;  --A-bord: #BDE3CC;
  --B: #7DB33D;  --B-pale: #F0F6E6;  --B-bord: #D6E6C0;
  --C: #E0A020;  --C-pale: #FBF3E2;  --C-bord: #F0DFB4;
  --D: #DC6C2C;  --D-pale: #FCEEE5;  --D-bord: #F3D4BF;
  --E: #C03A3A;  --E-pale: #FAEBEB;  --E-bord: #EFC9C9;

  --e1: .25rem;  --e2: .5rem;   --e3: .75rem;  --e4: 1rem;
  --e5: 1.5rem;  --e6: 2rem;    --e7: 3rem;    --e8: 4.5rem;

  --rayon: 18px;
  --rayon-s: 12px;
  --rayon-xs: 7px;
  --ombre: 0 1px 2px rgba(21, 37, 29, .05), 0 0 0 1px rgba(21, 37, 29, .02);
  --ombre-levee: 0 6px 22px rgba(21, 37, 29, .09);

  /* Pile système par défaut ; fonts.css, chargée à partir de 768 px, remplace
     ces deux variables par les polices du site. */
  --titre: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --texte: system-ui, -apple-system, 'Segoe UI', Roboto, 'Helvetica Neue', Arial, sans-serif;
  --mesure-texte: 68ch;
  --entete-h: 58px;
  --allant: cubic-bezier(.22, .61, .36, 1);
}

/* ==========================================================================
   2. Base
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; scroll-padding-top: calc(var(--entete-h) + var(--e4)); }
body {
  margin: 0; background: var(--fond); color: var(--encre);
  font: 400 17px/1.65 var(--texte);
  font-synthesis-weight: none; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
i, em, cite, address, dfn { font-style: normal; }

h1, h2, h3, h4 {
  font-family: var(--titre); font-weight: 800; line-height: 1.1;
  letter-spacing: -.025em; margin: 0; text-wrap: balance;
}
h1 { font-size: clamp(1.75rem, 1.3rem + 2.1vw, 2.6rem); }
h2 { font-size: clamp(1.3rem, 1.1rem + .9vw, 1.7rem); }
h3 { font-size: 1.1rem; font-weight: 700; letter-spacing: -.015em; }
h4 { font-size: 1rem; font-weight: 700; }
p, ul, ol, dl, figure { margin: 0; }

a { color: var(--primaire); text-underline-offset: .18em; text-decoration-thickness: .07em; }
a:hover { color: var(--primaire-sombre); }
/* Un lien de phrase ne se coupe jamais : il passe entier à la ligne suivante.
   Exceptions : noms d'établissement, adresses, attribution de la carte. */
a { white-space: nowrap; }
:is(h1, h2, h3, h4) a, .rang__nom, .nom, .suggestions a, .marque, .ligne__val a, .carte-geo a,
.classement a, .carte-dept, .dispo, .fil a, .photo__legende a, .pied__bas a { white-space: normal; }
.ligne__val a { overflow-wrap: anywhere; }
:focus-visible { outline: 3px solid var(--primaire); outline-offset: 2px; border-radius: 4px; }

.visuellement-cache { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.evitement { position: absolute; left: -999px; top: 0; z-index: 60; background: var(--surface); padding: var(--e3) var(--e4); border-radius: 0 0 var(--rayon-s) 0; box-shadow: var(--ombre-levee); }
.evitement:focus { left: 0; }

.etiquette { display: block; font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--encre-2); line-height: 1.45; }
.secondaire { color: var(--encre-2); }
.petit { font-size: .9375rem; line-height: 1.6; }
.chiffre, table, .mesure__valeur, .reglette__valeur, .rang__note, .composante__val,
.poids__pts, .kpi__val { font-variant-numeric: tabular-nums; }
.icone { vertical-align: -.15em; }

/* ==========================================================================
   3. Rythme — la règle d'espacement
   ========================================================================== */

.carte > * + *, .encart > * + *, .bandeau > * + *, .hero__corps > * + * { margin-top: var(--e4); }
.section > * + *, .pile > * + *, .heros > * + *, .bloc > * + * { margin-top: var(--e5); }
.carte > :is(h2, h3, h4) + *, .encart > :is(h2, h3, h4) + *,
.section > :is(h2, h3, h4) + *, .bandeau > :is(h2, h3, h4) + * { margin-top: var(--e4); }
:is(h1, h2, h3, h4) + * { margin-top: var(--e4); }
.pile--serre > * + * { margin-top: var(--e4); }
.pile--large > * + * { margin-top: var(--e6); }
.bloc { padding-block: var(--e6) var(--e8); }
.section + .section { margin-top: var(--e7); }
.carte p, .encart p, .section > p, .bandeau p, .limites li, .hero__chapeau { max-width: var(--mesure-texte); }

/* ==========================================================================
   4. Conteneurs
   ========================================================================== */

.conteneur { width: min(100% - 2rem, 1120px); margin-inline: auto; }
.grille { display: grid; gap: var(--e5); }
@media (min-width: 760px) {
  .grille--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
  .grille--4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grille--5 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (min-width: 1000px) { .grille--5 { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--e4); } }
@media (min-width: 560px) and (max-width: 759px) {
  .grille--3, .grille--4, .grille--5 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
/* Toute grille contraint ses enfants : un contenu trop large défile dans son
   propre cadre, jamais dans la fenêtre. */
.fiche > *, .fiche__colonne > *, .grille > *, .pied__grille > *, .liste > *, .poids > *,
.limites > *, .composantes > *, .mesures > *, .questions > *, .lignes > *, .kpis > *, .grille--5 > *,
.hero__kpis > *, .etapes > * { min-width: 0; }

/* ==========================================================================
   5. Surfaces
   ========================================================================== */

.carte { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre); padding: clamp(1.15rem, 3.2vw, 1.9rem); }
.carte--vide { text-align: center; color: var(--encre-2); }
.carte--vide h1, .carte--vide h2 { color: var(--encre); }
.carte--sable { background: var(--fond-2); border-color: #D9E5DC; }
.carte--tableau { padding-block: var(--e3); }
.carte--sable .centile__piste, .carte--sable .poids__rail { background: #DCE8DF; }
.carte__tete > * + *, .section__tete > * + * { margin-top: var(--e4); }
.section__tete p { color: var(--encre-2); max-width: var(--mesure-texte); }
.encart { background: var(--primaire-pale); border: 1px solid var(--primaire-bord); border-radius: var(--rayon); padding: clamp(1.15rem, 3.2vw, 1.9rem); }
.alerte { background: var(--C-pale); border: 1px solid var(--C-bord); color: #6B5215; border-radius: var(--rayon-s); padding: var(--e3) var(--e4); font-size: .9375rem; }
.bandeau { background: var(--fond-2); border-block: 1px solid var(--bord); }

/* « Bon à savoir » : un encadré sobre, filet vert à gauche. */
.savoir { border-left: 4px solid var(--primaire); background: var(--primaire-pale); border-radius: 0 var(--rayon-s) var(--rayon-s) 0; padding: var(--e4) var(--e5); }
.savoir > * + * { margin-top: var(--e4); }
/* Sur un fond vert pâle, le vert des liens ne contraste plus assez (4,4:1) :
   on prend le vert sombre (6,4:1). */
.savoir a, .encart a, .carte--sable a { color: var(--primaire-sombre); }
.savoir__titre { font-weight: 700; display: inline-flex; align-items: center; gap: .4rem; }

/* ==========================================================================
   6. En-tête, menu, recherche
   ========================================================================== */

.entete { position: sticky; top: 0; z-index: 30; background: rgba(255, 255, 255, .86); backdrop-filter: saturate(1.4) blur(12px); -webkit-backdrop-filter: saturate(1.4) blur(12px); border-bottom: 1px solid var(--bord); }
.entete__barre { display: flex; align-items: center; gap: var(--e4); height: var(--entete-h); }
.marque { display: inline-flex; align-items: center; gap: .5rem; text-decoration: none; color: inherit; flex: 0 0 auto; }
.marque__jeton { font-family: var(--titre); font-weight: 800; font-size: .8125rem; color: #fff; background: var(--primaire); padding: .32em .45em; border-radius: var(--rayon-xs); letter-spacing: -.03em; line-height: 1; transition: transform .18s var(--allant), background .18s; box-shadow: 0 2px 6px var(--primaire-lueur); }
.marque:hover .marque__jeton { transform: rotate(-5deg) scale(1.08); background: var(--primaire-sombre); }
.marque__nom { font-family: var(--titre); font-weight: 800; font-size: 1.0625rem; letter-spacing: -.03em; white-space: nowrap; }

.menu { display: flex; align-items: center; gap: 2px; margin-left: auto; }
.menu a { position: relative; display: inline-flex; align-items: center; min-height: 40px; padding: 0 .75rem; border-radius: 999px; font-size: .9375rem; font-weight: 600; color: var(--encre-2); text-decoration: none; white-space: nowrap; transition: color .16s, background .16s; }
.menu a:hover { background: var(--primaire-pale); color: var(--primaire-sombre); }
.menu a[aria-current="page"] { color: var(--primaire-sombre); background: var(--primaire-pale); }

.menu__recherche { display: none; }
@media (max-width: 759px) {
  .a-script .menu__recherche { display: block; padding: var(--e2) 0 var(--e3); }
}
.nav__bouton { display: none; margin-left: auto; flex: 0 0 auto; width: 44px; height: 44px; padding: 0; background: none; border: 0; border-radius: var(--rayon-xs); cursor: pointer; align-items: center; justify-content: center; transition: background .16s; }
.nav__bouton:hover { background: var(--piste); }
.nav__traits { position: relative; }
.nav__traits, .nav__traits::before, .nav__traits::after { display: block; width: 20px; height: 2px; background: var(--encre); border-radius: 2px; transition: transform .22s var(--allant), background .16s; }
.nav__traits::before, .nav__traits::after { content: ""; position: absolute; left: 0; }
.nav__traits::before { top: -6px; }
.nav__traits::after { top: 6px; }
[aria-expanded="true"] .nav__traits { background: transparent; }
[aria-expanded="true"] .nav__traits::before { transform: translateY(6px) rotate(45deg); }
[aria-expanded="true"] .nav__traits::after { transform: translateY(-6px) rotate(-45deg); }

@media (max-width: 759px) {
  :root { --entete-h: 52px; }
  .entete__barre { gap: var(--e2); }
  .marque__nom { font-size: .9375rem; }
  .menu { margin-left: auto; gap: 0; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; -webkit-mask-image: linear-gradient(90deg, #000 calc(100% - 1.4rem), transparent); mask-image: linear-gradient(90deg, #000 calc(100% - 1.4rem), transparent); padding-right: 1.2rem; }
  .menu::-webkit-scrollbar { display: none; }
  .menu a { padding: 0 .5rem; font-size: .875rem; }
  .a-script .nav__bouton { display: inline-flex; }
  .a-script .menu { display: none; position: absolute; left: 0; right: 0; top: 100%; flex-direction: column; align-items: stretch; gap: 2px; background: var(--surface); border-bottom: 1px solid var(--bord); box-shadow: var(--ombre-levee); padding: var(--e2) var(--e4) var(--e4); margin: 0; overflow: visible; -webkit-mask-image: none; mask-image: none; animation: apparait .18s var(--allant); }
  .a-script .entete.est-ouvert .menu { display: flex; }
  .a-script .menu a { min-height: 48px; padding: 0 var(--e3); font-size: 1rem; border-radius: var(--rayon-xs); }
}
@media (max-width: 359px) { .marque__nom { display: none; } }
/* Menu ouvert : la page ne défile plus derrière le panneau. */
.menu-ouvert { overflow: hidden; }

.bande-recherche { background: var(--surface); border-bottom: 1px solid var(--bord); padding-block: var(--e3); }
/* Un seul galet : la loupe annonce, le champ reçoit, la flèche envoie. Le bouton
   vit dans la barre — pas à côté d'elle. */
.recherche { position: relative; display: flex; align-items: center; gap: var(--e2);
  padding: 5px 5px 5px .95rem; background: var(--surface); border: 1px solid var(--bord-fort);
  border-radius: 999px; transition: border-color .16s, box-shadow .16s; }
.recherche:hover { border-color: var(--encre-3); }
.recherche:focus-within { border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-lueur); }
.recherche__loupe { flex: 0 0 auto; display: flex; color: var(--encre-3); transition: color .16s; }
.recherche:focus-within .recherche__loupe { color: var(--primaire); }
/* Le galet est toujours blanc, y compris posé sur le bandeau sombre : le texte
   saisi prend la couleur du corps du site et jamais celle du fond hérité. */
.recherche input { flex: 1 1 auto; min-width: 0; font: inherit; font-size: 16px; padding: .5rem 0;
  border: 0; background: none; color: var(--encre); }
.recherche input::placeholder { color: var(--encre-3); }
.recherche input:focus { outline: none; }
.recherche input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.recherche button { flex: 0 0 auto; display: grid; place-items: center; width: 40px; height: 40px;
  color: #fff; background: var(--primaire); border: 0; border-radius: 999px; cursor: pointer;
  transition: background .16s, transform .12s var(--allant); }
.recherche button:hover { background: var(--primaire-sombre); }
.recherche button:active { transform: scale(.92); }
.recherche button .icone { vertical-align: 0; }
.recherche--heros { padding: 7px 7px 7px 1.2rem; border-color: transparent; box-shadow: 0 10px 30px rgba(0, 0, 0, .22); }
.recherche--heros input { font-size: 1.0625rem; padding-block: .7rem; }
.recherche--heros button { width: 48px; height: 48px; }
.suggestions { position: absolute; top: calc(100% + .4rem); left: 0; right: 0; z-index: 40; padding: var(--e1); list-style: none; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); box-shadow: var(--ombre-levee); max-height: min(60vh, 420px); overflow-y: auto; animation: apparait .18s var(--allant); text-align: left; }
.suggestions li a { display: grid; gap: 1px; align-content: center; padding: .5rem .65rem; border-radius: var(--rayon-xs); text-decoration: none; color: var(--encre); min-height: 44px; }
.suggestions li a:hover, .suggestions li[aria-selected="true"] a { background: var(--primaire-pale); }
.suggestions__nom { font-weight: 600; }
.suggestions__lieu { color: var(--encre-2); font-size: .8125rem; }

.fil { padding-block: var(--e3); }
.fil ol { display: flex; flex-wrap: wrap; gap: var(--e2) .35rem; list-style: none; padding: 0; font-size: .8125rem; }
/* Les colonnes du pied de page empilent titre, texte et mention de source. */
.pied__grille > * > * + * { margin-top: var(--e4); }
.pied__grille > * > .pied__titre + * { margin-top: 0; }
.classement__rang { font-variant-numeric: tabular-nums; }
.fil li + li::before { content: "›"; color: var(--bord-fort); margin-right: .35rem; }
.fil a { color: var(--encre-2); text-decoration: none; }
.fil a:hover { color: var(--primaire); text-decoration: underline; }
.fil [aria-current] { color: var(--encre); font-weight: 600; }
.hero .fil { padding-block: 0; }
.hero .fil a, .hero .fil li + li::before { color: var(--sur-foret-3); }
.hero .fil [aria-current] { color: var(--sur-foret); }

/* ==========================================================================
   7. LE BANDEAU SOMBRE — tête de chaque page
   ========================================================================== */

.hero { position: relative; overflow: hidden; color: var(--sur-foret);
  background:
    radial-gradient(60rem 30rem at 85% -10%, rgba(158, 219, 185, .22), transparent 60%),
    radial-gradient(40rem 22rem at -10% 110%, rgba(46, 125, 91, .35), transparent 60%),
    linear-gradient(160deg, var(--foret-2), var(--foret) 55%, #0B2A20); }
/* Une trame très légère, comme le papier d'un carnet : la signature du site,
   sans photo à licencier. */
.hero::before {
  content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .35;
  background-image: linear-gradient(rgba(255, 255, 255, .035) 1px, transparent 1px);
  background-size: 100% 28px;
  -webkit-mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
  mask-image: linear-gradient(180deg, transparent, #000 40%, transparent);
}
.hero__int { position: relative; padding-block: clamp(1.75rem, 4vw, 2.75rem); display: grid; gap: var(--e5); }
.hero__corps h1 { color: var(--sur-foret); font-size: clamp(1.85rem, 1.3rem + 2.6vw, 3rem); max-width: 22ch; }
.hero--accueil .hero__corps h1 { font-size: clamp(2.1rem, 1.4rem + 3.2vw, 3.6rem); max-width: 15ch; }
.hero__eyebrow { display: inline-flex; align-items: flex-start; gap: .45rem; font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--sur-foret-2); }
.hero__eyebrow .icone { color: var(--menthe); flex: 0 0 auto; margin-top: .18em; }
.hero__chapeau { color: var(--sur-foret-2); font-size: 1.0625rem; max-width: 56ch; }
.hero__actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
/* Sur téléphone, deux boutons de largeurs différentes empilés font désordre :
   ils prennent toute la colonne et s'alignent. */
@media (max-width: 559px) { .hero__actions { display: grid; } .hero__actions .bouton { justify-content: center; } }
.hero__recherche { max-width: 36rem; }
.hero .bouton--secondaire { background: rgba(255, 255, 255, .06); color: var(--sur-foret); border-color: rgba(255, 255, 255, .28); }
.hero .bouton--secondaire:hover { background: rgba(255, 255, 255, .14); border-color: #fff; color: #fff; }
.hero .bouton:not(.bouton--secondaire) { background: var(--menthe); border-color: var(--menthe); color: var(--foret); }
.hero .bouton:not(.bouton--secondaire):hover { background: #B8E8CD; border-color: #B8E8CD; color: var(--foret); }

/* L'aparté du bandeau : sur l'accueil, une vraie fiche prise dans la base ; sur
   une fiche, la photo de l'établissement. */
.hero__aparte { display: none; }
.hero__aparte--photo { display: block; }
@media (min-width: 960px) {
  .hero--accueil .hero__int, .hero--aparte .hero__int { grid-template-columns: minmax(0, 1fr) minmax(0, 21rem); column-gap: var(--e8); align-items: center; }
  .hero--aparte .hero__int { grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); column-gap: var(--e7); align-items: start; }
  .hero--accueil .hero__corps, .hero--aparte .hero__corps { grid-column: 1; }
  .hero--accueil .hero__aparte, .hero--aparte .hero__aparte { display: block; grid-column: 2; }
  .hero--accueil .confiance, .hero--aparte .confiance { grid-column: 1 / -1; }
  .hero--aparte .hero__aparte { position: sticky; top: calc(var(--entete-h) + var(--e4)); }
}
.apercu__etiquette { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--sur-foret-3); margin-bottom: var(--e3); }
.apercu__carte { background: var(--surface); border-radius: var(--rayon); box-shadow: 0 22px 48px rgba(0, 0, 0, .32); padding: var(--e5); border-top: 4px solid var(--classe, var(--primaire)); transform: rotate(-1.2deg); transition: transform .3s var(--allant); }
.apercu__carte:hover { transform: rotate(0) translateY(-2px); }
.apercu__carte > * + * { margin-top: var(--e4); }
.apercu__photo { display: block; width: calc(100% + 2 * var(--e5)); margin: calc(-1 * var(--e5)) calc(-1 * var(--e5)) 0; max-width: none; aspect-ratio: 16 / 9; height: auto; object-fit: cover; border-radius: calc(var(--rayon) - 4px) calc(var(--rayon) - 4px) 0 0; background: var(--piste); }
.apercu__carte > .apercu__photo + * { margin-top: var(--e4); }
.apercu__tete { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: center; }
.apercu__nom { display: block; font-family: var(--titre); font-weight: 800; font-size: 1.05rem; line-height: 1.2; letter-spacing: -.02em; color: var(--encre); text-decoration: none; white-space: normal; }
.apercu__carte:hover .apercu__nom { color: var(--primaire); }
.apercu__lieu { display: block; font-size: .8125rem; color: var(--encre-2); margin-top: 2px; }
.apercu__phrase { font-size: .9375rem; line-height: 1.5; color: var(--encre); }
.apercu__chiffres { display: grid; gap: var(--e2); font-size: .8125rem; color: var(--encre-2); }
.apercu__chiffres strong { color: var(--encre); font-variant-numeric: tabular-nums; }
.apercu__lien { display: inline-flex; align-items: center; gap: .4rem; font-size: .875rem; font-weight: 700; text-decoration: none; }
.apercu__lien:hover { text-decoration: underline; }

.hero__kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
@media (min-width: 640px) { .hero__kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hero__kpi { background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .13); border-radius: var(--rayon-s); padding: var(--e3) var(--e4); display: grid; gap: 2px; backdrop-filter: blur(4px); }
.hero__kpi .kpi__val { font-family: var(--titre); font-weight: 800; font-size: 1.7rem; line-height: 1; letter-spacing: -.035em; color: var(--sur-foret); }
.hero__kpi .kpi__lib { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--sur-foret-3); }
.hero__kpi .kpi__note { color: var(--sur-foret-3); }

/* La réglette sur fond sombre. */
.hero__millesime { color: var(--sur-foret-3); }
.hero .reglette__valeur { color: var(--classe, var(--sur-foret)); }
.hero .reglette__sur, .hero .reglette__bornes { color: var(--sur-foret-3); }
.hero .reglette__piste { background: rgba(255, 255, 255, .08); }
.hero .reglette__pointe { border-top-color: var(--classe, var(--sur-foret)); }
.hero .jeton { background: rgba(255, 255, 255, .1); color: var(--sur-foret-2); }
.hero .bulletin__lieu { color: var(--sur-foret-2); }
.hero .bulletin__phrase { color: var(--sur-foret); }
.hero .etiquette { color: var(--sur-foret-3); }
.hero .tendance { --c: var(--sur-foret-2); }
/* Les liens clairs ne valent que sur le fond sombre : l'aparté est une carte
   blanche, ses liens reprennent les couleurs du corps du site. */
.hero :is(.hero__corps, .confiance, .fil) a:not(.bouton) { color: var(--sur-foret-2); }
.hero :is(.hero__corps, .confiance, .fil) a:not(.bouton):hover { color: var(--sur-foret); }
/* Les suggestions tombent sur un panneau blanc, à l'intérieur du bandeau :
   elles reprennent les couleurs du corps du site, pas celles du fond sombre. */
.hero .hero__corps .suggestions a { color: var(--encre); }
.hero .hero__corps .suggestions a:hover { color: var(--primaire); }

/* La puce de fraîcheur : un point vert qui respire, la date à côté. Elle dit
   « ce site est tenu à jour » avant que le lecteur ne se pose la question. */
.puce-maj { display: inline-flex; align-items: center; gap: .45rem; padding: .3rem .75rem .3rem .6rem; border-radius: 999px; background: rgba(158, 219, 185, .14); border: 1px solid rgba(158, 219, 185, .3); color: var(--menthe); font-size: .78rem; font-weight: 700; letter-spacing: .01em; white-space: nowrap; }
.puce-maj::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--menthe); box-shadow: 0 0 0 0 rgba(158, 219, 185, .6); animation: respire 2.4s ease-out infinite; }
.pied .puce-maj { color: var(--menthe); }
.confiance .puce-maj { font-size: .78rem; }

/* Les nouveautés : quelques jetons sous le bandeau d'accueil, datés. */
.nouveautes { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); }
.nouveautes__lib { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--sur-foret-3); }
.nouveautes a, .nouveautes span.jeton { display: inline-flex; align-items: center; gap: .4rem; padding: .35rem .8rem; border-radius: 999px; background: rgba(255, 255, 255, .07); border: 1px solid rgba(255, 255, 255, .14); color: var(--sur-foret); font-size: .8125rem; font-weight: 600; text-decoration: none; white-space: nowrap; transition: background .16s, border-color .16s; }
.nouveautes a:hover { background: rgba(255, 255, 255, .14); border-color: rgba(255, 255, 255, .4); color: #fff; }
.nouveautes .icone { color: var(--menthe); }

/* ==========================================================================
   8. LA CONFIANCE — mention de source, sur chaque page
   ========================================================================== */

.confiance { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e4); font-size: .8125rem; color: var(--encre-2); }
.confiance__badge { display: inline-flex; align-items: center; gap: .4rem; padding: .3rem .7rem .3rem .55rem; border-radius: 999px; background: var(--A-pale); color: var(--A); border: 1px solid var(--A-bord); font-weight: 700; font-size: .78rem; letter-spacing: .01em; white-space: nowrap; }
.confiance__badge .icone { color: var(--A); }
.confiance__item { display: inline-flex; align-items: center; gap: .35rem; white-space: nowrap; }
.confiance__item .icone { color: var(--encre-3); }
.hero .confiance { color: var(--sur-foret-2); }
.hero .confiance__badge, .pied .confiance__badge { background: rgba(158, 219, 185, .14); color: var(--menthe); border-color: rgba(158, 219, 185, .35); }
.hero .confiance__badge .icone, .pied .confiance__badge .icone { color: var(--menthe); }
.hero .confiance__item .icone, .pied .confiance__item .icone { color: var(--sur-foret-3); }
.hero .confiance a, .pied .confiance { color: var(--sur-foret-2); }

/* ==========================================================================
   9. Tuiles de chiffres clés
   ========================================================================== */

.kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--e3); }
@media (min-width: 640px) { .kpis { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.kpi { background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: var(--e4); display: grid; gap: var(--e1); align-content: start; }
.kpi__val { font-family: var(--titre); font-weight: 800; font-size: 1.75rem; line-height: 1; letter-spacing: -.035em; color: var(--c, var(--encre)); }
.kpi__val small { font-size: .5em; font-weight: 600; color: var(--encre-2); letter-spacing: 0; }
/* Le nombre animé vit dans une boîte isolée (contain) : ses changements de
   texte ne relancent jamais la mise en page du reste de la page. */
.kpi__nombre { display: inline-block; vertical-align: baseline; contain: layout style; }
.hero__kpi { contain: layout style; }
.hero__kpi .kpi__val small { color: var(--sur-foret-3); }
.kpi__lib { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); }
.kpi__note { font-size: .8125rem; color: var(--encre-3); }
.kpi--accent { border-color: var(--primaire-bord); background: var(--primaire-pale); }

/* ==========================================================================
   10. Pastille et réglette
   ========================================================================== */

.pastille { display: inline-grid; place-items: center; width: var(--t, 44px); height: var(--t, 44px); border-radius: calc(var(--t, 44px) / 4.2); background: var(--c, var(--encre-2)); color: #fff; font-family: var(--titre); font-weight: 800; font-size: calc(var(--t, 44px) * .56); line-height: 1; flex: 0 0 auto; }
.pastille--vide { background: var(--piste); color: var(--bord-fort); }

.reglette { display: block; }
.reglette__curseur { position: relative; height: 3.2rem; }
.reglette__valeur { position: absolute; bottom: .6rem; left: clamp(2.5rem, var(--p), calc(100% - 2.5rem)); transform: translateX(-50%); font-family: var(--titre); font-weight: 800; font-size: clamp(2.2rem, 1.5rem + 2.8vw, 3.1rem); line-height: 1; letter-spacing: -.04em; white-space: nowrap; color: var(--classe, var(--encre)); }
.reglette__sur { font-size: .34em; font-weight: 600; color: var(--encre-2); letter-spacing: 0; margin-left: .1em; }
.reglette__pointe { position: absolute; bottom: 0; left: clamp(7px, var(--p), calc(100% - 7px)); transform: translateX(-50%); width: 0; height: 0; border-left: 7px solid transparent; border-right: 7px solid transparent; border-top: 8px solid var(--classe, var(--encre)); }
.reglette__piste { display: flex; width: 100%; height: 36px; border-radius: var(--rayon-xs); overflow: hidden; background: var(--piste); }
.reglette__seg { flex: 0 0 var(--w); background: var(--c); display: grid; place-items: center; color: #fff; font-family: var(--titre); font-weight: 800; font-size: .8125rem; letter-spacing: .04em; opacity: .3; }
.reglette__seg.est-actif { opacity: 1; }
.reglette__lettre { line-height: 1; }
.reglette__bornes { display: flex; justify-content: space-between; margin-top: var(--e1); font-size: 11px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.reglette--moyenne .reglette__curseur { height: 2.5rem; }
.reglette--moyenne .reglette__valeur { font-size: 1.9rem; left: clamp(2rem, var(--p), calc(100% - 2rem)); }
.reglette--moyenne .reglette__piste { height: 26px; }
.reglette--moyenne .reglette__seg { font-size: .75rem; }
.reglette--petite .reglette__curseur { height: 1.6rem; }
.reglette--petite .reglette__valeur { font-size: 1.05rem; left: clamp(1.6rem, var(--p), calc(100% - 1.6rem)); }
.reglette--petite .reglette__piste { height: 14px; }
.reglette--petite .reglette__lettre, .reglette--petite .reglette__bornes { display: none; }

/* ==========================================================================
   11. Mesures, composantes, écarts, centile, lignes
   ========================================================================== */

.mesures > .mesure + .mesure { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--bord); }
.mesure__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e3); }
.mesure__titre { font-weight: 700; font-size: .9375rem; }
.mesure__valeur { font-family: var(--titre); font-weight: 800; font-size: 1.6rem; letter-spacing: -.03em; line-height: 1; }
.mesure__rail { position: relative; height: 14px; background: var(--piste); border-radius: 999px; }
.mesure__jauge { position: absolute; top: 0; bottom: 0; left: 0; background: linear-gradient(90deg, var(--primaire-sombre), var(--primaire)); border-radius: 999px; transform-origin: left center; }
.mesure__ecarts { display: flex; flex-wrap: wrap; gap: var(--e2) var(--e5); margin-top: var(--e3); }
.ecart { display: inline-flex; align-items: baseline; gap: .3rem; font-size: .8125rem; white-space: nowrap; }
.ecart__fleche { font-size: .85em; color: var(--c); line-height: 1; }
.ecart__val { font-weight: 700; color: var(--c); font-variant-numeric: tabular-nums; }
.ecart__ref { color: var(--encre-2); }
.ecart__moy { color: var(--encre-3); }
.ecart--sup { --c: var(--A); }
.ecart--inf { --c: var(--E); }
.ecart--egal { --c: var(--encre-2); }

.composantes > .composante + .composante { margin-top: var(--e5); padding-top: var(--e5); border-top: 1px solid var(--bord); }
.composante__tete { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e4); margin-bottom: var(--e3); }
.composante__nom { font-weight: 700; font-size: .9375rem; }
.composante__val { font-family: var(--titre); font-weight: 800; font-size: 1.45rem; letter-spacing: -.03em; line-height: 1; white-space: nowrap; }
.composante__rail { height: 10px; background: var(--piste); border-radius: 999px; overflow: hidden; }
.composante__jauge { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--primaire-sombre), var(--primaire)); transform-origin: left center; }
.composante__pied { display: flex; flex-wrap: wrap; justify-content: space-between; gap: var(--e2) var(--e4); margin-top: var(--e3); font-size: .8125rem; color: var(--encre-2); }
.composante--absente .composante__val { color: var(--encre-3); font-size: 1rem; }

.centile { display: block; }
.centile__piste { position: relative; display: block; height: 10px; border-radius: 999px; background: linear-gradient(90deg, var(--piste), var(--bord-fort)); }
.centile__pointe { position: absolute; top: -5px; bottom: -5px; width: 3px; background: var(--primaire); border-radius: 3px; transform: translateX(-1.5px); box-shadow: 0 0 0 2px var(--surface); }
.centile__bornes { display: flex; justify-content: space-between; margin-top: var(--e1); font-size: 11px; color: var(--encre-3); font-variant-numeric: tabular-nums; }

.ligne { display: grid; grid-template-columns: minmax(7rem, 36%) 1fr; gap: var(--e3); align-items: baseline; padding-block: var(--e3); border-bottom: 1px solid var(--bord); }
.lignes > .ligne:last-child { border-bottom: 0; padding-bottom: 0; }
.lignes > .ligne:first-child { padding-top: 0; }
.ligne__lib { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); line-height: 1.6; }
.ligne__val { font-size: .9375rem; }
.ligne--fort .ligne__val { font-weight: 700; }

/* Répartitions (niveaux, langues, filles/garçons) : petites barres nommées. */
.repartition { display: grid; gap: var(--e2); }
.repartition__ligne { display: grid; grid-template-columns: minmax(5rem, 30%) 1fr auto; gap: var(--e3); align-items: center; font-size: .9375rem; }
.repartition__lib { font-weight: 600; }
.repartition__rail { height: 8px; background: var(--piste); border-radius: 999px; overflow: hidden; }
.repartition__jauge { display: block; height: 100%; background: var(--primaire); border-radius: 999px; transform-origin: left center; }
.repartition__val { font-variant-numeric: tabular-nums; color: var(--encre-2); min-width: 3.2rem; text-align: right; }
.duo-barre { display: flex; height: 12px; border-radius: 999px; overflow: hidden; background: var(--piste); }
.duo-barre__a { background: var(--primaire); }
.duo-barre__b { background: var(--C); }
.duo-legende { display: flex; justify-content: space-between; gap: var(--e3); font-size: .8125rem; color: var(--encre-2); margin-top: var(--e3); }
.duo-legende b { color: var(--encre); }

/* ==========================================================================
   12. Bulletin (fiche), photo, sommaire
   ========================================================================== */

.bulletin { position: relative; overflow: hidden; border-top: 4px solid var(--classe, var(--bord)); }
.bulletin__lieu { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2) var(--e3); color: var(--encre-2); font-size: .9375rem; }
.jeton { display: inline-flex; align-items: center; gap: .3rem; padding: .2rem .6rem; border-radius: 999px; background: var(--piste); color: var(--encre-2); font-size: .75rem; font-weight: 700; letter-spacing: .03em; white-space: nowrap; }
.jeton--public { background: var(--primaire-pale); color: var(--primaire-sombre); }
.jeton--prive { background: var(--C-pale); color: #8A5F0E; }
.jeton--rep { background: var(--D-pale); color: #9A4A18; }
.bulletin__resume { display: flex; flex-wrap: wrap; align-items: baseline; gap: var(--e3) var(--e5); padding-top: var(--e5); border-top: 1px solid var(--bord); }
.hero .bulletin__resume { border-top-color: rgba(255, 255, 255, .14); }
.bulletin__phrase { font-family: var(--titre); font-weight: 600; font-size: 1.2rem; line-height: 1.35; text-wrap: pretty; flex: 1 1 20rem; max-width: 46ch; }
.bulletin__etat { display: grid; gap: var(--e3); flex: 0 0 auto; }
.bulletin__situation { font-size: .9375rem; color: var(--encre-2); }
.hero .bulletin__situation { color: var(--sur-foret-2); }
.bulletin__resume--nu { border-top: 0; padding-top: 0; align-items: center; }
.tendance { display: inline-flex; align-items: center; gap: .35rem; color: var(--c, var(--encre-2)); font-weight: 600; font-size: .9375rem; white-space: nowrap; }
.tendance__sym { font-size: 1.15em; line-height: 1; }

/* LA PHOTO. Un cadre blanc légèrement incliné, comme une photo posée sur le
   bulletin ; la légende nomme l'auteur et la licence, toujours. */
.photo { display: grid; gap: var(--e3); }
.photo__cadre { position: relative; display: block; background: var(--surface); padding: 6px; border-radius: var(--rayon); box-shadow: 0 22px 48px rgba(0, 0, 0, .32); transform: rotate(1.1deg); transition: transform .3s var(--allant); }
.photo__cadre:hover { transform: rotate(0) scale(1.01); }
/* height:auto neutralise l'attribut height de l'image, sinon il l'emporterait
   sur le rapport 4:3 du cadre. */
.photo__cadre img { display: block; width: 100%; height: auto; aspect-ratio: 4 / 3; object-fit: cover; border-radius: calc(var(--rayon) - 6px); background: var(--piste); }
/* Le panoramique : une fenêtre 4:3 sur une image équirectangulaire de quatre
   largeurs, calée verticalement sur l'horizon. */
.photo__pano { position: relative; display: block; aspect-ratio: 4 / 3; overflow: hidden; border-radius: calc(var(--rayon) - 6px); background: var(--piste); }
.photo__pano img { position: absolute; top: 50%; left: var(--x, -150%); width: 400%; max-width: none; height: auto; aspect-ratio: auto; transform: translateY(-50%); border-radius: 0; }
/* Tranche à cheval sur le bord : le fond répété fait le tour sans couture. */
.photo__pano--boucle { background-repeat: repeat-x; background-size: 400% auto; background-position-y: 50%; }
.photo__pano--boucle img { opacity: 0; }
.photo__source { position: absolute; left: 14px; bottom: 14px; padding: .25rem .6rem; border-radius: 999px; background: rgba(15, 51, 39, .78); color: #fff; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; backdrop-filter: blur(4px); }
.photo__legende { font-size: .75rem; color: var(--sur-foret-3); line-height: 1.5; }
.photo__legende a { color: var(--sur-foret-2); }
.photo__actions { display: flex; flex-wrap: wrap; gap: var(--e2); }
.photo__actions .bouton { min-height: 40px; padding-inline: 1rem; font-size: 14px; }
/* Sans photo : un cadre vide qui dit quoi faire, pas un trou. */
.photo--absente .photo__cadre { transform: none; box-shadow: none; background: rgba(255, 255, 255, .06); border: 1px dashed rgba(255, 255, 255, .3); padding: var(--e5); display: grid; gap: var(--e3); justify-items: start; color: var(--sur-foret-2); font-size: .9375rem; }
.photo--absente .photo__cadre .icone { color: var(--menthe); }
.photo--absente .photo__cadre strong { color: var(--sur-foret); }
@media (max-width: 959px) {
  .photo__cadre { transform: none; }
  .hero__aparte--photo { max-width: 34rem; }
}

.sommaire { display: none; }
@media (min-width: 960px) {
  .sommaire { display: block; position: sticky; top: calc(var(--entete-h) + var(--e4)); }
  .sommaire ol { list-style: none; margin: 0; padding: 0; display: grid; gap: 2px; }
  .sommaire a { display: block; padding: .4rem .7rem; border-left: 2px solid var(--bord); font-size: .875rem; color: var(--encre-2); text-decoration: none; white-space: normal; transition: color .16s, border-color .16s; }
  .sommaire a:hover, .sommaire a.est-actif { color: var(--primaire-sombre); border-color: var(--primaire); }
  .sommaire__titre { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-3); margin-bottom: var(--e3); padding-left: .7rem; }
}

.questions > .question { border-bottom: 1px solid var(--bord); }
.questions > .question:last-child { border-bottom: 0; }
.question > summary { display: flex; align-items: baseline; gap: var(--e3); padding-block: var(--e4); cursor: pointer; list-style: none; font-weight: 700; font-size: .9375rem; transition: color .16s; }
.question > summary::-webkit-details-marker { display: none; }
.question > summary:hover { color: var(--primaire); }
.question__chevron { flex: 0 0 auto; margin-left: auto; color: var(--encre-3); transition: transform .22s var(--allant), color .16s; }
.question[open] > summary { color: var(--primaire-sombre); }
.question[open] .question__chevron { transform: rotate(180deg); color: var(--primaire); }
.question__reponse { padding-bottom: var(--e4); color: var(--encre-2); font-size: .9375rem; animation: apparait .2s var(--allant); }

.jeu { padding-bottom: var(--e4); border-bottom: 1px solid var(--bord); }
.jeux > .jeu + .jeu { padding-top: var(--e4); }
.jeux > .jeu:last-child { border-bottom: 0; padding-bottom: 0; }
.jeu > * + * { margin-top: var(--e4); }
.jeu code { font-size: .8125rem; color: var(--encre-2); word-break: break-word; }

.duo__tete { display: flex; align-items: center; gap: var(--e3); }
.duo__note { font-family: var(--titre); font-weight: 800; font-size: 2.1rem; line-height: 1; letter-spacing: -.04em; color: var(--classe, var(--encre)); font-variant-numeric: tabular-nums; }
.duo__nom { font-size: 1.15rem; }
.duo__sur { font-size: .42em; font-weight: 600; color: var(--encre-2); letter-spacing: 0; }

/* Le badge à coller sur le site de l'établissement : l'aperçu, puis le code. */
.badge__apercu { display: block; max-width: 100%; height: auto; }
.badge__code { display: block; font: 12px/1.5 ui-monospace, 'Cascadia Mono', Consolas, monospace; color: var(--encre-2); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-xs); padding: var(--e3); white-space: pre-wrap; overflow-wrap: anywhere; user-select: all; }

/* ==========================================================================
   13. Filtres, listes, tableau de classement
   ========================================================================== */

.filtres { display: grid; gap: var(--e3); scroll-margin-top: var(--e5); }
.filtres__groupe { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e2); }
.filtres__lib { font-size: 11px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); min-width: 4.5rem; }
.pills { display: flex; flex-wrap: wrap; gap: var(--e2); padding: 0; list-style: none; }
.pill { display: inline-flex; align-items: center; min-height: 40px; padding: 0 .95rem; border-radius: 999px; border: 1px solid var(--bord); background: var(--surface); color: var(--encre-2); text-decoration: none; font-size: .875rem; font-weight: 600; cursor: pointer; transition: background .16s, border-color .16s, color .16s, transform .12s var(--allant); }
.pill:hover { border-color: var(--bord-fort); color: var(--encre); }
.pill:active { transform: scale(.97); }
.pill[aria-current="true"], .pill[aria-pressed="true"] { background: var(--primaire); border-color: var(--primaire); color: #fff; }

.liste { list-style: none; padding: 0; display: grid; gap: var(--e2); }
.rang { display: grid; grid-template-columns: auto auto 1fr auto; gap: var(--e3); align-items: center; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-s); box-shadow: var(--ombre); padding: var(--e3) var(--e4); transition: border-color .16s, box-shadow .16s, transform .16s var(--allant); }
.rang:hover { border-color: var(--primaire-bord); box-shadow: var(--ombre-levee); transform: translateY(-1px); }
.rang--simple { grid-template-columns: 1fr auto; }
.rang--sansnum { grid-template-columns: auto 1fr auto; }
.rang--numerote { grid-template-columns: 2rem auto 1fr auto; }
.rang__num { font-variant-numeric: tabular-nums; color: var(--encre-3); font-weight: 700; font-size: .8125rem; text-align: right; }
.rang__nom { font-weight: 600; text-decoration: none; color: inherit; display: block; }
.rang:hover .rang__nom { color: var(--primaire-sombre); }
.rang__meta { display: block; color: var(--encre-2); font-size: .8125rem; font-weight: 400; margin-top: 2px; }
.rang__note { font-family: var(--titre); font-weight: 800; font-size: 1.3rem; letter-spacing: -.03em; text-align: right; min-width: 2ch; }
.rang__apres { display: flex; align-items: center; gap: var(--e3); }
/* Les trois premiers d'un podium portent une médaille discrète. */
.rang--podium .rang__num { color: var(--primaire); }

/* Le tableau de classement : dense, lisible, filtrable. */
.outils-classement { display: flex; flex-wrap: wrap; gap: var(--e3); align-items: center; }
.outils-classement input[type="search"] { flex: 1 1 16rem; min-width: 0; font: inherit; font-size: 16px; padding: .6rem 1rem; border: 1px solid var(--bord-fort); border-radius: 999px; background: var(--surface); }
.outils-classement input:focus { border-color: var(--primaire); box-shadow: 0 0 0 4px var(--primaire-lueur); outline: none; }
.classement-cadre { max-width: 100%; }
.classement.est-collee thead th { box-shadow: inset 0 -1px 0 var(--bord), 0 6px 12px -6px rgba(21, 37, 29, .28); }
.classement { width: 100%; border-collapse: collapse; font-size: .9375rem; }
.classement th, .classement td { padding: .7rem .6rem; border-bottom: 1px solid var(--bord); text-align: right; white-space: nowrap; vertical-align: middle; }
.classement th:first-child, .classement td:first-child { text-align: right; padding-left: 0; width: 2.5rem; color: var(--encre-3); font-weight: 700; font-size: .8125rem; }
.classement th:nth-child(2), .classement td:nth-child(2) { text-align: left; white-space: normal; min-width: 14rem; }
.classement th:last-child, .classement td:last-child { padding-right: 0; }
/* Le fil des colonnes reste visible quand on descend la liste. Son fond gris
   très clair le distingue des lignes blanches : posé ou collé, on le lit comme
   un bandeau, jamais comme une ligne du classement. */
.classement thead th { position: sticky; top: var(--entete-h); background: var(--fond); z-index: 2; font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); font-weight: 700; box-shadow: inset 0 -1px 0 var(--bord); }
.classement thead th::after { content: ""; position: absolute; inset: -1px 0 auto; height: 1px; background: var(--surface); }
.classement tbody tr { transition: background .12s; }
.classement tbody tr:hover { background: var(--fond); }
.classement tbody tr:last-child td { border-bottom: 0; }
.classement__etab { display: flex; align-items: center; gap: var(--e3); }
.classement__nom { font-weight: 600; text-decoration: none; color: inherit; }
.classement__nom:hover { color: var(--primaire-sombre); }
.classement__meta { display: block; font-size: .8125rem; color: var(--encre-2); margin-top: 1px; }
.classement__note { font-family: var(--titre); font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; color: var(--c, var(--encre)); }
.classement tr[hidden] { display: none; }
.classement__vide { padding: var(--e5); text-align: center; color: var(--encre-2); }
.mobile-seul { display: none; }
@media (max-width: 759px) {
  .masquable { display: none; }
  .mobile-seul { display: inline; }
  .classement th, .classement td { padding: .6rem .4rem; }
  .classement th:first-child, .classement td:first-child { width: 1.6rem; }
  .classement th:nth-child(2), .classement td:nth-child(2) { min-width: 0; }
}

/* ==========================================================================
   14. Cartes de département, dispositifs, étapes
   ========================================================================== */

.carte-dept { display: grid; grid-template-columns: auto 1fr; gap: var(--e3) var(--e4); align-items: center; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon-s); padding: var(--e4); text-decoration: none; color: inherit; transition: border-color .16s, box-shadow .16s, transform .16s var(--allant); }
.carte-dept:hover { border-color: var(--primaire-bord); box-shadow: var(--ombre-levee); transform: translateY(-2px); color: inherit; }
.carte-dept__code { font-family: var(--titre); font-weight: 800; font-size: 1rem; color: var(--primaire-sombre); background: var(--primaire-pale); border-radius: var(--rayon-xs); padding: .4rem .5rem; line-height: 1; min-width: 2.6rem; text-align: center; }
.carte-dept__nom { font-weight: 700; display: block; }
.carte-dept__region { display: block; font-size: .8125rem; color: var(--encre-2); }
.carte-dept { align-content: start; }
.carte-dept__pied { grid-column: 1 / -1; margin-top: auto; display: flex; justify-content: space-between; align-items: center; gap: var(--e3); font-size: .8125rem; color: var(--encre-2); padding-top: var(--e3); border-top: 1px solid var(--bord); }
.carte-dept__note { font-family: var(--titre); font-weight: 800; font-size: 1.1rem; color: var(--encre); }
.carte-dept__lien { color: var(--primaire); font-weight: 600; display: inline-flex; align-items: center; gap: .3rem; }

.dispo { display: grid; gap: var(--e3); grid-template-rows: auto auto 1fr auto; align-content: stretch; background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e5); text-decoration: none; color: inherit; transition: border-color .16s, box-shadow .16s, transform .16s var(--allant); }
.dispo:hover { border-color: var(--primaire-bord); box-shadow: var(--ombre-levee); transform: translateY(-2px); color: inherit; }
.dispo__icone { width: 44px; height: 44px; border-radius: var(--rayon-s); display: grid; place-items: center; background: var(--primaire-pale); color: var(--primaire-sombre); transition: transform .2s var(--allant); }
.dispo:hover .dispo__icone, .entree-palmares:hover .dispo__icone { transform: rotate(-6deg) scale(1.08); }
.dispo__icone .icone { width: 22px; height: 22px; }
.dispo h3 { font-size: 1.05rem; }
.carte :is(h2, h3, h4) > a { text-decoration: none; color: inherit; }
.carte :is(h2, h3, h4) > a:hover { color: var(--primaire); text-decoration: underline; }
.dispo p { color: var(--encre-2); font-size: .9375rem; }
.dispo__n { font-size: .8125rem; color: var(--primaire); font-weight: 700; align-self: end; }
@media (min-width: 1000px) { .dispo { padding: var(--e4); } .dispo h3 { font-size: 1rem; } }

.etapes { display: grid; gap: var(--e4); counter-reset: etape; }
@media (min-width: 760px) { .etapes { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.etape { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; }
.etape::before { counter-increment: etape; content: counter(etape); width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; background: var(--foret); color: var(--menthe); font-family: var(--titre); font-weight: 800; }
.etape h3 { font-size: 1rem; }
.etape p { color: var(--encre-2); font-size: .9375rem; }

.entree-palmares { display: grid; gap: var(--e3); background: var(--surface); border: 1px solid var(--bord); border-radius: var(--rayon); padding: var(--e5); }
.entree-palmares__liens { display: flex; flex-wrap: wrap; gap: var(--e2); }
.entree-palmares__liens a { font-size: .875rem; }

/* ==========================================================================
   15. Tableaux, boutons, carte, accueil, pied
   ========================================================================== */

/* Quand un tableau de calcul est plus large que la colonne, il défile dans son
   cadre. Une ombre apparaît au bord concerné tant qu'il reste du contenu de ce
   côté : le lecteur sait qu'il y a une suite, sans qu'on ait à l'écrire. */
.tableau {
  overflow-x: auto; max-width: 100%;
  background:
    linear-gradient(90deg, var(--surface) 32%, rgba(255,255,255,0)) left center / 26px 100% no-repeat local,
    linear-gradient(90deg, rgba(255,255,255,0), var(--surface) 68%) right center / 26px 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgba(21,37,29,.16), rgba(21,37,29,0)) left center / 11px 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgba(21,37,29,.16), rgba(21,37,29,0)) right center / 11px 100% no-repeat scroll;
}
table { border-collapse: collapse; width: 100%; font-size: .9375rem; }
caption { text-align: left; color: var(--encre-2); font-size: .8125rem; padding-bottom: var(--e3); }
th, td { padding: .6rem .55rem; text-align: right; border-bottom: 1px solid var(--bord); white-space: nowrap; }
/* Les en-têtes peuvent se replier sur deux lignes : c’est ce qui permet à un
   tableau de six colonnes de tenir dans la colonne d’une fiche. */
thead th { white-space: normal; vertical-align: bottom; line-height: 1.25; }
.fiche table { font-size: .875rem; }
th:first-child, td:first-child { text-align: left; white-space: normal; padding-left: 0; }
th:last-child, td:last-child { padding-right: 0; }
@media (max-width: 759px) {
  table { font-size: .8125rem; }
  th, td { padding: .5rem .3rem; }
}
/* Un tableau de calcul ne se lit pas de travers sur un téléphone. En dessous de
   960 px, chaque ligne devient une carte : l'en-tête de ligne fait le titre, et
   chaque cellule affiche le nom de sa colonne en regard de sa valeur. */
@media (max-width: 959px) {
  .table-cartes { display: block; }
  .table-cartes thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .table-cartes tbody, .table-cartes tfoot, .table-cartes tr, .table-cartes th, .table-cartes td { display: block; }
  .table-cartes tr {
    border: 1px solid var(--bord); border-radius: var(--rayon-s);
    padding: var(--e3) var(--e4); background: var(--surface);
  }
  .table-cartes tr + tr, .table-cartes tfoot tr { margin-top: var(--e3); }
  .table-cartes tfoot tr { background: var(--fond-2); border-color: var(--bord-fort); }
  .table-cartes tbody th[scope=row], .table-cartes tfoot th[scope=row] {
    padding: 0 0 var(--e2); margin-bottom: var(--e2); border-bottom: 1px solid var(--bord);
    font-family: var(--titre); font-weight: 800; font-size: 1rem; text-align: left; white-space: normal;
  }
  .table-cartes td {
    display: flow-root; padding: .3rem 0; border: 0; text-align: right; white-space: normal;
  }
  .table-cartes td::before {
    content: attr(data-lib); float: left; max-width: 55%; margin-right: var(--e3); text-align: left;
    font-size: .8125rem; font-weight: 600; color: var(--encre-2);
  }
  .table-cartes th[scope="row"] a { color: inherit; text-decoration: none; }
  .table-cartes th[scope="row"] a:hover { color: var(--primaire); text-decoration: underline; }
  .table-cartes td:not([data-lib]) { display: none; }
  .table-cartes caption { padding-bottom: var(--e3); }
}
@media (max-width: 400px) {
  table { font-size: .78rem; }
  .fiche table { font-size: .72rem; }
  th, td { padding-inline: .12rem; }
  caption { font-size: .75rem; }
}
thead th { font-size: 11px; letter-spacing: .1em; text-transform: uppercase; color: var(--encre-2); font-weight: 700; }
tbody tr { transition: background .12s; }
tbody tr:hover { background: var(--fond); }
tbody tr:last-child td, tbody tr:last-child th { border-bottom: 0; }
tfoot th, tfoot td { border-top: 2px solid var(--encre); border-bottom: 0; font-weight: 700; }

.actions { display: flex; flex-wrap: wrap; gap: var(--e3); }
.bouton { display: inline-flex; align-items: center; justify-content: center; gap: .4rem; min-height: 48px; padding: 0 1.45rem; background: var(--primaire); color: #fff; text-decoration: none; border: 1px solid var(--primaire); border-radius: 999px; font: 600 15px var(--texte); cursor: pointer; max-width: 100%; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 2px 8px var(--primaire-lueur); transition: background .16s, border-color .16s, transform .12s var(--allant), box-shadow .16s; }
.bouton:hover { background: var(--primaire-sombre); border-color: var(--primaire-sombre); color: #fff; box-shadow: 0 4px 14px var(--primaire-lueur); }
.bouton:active { transform: scale(.98); }
.bouton--secondaire { background: var(--surface); color: var(--primaire-sombre); border-color: var(--bord-fort); box-shadow: none; }
.bouton--secondaire:hover { background: var(--primaire-pale); border-color: var(--primaire); color: var(--primaire-sombre); box-shadow: none; }
.lien-suite { display: inline-flex; align-items: center; gap: .35rem; font-weight: 600; text-decoration: none; }
.lien-suite:hover { text-decoration: underline; }

.carte-geo { height: 300px; border-radius: var(--rayon-s); border: 1px solid var(--bord); background: var(--piste); overflow: hidden; }
.carte-geo__attente { display: grid; place-items: center; color: var(--encre-2); font-size: .875rem; height: 100%; margin: 0; }

.echelle { display: grid; gap: var(--e2); }
.echelle__barre { display: flex; height: 32px; border-radius: var(--rayon-xs); overflow: hidden; }
.echelle__seg { flex: 0 0 var(--w); background: var(--c); display: grid; place-items: center; color: #fff; font-family: var(--titre); font-weight: 800; font-size: .8125rem; letter-spacing: .04em; }
.echelle__bornes { position: relative; height: 1.3em; font-size: 11px; color: var(--encre-3); font-variant-numeric: tabular-nums; }
.echelle__bornes span { position: absolute; left: var(--x); transform: translateX(-50%); }
.echelle__bornes span:first-child { transform: none; }
.echelle__bornes span:last-child { transform: translateX(-100%); }
.etiquette--rang { min-height: 2.6em; }

.poids { display: grid; gap: var(--e4); }
.poids__ligne { display: grid; grid-template-columns: 1fr auto; gap: var(--e2) var(--e3); align-items: baseline; }
.poids__nom { font-weight: 600; font-size: .9375rem; }
.poids__pts { font-family: var(--titre); font-weight: 800; font-size: 1.2rem; letter-spacing: -.03em; }
.poids__rail { grid-column: 1 / -1; height: 9px; background: var(--piste); border-radius: 999px; overflow: hidden; }
.poids__jauge { display: block; height: 100%; background: var(--primaire); border-radius: 999px; transform-origin: left center; }
.poids__jauge--accent { background: var(--A); }
.limites { list-style: none; padding: 0; display: grid; gap: var(--e3); }
.limites li { display: grid; grid-template-columns: auto 1fr; gap: var(--e3); align-items: start; font-size: .9375rem; }
.limites li::before { content: "—"; color: var(--bord-fort); font-weight: 700; line-height: 1.65; }

.pied { border-top: 1px solid var(--bord); color: var(--sur-foret-2); margin-top: var(--e8); padding-block: var(--e7) var(--e5);
  background: radial-gradient(40rem 20rem at 100% 0, rgba(158, 219, 185, .12), transparent 60%), var(--foret); }
.pied__grille { display: grid; gap: var(--e5); }
@media (min-width: 760px) { .pied__grille { grid-template-columns: 1.2fr 1fr 1.5fr; } }
.pied__titre { font-size: 11px; font-weight: 700; letter-spacing: .11em; text-transform: uppercase; color: var(--sur-foret-3); margin-bottom: var(--e4); }
.pied__marque { font-family: var(--titre); font-weight: 800; font-size: 1.15rem; color: var(--sur-foret); margin-bottom: var(--e2); }
.pied__texte { color: var(--sur-foret-2); font-size: .9375rem; }
.pied ul { list-style: none; padding: 0; font-size: .9375rem; display: grid; gap: var(--e2); }
.pied ul a, .pied a { color: var(--sur-foret); text-decoration: none; }
.pied ul a:hover, .pied a:hover { color: var(--menthe); text-decoration: underline; }
.pied__bas { margin-top: var(--e5); padding-top: var(--e4); border-top: 1px solid rgba(255, 255, 255, .12); color: var(--sur-foret-3); font-size: .8125rem; }
.pied__bas + .pied__bas { margin-top: var(--e3); padding-top: 0; border-top: 0; }

.source { padding-top: var(--e5); border-top: 1px solid var(--bord); font-size: .8125rem; color: var(--encre-2); max-width: 72ch; }
.spark { display: block; width: 100%; height: auto; }

/* ==========================================================================
   16. Séquence de chargement, fiche, mouvement réduit
   ========================================================================== */

@keyframes remplit { from { transform: scaleX(0); } to { transform: scaleX(1); } }
/* Le curseur est centré par translateX(-50 %) : l’animation doit le conserver,
   sinon son état final (fill both) décale la valeur d’une demi-largeur. */
@keyframes seLeve { from { opacity: 0; transform: translate(-50%, -8px); } to { opacity: 1; transform: translate(-50%, 0); } }
@keyframes sAllume { from { opacity: .3; } }
@keyframes apparait { from { opacity: 0; transform: translateY(-4px); } }
@keyframes respire { 0% { box-shadow: 0 0 0 0 rgba(158, 219, 185, .55); } 70% { box-shadow: 0 0 0 7px rgba(158, 219, 185, 0); } 100% { box-shadow: 0 0 0 0 rgba(158, 219, 185, 0); } }
@keyframes sePose { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.mesure__jauge, .composante__jauge, .poids__jauge, .repartition__jauge { animation: remplit .62s var(--allant) both; animation-delay: calc(var(--i, 0) * 70ms); }
.reglette__valeur, .reglette__pointe { animation: seLeve .5s var(--allant) both; animation-delay: 120ms; }
.reglette__seg.est-actif { animation: sAllume .6s var(--allant) both; animation-delay: 260ms; }
/* Les cartes se posent en entrant dans l'écran. Sans script, elles sont
   simplement là : la classe ne s'applique qu'avec .a-script. */
.a-script .a-poser { opacity: 0; transform: translateY(14px); }
.a-script .a-poser.est-pose { animation: sePose .55s var(--allant) both; }

.fiche { display: grid; grid-template-columns: minmax(0, 1fr); gap: var(--e6); }
.fiche__colonne { display: grid; gap: var(--e6); align-content: start; }
@media (min-width: 960px) {
  :root { --entete-h: 64px; }
  .fiche { grid-template-columns: 11rem minmax(0, 1.7fr) minmax(0, 1fr); align-items: start; }
  .ligne { grid-template-columns: minmax(7.5rem, 38%) 1fr; }
}

@media print {
  .entete, .bande-recherche, .pied, .nav__bouton, .sommaire, .encart, .photo__actions, .hero__actions { display: none !important; }
  .hero { background: none; color: var(--encre); }
  .hero .fil a, .hero__chapeau, .hero .confiance, .hero .bulletin__lieu, .hero .bulletin__situation { color: var(--encre-2); }
  .hero__corps h1, .hero .bulletin__phrase, .hero__kpi .kpi__val { color: var(--encre); }
  .carte, .hero__kpi { box-shadow: none; border-color: #bbb; break-inside: avoid; }
  .a-script .a-poser { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after { animation-duration: .01ms !important; animation-delay: 0ms !important; transition-duration: .01ms !important; }
  .a-script .a-poser { opacity: 1; transform: none; }
  .puce-maj::before { animation: none; }
}