/* /statistiques-bac — feuille propre à la page.
 * =============================================
 *
 * Chargée par cette page seule. Rien ici ne va dans `styles.css`, qui est
 * servie par tout le site et déjà au-dessus de son budget.
 *
 * ⚠️ Le piège de spécificité du site : les règles larges du corps d'article
 * (`.guide-body ul`, `.guide-body li`…) battent une classe seule. Tout ce qui
 * suit est donc qualifié par son conteneur, et les listes qui portent des
 * graphiques annulent explicitement les puces et les marges héritées.
 *
 * Le vocabulaire de couleur est celui du simulateur : l'or code une mention
 * obtenue, les états sans mention restent neutres, et il n'y a pas de rouge
 * punitif sur cette page. La teinte n'est jamais le seul encodage — chaque
 * série porte sa légende en toutes lettres.
 */

/* ------------------------------------------------------------------ *
 * Modules
 * ------------------------------------------------------------------ */

.guide-body .stats-module {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 24px 0;
}





.guide-body .stats-these {
  font-size: 1rem;
  color: var(--text-secondary);
  margin: 0 0 16px;
}

/* ------------------------------------------------------------------ *
 * L'outil du hero
 * ------------------------------------------------------------------ */

.guide-body .stats-tool {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 0 0 28px;
}

.stats-tool-champ {
  display: flex;
  align-items: baseline;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 18px;
}

.stats-tool-champ label {
  font-size: 0.95rem;
  color: var(--text-secondary);
}

