/* GÉNÉRÉ depuis jetons/mavar.jetons.json par outils/generer-css-jetons.mjs.
   Ne JAMAIS éditer ce fichier à la main : éditer le JSON, puis régénérer.
   Origine : « MAVAR Design System 5 » (archive reçue le 2026-09-02 ; identique au Design System 4 pour tout ce qui est porté ici — le DS5 ne corrige qu'une valeur de PROSE dans un `$role`, l'écart de teinte annoncé à 19° au lieu de 18°, signalé en Q-291 §5) — portage des CSS générés de tokens/, valeur par valeur. Remplace le portage du premier design reçu (2026-08-27, Q-150/Q-152), puis celui du Design System 2 (même jour, Q-290). Le DS4 corrige deux points que Q-289/Q-290 avaient remontés : la saturation de la marque annoncée à 62 % (mesurée 60 %, écart réel +16 points et 18° de teinte, non 19°), et `mesure-numero-etape` retiré alors que sa valeur était écrite en dur dans deux composants — il est réintroduit ici par la source, avec `espace-interne-pastille`. L'écart de couleur de marque est LEVÉ le 2026-09-06 (Q-314, jugement délégué) : le bleu #23328A du Design System 5 est désormais celui du produit, avec ses états survol #2B3EAB et appui #1A2565. Il remplace le violet #54277D hérité du premier portage, que Q-284 §5.2 maintenait faute d'arbitrage sur la disponibilité de marque. Les six paires de contraste impliquant la marque sont AAA dans la table du DS5 (tokens/contrastes.json), et recalculées à l'application. Ce fichier ne porte DÉSORMAIS PLUS AUCUN écart avec l'archive : 144 variables, 144 valeurs identiques. */

