/* Box 27 — jetons, polices, remise à zéro, rouleaux de chiffres. */
@font-face { font-family: "Saira XC"; src: url("fonts/saira-extra-condensed-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }
@font-face { font-family: "Saira XC"; src: url("fonts/saira-extra-condensed-900.woff2") format("woff2"); font-weight: 900; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-400.woff2") format("woff2"); font-weight: 400; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-500.woff2") format("woff2"); font-weight: 500; font-display: swap; }
@font-face { font-family: "Chakra Petch"; src: url("fonts/chakra-petch-700.woff2") format("woff2"); font-weight: 700; font-display: swap; }

:root {
  --acide: #A8E000;
  --acide-enfonce: #94C800;
  --noir: #0E0F0D;
  --carbone: #1B1D19;
  --filet: #2B2E27;
  --blanc: #F2F4EF;
  --gris: #A4A89C;
  --olive: #2F3D00;
  --hachure: repeating-linear-gradient(135deg, rgb(14 15 13 / .14) 0 2px, transparent 2px 7px);
  --f-titre: "Saira XC", "Arial Narrow", sans-serif;
  --f-texte: "Chakra Petch", "Trebuchet MS", sans-serif;
  --barre-h: 56px;
  --onglets-h: 58px;
  --marge: 16px;
  --rail: 0px;
  --biseau: 20px;
  --courbe: cubic-bezier(.2, .7, .2, 1);
  color-scheme: light;
}

*, *::before, *::after { box-sizing: border-box; }
html {
  background: var(--acide);
  color: var(--noir);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-padding-top: calc(var(--barre-h) + 16px);
  scrollbar-gutter: stable;
}
html[data-noir] { background: var(--noir); }
body {
  margin: 0;
  min-height: 100svh;
  background: var(--acide);
  font: 400 16.5px/1.45 var(--f-texte);
  overflow-x: clip;
}
html[data-noir] body { background: var(--noir); }
h1, h2, h3, p, ul, ol, dl, dd, figure { margin: 0; }
ul, ol { padding: 0; list-style: none; }
a { color: inherit; }
img, svg { display: block; max-width: 100%; }
img { height: auto; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: 0; padding: 0; border-radius: 0; }
[hidden] { display: none !important; }
.sprites { position: absolute; width: 0; height: 0; overflow: hidden; }
.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

:focus-visible { outline: 3px solid var(--noir); outline-offset: 3px; }
html[data-noir] main :focus-visible, .barre :focus-visible, .onglets :focus-visible, .fiche :focus-visible,
.resume-sessions :focus-visible, .r-resume :focus-visible { outline-color: var(--acide); }
main:focus, .v-titre:focus { outline: none; }

.evitement {
  position: fixed; z-index: 100; top: calc(var(--demobar-offset, 0px) + 8px); left: max(8px, env(safe-area-inset-left));
  min-height: 44px; padding: 12px 18px; background: var(--noir); color: var(--acide);
  font-weight: 700; text-decoration: none; transform: translateY(calc(-100% - 60px));
}
.evitement:focus { transform: none; outline: 3px solid var(--acide); outline-offset: -6px; }

/* Titres de vue : Saira en capitales */
.v-titre { font: 700 40px/1 var(--f-titre); text-transform: uppercase; letter-spacing: 0; }

/* Chiffres qui roulent : une bande 0-9 par chiffre, dans une case de largeur fixe (aucune des deux familles n'a de chiffres tabulaires) */
.rl { font-feature-settings: normal; white-space: nowrap; }
.rl-c { display: inline-block; position: relative; width: .44em; height: 1em; overflow: hidden; vertical-align: top; text-align: center; }
.rl-b { display: block; will-change: transform; }
.rl-b > span { display: block; height: 1em; line-height: 1em; }
.rl-s { display: inline-block; height: 1em; line-height: 1em; vertical-align: top; }
.rl-s.rl-dp { width: .2em; text-align: center; }
.rl-t .rl-c { width: .66em; }

/* Bouton d'action biseauté : coin haut gauche coupé */
.continuer, .f-action, .rs-bouton {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 0 22px;
  background: var(--acide); color: var(--noir); font: 700 17px/1 var(--f-texte); text-decoration: none;
  clip-path: polygon(12px 0, 100% 0, 100% 100%, 0 100%, 0 12px);
  transition: background-color .15s;
}
.continuer:active, .f-action:active, .rs-bouton:active { transform: scale(.97); }
@media (hover: hover) { .continuer:hover, .f-action:hover, .rs-bouton:hover { background: var(--blanc); } }
.continuer[aria-disabled="true"] { background: var(--filet); color: var(--gris); }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition-duration: 0s !important; animation-duration: 0s !important; }
}