/*
  RGPD Escol — feuille de styles unique.

  ⚠ LES JETONS SONT RECOPIÉS D'EPS MANAGER, ILS NE SONT PAS RÉINVENTÉS.
  Consigne de Mikaël du 5 septembre 2026 : le design de TOUTES les applications
  de la constellation est celui d'EPS Manager. Les valeurs ci-dessous viennent
  de `sites/EPS/kayak/application_stage_masse/source/src/index.css` (thème clair
  et thème sombre) et les noms de `source/tailwind.config.js`. Le dépôt d'EPS
  Manager n'a pas été modifié — il ne nous appartient pas.

  ⚠ AUCUNE COULEUR N'EST ÉCRITE EN DUR AILLEURS QUE DANS LES DEUX BLOCS DE
  JETONS. Pas un `#RRGGBB` dans une règle, pas un dans un écran. Une couleur en
  dur est un jeton qui divergera, et le thème sombre la rendrait illisible sans
  que personne ne s'en aperçoive avant un utilisateur.

  ⚠ ET AUCUN JETON N'EST INVENTÉ ICI. Ce qui manque doit être ajouté UNE FOIS,
  À LA SOURCE, chez EPS Manager. Les deux jetons de mise en page ajoutés plus bas
  (`--pas`, `--largeur-lecture`) ne sont pas des jetons de charte : ce sont des
  mesures de gabarit, sans équivalent chez EPS Manager qui n'a pas d'écran de
  document imprimable.

  Mikael - chef de projet - 2026-09-06
*/