/* MAVAR — couleurs sémantiques. GÉNÉRÉ depuis tokens/mavar.tokens.json. Ne pas éditer à la main : éditer le JSON puis régénérer (tokens/generer-css.md). */
:root{
  --couleur-fond-page: #EDEFEA; /* @genre color */
  --couleur-fond-bloc: #F7F8F4; /* @genre color */
  --couleur-fond-bloc-eleve: #FFFFFF; /* @genre color */
  --couleur-fond-creux: #E2E5DE; /* @genre color */
  --couleur-texte-principal: #16211C; /* @genre color */
  --couleur-texte-secondaire: #3A4A43; /* @genre color */
  --couleur-texte-tertiaire: #52625A; /* @genre color */
  --couleur-texte-sur-inverse: #EDEFEA; /* @genre color */
  --couleur-texte-desactive: #6B7770; /* @genre color */
  --couleur-trait-discret: #C6CCC3; /* @genre color */
  --couleur-trait-structurel: #52625A; /* @genre color */
  --couleur-trait-focus: #16211C; /* @genre color */
  --couleur-trait-focus-sur-sombre: #EDEFEA; /* @genre color */
  --couleur-verifie-texte: #17603C; /* @genre color */
  --couleur-verifie-trait: #1D7A4C; /* @genre color */
  --couleur-verifie-fond: #DCEBE1; /* @genre color */
  --couleur-declare-texte: #2B4A6F; /* @genre color */
  --couleur-declare-trait: #2B4A6F; /* @genre color */
  --couleur-declare-fond: #DEE6EE; /* @genre color */
  --couleur-exercice-texte: #7A5C00; /* @genre color */
  --couleur-exercice-trait: #B98A00; /* @genre color */
  --couleur-exercice-fond: #F6EBC8; /* @genre color */
  --couleur-incident-fond: #8E1B16; /* @genre color */
  --couleur-incident-trait: #B3251F; /* @genre color */
  --couleur-incident-texte-sur-fond: #EDEFEA; /* @genre color */
  --couleur-marque-fond: #23328A; /* @genre color */
  --couleur-marque-texte: #EDEFEA; /* @genre color */
  --couleur-marque-fond-survol: #2B3EAB; /* @genre color */
  --couleur-marque-fond-presse: #1A2565; /* @genre color */
  --couleur-action-fond: var(--couleur-marque-fond); /* @genre color */
  --couleur-action-texte: var(--couleur-marque-texte); /* @genre color */
  --couleur-action-fond-survol: var(--couleur-marque-fond-survol); /* @genre color */
  --couleur-action-fond-presse: var(--couleur-marque-fond-presse); /* @genre color */
  --couleur-action-secondaire-fond: #00000000; /* @genre color */
  --couleur-action-secondaire-texte: var(--couleur-marque-fond); /* @genre color */
  --couleur-action-secondaire-texte-survol: #1A2565; /* @genre color */
  --couleur-action-secondaire-fond-presse: #E2E5DE; /* @genre color */
  --couleur-action-inverse-fond: #EDEFEA; /* @genre color */
  --couleur-action-inverse-fond-survol: #DDE0DB; /* @genre color */
  --couleur-action-inverse-fond-presse: #C6CCC3; /* @genre color */
  --couleur-action-inverse-texte: #16211C; /* @genre color */
  --couleur-champ-fond: #FFFFFF; /* @genre color */
  --couleur-champ-fond-inactif: #E2E5DE; /* @genre color */
  --couleur-champ-trait: #52625A; /* @genre color */
  --couleur-champ-trait-focus: #16211C; /* @genre color */
  --couleur-champ-texte: #16211C; /* @genre color */
  --couleur-champ-indice: #52625A; /* @genre color */
  --couleur-champ-fond-succes: #DCEBE1; /* @genre color */
  --couleur-champ-trait-succes: #1D7A4C; /* @genre color */
  --couleur-anomalie-texte: #16211C; /* @genre color */
  --couleur-anomalie-trait: #16211C; /* @genre color */
  --couleur-anomalie-fond: #E2E5DE; /* @genre color */
  --couleur-pied-fond: #E2E5DE; /* @genre color */
  --couleur-pied-trait: #52625A; /* @genre color */
  --couleur-role-texte: #3A4A43; /* @genre color */
  --couleur-role-trait: #52625A; /* @genre color */
  --couleur-role-fond: #F7F8F4; /* @genre color */
  --couleur-chargement-bloc: #C6CCC3; /* @genre color */
  --couleur-chargement-texte: #3A4A43; /* @genre color */
  --couleur-interactif-survol: #E2E5DE; /* @genre color */
  --couleur-interactif-presse: #D3D8D0; /* @genre color */
}

