/* ====================================================================
   galaxie-tokens.css - socle visuel commun aux trois applications
   Version de laboratoire du 29 aout 2026. RIEN N'EST EN LIGNE.

   REGLE DE CONSTRUCTION, ET C'EST TOUT L'INTERET DU FICHIER
   Ce fichier ne redefinit AUCUNE balise (pas de body, pas de h1, pas
   de table). Il ne fait que deux choses :
     1. declarer des variables sous :root ;
     2. definir des classes prefixees « gx- », qui ne s'appliquent qu'aux
        elements qui les portent explicitement.
   Consequence : on peut le charger sur n'importe quelle page des trois
   sites sans rien changer a son apparence. Le jour ou on retire le
   <link>, la page redevient exactement ce qu'elle etait.

   D'OU VIENNENT CES COULEURS
   Elles ne sont pas inventees : elles sont relevees dans les fichiers
   existants (galaxie.css, portail/style.css, fasteval/utils/style.css,
   clicetmots/src/index.css), puis verifiees au contraste. Chaque valeur
   corrigee porte en commentaire le rapport mesure.
   ==================================================================== */

:root{

  /* ---- Fonds ------------------------------------------------------
     Le creme est la seule couleur que les trois sites partagent deja
     a l'identique. Le portail SSO utilise #f7f0c8, tres legerement
     plus clair : on retient #f2ecc4, majoritaire (Fast Eval, Clic &
     Mots, galaxie.css). --------------------------------------------- */
  --gx-fond: #f2ecc4;

  /* Blanc chaud du portail SSO, prefere au rgba(255,255,255,.58) des
     cartes actuelles : une carte translucide change de teinte selon ce
     qu'il y a dessous, donc son texte n'a pas toujours le meme
     contraste. Ici la surface est opaque, donc previsible. */
  --gx-surface: #fffdf6;

  /* Creme sur blanc chaud = 1.17:1. C'est bien trop faible pour que
     l'oeil voie le bord d'une carte : la bordure n'est pas decorative,
     elle est structurelle. */
  --gx-bordure: #dacfa1;
  --gx-bordure-douce: rgba(48,52,61,.12);

  /* ---- Encre ------------------------------------------------------ */
  --gx-encre: #30343d;        /* 10.4:1 sur creme */

  /* Le gris secondaire actuel (#777) tombe a 3.75:1 sur le creme :
     sous le minimum de 4.5:1 pour du texte courant. Assombri. */
  --gx-encre-douce: #5f636b;  /* 5.0:1 sur creme */

  /* ---- Marque et action -------------------------------------------
     DEUX TURQUOISE, ET C'EST VOULU.
     Le turquoise historique #12baa6 est l'identite de la maison, mais
     du blanc pose dessus ne donne que 2.4:1 : le libelle des boutons
     principaux est aujourd'hui difficile a lire, y compris pour un
     adulte. On garde donc #12baa6 pour tout ce qui n'est PAS du texte
     (liseres, pastilles, filets, survols) et on descend d'un cran pour
     le remplissage des boutons. La valeur retenue existe deja dans
     Clic & Mots sous le nom brand-700 : ce n'est pas une couleur
     nouvelle, c'est une couleur qu'on cesse de reserver aux details. */
  --gx-marque: #12baa6;
  --gx-action: #0b756a;         /* blanc dessus : 5.6:1 */
  --gx-action-survol: #095f57;  /* blanc dessus : 7.5:1 */
  --gx-action-encre: #095f57;   /* pour un lien turquoise sur creme */

  /* ---- Accent chaud -----------------------------------------------
     L'ambre est magnifique en aplat et illisible en texte : 1.6:1 sur
     le creme. Deux jetons distincts pour ne plus confondre les deux
     usages. */
  --gx-accent: #efae1c;         /* aplats, liseres, pastilles */
  --gx-accent-encre: #9b6b00;   /* le texte equivalent, 4.6:1 sur surface */

  /* Le marqueur de compte enseignant ou administrateur. Valeur choisie par
     Hugues le 31/08/2026, reprise du badge de administration-enseignants.php.
     Elle est a trois unites de --gx-accent, difference invisible a l'oeil :
     si l'un des deux doit bouger un jour, les faire bouger ensemble.
     ATTENTION au sens de lecture : ceci est un APLAT, pas une encre. Du blanc
     dessus ne donne que 2.0:1 - c'etait le defaut du badge d'origine. Le texte
     pose dessus est de l'encre, qui donne 6.1:1. */
  --gx-role: #efa900;

  /* ---- Couleur propre a chaque application -------------------------
     Elle sert de lisere de carte, de pastille et de reperage. Jamais
     de grand aplat : c'est ce qui distingue une suite d'un patchwork. */
  --gx-app-fasteval: #12baa6;
  --gx-app-schoolmonsters: #7b4bb7;  /* 5.9:1 en blanc dessus */
  --gx-app-clicetmots: #efae1c;
  --gx-app-fastgames: #e76f51;       /* le corail, quatrieme application */

  /* ---- Etats -------------------------------------------------------
     Memes quatre couleurs partout, pour que « vert » veuille dire la
     meme chose sur les trois sites. */
  --gx-succes: #1c6e37;
  --gx-succes-fond: #e8f4e9;
  --gx-alerte: #a15c00;
  --gx-alerte-fond: #fdf1dd;
  --gx-erreur: #8a2f2a;
  --gx-erreur-fond: #fbeeed;
  --gx-info: #095f57;
  --gx-info-fond: #e6f4f2;

  /* ---- Geometrie ---------------------------------------------------
     Une seule echelle, multiples de 4. Les valeurs de rayon sont la
     moyenne de ce qui existe deja : 10 px cote champ, 14 px cote carte
     (Fast Eval fait 9/14, le portail 10/20). */
  --gx-esp-1: 4px;
  --gx-esp-2: 8px;
  --gx-esp-3: 12px;
  --gx-esp-4: 16px;
  --gx-esp-6: 24px;
  --gx-esp-8: 32px;
  --gx-esp-12: 48px;

  --gx-rayon-champ: 10px;
  --gx-rayon-carte: 14px;
  --gx-rayon-pilule: 999px;

  --gx-ombre-carte: 0 4px 12px rgba(0,0,0,.05);
  --gx-ombre-relief: 0 9px 19px rgba(0,0,0,.09);

  /* Largeur de lecture : Fast Eval cadre a 1068 px, School Monsters a
     960. On prend 1068, qui laisse respirer les tableaux enseignants
     sans casser la grille 960 encore en place. */
  --gx-largeur: 1068px;

  /* Cible tactile minimale, pour un doigt de CE1 sur tablette. */
  --gx-touche: 44px;

  /* ---- Typographie -------------------------------------------------
     Lexend est deja chargee par Clic & Mots. La pile de repli compte
     autant que la police elle-meme : si Google Fonts ne repond pas, la
     page doit rester lisible, pas retomber sur du Times. */
  --gx-police: "Lexend", system-ui, "Segoe UI", Arial, sans-serif;

  /* Echelle en rem, jamais en vw. Fast Eval declare aujourd'hui
     body{font-size:2vw} : sur un ecran de 1920 px le texte fait 38 px,
     sur un telephone de 360 px il fait 7 px. C'est la cause premiere
     des ecarts de taille d'une page a l'autre. */
  --gx-t-micro: .8125rem;   /* 13px - legendes, aides */
  --gx-t-petit: .875rem;    /* 14px - sous-titres, tableaux denses */
  --gx-t-base: 1rem;        /* 16px - texte courant */
  --gx-t-moyen: 1.125rem;   /* 18px - texte eleve */
  --gx-t-titre-2: 1.3125rem;/* 21px - titre de section */
  --gx-t-titre-1: 1.75rem;  /* 28px - titre de page */
}