/* --- Polices AUTO-HÉBERGÉES ------------------------------------------------
   ⚠ JAMAIS Google Fonts. Un CDN de polices voit l'adresse IP de chaque visiteur
   d'un site dont l'objet même est le respect du RGPD : ce serait la première
   contradiction du produit, et elle serait visible depuis l'extérieur. Les
   fichiers sont recopiés d'`@fontsource`, comme chez EPS Manager.
   `font-display: swap` : le texte s'affiche tout de suite dans la pile de repli,
   puis bascule. Un registre illisible pendant deux secondes est un registre
   illisible. Mikael - chef de projet - 2026-09-06 */
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('polices/bricolage-grotesque-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Bricolage Grotesque'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('polices/bricolage-grotesque-latin-700-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 400; font-display: swap;
  src: url('polices/public-sans-latin-400-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 600; font-display: swap;
  src: url('polices/public-sans-latin-600-normal.woff2') format('woff2');
}
@font-face {
  font-family: 'Public Sans'; font-style: normal; font-weight: 700; font-display: swap;
  src: url('polices/public-sans-latin-700-normal.woff2') format('woff2');
}

/* --- Thème CLAIR : les jetons d'EPS Manager, à l'identique ------------------ */
:root {
  --primary: #900052;
  --on-primary: #ffffff;
  --primary-container: #b41e6b;
  --on-primary-container: #ffcfdd;
  --secondary: #a04102;
  --on-secondary: #ffffff;
  --secondary-container: #ff884b;
  --on-secondary-container: #6c2900;
  --tertiary: #920041;
  --tertiary-container: #b91857;
  --error: #ba1a1a;
  --on-error: #ffffff;
  --error-container: #ffdad6;
  --on-error-container: #93000a;
  --success: #2f7d62;
  --success-container: #c7f0dd;
  --on-success-container: #0b3b2a;
  --warning: #8a5a00;
  --surface: #fdf7ff;
  --background: #fdf7ff;
  --on-background: #1c1a22;
  --surface-container-lowest: #ffffff;
  --surface-container-low: #f8f1fd;
  --surface-container: #f2ecf7;
  --surface-container-high: #ece6f1;
  --surface-container-highest: #e6e0ec;
  --on-surface: #1c1a22;
  --on-surface-variant: #574148;
  --outline: #8a7078;
  --outline-variant: #debfc7;

  /* Mesures de gabarit propres à ce module (voir l'en-tête). */
  --pas: 0.5rem;
  --largeur-lecture: 74rem;

  /* --- Jetons de MOUVEMENT, recopiés d'EPS Manager ------------------------
     ⚠ On ne les remplace jamais par des valeurs : on écrit
     `var(--mvt-duree-entree)` et non `220ms`. Le jour où l'entrée doit être plus
     vive, on change UN jeton. */
  --mvt-duree-appui: 90ms;
  --mvt-duree-instant: 120ms;
  --mvt-duree-entree: 220ms;
  --mvt-duree-page: 240ms;
  --mvt-courbe-entree: cubic-bezier(0.16, 1, 0.3, 1);
  --mvt-courbe-appui: cubic-bezier(0.2, 0, 0, 1);
  --mvt-courbe-douce: cubic-bezier(0.4, 0, 0.2, 1);
  --mvt-distance-courte: 6px;
  --mvt-distance-entree: 12px;
  --mvt-distance-page: 16px;
  --mvt-echelle-appui: 0.97;
  --mvt-decalage-cascade: 40ms;

  color-scheme: light;
}

/* --- Thème SOMBRE ----------------------------------------------------------
   ⚠ TROIS ÉTATS, ICI AUSSI, ET C'EST LA MÊME RÈGLE QU'AILLEURS : le visiteur a
   choisi clair, il a choisi sombre, ou il n'a rien choisi et l'on suit son
   système. Le bloc `@media` sert le troisième cas, et la classe `.dark` le
   second — elle doit donc gagner dans les DEUX sens, sinon un choix explicite
   « clair » serait écrasé par un système en sombre.
   Mikael - chef de projet - 2026-09-06 */
@media (prefers-color-scheme: dark) {
  :root:not(.clair) {
    --primary: #ffb0cb;
    --on-primary: #5e1140;
    --primary-container: #b41e6b;
    --on-primary-container: #ffd9e4;
    --secondary: #ffb694;
    --on-secondary: #351000;
    --secondary-container: #ff884b;
    --on-secondary-container: #351000;
    --tertiary: #ffb1c2;
    --tertiary-container: #b91857;
    --error: #ffb4ab;
    --on-error: #690005;
    --error-container: #93000a;
    --on-error-container: #ffdad6;
    --success: #7fd6b0;
    --success-container: #123f2e;
    --on-success-container: #c7f0dd;
    --warning: #e6b566;
    --surface: #141019;
    --background: #141019;
    --on-background: #e8e0e8;
    --surface-container-lowest: #0e0b13;
    --surface-container-low: #1c1620;
    --surface-container: #201a26;
    --surface-container-high: #2b2430;
    --surface-container-highest: #362e3b;
    --on-surface: #e8e0e8;
    --on-surface-variant: #d3bfc7;
    --outline: #9d8790;
    --outline-variant: #52444b;
    color-scheme: dark;
  }
}
:root.dark {
  --primary: #ffb0cb;
  --on-primary: #5e1140;
  --primary-container: #b41e6b;
  --on-primary-container: #ffd9e4;
  --secondary: #ffb694;
  --on-secondary: #351000;
  --secondary-container: #ff884b;
  --on-secondary-container: #351000;
  --tertiary: #ffb1c2;
  --tertiary-container: #b91857;
  --error: #ffb4ab;
  --on-error: #690005;
  --error-container: #93000a;
  --on-error-container: #ffdad6;
  --success: #7fd6b0;
  --success-container: #123f2e;
  --on-success-container: #c7f0dd;
  --warning: #e6b566;
  --surface: #141019;
  --background: #141019;
  --on-background: #e8e0e8;
  --surface-container-lowest: #0e0b13;
  --surface-container-low: #1c1620;
  --surface-container: #201a26;
  --surface-container-high: #2b2430;
  --surface-container-highest: #362e3b;
  --on-surface: #e8e0e8;
  --on-surface-variant: #d3bfc7;
  --outline: #9d8790;
  --outline-variant: #52444b;
  color-scheme: dark;
}

*, *::before, *::after { box-sizing: border-box; }

body {
  margin: 0;
  font-family: 'Public Sans', system-ui, -apple-system, sans-serif;
  background: var(--background);
  color: var(--on-background);
  -webkit-font-smoothing: antialiased;
  line-height: 1.55;
}

h1, h2, h3 { font-family: 'Bricolage Grotesque', system-ui, sans-serif; line-height: 1.2; }
h1 { font-size: 1.65rem; margin: 0 0 calc(var(--pas) * 2); }
h2 { font-size: 1.2rem; margin: calc(var(--pas) * 5) 0 calc(var(--pas) * 2); }
h3 { font-size: 1rem; margin: calc(var(--pas) * 3) 0 var(--pas); }

a { color: var(--primary); }
a:hover { color: var(--tertiary); }

/* ⚠ RGAA : LE FOCUS EST TOUJOURS VISIBLE, et il l'est sur les deux thèmes.
   Un contour retiré « parce qu'il est laid » rend l'application inutilisable au
   clavier, et le défaut ne se voit sur aucune capture d'écran. */
:focus-visible {
  outline: 3px solid var(--primary);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ⚠ RGAA : le lien d'évitement. Il est le premier élément focalisable de chaque
   page et mène au contenu. Invisible tant qu'il n'a pas le focus, jamais
   `display:none` — un élément masqué de cette façon n'est plus focalisable. */
/* ⚠ 48 px, MESURE DANS UN VRAI NAVIGATEUR A 375 px LE 2026-09-06 : il rendait
   41 px. Aucun test unitaire ne pouvait le dire — jsdom n'a AUCUN moteur de
   rendu, et `getBoundingClientRect()` y renvoie des zeros. Ce lien est certes
   atteint au clavier plutot qu'au doigt, mais une cible unique sous le seuil
   dans toute l'application est une exception qu'on finit par recopier. */
.evitement {
  position: absolute; left: -9999px; top: 0;
  display: inline-flex; align-items: center; min-height: 48px;
  background: var(--primary); color: var(--on-primary);
  padding: 0 calc(var(--pas) * 2); z-index: 10;
}
.evitement:focus { left: var(--pas); top: var(--pas); }

.enveloppe { max-width: var(--largeur-lecture); margin: 0 auto; padding: calc(var(--pas) * 3); }

/* --- L'entête et la marque ------------------------------------------------- */
.entete {
  background: var(--surface-container-low);
  border-bottom: 1px solid var(--outline-variant);
}
.entete__barre {
  max-width: var(--largeur-lecture); margin: 0 auto;
  padding: calc(var(--pas) * 2) calc(var(--pas) * 3);
  display: flex; flex-wrap: wrap; gap: calc(var(--pas) * 2);
  align-items: center; justify-content: space-between;
}
.marque { display: inline-flex; align-items: center; gap: var(--pas); color: var(--tertiary); }
.marque__signe { width: 1.7rem; height: 1.7rem; flex: none; }
.marque__mot {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 1.15rem; color: var(--on-surface); font-weight: 400;
}
.marque__mot strong { color: var(--tertiary); font-weight: 700; }

/* --- La navigation ---------------------------------------------------------
   ⚠ RGAA : LES CIBLES TACTILES FONT AU MOINS 48 px DE HAUT, et cela se vérifie
   dans un vrai navigateur à 375 px de large — jamais dans un test unitaire.
   jsdom n'a AUCUN moteur de rendu : `getBoundingClientRect()` y renvoie des
   zéros, et un test qui « prouverait » 48 px ne prouverait rien du tout.
   Mikael - chef de projet - 2026-09-06 */
.navigation { border-bottom: 1px solid var(--outline-variant); background: var(--surface-container); }
.navigation ul {
  max-width: var(--largeur-lecture); margin: 0 auto; padding: 0 calc(var(--pas) * 2);
  list-style: none; display: flex; flex-wrap: wrap; gap: 0;
}
.navigation a {
  display: flex; align-items: center; min-height: 48px;
  padding: 0 calc(var(--pas) * 2);
  color: var(--on-surface-variant); text-decoration: none;
  border-bottom: 3px solid transparent;
}
.navigation a:hover { color: var(--on-surface); background: var(--surface-container-high); }
.navigation a[aria-current='page'] { color: var(--tertiary); border-bottom-color: var(--tertiary); font-weight: 600; }

/* --- Cartes et tableaux ---------------------------------------------------- */
.carte {
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline-variant);
  border-radius: 0.75rem;
  padding: calc(var(--pas) * 3);
  margin-bottom: calc(var(--pas) * 3);
}
.grille { display: grid; gap: calc(var(--pas) * 2); grid-template-columns: repeat(auto-fit, minmax(15rem, 1fr)); }

.compteur { display: flex; flex-direction: column; gap: 0.15rem; }
.compteur__valeur {
  font-family: 'Bricolage Grotesque', system-ui, sans-serif;
  font-size: 2rem; font-weight: 700; font-variant-numeric: tabular-nums; color: var(--on-surface);
}
.compteur__mot { color: var(--on-surface-variant); font-size: 0.9rem; }

/* ⚠ UN TABLEAU LARGE DÉFILE DANS SON PROPRE CONTENEUR. Sans cela, la page
   entière défile horizontalement sur téléphone et l'entête sort de l'écran. */
.tableau-defilant { overflow-x: auto; }
table { border-collapse: collapse; width: 100%; font-size: 0.94rem; }
th, td { text-align: left; padding: calc(var(--pas) * 1.5); border-bottom: 1px solid var(--outline-variant); vertical-align: top; }
th { color: var(--on-surface-variant); font-weight: 600; }
caption { text-align: left; color: var(--on-surface-variant); padding-bottom: var(--pas); }
.tnum { font-variant-numeric: tabular-nums; }

/* --- Les trois états, et ils se lisent AUSSI sans la couleur ---------------
   ⚠ RGAA : L'INFORMATION N'EST JAMAIS PORTÉE PAR LA SEULE COULEUR. Chaque
   pastille porte un mot, et un signe typographique que le mot double. Un
   utilisateur daltonien et un utilisateur de lecteur d'écran lisent la même
   chose. Mikael - chef de projet - 2026-09-06 */
.etat {
  display: inline-flex; align-items: center; gap: 0.35rem;
  padding: 0.15rem 0.55rem; border-radius: 999px;
  font-size: 0.82rem; font-weight: 600; border: 1px solid transparent; white-space: nowrap;
}
.etat--renseigne { background: var(--success-container); color: var(--on-success-container); border-color: var(--success); }
.etat--manquant  { background: var(--error-container);   color: var(--on-error-container);   border-color: var(--error); }
.etat--inconnu   { background: var(--surface-container-high); color: var(--on-surface-variant); border-color: var(--outline); }
.etat--declare   { background: var(--primary-container); color: var(--on-primary-container); border-color: var(--primary); }

.avertissement {
  border-left: 4px solid var(--warning);
  background: var(--surface-container);
  padding: calc(var(--pas) * 2);
  border-radius: 0 0.5rem 0.5rem 0;
  margin: calc(var(--pas) * 2) 0;
}
.refus {
  border-left: 4px solid var(--error);
  background: var(--error-container); color: var(--on-error-container);
  padding: calc(var(--pas) * 2); border-radius: 0 0.5rem 0.5rem 0; margin: calc(var(--pas) * 2) 0;
}
.note { color: var(--on-surface-variant); font-size: 0.9rem; }

/* --- Boutons et champs ----------------------------------------------------- */
.bouton {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 48px; padding: 0 calc(var(--pas) * 3);
  border-radius: 0.6rem; border: 1px solid var(--primary);
  background: var(--primary); color: var(--on-primary);
  font: inherit; font-weight: 600; cursor: pointer; text-decoration: none;
}
.bouton--discret { background: transparent; color: var(--primary); }
.bouton:hover { background: var(--primary-container); border-color: var(--primary-container); color: var(--on-primary-container); }

label { display: block; font-weight: 600; margin-bottom: 0.25rem; color: var(--on-surface-variant); }
input[type='text'], input[type='search'], input[type='password'], select, textarea {
  width: 100%; min-height: 48px; padding: 0 calc(var(--pas) * 1.5);
  font: inherit; color: var(--on-surface);
  background: var(--surface-container-lowest);
  border: 1px solid var(--outline); border-radius: 0.5rem;
}
textarea { min-height: 6rem; padding: var(--pas) calc(var(--pas) * 1.5); }
.champ { margin-bottom: calc(var(--pas) * 2); }

.pied {
  border-top: 1px solid var(--outline-variant);
  margin-top: calc(var(--pas) * 6); padding: calc(var(--pas) * 3);
  color: var(--on-surface-variant); font-size: 0.88rem; text-align: center;
}

/* --- COUCHE MOUVEMENT — les primitives d'EPS Manager, recopiées -------------
   ⚠ POUR TOUT CE QUI SE DÉPLACE, ON EMPLOIE `mvt-*` ET JAMAIS UNE DURÉE ÉCRITE
   À LA MAIN : seules ces classes emportent le garde `prefers-reduced-motion`
   posé en fin de fichier. Mikael - chef de projet - 2026-09-06 */
@keyframes mvt-apparition {
  from { opacity: 0; transform: translate3d(var(--mvt-dx, 0), var(--mvt-dy, 0), 0); }
  to   { opacity: 1; transform: translate3d(0, 0, 0); }
}
.mvt-page {
  animation: mvt-apparition var(--mvt-duree-page) var(--mvt-courbe-entree) both;
  --mvt-dy: var(--mvt-distance-page);
}
.mvt-cascade > * {
  animation: mvt-apparition var(--mvt-duree-entree) var(--mvt-courbe-entree) both;
  --mvt-dy: var(--mvt-distance-entree);
}
.mvt-cascade > *:nth-child(1) { animation-delay: calc(0 * var(--mvt-decalage-cascade)); }
.mvt-cascade > *:nth-child(2) { animation-delay: calc(1 * var(--mvt-decalage-cascade)); }
.mvt-cascade > *:nth-child(3) { animation-delay: calc(2 * var(--mvt-decalage-cascade)); }
.mvt-cascade > *:nth-child(4) { animation-delay: calc(3 * var(--mvt-decalage-cascade)); }
.mvt-cascade > *:nth-child(5) { animation-delay: calc(4 * var(--mvt-decalage-cascade)); }
.mvt-cascade > *:nth-child(6) { animation-delay: calc(5 * var(--mvt-decalage-cascade)); }
/* ⚠ Au-delà du plafond : AUCUNE animation, et `opacity:1` est indispensable —
   sinon `both` laisserait ces éléments invisibles. Le coût de la cascade reste
   constant quelle que soit la longueur de la liste. */
.mvt-cascade > *:nth-child(n + 7) { animation: none; opacity: 1; }
.mvt-appui {
  transition: transform var(--mvt-duree-appui) var(--mvt-courbe-appui),
              opacity var(--mvt-duree-appui) var(--mvt-courbe-appui);
}
.mvt-appui:active { transform: scale(var(--mvt-echelle-appui)); opacity: 0.9; }

/* ⚠ `prefers-reduced-motion` — LE GARDE-FOU NON NÉGOCIABLE. On SUPPRIME le
   mouvement, on ne le ralentit pas : un ralentissement laisse le déplacement,
   donc le déclencheur des malaises vestibulaires. Il est en CSS et non en
   JavaScript pour qu'il s'applique même si le script échoue, et pour qu'un écran
   futur ne puisse pas l'oublier. Mikael - chef de projet - 2026-09-06 */
@media (prefers-reduced-motion: reduce) {
  :root {
    --mvt-distance-courte: 0px;
    --mvt-distance-entree: 0px;
    --mvt-distance-page: 0px;
    --mvt-echelle-appui: 1;
    --mvt-decalage-cascade: 0ms;
    --mvt-duree-entree: 80ms;
    --mvt-duree-page: 80ms;
    --mvt-duree-instant: 80ms;
    --mvt-duree-appui: 90ms;
  }
  .mvt-page, .mvt-cascade > * { --mvt-dx: 0; --mvt-dy: 0; animation-delay: 0ms; }
  .mvt-appui:active { transform: none; }
}

/* --- IMPRESSION ------------------------------------------------------------
   ⚠ « LE LIVRABLE QUI COMPTE : un registre imprimable, presentable a un DPD ou
   a un controle. C est le seul juge : si le document produit ne tient pas devant
   un delegue academique, le reste n a servi a rien. » (cahier des charges §3.5)
   On retire la navigation et les commandes, on force l'encre noire sur blanc, et
   on empêche une fiche d'être coupée en deux par un saut de page.
   Mikael - chef de projet - 2026-09-06 */
@media print {
  .entete, .navigation, .pied, .bouton, .sans-impression { display: none !important; }
  body { background: #ffffff; color: #000000; font-size: 10.5pt; }
  .enveloppe { max-width: none; padding: 0; }
  .carte { border: 1px solid #000000; break-inside: avoid; page-break-inside: avoid; margin-bottom: 8pt; }
  .etat { border: 1px solid #000000 !important; background: transparent !important; color: #000000 !important; }
  a { color: #000000; text-decoration: none; }
  table { font-size: 9.5pt; }
  thead { display: table-header-group; }
}