/* MAVAR — typographie — API publique : un rôle se choisit, il ne se recompose pas. GÉNÉRÉ depuis tokens/mavar.tokens.json. Ne pas éditer à la main : éditer le JSON puis régénérer (tokens/generer-css.md). */
:root{
  --famille-titre: Archivo, 'Archivo', 'Helvetica Neue', Arial, sans-serif; /* @genre font */
  --famille-texte: 'IBM Plex Sans', 'Segoe UI', system-ui, sans-serif; /* @genre font */
  --famille-technique: 'IBM Plex Mono', ui-monospace, 'Courier New', monospace; /* @genre font */
  --graisse-normal: 400; /* @genre other */
  --graisse-moyen: 500; /* @genre other */
  --graisse-appuye: 600; /* @genre other */
  --graisse-fort: 700; /* @genre other */
  --mesure-consigne: 34ch; /* @genre other */
  --mesure-corps: 68ch; /* @genre other */
  --mesure-legal: 72ch; /* @genre other */
  --mesure-nav: 40ch; /* @genre other */
  --mesure-page-large: 1200px; /* @genre other */
  --mesure-numero-etape: 2.4em; /* @genre other */
  --texte-consigne: var(--graisse-fort) 28px/1.25 var(--famille-texte); /* @genre font */
  --texte-consigne-suivi: 0; /* @genre other */
  --texte-consigne-etape: var(--graisse-moyen) 20px/1.45 var(--famille-texte); /* @genre font */
  --texte-consigne-etape-suivi: 0; /* @genre other */
  --texte-titre-page: var(--graisse-fort) 24px/1.2 var(--famille-titre); /* @genre font */
  --texte-titre-page-suivi: -0.01em; /* @genre other */
  --texte-titre-bloc: var(--graisse-appuye) 19px/1.3 var(--famille-titre); /* @genre font */
  --texte-titre-bloc-suivi: -0.005em; /* @genre other */
  --texte-corps: var(--graisse-normal) 17px/1.55 var(--famille-texte); /* @genre font */
  --texte-corps-suivi: 0; /* @genre other */
  --texte-corps-dense: var(--graisse-normal) 15px/1.5 var(--famille-texte); /* @genre font */
  --texte-corps-dense-suivi: 0; /* @genre other */
  --texte-etiquette: var(--graisse-moyen) 13px/1.4 var(--famille-technique); /* @genre font */
  --texte-etiquette-suivi: 0.08em; /* @genre other */
  --texte-etiquette-casse: uppercase; /* @genre other */
  --texte-micro: var(--graisse-normal) 12px/1.4 var(--famille-technique); /* @genre font */
  --texte-micro-suivi: 0.02em; /* @genre other */
  --texte-incident-titre: var(--graisse-fort) 34px/1.1 var(--famille-titre); /* @genre font */
  --texte-incident-titre-suivi: 0.01em; /* @genre other */
  --texte-regime: var(--graisse-fort) 14px/1.35 var(--famille-texte); /* @genre font */
  --texte-regime-suivi: 0.06em; /* @genre other */
  --texte-regime-casse: uppercase; /* @genre other */
  --texte-nav: var(--graisse-moyen) 16px/1.3 var(--famille-texte); /* @genre font */
  --texte-nav-suivi: 0; /* @genre other */
  --texte-fil: var(--graisse-normal) 15px/1.4 var(--famille-texte); /* @genre font */
  --texte-fil-suivi: 0; /* @genre other */
  --texte-pied: var(--graisse-normal) 15px/1.6 var(--famille-texte); /* @genre font */
  --texte-pied-suivi: 0; /* @genre other */
  --texte-legal: var(--graisse-normal) 17px/1.7 var(--famille-texte); /* @genre font */
  --texte-legal-suivi: 0; /* @genre other */
  --texte-marque: var(--graisse-fort) 19px/1 var(--famille-titre); /* @genre font */
  --texte-marque-suivi: 0.02em; /* @genre other */
}

/* MAVAR — espacement — vocabulaire par rôle exclusivement. GÉNÉRÉ depuis tokens/mavar.tokens.json. Ne pas éditer à la main : éditer le JSON puis régénérer (tokens/generer-css.md). */
:root{
  --espace-interne-serre: 8px; /* @genre spacing */
  --espace-interne: 16px; /* @genre spacing */
  --espace-interne-bloc: 24px; /* @genre spacing */
  --espace-gouttiere: 12px; /* @genre spacing */
  --espace-entre-blocs: 24px; /* @genre spacing */
  --espace-entre-sections: 48px; /* @genre spacing */
  --espace-marge-page: 20px; /* @genre spacing */
  --espace-marge-borne: 64px; /* @genre spacing */
  --espace-entre-champs: 20px; /* @genre spacing */
  --espace-libelle-champ: 6px; /* @genre spacing */
  --espace-champ-aide: 6px; /* @genre spacing */
  --espace-interne-nav: 12px; /* @genre spacing */
  --espace-entre-groupes: 32px; /* @genre spacing */
  --espace-lignes-liees: 2px; /* @genre spacing */
  --espace-interne-pastille: 2px; /* @genre spacing */
}