/* ====================================================================
   DEUX DENSITES, UNE SEULE IDENTITE
   Le meme composant, ecrit une fois, se resserre cote enseignant et
   s'elargit cote eleve. On ne duplique pas les classes : on change
   trois variables sur le <body>.
   ==================================================================== */

.gx-eleve{
  --gx-densite-y: var(--gx-esp-4);
  --gx-densite-x: var(--gx-esp-6);
  --gx-densite-texte: var(--gx-t-moyen);
  --gx-densite-touche: 52px;
}

.gx-enseignant{
  --gx-densite-y: var(--gx-esp-2);
  --gx-densite-x: var(--gx-esp-3);
  --gx-densite-texte: var(--gx-t-petit);
  --gx-densite-touche: var(--gx-touche);
}

/* ====================================================================
   BOITE DE MESURE, LIMITEE AUX COMPOSANTS
   Bootstrap impose box-sizing:border-box a toute la page de Fast Eval ;
   School Monsters, lui, ne le fait pas. Sans cette regle, le meme
   composant serait plus large de la valeur de ses marges interieures
   sur un site et pas sur l'autre. On la pose donc sur les classes
   « gx- » et sur elles seules, pour ne rien changer au reste de la page.
   ==================================================================== */
[class*="gx-"],[class*="gx-"]::before,[class*="gx-"]::after{box-sizing:border-box;}

