/* Feuille unique. Les tokens ont été recopiés ici à la publication ;
   les sources restent séparées dans tokens/. Voir outils/publier.sh. */

/* ---- tokens/fonts.css ---- */
/* Polices — auto-hébergées, aucun appel réseau sortant (CDC § 5.2).
   Le @import vers fonts.googleapis.com du handoff est retiré.
   Provenance et date de récupération des fichiers : voir fonts/README.md.

   Les deux familles sont variables : un seul fichier couvre toutes les
   graisses utilisées, d'où deux requêtes au lieu de six.
   La plage déclarée est la plage « latin » : elle couvre les accents
   français et espagnols (U+00C0–00FF). Les glyphes hors plage — dont la
   flèche ↗ (U+2197) — retombent sur la police système, exactement comme
   dans la page de référence. */

@font-face{
  font-family:'Instrument Sans';
  font-style:normal;
  font-weight:400 700;
  font-display:swap;
  src:url('fonts/instrument-sans-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

@font-face{
  font-family:'JetBrains Mono';
  font-style:normal;
  font-weight:400 500;
  font-display:swap;
  src:url('fonts/jetbrains-mono-latin.woff2') format('woff2');
  unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA,
    U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193,
    U+2212, U+2215, U+FEFF, U+FFFD;
}

/* ---- tokens/colors.css ---- */
:root{
  /* base — nuit */
  --nuit-900:#080C18;   /* planche, arrière-plan le plus profond */
  --nuit-800:#0B1020;   /* fond de page */
  --nuit-700:#0F1730;   /* surface (panneau) */
  --nuit-600:#1F2C4B;   /* filets, traits */
  --nuit-500:#4A5578;   /* texte éteint (états inactifs) */
  --nuit-400:#8B96B3;   /* gris, texte secondaire */
  --nuit-100:#F1F3FA;   /* encre */
  --bleu-400:#8CA0FF;   /* accent : chiffres, dates, liens actifs */
  --bleu-300:#B7C7FF;   /* lueur : points du champ, halo */
  --vert-400:#5AD3B9;   /* lancement — la seule couleur qui change la page */

  /* sémantique */
  --fond:var(--nuit-800);
  --surface:var(--nuit-700);
  --trait:var(--nuit-600);
  --encre:var(--nuit-100);
  --gris:var(--nuit-400);
  --eteint:var(--nuit-500);
  --accent:var(--bleu-400);
  --lueur:var(--bleu-300);
  --lancement:var(--vert-400);
  --voile-lancement:rgba(90,211,185,.09);
  --accent-fond:rgba(140,160,255,.12);
  --fond-translucide:rgba(11,16,32,.55);

  /* papier (déclinaison claire du logo uniquement) */
  --papier:#F2EFE8;
  --papier-trait:#D6CFC0;
  --papier-encre:#17150F;
}

/* ---- tokens/typography.css ---- */
:root{
  --font-sans:"Instrument Sans",system-ui,sans-serif;
  --font-mono:"JetBrains Mono",ui-monospace,monospace;

  --texte-base:16.5px;
  --interligne-base:1.6;

  /* échelle */
  /* écart assumé au handoff : le token livré disait 3rem, la page de référence 2.7rem.
     La référence prime (CDC § 2). Voir README, section « Écarts au handoff ». */
  --titre-xl:clamp(2.7rem,10vw,8.5rem);    /* titre caviardé, desktop */
  --titre-xl-mobile:clamp(2.4rem,12.5vw,3.4rem);
  --titre-l:clamp(1.7rem,4.6vw,3.4rem);    /* règles, une par écran */
  --titre-m:clamp(1.6rem,3.5vw,2.6rem);    /* nom de marque dans le registre */
  --corps-l:1.08rem;
  --corps:1rem;
  --corps-s:.94rem;
  --mono:.72rem;                            /* entête, pied, légendes */
  --mono-s:.68rem;                          /* puces d'état */
  --mono-xs:.62rem;

  /* réglages */
  --serre-xl:-0.05em;
  --serre-l:-0.04em;
  --serre-m:-0.03em;
  --serre-s:-0.02em;
  --large-mono:.08em;    /* titres de section en capitales */
  --large-chiffre:.06em; /* codes chiffrés */

  --graisse-normale:400;
  --graisse-moyenne:500;
  --graisse-demi:600;
  --graisse-forte:700;
}

/* ---- tokens/spacing.css ---- */
:root{
  --e-1:.25rem;
  --e-2:.5rem;
  --e-3:.75rem;
  --e-4:1rem;
  --e-5:1.5rem;
  --e-6:2rem;
  --e-8:3rem;
  --e-10:4rem;
  --e-12:5rem;
  --e-14:6rem;

  --gouttiere:1.5rem;          /* marge latérale de page */
  --gouttiere-mobile:1.25rem;
  --largeur-page:72rem;
  --mesure:34rem;              /* largeur max d'un paragraphe */

  --rayon:4px;                 /* panneaux */
  --rayon-pilule:999px;        /* puces d'état */
  --filet:1px;
}

/* ---- tokens/motion.css ---- */
:root{
  --duree-entree:.7s;
  --duree-etat:.5s;
  --duree-lien:.3s;
  --duree-effondrement:380ms;   /* le seul mouvement brutal de la page */
  --duree-caviard:.4s;
  --cadence-etat:2600ms;
  --courbe:ease;
}
@keyframes entrer{to{opacity:1}}
@keyframes caviarder{to{transform:scaleX(1)}}
@media (prefers-reduced-motion:reduce){
  [data-anim]{animation:none !important;opacity:1 !important}
  [data-caviar]{animation:none !important;transform:none !important}
}

/* Feuille unique du site. Les tokens du handoff sont importés tels quels,
   à l'exception de fonts.css (auto-hébergement) et de --titre-xl (voir README). */

/* ------------------------------------------------------------------ socle */

*{box-sizing:border-box}

html{
  -webkit-text-size-adjust:100%;
  color-scheme:dark;
  scroll-behavior:smooth;
}

body{
  margin:0;
  background:var(--fond);
  color:var(--encre);
  font-family:var(--font-sans);
  font-size:var(--texte-base);
  line-height:var(--interligne-base);
  overflow-x:hidden;
}

a{color:var(--encre)}
a:hover{color:var(--lueur)}

:focus-visible{
  outline:2px solid var(--accent);
  outline-offset:3px;
}

/* Largeur du bloc caviardé, par langue (B3 : aucun style écrit par le JS).
   Valeurs de l'objet LANGUES, clé caviarLargeur. */
html[lang="fr"]{--caviar-largeur:6.4em}
html[lang="en"]{--caviar-largeur:4.9em}
html[lang="es"]{--caviar-largeur:2.3em}

/* --------------------------------------------------- champ vivant et voile */

/* Le canvas occupe la fenêtre et ne défile pas. Le contenu passe devant grâce
   au z-index de .page. */
.champ{
  position:fixed;
  inset:0;
  width:100%;
  height:100%;
  display:block;
}

/* Le voile : la page entière vire au vert, et uniquement au lancement.
   Sa couleur est pilotée par data-etat, jamais par le JavaScript. */
.voile{
  position:fixed;
  inset:0;
  pointer-events:none;
  background:rgba(11,16,32,0);
  transition:background 1.2s;
}

html[data-etat="4"] .voile{
  background:var(--voile-lancement);
  transition:background .15s;
}

/* ---------------------------------------------------------------- colonne */

.page{
  position:relative;
  z-index:1;
  width:100%;
  max-width:var(--largeur-page);
  margin:0 auto;
  padding:0 var(--gouttiere);
}

/* ========================================================================= */
/*  Mise en page desktop (> 640 px)                                          */
/*  Valeurs reprises une à une de la page de référence.                      */
/* ========================================================================= */

/* --------------------------------------------------------- premier écran */

.ecran{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

/* ----------------------------------------------------------------- entête */

.entete{
  display:flex;
  align-items:center;
  justify-content:space-between;
  gap:var(--e-4);
  padding:1.4rem 0;
  border-bottom:var(--filet) solid var(--trait);
}

.logo{
  display:flex;
  align-items:center;
  gap:.45rem;
}

.logo-mot{
  font-weight:var(--graisse-forte);
  font-size:1.05rem;
  letter-spacing:var(--serre-m);
  line-height:1;
}

/* Le caviard du logo : un bloc plein, aucun SVG. */
.logo-bloc{
  display:block;
  width:2.6rem;
  height:.82rem;
  background:var(--encre);
}

.logo-labs{
  font-family:var(--font-mono);
  font-size:.62rem;
  letter-spacing:.1em;
  color:var(--gris);
  margin-left:.3rem;
}

.menu{
  display:flex;
  gap:1.6rem;
  font-family:var(--font-mono);
  font-size:var(--mono);
  color:var(--gris);
}

.menu a{
  text-decoration:none;
  color:var(--gris);
  border-bottom:var(--filet) solid transparent;
  transition:color var(--duree-lien),border-color var(--duree-lien);
}

.menu a:hover{
  color:var(--encre);
  border-bottom-color:var(--encre);
}

.veille{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  justify-content:flex-end;
  gap:.4rem 1.4rem;
  font-family:var(--font-mono);
  font-size:var(--mono);
  color:var(--gris);
  white-space:nowrap;
}

.langues{
  display:flex;
  gap:.9rem;
}

.langues a{
  text-decoration:none;
  color:var(--gris);
  border-bottom:var(--filet) solid transparent;
  padding-bottom:1px;
  transition:color var(--duree-lien),border-color var(--duree-lien);
}

.langues a[aria-current]{
  color:var(--encre);
  border-bottom-color:var(--encre);
}

.veille-etat{
  display:flex;
  align-items:center;
  gap:var(--e-2);
}

/* La pastille de veille : prévue en vert par le handoff, indépendamment de
   l'état du champ. C'est la seule occurrence de vert hors lancement. */
.pastille{
  width:6px;
  height:6px;
  border-radius:50%;
  background:var(--lancement);
  flex:none;
  box-shadow:0 0 8px var(--lancement);
}

/* La veille vit dans l'entête en desktop, dans la légende en mobile. */
.veille-mobile{display:none}

/* ------------------------------------------------------------------ titre */

.titrage{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  text-align:center;
  gap:var(--e-6);
  padding:var(--e-10) 0;
}

.titre{
  margin:0;
  font-size:var(--titre-xl);
  line-height:0.94;
  font-weight:var(--graisse-forte);
  letter-spacing:var(--serre-xl);
  max-width:12ch;
  text-wrap:balance;
  opacity:0;
  animation:entrer var(--duree-entree) var(--courbe) forwards;
}

/* Le mot caviardé. Sa largeur dépend de la langue : voir --caviar-largeur. */
.caviard{
  display:inline-block;
  width:min(var(--caviar-largeur),62vw);
  max-width:100%;
  height:.74em;
  vertical-align:-0.02em;
  background:var(--encre);
  transform:scaleX(0);
  transform-origin:left center;
  animation:caviarder var(--duree-caviard) var(--courbe) .55s forwards;
  user-select:none;
  pointer-events:none;
}

.intro{
  margin:0;
  max-width:var(--mesure);
  font-size:var(--corps-l);
  color:var(--gris);
  text-wrap:pretty;
  opacity:0;
  animation:entrer var(--duree-entree) var(--courbe) .2s forwards;
}

.intro strong{
  color:var(--encre);
  font-weight:var(--graisse-moyenne);
}

/* ---------------------------------------------------------------- légende */

.legende{
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:.75rem var(--e-6);
  row-gap:.9rem;
  padding:var(--e-4) 0 1.6rem;
  border-top:var(--filet) solid var(--trait);
  font-family:var(--font-mono);
  font-size:.7rem;
  color:var(--gris);
  opacity:0;
  animation:entrer var(--duree-entree) var(--courbe) .4s forwards;
}

.lecture b{
  font-weight:var(--graisse-moyenne);
  color:var(--encre);
}

.etats{
  display:flex;
  flex-wrap:wrap;
  gap:var(--e-2);
  font-size:var(--mono-s);
}

.puce{
  padding:.32rem .7rem;
  border-radius:var(--rayon-pilule);
  border:var(--filet) solid var(--trait);
  color:var(--gris);
  background:var(--fond-translucide);
  transition:color var(--duree-etat),border-color var(--duree-etat),background var(--duree-etat);
}

html[data-etat="0"] .puce[data-puce="0"],
html[data-etat="1"] .puce[data-puce="1"],
html[data-etat="2"] .puce[data-puce="2"],
html[data-etat="3"] .puce[data-puce="3"]{
  border-color:var(--accent);
  color:var(--encre);
  background:var(--accent-fond);
}

/* Le vert de la page n'apparaît qu'ici : état 4, lancement. */
html[data-etat="4"] .puce[data-puce="4"]{
  border-color:var(--lancement);
  background:var(--lancement);
  color:var(--fond);
}

/* --------------------------------------------------------------- registre */

.registre{
  padding:var(--e-14) 0 var(--e-12);
  scroll-margin-top:var(--e-4);
}

.titre-section{
  margin:0 0 var(--e-5);
  font-family:var(--font-mono);
  font-size:var(--mono);
  font-weight:var(--graisse-moyenne);
  color:var(--gris);
  letter-spacing:var(--large-mono);
  text-transform:uppercase;
}

.tableau-registre{
  width:100%;
  border-collapse:collapse;
  font-family:var(--font-mono);
  font-size:clamp(.78rem,1.8vw,.95rem);
}

.tableau-registre th{
  text-align:left;
  font-weight:var(--graisse-moyenne);
  color:var(--gris);
  padding:.6rem .75rem .6rem 0;
  border-bottom:var(--filet) solid var(--encre);
}

.tableau-registre td{
  padding:var(--e-5) .75rem var(--e-5) 0;
  border-bottom:var(--filet) solid var(--trait);
  vertical-align:baseline;
}

/* Le filet d'encre ferme le tableau, comme il l'a ouvert. */
.tableau-registre .derniere td{
  border-bottom-color:var(--encre);
}

.cellule-marque{
  font-family:var(--font-sans);
  font-weight:var(--graisse-forte);
  font-size:var(--titre-m);
  letter-spacing:var(--serre-m);
  line-height:1;
}

.lien-marque{
  display:inline-flex;
  align-items:baseline;
  gap:.35em;
  color:var(--encre);
  text-decoration:none;
  border-bottom:var(--filet) solid var(--trait);
  padding-bottom:.08em;
  transition:border-color var(--duree-lien);
}

.lien-marque:hover{
  color:var(--encre);
  border-bottom-color:var(--lancement);
}

.fleche{
  font-size:.5em;
  color:var(--lancement);
  font-weight:var(--graisse-moyenne);
  transition:transform var(--duree-lien);
}

.etat-lancee{
  color:var(--lancement);
  font-weight:var(--graisse-moyenne);
}

.code{
  color:var(--accent);
  letter-spacing:var(--large-chiffre);
}

.code:first-child{
  font-size:clamp(1rem,2.4vw,1.5rem);
}

.chiffre{
  margin:1.4rem 0 0;
  max-width:32rem;
  font-size:var(--corps-s);
  color:var(--gris);
}

/* ----------------------------------------------------------------- règles */

.regles{
  padding:var(--e-6) 0 var(--e-10);
  display:flex;
  flex-direction:column;
}

.regles p{
  margin:0;
  min-height:55vh;
  display:flex;
  align-items:center;
  justify-content:center;
  text-align:center;
  font-size:var(--titre-l);
  line-height:1.1;
  font-weight:var(--graisse-demi);
  letter-spacing:var(--serre-l);
  max-width:22ch;
  align-self:center;
  text-wrap:balance;
}

/* ---------------------------------------------------------------- journal */

.journal{
  padding:var(--e-8) 0 var(--e-12);
  scroll-margin-top:var(--e-4);
}

.frise{
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(11rem,1fr));
  gap:var(--e-6) var(--e-5);
}

.entree{
  border-top:var(--filet) solid var(--encre);
  padding-top:.9rem;
  display:flex;
  flex-direction:column;
  gap:var(--e-2);
}

.entree .date{
  font-family:var(--font-mono);
  font-size:.78rem;
  color:var(--accent);
}

.entree span:last-child{
  font-size:var(--corps-s);
  color:var(--gris);
  text-wrap:pretty;
}

/* L'entrée de lancement : filet et date en vert, texte en encre. */
.entree-lancement{border-top-color:var(--lancement)}
.entree-lancement .date{color:var(--lancement)}
.entree-lancement span:last-child{
  color:var(--encre);
  font-weight:var(--graisse-moyenne);
}

/* ------------------------------------------------------------------- pied */

.pied{
  padding:1.6rem 0 calc(var(--e-10) + env(safe-area-inset-bottom, 0px));
  border-top:var(--filet) solid var(--trait);
  font-family:var(--font-mono);
  font-size:var(--mono);
  color:var(--gris);
  display:flex;
  flex-wrap:wrap;
  gap:.6rem var(--e-6);
  justify-content:space-between;
}

.pied a{
  text-decoration:none;
  border-bottom:var(--filet) solid var(--trait);
}

/* ========================================================================= */
/*  Mise en page mobile (≤ 640 px)                                           */
/*  Même DOM que le desktop : seul l'habillage change. La seule exception     */
/*  est le bloc « système actif », écrit deux fois — voir README.             */
/* ========================================================================= */

@media (max-width:640px){

  .page{padding:0 var(--gouttiere-mobile)}

  /* Pas de premier écran pleine hauteur : le texte commence en haut. */
  .ecran{min-height:0}

  /* ---------------------------------------------------------------- entête */

  /* Le menu quitte la ligne du logo et prend la sienne, sans quitter le DOM :
     l'entête passe en flex-wrap et le menu est renvoyé en troisième position,
     sur toute la largeur. */
  .entete{
    flex-wrap:wrap;
    gap:0 var(--e-4);
    padding:calc(1.1rem + env(safe-area-inset-top, 0px) + 2.6rem) 0 0;
  }

  .logo{order:1;gap:.4rem}
  .logo-mot{font-size:1rem}
  .logo-bloc{width:2.4rem;height:.78rem}
  .logo-labs{font-size:.6rem;margin-left:.25rem}

  .veille{order:2}

  .menu{
    order:3;
    width:100%;
    margin-top:1.1rem;
    padding:.7rem 0;
    border-top:var(--filet) solid var(--trait);
    gap:1.4rem;
    font-size:var(--mono-s);
  }

  /* La veille descend dans la légende. */
  .veille-bureau{display:none}
  .veille-mobile{display:flex}

  /* ----------------------------------------------------------------- titre */

  .titrage{
    flex:none;
    display:block;
    text-align:left;
    padding:0;
  }

  .titre{
    margin:2.2rem 0 var(--e-4);
    font-size:var(--titre-xl-mobile);
    line-height:.96;
    letter-spacing:-0.045em;
    max-width:none;
  }

  /* Le paragraphe laisse respirer le champ avant la légende. */
  .intro{
    margin:0 0 4.5rem;
    font-size:var(--corps);
    max-width:none;
  }

  /* --------------------------------------------------------------- légende */

  .legende{
    align-items:baseline;
    gap:.6rem var(--e-4);
    padding:.9rem 0;
    border-top:var(--filet) solid var(--trait);
    border-bottom:var(--filet) solid var(--trait);
    font-size:.66rem;
  }

  /* Première ligne : la lecture et la veille se partagent la largeur. La
     lecture se replie sur deux lignes plutôt que de chasser la veille.
     La base à 0 est indispensable : avec « auto », le conteneur passe à la
     ligne avant même d'essayer de rétrécir la lecture. */
  .lecture{flex:1 1 0;min-width:0}
  .veille-mobile{flex:none;white-space:nowrap}

  /* Les cinq états perdent leurs pastilles et deviennent du texte nu,
     réparti sur toute la largeur. */
  .etats{
    width:100%;
    flex-wrap:nowrap;
    justify-content:space-between;
    gap:var(--e-2);
    font-size:var(--mono-xs);
    white-space:nowrap;
  }

  .puce{
    padding:0;
    border:0;
    border-radius:0;
    background:none;
    color:var(--eteint);
    transition:color var(--duree-etat);
  }

  html[data-etat="0"] .puce[data-puce="0"],
  html[data-etat="1"] .puce[data-puce="1"],
  html[data-etat="2"] .puce[data-puce="2"],
  html[data-etat="3"] .puce[data-puce="3"]{
    background:none;
    border-color:transparent;
    color:var(--encre);
  }

  html[data-etat="4"] .puce[data-puce="4"]{
    background:none;
    border-color:transparent;
    color:var(--lancement);
  }

  /* -------------------------------------------------------------- registre */

  .registre{
    padding:2.5rem 0 var(--e-8);
    scroll-margin-top:var(--e-2);
  }

  .titre-section{
    margin:0 0 .6rem;
    font-size:.66rem;
  }

  /* Le tableau devient une liste : mêmes cellules, plus de colonnes. */
  .tableau-registre{
    display:block;
    font-size:.78rem;
  }

  .tableau-registre thead{display:none}
  .tableau-registre tbody{display:block}

  .tableau-registre tr{
    display:flex;
    justify-content:space-between;
    align-items:baseline;
    gap:var(--e-4);
    padding:var(--e-4) 0;
    border-top:var(--filet) solid var(--trait);
  }

  .tableau-registre td{
    display:block;
    padding:0;
    border:0;
  }

  /* La colonne Domaine n'existe pas en mobile. */
  .tableau-registre [data-domaine]{display:none}

  /* Filet d'encre pour ouvrir la liste, filet d'encre pour la fermer. */
  .tableau-registre .ligne-marque{border-top-color:var(--encre)}
  .tableau-registre .derniere{border-bottom:var(--filet) solid var(--encre)}

  .cellule-marque{font-size:1.7rem}
  .lien-marque{gap:.3em}
  .code:first-child{font-size:var(--corps)}

  .chiffre{
    margin:var(--e-4) 0 0;
    font-size:.88rem;
    max-width:none;
    text-wrap:pretty;
  }

  /* ---------------------------------------------------------------- règles */

  .regles{padding:0 0 var(--e-8)}

  .regles p{
    display:block;
    min-height:0;
    max-width:none;
    align-self:stretch;
    padding:1.1rem 0;
    border-top:var(--filet) solid var(--trait);
    text-align:left;
    font-size:1.3rem;
    line-height:1.2;
    letter-spacing:var(--serre-m);
    text-wrap:pretty;
  }

  .regles p:last-child{border-bottom:var(--filet) solid var(--trait)}

  /* --------------------------------------------------------------- journal */

  .journal{
    padding:0 0 2.5rem;
    scroll-margin-top:var(--e-2);
  }

  .frise{
    display:flex;
    flex-direction:column;
    gap:0;
  }

  .entree{
    display:grid;
    grid-template-columns:4.5rem 1fr;
    gap:var(--e-4);
    padding:.8rem 0;
    border-top:var(--filet) solid var(--trait);
  }

  .entree:last-child{border-bottom:var(--filet) solid var(--trait)}

  .entree .date{
    font-size:.74rem;
    padding-top:.1rem;
  }

  .entree span:last-child{font-size:.92rem}

  /* En mobile, l'entrée de lancement garde le filet commun : seules la date
     et le texte la distinguent. */
  .entree-lancement{border-top-color:var(--trait)}

  /* ------------------------------------------------------------------ pied */

  .pied{
    flex-direction:column;
    gap:var(--e-2);
    padding:1.2rem 0 calc(1.8rem + env(safe-area-inset-bottom, 0px));
    font-size:.7rem;
  }

  .pied a{
    color:var(--encre);
    border-bottom:0;
  }
}

/* ========================================================================= */
/*  Page 404                                                                 */
/*  Même palette, même typographie, aucun champ vivant, aucun texte nouveau.  */
/* ========================================================================= */

.page-erreur .page{
  min-height:100svh;
  display:flex;
  flex-direction:column;
}

.erreur{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--e-6);
  padding:var(--e-10) 0;
}

/* Le logo devient un lien : sur une page d'erreur, le retour à l'accueil est
   la seule action qui ait un sens. */
.erreur .logo{
  text-decoration:none;
  color:var(--encre);
}

.code-erreur{
  margin:0;
  font-family:var(--font-mono);
  font-size:clamp(3rem,12vw,6rem);
  font-weight:var(--graisse-normale);
  line-height:1;
  letter-spacing:var(--large-mono);
  color:var(--gris);
}

/* ========================================================================= */
/*  Mouvement réduit                                                         */
/*  CDC § 4.5 et critère d'acceptation n° 5 : « rien ne bouge, tout est      */
/*  lisible ». Ce que le JavaScript arrête de son côté — cycle du champ,     */
/*  boucle de rendu, brouillage du registre — est dans champ.js et langue.js.*/
/* ========================================================================= */

@media (prefers-reduced-motion:reduce){

  /* Les ancres du menu sautent au lieu de glisser. */
  html{scroll-behavior:auto}

  /* Écart assumé à la page de référence, qui ne coupe que ses deux animations
     d'entrée. Le critère n° 5 dit « rien ne bouge » : les transitions en font
     partie, à commencer par le voile, qui repeint l'écran entier en 1,2 s.

     Durée quasi nulle plutôt que « none » : l'état final des animations à
     remplissage « forwards » reste appliqué, donc le bloc caviardé demeure
     visible au lieu de disparaître. */
  *,
  *::before,
  *::after{
    animation-duration:.001ms !important;
    animation-delay:0ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
    transition-delay:0ms !important;
    scroll-behavior:auto !important;
  }
}