/* MAVAR — formes : rayons, traits, filets, hachure. GÉNÉRÉ depuis tokens/mavar.tokens.json. Ne pas éditer à la main : éditer le JSON puis régénérer (tokens/generer-css.md). */
:root{
  --rayon-nul: 0px; /* @genre radius */
  --rayon-bloc: 6px; /* @genre radius */
  --rayon-controle: 8px; /* @genre radius */
  --rayon-pastille: 999px; /* @genre radius */
  --trait-fin: 1px; /* @genre other */
  --trait-moyen: 2px; /* @genre other */
  --trait-marque: 4px; /* @genre other */
  --trait-bande: 8px; /* @genre other */
  --trait-focus: 3px; /* @genre other */
  --trait-focus-ecart: 2px; /* @genre other */
  --hachure-exercice: repeating-linear-gradient(135deg, var(--couleur-exercice-trait) 0 10px, var(--couleur-exercice-fond) 10px 20px); /* @genre other */
  --filet-entete: 0 1px 0 0 var(--couleur-trait-discret); /* @genre shadow */
}

/* MAVAR — mouvement. GÉNÉRÉ depuis tokens/mavar.tokens.json. Ne pas éditer à la main : éditer le JSON puis régénérer (tokens/generer-css.md). */
:root{
  --duree-rapide: 120ms; /* @genre other */
  --duree-normale: 200ms; /* @genre other */
  --courbe-sortie: cubic-bezier(0.2, 0, 0, 1); /* @genre other */
}

/* MAVAR — cibles tactiles, couches d'empilement, rupture structurelle. GÉNÉRÉ depuis tokens/mavar.tokens.json. Ne pas éditer à la main : éditer le JSON puis régénérer (tokens/generer-css.md). */
:root{
  --cible-minimale: 44px; /* @genre spacing */
  --cible-confort: 56px; /* @genre spacing */
  --cible-borne: 96px; /* @genre spacing */
  --cible-nav: 48px; /* @genre spacing */
  --couche-entete: 10; /* @genre other */
  --couche-confirmation: 20; /* @genre other */
  --couche-incident: 100; /* @genre other */
  --rupture-tableau-en-cartes: 40em; /* @genre other */
}

/* Seconde échelle : borne murale ou d'accueil, distance ≈ 150 cm. Poser data-echelle="borne" sur <html>. Ce n'est pas une media query : c'est un mode de déploiement. */
[data-echelle="borne"]{
  --texte-consigne: var(--graisse-fort) 64px/1.2 var(--famille-texte); /* @genre font */
  --texte-consigne-etape: var(--graisse-moyen) 44px/1.35 var(--famille-texte); /* @genre font */
  --texte-titre-page: var(--graisse-fort) 56px/1.1 var(--famille-titre); /* @genre font */
  --texte-titre-bloc: var(--graisse-appuye) 40px/1.2 var(--famille-titre); /* @genre font */
  --texte-corps: var(--graisse-normal) 32px/1.45 var(--famille-texte); /* @genre font */
  --texte-corps-dense: var(--graisse-normal) 28px/1.4 var(--famille-texte); /* @genre font */
  --texte-etiquette: var(--graisse-moyen) 22px/1.3 var(--famille-technique); /* @genre font */
  --texte-micro: var(--graisse-normal) 20px/1.35 var(--famille-technique); /* @genre font */
  --texte-incident-titre: var(--graisse-fort) 88px/1.05 var(--famille-titre); /* @genre font */
  --texte-regime: var(--graisse-fort) 26px/1.25 var(--famille-texte); /* @genre font */
  --texte-nav: var(--graisse-moyen) 30px/1.25 var(--famille-texte); /* @genre font */
  --texte-fil: var(--graisse-normal) 26px/1.35 var(--famille-texte); /* @genre font */
  --texte-pied: var(--graisse-normal) 26px/1.5 var(--famille-texte); /* @genre font */
  --texte-legal: var(--graisse-normal) 30px/1.6 var(--famille-texte); /* @genre font */
  --texte-marque: var(--graisse-fort) 40px/1 var(--famille-titre); /* @genre font */
}

@media (prefers-reduced-motion: reduce){
  :root{
    --duree-rapide: 0ms; /* @genre other */
    --duree-normale: 0ms; /* @genre other */
  }
}