/* ====================================================================
   COMPOSANTS
   Tous prefixes « gx- ». Aucun ne s'active tant qu'une page ne le
   demande pas nommement.
   ==================================================================== */

/* ---- Typographie commune -------------------------------------------
   Une page qui veut Lexend le demande en posant « gx-typo » sur son <body>.
   La classe l'emporte sur les « body{font-family:...} » historiques de Fast
   Eval et de School Monsters (une classe pese plus qu'un selecteur de
   balise), et il suffit de la retirer pour rendre a la page sa police
   d'origine. C'est le seul endroit ou le socle touche a du texte existant,
   et il ne le fait que sur demande.
   Le <link> vers Google Fonts doit accompagner cette classe ; sans lui, la
   pile de repli prend le relais et la page reste lisible. */
.gx-typo{font-family:var(--gx-police);}

/* ---- Coque de page ------------------------------------------------ */
.gx-page{
  width:min(var(--gx-largeur), calc(100% - 32px));
  margin:0 auto;
  padding:var(--gx-esp-8) 0 var(--gx-esp-12);
}

/* ---- En-tete d'application ----------------------------------------
   Le 03/09/2026, les anciennes pages affichaient encore une carte arrondie
   centree alors que Fast Eval et Clic & Mots utilisaient deja le bandeau V2
   pleine largeur. Ce composant garde l'ancien HTML pour ne pas dupliquer 180
   gabarits, mais reprend desormais exactement sa geometrie : 86 px, logo de
   40 px, portail puis navigation, apercu et compte. */