.stats-tool-champ input {
  width: 5.5em;
  padding: 10px 12px;
  font: inherit;
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stats-tool-champ input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.stats-tool-unit {
  color: var(--text-muted);
  font-size: 1.05rem;
}

.stats-badge {
  font-size: 0.76rem;
  color: var(--bg-primary);
  background: var(--gold);
  border-radius: 999px;
  padding: 3px 10px;
  font-weight: 600;
}

.stats-readout { margin: 16px 0 0; }

.guide-body .stats-etat {
  display: block;
  font-size: 1.35rem;
  font-weight: 700;
  color: var(--text-primary);
  margin: 0 0 6px;
}

.guide-body .stats-etat.is-mention { color: var(--gold); }

.guide-body .stats-readout p {
  margin: 0 0 6px;
  color: var(--text-secondary);
  font-size: 0.95rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Barre empilée (issues du bac, composition d'une génération)
 * ------------------------------------------------------------------ */

.stats-bar {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.stats-bar-seg { transition: opacity var(--transition-fast); }

/* La bande du visiteur : elle se distingue par un liseré et non par une
   couleur de plus, pour que la rampe de mentions garde son sens. */
.stats-bar-seg.is-vous {
  stroke: #ffffff;
  stroke-width: 1.6;
  stroke-opacity: 0.9;
}

.guide-body .stats-legende {
  list-style: none;
  padding: 0;
  margin: 12px 0 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 16px;
}

.guide-body .stats-legende li {
  display: flex;
  align-items: center;
  gap: 7px;
  margin: 0;
  padding: 0;
  font-size: 0.84rem;
  color: var(--text-secondary);
}

.guide-body .stats-legende li::before { content: none; }

.guide-body .stats-legende li.is-vous {
  color: var(--text-primary);
  font-weight: 600;
}

.stats-puce {
  width: 11px;
  height: 11px;
  border-radius: 3px;
  flex: none;
  display: inline-block;
}

/* Une série tracée en points se légende par un point, pas par un carré. */
.stats-puce.is-ronde { border-radius: 50%; }

/* ------------------------------------------------------------------ *
 * Waffle des mentions
 * ------------------------------------------------------------------ */

.stats-waffle {
  display: block;
  width: 100%;
  max-width: 320px;
  margin: 0 auto;
  height: auto;
}

.stats-waffle-case { transition: opacity var(--transition-fast); }
.stats-waffle:hover .stats-waffle-case { opacity: 0.45; }
.stats-waffle .stats-waffle-case:hover { opacity: 1; }


/* ------------------------------------------------------------------ *
 * Spécialités et écart filles-garçons
 * ------------------------------------------------------------------ */

.guide-body .stats-specialites {
  list-style: none;
  padding: 0;
  margin: 16px 0 0;
}

.guide-body .stats-specialites li {
  display: grid;
  grid-template-columns: minmax(6.5em, 34%) 1fr auto;
  align-items: center;
  gap: 10px;
  margin: 0 0 8px;
  padding: 0;
}

.guide-body .stats-specialites li::before { content: none; }

.stats-spe-nom { font-size: 0.86rem; color: var(--text-secondary); }

.stats-spe-piste {
  height: 14px;
  border-radius: var(--radius-sm);
  background: var(--bg-overlay);
  overflow: hidden;
}

.stats-spe-barre {
  display: block;
  height: 100%;
  background: rgba(255, 255, 255, 0.3);
}

.stats-spe.is-vedette .stats-spe-barre { background: var(--gold); }
.stats-spe.is-vedette .stats-spe-nom { color: var(--text-primary); font-weight: 600; }

.stats-spe-val {
  font-size: 0.84rem;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}



/* Les libellés du dumbbell sont dans le SVG, donc dimensionnés en unités de
   viewBox : 3,2 sur 100 de large donne un corps stable quelle que soit la
   largeur rendue, là où une taille en pixels grossirait au rétrécissement. */


/* ------------------------------------------------------------------ *
 * Le temps long
 * ------------------------------------------------------------------ */

.stats-courbe {
  display: block;
  width: 100%;
  height: auto;
}

/* ⚠️ Tout texte posé DANS un SVG se dimensionne en unités de viewBox, pas en
   pixels : sans taille explicite il hérite du corps de la page et se retrouve
   multiplié par l'échelle du tracé. La première version des annotations est
   ainsi sortie en capitales géantes par-dessus les aires. Le viewBox fait
   100 de large, donc 2,2 donne une étiquette lisible sans écraser la figure. */
/* Un filet à la couleur du module sépare les bandes empilées : sans lui, deux
   gris voisins se lisent comme une seule aire et l'apparition d'une voie se
   perd, alors que c'est tout le propos du graphique. */
.stats-aire {
  stroke: var(--bg-elevated);
  stroke-width: 0.25;
}

.stats-repere-txt {
  fill: rgba(255, 255, 255, 0.55);
  font-size: 2.2px;
  font-family: inherit;
}

.stats-repere {
  stroke: rgba(255, 255, 255, 0.35);
  stroke-width: 0.3;
  stroke-dasharray: 1 1;
}

.stats-repere.is-anomalie { stroke: var(--blue); stroke-opacity: 0.75; }

.stats-marqueur-parents { stroke: #ffffff; stroke-width: 0.45; }
.stats-courbe-parents { fill: #ffffff; }

.stats-parents-controles {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 18px 0 10px;
}

.stats-parents-controles label {
  font-size: 0.92rem;
  color: var(--text-secondary);
}

.stats-parents-controles input {
  width: 6em;
  padding: 8px 10px;
  font: inherit;
  color: var(--text-primary);
  background: var(--bg-primary);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.stats-parents-controles input:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}

.guide-body .stats-parents-out {
  margin: 0;
  color: var(--text-primary);
  font-size: 0.98rem;
  line-height: 1.55;
}

.guide-body .stats-parents-complement {
  margin: 8px 0 0;
  color: var(--text-secondary);
  font-size: 0.9rem;
  line-height: 1.5;
}

/* ------------------------------------------------------------------ *
 * Repli sans JavaScript
 * ------------------------------------------------------------------ *
 *
 * Même logique que le simulateur : `stats-ready` est posée par le module en
 * fin d'initialisation, pas par l'inline du <head>. Si le module ne s'exécute
 * pas, le visiteur garde la prose (qui porte tous les chiffres) et ne voit ni
 * conteneur vide ni contrôle mort. */

.stats-interactif { display: none; }
.stats-ready .stats-interactif { display: block; }
.stats-ready .stats-noscript { display: none; }

.guide-body .stats-noscript {
  background: var(--bg-elevated);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  padding: 20px;
  margin: 24px 0;
  color: var(--text-secondary);
}

.guide-body .stats-noscript p:last-child { margin-bottom: 0; }

/* ------------------------------------------------------------------ *
 * Mouvement réduit
 * ------------------------------------------------------------------ */

@media (prefers-reduced-motion: reduce) {
  .stats-bar-seg,
  .stats-waffle-case {
    transition: none;
  }
}

@media (max-width: 520px) {
  .guide-body .stats-specialites li {
    grid-template-columns: 1fr auto;
  }
  .guide-body .stats-specialites .stats-spe-piste {
    grid-column: 1 / -1;
    order: 3;
  }
}

/* Le sommaire n'a plus rien à surcharger ici : la mise en colonne de la flèche,
 * née sur cette page parce que ses libellés sont des thèses qui passent à la
 * ligne, est remontée dans `styles.css` le 2026-08-29. Elle y sert toute page
 * qui adopte `.chapter-toc`, ce qu'une correction locale ne pouvait pas faire. */

/* Le rang, en tête de la lecture.
 *
 * C'est la réponse à la question que pose le titre du module, donc elle passe
 * avant la phrase de mention, qui la complète. Or de la mention pour la mention,
 * blanc appuyé pour le rang : les deux lignes disent des choses différentes et
 * ne doivent pas se ressembler. */
.guide-body .stats-readout .stats-rang {
  margin: 0 0 6px;
  font-size: 1.0625rem;
  font-weight: 600;
  color: var(--text-primary);
}
.guide-body .stats-readout .stats-rang:empty { display: none; }

/* Le parcours de délibération : même gabarit que la barre des issues du hero,
   dont il est le pendant. Deux barres de proportions différentes se liraient
   comme deux natures de graphique. */
.stats-parcours {
  display: block;
  width: 100%;
  height: 34px;
  border-radius: var(--radius-sm);
  overflow: hidden;
}

/* Le classement des spécialités : une ligne, une barre, une valeur, tout sur
   une seule ligne — la liste compte douze entrées. */
.guide-body .stats-spe-seules {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 7px;
}
.guide-body .stats-spe-seule {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.15fr auto;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.stats-spe-seule-nom {
  font-size: 13.5px;
  line-height: 1.25;
  color: var(--text-secondary);
}
.stats-spe-seule.is-maths .stats-spe-seule-nom { color: var(--text-primary); font-weight: 600; }
.stats-spe-seule-piste {
  display: block;
  height: 12px;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.07);
  overflow: hidden;
}
.stats-spe-seule-barre {
  display: block;
  height: 100%;
  border-radius: 3px;
  background: rgba(255, 255, 255, 0.28);
}
.stats-spe-seule.is-maths .stats-spe-seule-barre { background: var(--gold); }
.stats-spe-seule-valeur {
  font-size: 13px;
  font-variant-numeric: tabular-nums;
  color: var(--text-muted);
  min-width: 3.4em;
  text-align: right;
}
.stats-spe-seule.is-maths .stats-spe-seule-valeur { color: var(--gold); font-weight: 600; }

@media (max-width: 560px) {
  .guide-body .stats-spe-seule {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom valeur" "piste piste";
    gap: 3px 10px;
  }
  .stats-spe-seule-nom { grid-area: nom; }
  .stats-spe-seule-valeur { grid-area: valeur; }
  .stats-spe-seule-piste { grid-area: piste; }
}

/* Les boîtes de dispersion. Une ligne = un nom et une piste.
   L'échelle est commune à toutes les lignes, sans quoi comparer des largeurs
   n'aurait aucun sens — c'est la seule chose que ce visuel demande au lecteur. */
.guide-body .stats-boites {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  gap: 6px;
}
.guide-body .stats-boite-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25fr;
  align-items: center;
  gap: 12px;
  margin: 0;
}
.stats-boite-nom { font-size: 13px; line-height: 1.25; color: var(--text-secondary); }
.stats-boite-ligne.is-maths .stats-boite-nom { color: var(--text-primary); font-weight: 600; }
.stats-boite-piste { display: block; }
.stats-boite { display: block; width: 100%; height: 22px; }
.stats-boite-corps { fill: rgba(255, 255, 255, 0.16); }
.stats-boite-corps.is-maths { fill: rgba(201, 152, 38, 0.42); }
.stats-boite-mediane { fill: rgba(255, 255, 255, 0.85); }
.stats-boite-ligne.is-maths .stats-boite-mediane { fill: var(--gold); }
.stats-boite-moyenne { fill: rgba(255, 255, 255, 0.55); }
/* La graduation, dernière ligne de la même grille : ses repères tombent donc
   exactement sur les pistes, sans marge calculée à la main. */
.guide-body .stats-boite-axe-ligne {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25fr;
  align-items: center;
  gap: 12px;
  margin: 2px 0 0;
}
.stats-boite-axe {
  position: relative;
  display: block;
  height: 16px;
}
.stats-boite-axe span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 560px) {
  .guide-body .stats-boite-ligne {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "nom nom" "piste piste";
    gap: 2px 10px;
  }
  .stats-boite-nom { grid-area: nom; }
    .stats-boite-piste { grid-area: piste; }
  .guide-body .stats-boite-axe-ligne { grid-template-columns: 1fr; }
  .guide-body .stats-boite-axe-ligne > span:first-child,
  .guide-body .stats-boite-axe-ligne > span:last-child { display: none; }
}

/* La graduation du temps long. ⚠️ Taille en unités de viewBox : sans
   `font-size` explicite, le texte hérite du corps de la page et ressort
   multiplié par l'échelle du tracé — le défaut qui avait sorti les annotations
   d'années en capitales géantes par-dessus les aires. */
.stats-axe-ligne {
  stroke: rgba(255, 255, 255, 0.10);
  stroke-width: 0.2;
}
.stats-axe-ligne.is-base { stroke: rgba(255, 255, 255, 0.22); }
.stats-axe-txt {
  font-size: 2.4px;
  fill: var(--text-muted);
  font-variant-numeric: tabular-nums;
}

/* La zone de clic : invisible, mais elle change le curseur, ce qui est le seul
   indice qu'il y a quelque chose à cliquer. */
.stats-courbe-zone {
  fill: transparent;
  cursor: pointer;
}

/* La grille et sa légende, côte à côte.
   La légende était sous la grille : il fallait quitter le visuel des yeux pour
   lire ce qu'on survolait. En colonne à droite, les deux se lisent ensemble. */
.guide-body .stats-waffle-bloc {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 22px;
  margin: 18px 0 0;
}
.guide-body .stats-legende-colonne {
  display: grid;
  gap: 7px;
  margin: 0;
  align-content: center;
}

/* Le survol d'une case allume TOUTE sa bande, grille et légende ensemble.
   Une seule case qui s'éclaire ne dit rien : ce visuel parle de la taille d'un
   bloc, pas de la position d'un carré. Le reste s'éteint plutôt que la bande ne
   se surligne, parce que la rampe de mentions perdrait son sens si une teinte
   de plus s'y ajoutait.

   ⚠️ Les deux règles se posent sur `[data-bande]`, et c'est ce qui les fait
   marcher : viser `… .stats-legende-colonne li` pour éteindre pesait (0,3,1)
   contre (0,3,0) pour rallumer, donc la ligne de légende restait éteinte quand
   sa bande s'allumait. Mesuré au rendu. Même sélecteur des deux côtés, même
   poids, et c'est l'ordre qui tranche. */
.stats-waffle-case,
.stats-legende-colonne li { transition: opacity var(--transition-fast); }
.stats-waffle-bloc[data-survol] [data-bande] { opacity: 0.3; }
.stats-waffle-bloc[data-survol="refuse"] [data-bande="refuse"],
.stats-waffle-bloc[data-survol="admis"] [data-bande="admis"],
.stats-waffle-bloc[data-survol="ab"] [data-bande="ab"],
.stats-waffle-bloc[data-survol="b"] [data-bande="b"],
.stats-waffle-bloc[data-survol="tb"] [data-bande="tb"],
.stats-waffle-bloc[data-survol="tbf"] [data-bande="tbf"] { opacity: 1; }
.stats-legende-colonne li { cursor: default; }

@media (max-width: 620px) {
  .guide-body .stats-waffle-bloc { grid-template-columns: 1fr; gap: 14px; }
}

/* Le mode d'emploi des boîtes : une boîte d'exemple, ses quatre quarts nommés.
   Aligné sur la colonne des pistes, pas sur toute la largeur, pour que les
   « 25 % » tombent sous les zones qu'ils désignent. */
.guide-body .stats-boite-emploi {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 1.25fr;
  gap: 0 12px;
  margin: 0 0 18px;
  padding: 0 0 14px;
  border-bottom: 1px solid var(--border);
}
.stats-boite-emploi-piste { grid-column: 2; }
.stats-boite-emploi-reperes {
  grid-column: 2;
  position: relative;
  height: 15px;
  margin-top: -2px;
}
.stats-boite-emploi-reperes span {
  position: absolute;
  transform: translateX(-50%);
  font-size: 11px;
  color: var(--text-muted);
  white-space: nowrap;
}
.stats-boite-emploi-notes {
  grid-column: 1 / -1;
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-muted);
}
.stats-boite-emploi .stats-boite-corps { fill: rgba(255, 255, 255, 0.13); }

/* Les accolades du mode d'emploi : elles disent où chaque quart commence et
   finit, ce que les « 25 % » seuls ne montraient pas. */
.stats-boite-accolades { display: block; width: 100%; height: 13px; }
.stats-accolade { fill: rgba(255, 255, 255, 0.40); }

/* Les graduations traversent chaque boîte : on lit une note, pas seulement une
   largeur. Assez faibles pour rester derrière la donnée. */
.stats-boite-grille { stroke: rgba(255, 255, 255, 0.13); stroke-width: 0.3; }

@media (max-width: 560px) {
  .guide-body .stats-boite-emploi { grid-template-columns: 1fr; }
  .stats-boite-emploi-piste,
  .stats-boite-emploi-reperes { grid-column: 1; }
}

/* La répartition filles / garçons : une barre empilée à cent pour cent par
   combinaison. Deux parts d'un même tout se lisent empilées, pas en positions
   sur un axe — c'est ce qui a fait remplacer le diagramme en haltères.
   En HTML et non en SVG : chaque barre porte deux valeurs écrites, et un texte
   de SVG se dimensionne en unités de viewBox. */
.guide-body .stats-genre {
  list-style: none;
  margin: 18px 0 0;
  padding: 0;
  display: grid;
  gap: 12px;
}
.guide-body .stats-genre-ligne { margin: 0; }
.stats-genre-nom {
  display: block;
  font-size: 13px;
  color: var(--text-secondary);
  margin-bottom: 4px;
}
.stats-genre-piste {
  display: flex;
  gap: 2px;
  height: 26px;
  border-radius: var(--radius-sm);
  overflow: hidden;
  position: relative;
}
.stats-genre-part {
  display: flex;
  align-items: center;
  font-size: 12.5px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: rgba(13, 13, 20, 0.85);
  white-space: nowrap;
}
.stats-genre-part.is-filles { justify-content: flex-start; padding-left: 9px; }
.stats-genre-part.is-garcons { justify-content: flex-end; padding-right: 9px; }

/* Le repère des 50 % : sans lui, distinguer 46 % de 54 % demande de mesurer. */
.stats-genre-piste::after {
  content: "";
  position: absolute;
  left: 50%;
  top: -1px;
  bottom: -1px;
  width: 1px;
  background: rgba(255, 255, 255, 0.6);
}