/* MAVAR — socle d'éléments. Uniquement ce qui doit être vrai partout ; aucune valeur en dur. */
*,*::before,*::after{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--couleur-fond-page);color:var(--couleur-texte-principal);font:var(--texte-corps);letter-spacing:var(--texte-corps-suivi);text-wrap:pretty;-webkit-font-smoothing:antialiased}
h1,h2,h3{margin:0}
h1{font:var(--texte-titre-page);letter-spacing:var(--texte-titre-page-suivi)}
h2,h3{font:var(--texte-titre-bloc);letter-spacing:var(--texte-titre-bloc-suivi)}
p{margin:0;max-width:var(--mesure-corps)}
/* Un lien est un élément ACTIONNABLE : il consomme couleur.action, jamais couleur.marque.
   L'indirection existe pour que l'identité et la fonction puissent diverger — une identité de marque
   dont le primaire ne tiendrait pas AAA, ou serait trop proche du bleu « déclaré », obligerait
   l'action à bouger sans que la marque bouge. Consommer marque ici laisserait les liens du mauvais
   côté de cette divergence. Corrigé au lot 5 ; aucun effet visuel aujourd'hui, les valeurs étant
   identiques — c'est le meilleur moment pour le faire. */
a{color:var(--couleur-action-fond);text-decoration-line:underline;text-decoration-thickness:var(--trait-fin);text-underline-offset:3px}
a:hover{color:var(--couleur-action-secondaire-texte-survol);text-decoration-thickness:var(--trait-moyen)}
a:active{color:var(--couleur-action-fond-presse)}

/* FOCUS. L'anneau encre est calibré pour les surfaces claires. Sur une surface sombre ou saturée il
   descend à 1,00:1 (bloc consigne), 1,83:1 (mode incident) et 1,49:1 (barre de marque) — donc
   invisible. Les composants qui posent une telle surface portent data-surface="sombre" et la règle
   ci-dessous bascule l'anneau sur la variante papier : 14,30 / 7,82 / 9,57:1.
   Aucun composant n'a à choisir sa couleur de focus, et outline n'est jamais supprimé. */
:focus-visible{outline:var(--trait-focus) solid var(--couleur-trait-focus);outline-offset:var(--trait-focus-ecart)}
[data-surface="sombre"] :focus-visible,[data-surface="sombre"]:focus-visible{outline-color:var(--couleur-trait-focus-sur-sombre)}

/* LIEN D'ÉVITEMENT. Hors écran jusqu'au focus, puis posé au-dessus de tout sauf le mode incident.
   Sans lui, un utilisateur clavier traverse la navigation entière à chaque page.
   Le sélecteur est `:focus` et NON `:focus-visible`, par nature de l'élément : un lien d'évitement
   n'est jamais atteint autrement qu'au clavier, donc l'heuristique de modalité de `:focus-visible`
   n'a rien à arbitrer ici — elle ne peut qu'introduire des cas où le lien reste caché.
   Mesuré (déclarations forcées, l'iframe de prévisualisation n'ayant pas le focus fenêtre) :
   hauteur 44 px, contraste texte/fond et bordure/fond 16,56:1. */
.mavar-evitement{position:absolute;left:-9999px;top:0;z-index:var(--couche-confirmation)}
.mavar-evitement:focus{left:var(--espace-marge-page);top:var(--espace-interne-serre);position:fixed;display:inline-flex;align-items:center;min-height:var(--cible-minimale);padding:0 var(--espace-interne);background:var(--couleur-fond-bloc-eleve);color:var(--couleur-texte-principal);border:var(--trait-moyen) solid var(--couleur-texte-principal);border-radius:var(--rayon-controle);text-decoration:none;font:var(--texte-nav)}

button,input,select,textarea{font:inherit;color:inherit}
button{min-height:var(--cible-minimale);cursor:pointer}