html:has(body[class*="gx-app-"]){container-type:inline-size;}
body[class*="gx-app-"]{margin-top:0;overflow-x:clip;}
body[class*="gx-app-"]:has(> .gx-entete),
body[class*="gx-app-"] > *:has(> .gx-entete){padding-top:0 !important;}
body[class*="gx-app-"] > *:has(> .gx-entete){margin-top:0 !important;}
.gx-entete{
  position:relative;
  left:50%;
  display:flex;
  box-sizing:border-box;
  width:100cqw !important;
  max-width:none !important;
  min-height:86px;
  align-items:center;
  gap:14px;
  flex-wrap:wrap;
  padding:12px max(24px,calc((100vw - 1440px) / 2));
  margin:0 0 24px -50cqw !important;
  background:rgba(255,255,255,.9);
  border:0 !important;
  border-bottom:1px solid var(--gx-bordure) !important;
  border-radius:0 !important;
  box-shadow:0 3px 14px rgba(79,65,22,.06) !important;
  backdrop-filter:blur(12px);
}
.gx-entete-logo{
  display:block;
  max-width:150px;
  width:auto;
  height:40px !important;
  max-height:40px !important;
  object-fit:contain;
  order:0;
}
.gx-entete-portail{
  display:inline-flex;
  align-items:center;
  gap:8px;
  min-height:var(--gx-touche);
  padding:9px 16px;
  border:1px solid #eadcae;
  border-radius:12px;
  color:var(--gx-encre);
  font-size:.92rem;
  font-weight:600;
  text-decoration:none;
  /* Ces trois-la ne servent qu'aux <button> : un lien n'a ni fond ni police
     propres, un bouton si. Sur Clic & Mots le « Retour » est un bouton, parce
     qu'il agit sur l'historique au lieu de mener a une adresse - et il portait
     donc le gris par defaut du navigateur au milieu de liens transparents.
     Constate a la capture le 31/08/2026. */
  background:#fffdfa;
  font-family:"Lexend", "Segoe UI", sans-serif;
  cursor:pointer;
  order:2;
}
.gx-entete-portail[href="/v2/portail/"]{
  order:1;
}
.gx-entete-portail:hover{border-color:var(--gx-marque);background:#f2fbf9;}
/* La V2 est la production officielle. Les rares anciens gabarits encore
   générés avec ce noeud ne doivent plus afficher de marqueur de préversion. */
.preview-badge{display:none !important;}
.gx-entete .user-menu{
  position:relative;
  margin-left:0;
  order:9;
}
.gx-entete .user-menu summary{
  display:flex;
  min-height:50px;
  align-items:center;
  gap:10px;
  padding:5px 12px 5px 6px;
  border:1px solid var(--gx-bordure);
  border-radius:14px;
  background:#fffdfa;
  color:var(--gx-encre);
  cursor:pointer;
  list-style:none;
}
.gx-entete .user-menu summary::-webkit-details-marker{display:none;}
.gx-entete .user-avatar{
  display:grid;
  width:38px;
  height:38px;
  place-items:center;
  border-radius:50%;
  background:#fff0b7;
  color:var(--gx-action);
  flex:none;
  font-weight:700;
}
.gx-entete .user-texte{
  display:flex;
  min-width:0;
  flex-direction:column;
  align-items:flex-start;
  line-height:1.25;
}
.gx-entete .user-texte strong{
  display:block;
  max-width:200px;
  overflow:hidden;
  font-size:.9rem;
  font-weight:600;
  text-overflow:ellipsis;
  white-space:nowrap;
}
/* Le role, quand le compte n'est pas celui d'un eleve. Il prend la place du
   nom du site sous l'identite : le site, le logo et le lisere le disent deja
   trois fois, alors que le role, lui, n'est ecrit nulle part ailleurs - et
   c'est justement ce qu'il faut voir d'un coup d'oeil avant d'agir sur les
   comptes d'une classe. */
.gx-entete .gx-entete-role{
  display:inline-block;
  margin-top:0;
  padding:1px 9px;
  border-radius:var(--gx-rayon-pilule);
  background:#fdeecb;
  color:#8a5a06;
  font-size:.68rem;
  font-weight:700;
  letter-spacing:.03em;
  text-transform:uppercase;
}
.gx-entete .user-popover{
  position:absolute;
  top:calc(100% + 8px);
  right:0;
  z-index:30;
  display:grid;
  min-width:220px;
  overflow:hidden;
  border:1px solid var(--gx-bordure);
  border-radius:14px;
  background:#fff;
  box-shadow:0 8px 24px rgba(79,65,22,.1);
}
.gx-entete .user-popover a{
  padding:12px 15px;
  color:var(--gx-encre);
  font-size:.88rem;
  text-decoration:none;
}
.gx-entete .user-popover a:hover,
.gx-entete .user-popover a:focus-visible{background:#f5f5ef;}
/* La pastille peut etre un lien : sur Clic & Mots elle mene a l'espace
   enseignant, a la place du bouton qui doublonnait avec elle. Le survol se
   voit sans changer la couleur du role, qui est justement ce qui la fait
   reconnaitre - d'ou l'assombrissement plutot qu'une autre teinte. */
a.gx-entete-role{text-decoration:none;cursor:pointer;}
a.gx-entete-role:hover,
a.gx-entete-role:focus-visible{filter:brightness(.92);text-decoration:underline;}
.gx-entete-sortie{
  min-height:var(--gx-touche);
  display:inline-flex;
  align-items:center;
  padding:0 var(--gx-esp-3);
  color:var(--gx-erreur);
  font-size:var(--gx-t-petit);
  text-decoration:none;
}
.gx-entete-sortie:hover{text-decoration:underline;}

/* Cadre la barre sur la meme largeur que le contenu de la page. Sans cela,
   sur un grand ecran, l'en-tete s'etire d'un bord a l'autre pendant que le
   contenu reste centre : les deux ne se lisent plus comme une seule page.
   Chaque site pose sa propre largeur avec --gx-largeur-page (School Monsters
   960 px, herite de sa grille) ; a defaut, c'est la largeur commune. */
.gx-entete-cadree{max-width:none;}

/* ---- Cartouche de titre -------------------------------------------
   Le titre tient sur une ligne tant que la largeur le permet, et les
   boutons passent SOUS lui plutot qu'a cote : c'est la regle qui evite
   les cartouches casses sur deux lignes de School Monsters. */
/* margin-bottom seul, et non le raccourci « margin » : le raccourci
   remettrait margin-left a 0 et annulerait le centrage de
   .gx-entete-cadree quand les deux classes cohabitent. Constate a la
   mesure : le cartouche etait decale de 21 px par rapport a la barre. */
.gx-cartouche{margin-bottom:var(--gx-esp-6);}
.gx-cartouche h1{
  margin:0;
  color:var(--gx-encre);
  font-size:var(--gx-t-titre-1);
  font-weight:500;
  line-height:1.2;
  /* Le titre est centre sur la largeur du cartouche, comme celui du bandeau
     des fiches de School Monsters. C'est la meme regle partout. */
  text-align:center;
  text-wrap:balance;
}
/* Un mot peut etre accentue en turquoise ; les apostrophes et les mots
   de liaison restent en encre. */
.gx-cartouche h1 em{font-style:normal;color:var(--gx-action-encre);}
.gx-cartouche p{margin:var(--gx-esp-1) 0 0;color:var(--gx-encre-douce);font-size:var(--gx-t-petit);text-align:center;}
.gx-cartouche-actions{display:flex;flex-wrap:wrap;gap:var(--gx-esp-2);margin-top:var(--gx-esp-3);}

/* Cartouche d'accueil : un titre seul, cadre sur la meme largeur que le
   contenu de la page. Sert aux pages d'entree des trois sites, ou le titre
   ne dit pas le nom de l'ecran mais ce qu'on vient y faire. */
.gx-cartouche-acceuil{
  width:min(960px, calc(100% - 24px));
  margin:0 auto var(--gx-esp-6);
}

/* ---- Boutons -------------------------------------------------------
   Quatre roles, jamais plus. Meme hauteur minimale partout, pour que
   deux boutons cote a cote ne soient jamais decales. */
.gx-bouton{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:var(--gx-esp-2);
  min-height:var(--gx-densite-touche, var(--gx-touche));
  padding:0 var(--gx-esp-4);
  border:1px solid transparent;
  border-radius:var(--gx-rayon-champ);
  font:inherit;
  font-size:var(--gx-t-petit);
  font-weight:600;
  text-decoration:none;
  cursor:pointer;
}
.gx-bouton-principal{background:var(--gx-action);color:#fff;}
.gx-bouton-principal:hover{background:var(--gx-action-survol);color:#fff;}
.gx-bouton-secondaire{background:var(--gx-surface);border-color:var(--gx-action);color:var(--gx-action-encre);}
.gx-bouton-secondaire:hover{background:#fff;}
.gx-bouton-discret{background:transparent;border-color:var(--gx-bordure);color:var(--gx-encre);}
.gx-bouton-discret:hover{border-color:var(--gx-encre-douce);}
.gx-bouton-danger{background:var(--gx-surface);border-color:var(--gx-erreur);color:var(--gx-erreur);}
.gx-bouton-danger:hover{background:var(--gx-erreur);color:#fff;}

/* Le focus clavier n'est pas un detail d'accessibilite abstrait : sans
   lui, un eleve qui navigue au clavier ne sait pas ou il est. */
.gx-bouton:focus-visible,
.gx-champ input:focus-visible,
.gx-champ select:focus-visible,
.gx-entete a:focus-visible{
  outline:3px solid var(--gx-action);
  outline-offset:2px;
}

/* ---- Champs de formulaire ------------------------------------------ */
.gx-champ{display:grid;gap:var(--gx-esp-1);margin-bottom:var(--gx-esp-4);}
.gx-champ label{font-size:var(--gx-t-petit);font-weight:600;color:var(--gx-encre);}
.gx-champ input,
.gx-champ select{
  font:inherit;
  min-height:var(--gx-densite-touche, var(--gx-touche));
  padding:0 var(--gx-esp-3);
  border:1px solid var(--gx-bordure);
  border-radius:var(--gx-rayon-champ);
  background:#fff;
  color:var(--gx-encre);
}
/* L'aide et l'erreur occupent le meme emplacement sur les trois sites :
   sous le champ, jamais a cote, jamais en infobulle. */
.gx-champ-aide{font-size:var(--gx-t-micro);color:var(--gx-encre-douce);}
.gx-champ-erreur{font-size:var(--gx-t-micro);color:var(--gx-erreur);font-weight:600;}
.gx-champ.est-en-erreur input,
.gx-champ.est-en-erreur select{border-color:var(--gx-erreur);}

/* ---- Cartes -------------------------------------------------------- */
.gx-carte{
  display:flex;
  flex-direction:column;
  gap:var(--gx-esp-2);
  padding:var(--gx-esp-4);
  background:var(--gx-surface);
  border:1px solid var(--gx-bordure);
  border-radius:var(--gx-rayon-carte);
  box-shadow:var(--gx-ombre-carte);
  color:var(--gx-encre);
  text-decoration:none;
}
a.gx-carte{transition:transform .16s, box-shadow .16s, border-color .16s;}
a.gx-carte:hover{transform:translateY(-3px);box-shadow:var(--gx-ombre-relief);border-color:var(--gx-marque);}
.gx-carte h3{margin:0;font-size:var(--gx-t-titre-2);font-weight:600;}
.gx-carte p{margin:0;color:var(--gx-encre-douce);font-size:var(--gx-t-petit);line-height:1.45;}
.gx-carte-liseree{border-left:6px solid var(--gx-marque);}
.gx-grille{display:grid;gap:var(--gx-esp-4);grid-template-columns:repeat(auto-fit,minmax(240px,1fr));}

/* ---- Pastilles ----------------------------------------------------- */
.gx-pastille{
  display:inline-flex;
  align-items:center;
  padding:2px var(--gx-esp-2);
  border-radius:var(--gx-rayon-pilule);
  font-size:var(--gx-t-micro);
  font-weight:600;
}
.gx-pastille-succes{background:var(--gx-succes-fond);color:var(--gx-succes);}
.gx-pastille-alerte{background:var(--gx-alerte-fond);color:var(--gx-alerte);}
.gx-pastille-erreur{background:var(--gx-erreur-fond);color:var(--gx-erreur);}
.gx-pastille-info{background:var(--gx-info-fond);color:var(--gx-info);}

/* ---- Tableau enseignant --------------------------------------------
   Dense mais aere. L'alternance de fond est volontairement tres faible :
   plus marquee, elle se lit comme une selection. */
.gx-tableau-cadre{overflow-x:auto;border:1px solid var(--gx-bordure);border-radius:var(--gx-rayon-carte);background:var(--gx-surface);}
.gx-tableau{width:100%;border-collapse:collapse;font-size:var(--gx-densite-texte, var(--gx-t-petit));}
.gx-tableau th,
.gx-tableau td{padding:var(--gx-densite-y,10px) var(--gx-densite-x,12px);text-align:left;}
.gx-tableau thead th{
  background:var(--gx-action);
  color:#fff;
  font-weight:600;
  position:sticky;
  top:0;
}
.gx-tableau tbody tr+tr td{border-top:1px solid var(--gx-bordure-douce);}
.gx-tableau tbody tr:nth-child(even){background:rgba(48,52,61,.025);}
/* Les colonnes de chiffres s'alignent : chiffres a chasse fixe. */
.gx-tableau .gx-nombre{text-align:right;font-variant-numeric:tabular-nums;}
.gx-tableau .gx-actions{text-align:right;white-space:nowrap;}

/* ---- Messages d'etat ------------------------------------------------
   Meme forme pour les cinq etats : un titre court, une explication, une
   seule action. C'est la regle qui manque aujourd'hui aux trois sites. */
.gx-etat{
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:var(--gx-esp-2);
  padding:var(--gx-esp-8) var(--gx-esp-4);
  text-align:center;
  background:var(--gx-surface);
  border:1px dashed var(--gx-bordure);
  border-radius:var(--gx-rayon-carte);
}
.gx-etat-signe{font-size:34px;line-height:1;}
.gx-etat h3{margin:0;font-size:var(--gx-t-titre-2);font-weight:600;color:var(--gx-encre);}
.gx-etat p{margin:0;max-width:44ch;color:var(--gx-encre-douce);font-size:var(--gx-t-petit);line-height:1.5;}

.gx-bandeau{
  display:flex;
  align-items:flex-start;
  gap:var(--gx-esp-3);
  padding:var(--gx-esp-3) var(--gx-esp-4);
  border-radius:var(--gx-rayon-champ);
  font-size:var(--gx-t-petit);
  line-height:1.45;
}
.gx-bandeau-succes{background:var(--gx-succes-fond);color:var(--gx-succes);}
.gx-bandeau-alerte{background:var(--gx-alerte-fond);color:var(--gx-alerte);}
.gx-bandeau-erreur{background:var(--gx-erreur-fond);color:var(--gx-erreur);}
.gx-bandeau-info{background:var(--gx-info-fond);color:var(--gx-info);}

/* ---- Chargement ------------------------------------------------------ */
.gx-chargement{
  display:inline-block;
  width:22px;height:22px;
  border:3px solid var(--gx-bordure);
  border-top-color:var(--gx-action);
  border-radius:50%;
  animation:gx-tourne .8s linear infinite;
}
@keyframes gx-tourne{to{transform:rotate(360deg);}}

/* Une animation qui tourne sans fin peut gener un eleve sensible au
   mouvement, et le systeme sait le dire. */
@media (prefers-reduced-motion: reduce){
  .gx-chargement{animation-duration:3s;}
  a.gx-carte{transition:none;}
  a.gx-carte:hover{transform:none;}
}

/* ---- Telephone -------------------------------------------------------
   Un seul point de rupture ici : le reste tient grace a auto-fit et aux
   variables. Moins de requetes media, moins de regressions. */
@media (max-width:720px){
  .gx-entete{min-height:72px;gap:10px;padding:12px;}
  .gx-entete-logo{max-width:120px;}
  .gx-entete .user-menu{width:auto;max-width:100%;}
  .gx-entete .user-texte strong{max-width:140px;}
  .gx-entete-sortie{order:9;padding-left:0;}
  .gx-cartouche h1{font-size:1.5rem;}
  .gx-page{padding-top:var(--gx-esp-4);}
}