:root {
  color-scheme: dark light;
  --fond: #110E2B;
  --fond-2: #1B1742;
  --encre: #EDEBFA;
  --gris: #A9A5CA;
  --accent: #FF4D7A;
  --trait: #403A78;
  --mono: ui-monospace, "Cascadia Mono", "Cascadia Code", Consolas, "SF Mono", Menlo, "DejaVu Sans Mono", "Liberation Mono", monospace;
}
@media (prefers-color-scheme: light) {
  :root {
    --fond: #FFFFFF;
    --fond-2: #F1F0F8;
    --encre: #17133D;
    --gris: #5C5A76;
    --accent: #D9003C;
    --trait: #17133D;
  }
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--fond);
  color: var(--encre);
  font-family: var(--mono);
  font-size: clamp(0.9rem, 0.85rem + 0.25vw, 1.03rem);
  line-height: 1.6;
  font-variant-ligatures: none;
}
h1, h2, h3, p, ul, ol, pre { margin: 0; padding: 0; font-size: 1em; }
a { color: inherit; text-decoration-color: var(--accent); text-decoration-thickness: 1px; text-underline-offset: 0.22em; }
a:hover { color: var(--accent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
kbd { font: inherit; font-size: 0.92em; border: 1px solid currentColor; border-radius: 2px; padding: 0 0.55ch; }

.cadre { max-width: 86ch; margin: 0 auto; padding: 0 2ch; }
.saut { position: absolute; left: -999px; top: 0; }
.saut:focus { left: 2ch; top: 1em; z-index: 10; background: var(--encre); color: var(--fond); padding: 0.3em 1ch; }

/* En-tête */
.haut { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: baseline; gap: 0.4em 3ch; padding: 1.1em 0; border-bottom: 1px solid var(--trait); }
.marque { font-weight: 700; text-decoration: none; }
.haut nav { display: flex; flex-wrap: wrap; gap: 0.4em 2.5ch; }
.haut nav a { text-decoration: none; white-space: nowrap; }
.haut nav a[aria-current="page"] { color: var(--accent); }

/* Bannière */
.banniere { display: block; width: 100%; height: auto; }
.banniere.large { display: none; }
@media (min-width: 46em) {
  .banniere.large { display: block; }
  .banniere.etroite { display: none; }
}
.b-paves { fill: var(--encre); }
.b-lignes { stroke: var(--accent); }

/* Page d'entrée : le standard */
.entree { padding-top: clamp(2em, 6vw, 4em); }
.voix { margin-top: 2.4em; font-size: 1.12em; font-weight: 700; }
.menu { list-style: none; margin-top: 0.9em; }
.menu a { display: flex; align-items: baseline; padding: 0.5em 1ch; margin: 0 -1ch; text-decoration: none; }
.menu .points { flex: 1; min-width: 2ch; overflow: hidden; white-space: nowrap; margin: 0 1ch; color: var(--gris); opacity: 0.55; }
.menu .touche { white-space: nowrap; color: var(--gris); }
.menu a:hover, .menu a:focus-visible { background: var(--encre); color: var(--fond); outline: none; }
.menu a:hover .points, .menu a:hover .touche, .menu a:focus-visible .points, .menu a:focus-visible .touche { color: inherit; }
.presentation { margin-top: 2.6em; max-width: 68ch; }

/* Entrée du menu */
.menu li:nth-child(1) { --i: 1; }
.menu li:nth-child(2) { --i: 2; }
.menu li:nth-child(3) { --i: 3; }
.menu li:nth-child(4) { --i: 4; }
.menu li:nth-child(5) { --i: 5; }
@media (prefers-reduced-motion: no-preference) {
  .anime .voix, .anime .menu li { animation: enonce 0.35s ease-out both; animation-delay: calc(var(--i, 0) * 110ms + 150ms); }
}
@keyframes enonce { from { opacity: 0; transform: translateX(-1ch); } to { opacity: 1; transform: none; } }

/* Écran de démarrage (page d'entrée, une fois par session) */
.demarrage { display: none; }
.boot body { overflow: hidden; }
.boot .demarrage {
  display: block; position: fixed; inset: 0; z-index: 20; overflow: hidden;
  background: var(--fond); padding: clamp(1.4em, 7vh, 4.5em) 0 2em; cursor: pointer;
  transition: opacity 0.18s linear;
}
.demarrage.d-sortie { opacity: 0; }
.d-cadre { max-width: 86ch; margin: 0 auto; padding: 0 2ch; }
.d-entete { display: flex; justify-content: space-between; align-items: flex-start; gap: 3ch; margin-bottom: 1.6em; }
.d-titre { font-weight: 700; }
.d-sous { color: var(--gris); }
.banniere.d-logo { width: 10ch; flex: none; }
.d-ligne { display: flex; flex-wrap: wrap; align-items: baseline; }
.d-ligne > span:first-child { white-space: nowrap; }
.d-ligne .points { flex: 1; min-width: 3ch; overflow: hidden; white-space: nowrap; margin: 0 1ch; color: var(--gris); opacity: 0.55; height: 1.6em; }
.d-valeur { color: var(--accent); margin-left: auto; white-space: nowrap; }
.d-journal::after { content: "_"; animation: curseur 1s steps(1) infinite; }
@keyframes curseur { 50% { opacity: 0; } }
.d-barre { margin-top: 1.4em; white-space: pre; }
.d-passer { margin-top: 1.4em; color: var(--gris); font-size: 0.92em; }
@media (max-width: 30em) { .d-barre { font-size: 0.86em; } }

/* Bouton son */
.b-son { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; white-space: nowrap; }
.b-son:hover { color: var(--accent); }
.b-son[aria-pressed="true"] { color: var(--accent); }

/* Pages de contenu */
.titre-page { margin-top: 2.6em; font-size: 1.45em; line-height: 1.25; }
.sous-titre { color: var(--accent); margin-top: 0.3em; }
.accroche { margin-top: 1.2em; max-width: 72ch; }
.actions { margin-top: 1.4em; display: flex; flex-wrap: wrap; align-items: center; gap: 0.8em 3ch; }
.bouton { display: inline-block; padding: 0.5em 1.6ch; background: var(--accent); color: var(--fond); font-weight: 700; text-decoration: none; }
.bouton:hover { background: var(--encre); color: var(--fond); }

.panneau { position: relative; border: 1px solid var(--trait); padding: 1.5em 2ch 1.3em; margin-top: 2.4em; }
.panneau > h2 { position: absolute; top: -0.85em; left: 1ch; padding: 0 1ch; background: var(--fond); }

.xp + .xp, .bloc + .bloc { margin-top: 1.4em; }
.tete { display: flex; flex-wrap: wrap; align-items: baseline; }
.tete .points { flex: 1; min-width: 3ch; overflow: hidden; white-space: nowrap; margin: 0 1ch; color: var(--gris); opacity: 0.55; height: 1.6em; }
.dates { color: var(--gris); white-space: nowrap; }
.employeur { color: var(--accent); }
.detail { color: var(--gris); }
.puces { list-style: none; margin-top: 0.3em; }
.puces li { padding-left: 2ch; text-indent: -2ch; }
.puces li::before { content: "- "; color: var(--accent); font-weight: 700; }
.tags span { white-space: nowrap; }
.tags i { font-style: normal; color: var(--gris); }

.colonnes { display: grid; gap: 1.4em 3ch; }
.colonnes .bloc { margin-top: 0; }
@media (min-width: 52em) { .colonnes { grid-template-columns: 1fr 1fr; } }

.schema { margin-top: 1.2em; padding: 1em 2ch; background: var(--fond-2); overflow-x: auto; line-height: 1.35; font-family: var(--mono); font-size: 0.95em; }
@media (max-width: 30em) { .schema { font-size: 0.8em; padding: 1em 1.5ch; } }
.texte { max-width: 72ch; }
.sommaire { margin-top: 1.4em; line-height: 2; }
.sommaire a { white-space: nowrap; text-decoration: none; }
.sommaire a:hover i { color: inherit; }
.panneau[id] { scroll-margin-top: 1.6em; }

.aiguillage { margin-top: 2.6em; color: var(--gris); }
.liste-pdf { list-style: none; margin-top: 0.4em; }
.liste-pdf li + li { margin-top: 0.5em; }
.note { margin-top: 1em; color: var(--gris); }

.bas { margin-top: 4em; padding: 1.2em 0 2.6em; border-top: 1px solid var(--trait); color: var(--gris); font-size: 0.9em; }