/* ÉTATS INTERACTIFS — LOT 4.
   Ces règles sont ici et non en inline, et ce n'est pas un choix de rangement : un style inline
   l'emporte toujours sur une règle d'attribut, donc une couleur de variante posée en inline rendrait
   son propre survol inopérant en silence. C'est la leçon acquise lors de la passe responsive, et
   elle s'applique à l'identique aux états.
   Les composants ne posent plus que la géométrie en inline, plus un attribut de variante.
   Le survol et l'appui sont des pseudo-classes CSS : ils couvrent le clavier, ne survivent pas au
   doigt qui quitte la cible (pas de survol collé au tactile) et ne sont pas écrasés au rendu
   suivant — trois défauts de la mutation directe de style qu'ils remplacent. */
[data-bouton]{background:var(--couleur-action-fond);color:var(--couleur-action-texte);border:var(--trait-moyen) solid var(--couleur-action-fond);transition:background var(--duree-rapide) var(--courbe-sortie),color var(--duree-rapide) var(--courbe-sortie),border-color var(--duree-rapide) var(--courbe-sortie)}
[data-bouton="primaire"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-fond-survol);border-color:var(--couleur-action-fond-survol)}
[data-bouton="primaire"]:active:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-fond-presse);border-color:var(--couleur-action-fond-presse)}
/* Un bouton à contour n'a pas de fond : il s'assombrit par son texte et son trait. Aucun aplat de
   survol — un fond clair bleuté ressemblerait au fond d'un bloc déclaré. L'aplat neutre est réservé
   à l'appui, qui est momentané et sous le doigt. */
[data-bouton="secondaire"]{background:transparent;color:var(--couleur-action-secondaire-texte);border-color:var(--couleur-action-fond)}
[data-bouton="secondaire"]:hover:not(:disabled):not([aria-busy="true"]){color:var(--couleur-action-secondaire-texte-survol);border-color:var(--couleur-action-secondaire-texte-survol)}
[data-bouton="secondaire"]:active:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-secondaire-fond-presse)}
/* Variantes inversées : pour une action posée sur une surface sombre ou saturée. Elles remplacent la
   surcharge de style.background du mode incident, qui cassait les états. Non couplées à l'incident :
   l'encre sur papier tient 14,30:1 quelle que soit la surface qui les entoure. */
[data-bouton="inverse"]{background:var(--couleur-action-inverse-fond);color:var(--couleur-action-inverse-texte);border-color:var(--couleur-action-inverse-fond)}
[data-bouton="inverse"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-inverse-fond-survol);border-color:var(--couleur-action-inverse-fond-survol)}
[data-bouton="inverse"]:active:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-inverse-fond-presse);border-color:var(--couleur-action-inverse-fond-presse)}
[data-bouton="inverse-contour"]{background:transparent;color:var(--couleur-texte-sur-inverse);border-color:var(--couleur-texte-sur-inverse)}
[data-bouton="inverse-contour"]:hover:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-inverse-fond);color:var(--couleur-action-inverse-texte)}
[data-bouton="inverse-contour"]:active:not(:disabled):not([aria-busy="true"]){background:var(--couleur-action-inverse-fond-presse);color:var(--couleur-action-inverse-texte)}
/* Désactivé : fond, texte ET bordure changent — acquis du lot 1, jamais l'opacité seule. */
[data-bouton]:disabled{background:var(--couleur-champ-fond-inactif);color:var(--couleur-texte-desactive);border-color:var(--couleur-texte-desactive);cursor:not-allowed}
/* En cours : le bouton garde son apparence d'action — il est occupé, pas indisponible. */
[data-bouton][aria-busy="true"]{cursor:progress}

/* Surfaces neutres cliquables : carte de lieu, entrée de navigation. Sans retour au survol, un
   élément cliquable est indistinguable d'un élément statique à la souris. */
[data-interactif]{transition:background var(--duree-rapide) var(--courbe-sortie)}
[data-interactif]:hover{background:var(--couleur-interactif-survol)}
[data-interactif]:active{background:var(--couleur-interactif-presse)}
/* Champs : ces règles corrigent le défaut visible dans les captures — libellé chevauchant la
   bordure, hauteur de cible sous le plancher, aucun état visible. */
input,select,textarea{min-height:var(--cible-minimale);padding:0 var(--espace-interne-serre);background:var(--couleur-champ-fond);color:var(--couleur-champ-texte);border:var(--trait-moyen) solid var(--couleur-champ-trait);border-radius:var(--rayon-controle);max-width:100%}
textarea{padding:var(--espace-interne-serre);min-height:calc(var(--cible-minimale) * 2)}
input::placeholder,textarea::placeholder{color:var(--couleur-champ-indice);opacity:1}
input:focus-visible,select:focus-visible,textarea:focus-visible{border-color:var(--couleur-champ-trait-focus)}
/* Champ désactivé : fond, texte ET bordure changent. Jamais l'opacité seule — elle dégraderait le
   contraste de la bordure sous 3:1 et ne serait pas annonçable. */
input:disabled,select:disabled,textarea:disabled{background:var(--couleur-champ-fond-inactif);color:var(--couleur-texte-desactive);border-color:var(--couleur-texte-desactive);cursor:not-allowed}
label{display:block}
[dir="rtl"] [data-bande]{border-left:0;border-right-style:solid}
/* TABLEAU ADAPTATIF (Design System 5) — « tableau au-dessus de la rupture, pile de cartes en
   dessous. JAMAIS de defilement horizontal. »

   Le composant React du systeme bascule par matchMedia et un etat React. Le back-office de MAVAR
   est rendu SERVEUR, sans JavaScript par ecran (« amelioration progressive, jamais une
   dependance ») : la bascule est faite en CSS, sur la MEME rupture. Le DS5 ne livre aucune CSS
   pour cela — verifie : --rupture-tableau-en-cartes n'apparait chez lui que dans tokens/cibles.css,
   comme valeur.

   La rupture est INTERPOLEE depuis le jeton, jamais recopiee : une media query ne sait pas lire
   var(), et c'est la seule raison pour laquelle cette regle vit dans le generateur plutot que dans
   la coquille. Le chiffre reste ecrit une seule fois, dans mavar.jetons.json.

   Mesure qui l'a rendue necessaire : les quatre ecrans a tableau DEBORDAIENT de leur boite en
   mobile (375 px). La recette avait mesure le debordement de la PAGE, jamais celui des tableaux.

   Sous la rupture, la ligne devient une carte et l'en-tete de colonne devient le libelle de la
   cellule (data-libelle) : c'est ce qui empeche de « perdre une colonne en mode carte ». L'en-tete
   du tableau sort de l'affichage ET de l'arbre d'accessibilite, la ou le mode carte du DS5 ne rend
   lui non plus aucun en-tete. La colonne d'identite (data-principale) est rendue sans libelle. */
@media (max-width: 40em){
table[data-adaptatif]{display:block}
table[data-adaptatif] thead{display:none}
table[data-adaptatif] caption{display:block}
table[data-adaptatif] tbody{display:flex;flex-direction:column;gap:var(--espace-gouttiere)}
table[data-adaptatif] tr{display:flex;flex-direction:column;gap:var(--espace-interne-serre);background:var(--couleur-fond-bloc-eleve);border:var(--trait-fin) solid var(--couleur-trait-structurel);border-radius:var(--rayon-bloc);padding:var(--espace-interne)}
table[data-adaptatif] td{display:block;border-bottom:0;padding:0}
table[data-adaptatif] td::before{content:attr(data-libelle);display:block;font:var(--texte-regime);letter-spacing:var(--texte-regime-suivi);text-transform:uppercase;color:var(--couleur-texte-tertiaire);margin-bottom:var(--espace-lignes-liees)}
table[data-adaptatif] td[data-principale]::before{content:none}
}
@media (prefers-reduced-motion: reduce){*,*::before,*::after{animation-duration:0ms!important;animation-iteration-count:1!important;transition-duration:0ms!important}}