@charset "utf-8";
/* ===========================================================================
 * Fichier : public/assets/css/charte.css
 * Projet  : Escape Cards v2
 * Lot     : 1.3 — Gabarits et charte Bootstrap 5
 * ---------------------------------------------------------------------------
 * RÔLE
 * Reprend, à l'identique, les couleurs, les cadres, les boutons et les badges
 * de la v1 (fichiers css/styles.css et css/styles2.css), en les adaptant à
 * Bootstrap 5. Les NOMS DE CLASSES SONT CONSERVÉS (haut-cadre, bas-cadre,
 * btn-EG-bleu, badgeFavoris, bg-levelV-90…) : le code des lots suivants peut
 * reprendre le balisage de la v1 sans le traduire.
 *
 * POURQUOI UNE ADAPTATION ?
 * Bootstrap 5 règle la couleur de ses boutons par des « variables CSS »
 * (--bs-btn-bg…) et non plus par une couleur de fond directe. Écrire
 * seulement « background-color » ne suffirait plus au survol ni au clic :
 * on renseigne donc les variables, ce qui donne exactement les mêmes
 * couleurs qu'en v1, survol et bouton enfoncé compris.
 *
 * ENTRÉES : aucune. SORTIE : mise en forme des pages.
 * Chargée APRÈS bootstrap.min.css (elle a donc le dernier mot).
 * ===========================================================================
 */

/* ---------------------------------------------------------------------------
 * 1. COULEURS DE LA CHARTE (document 01 §7.1)
 * Déclarées une fois ici : un changement de teinte se fait à un seul endroit.
 * ------------------------------------------------------------------------ */
:root {
  --ec-bleu:            #005e8f;
  --ec-bleu-survol:     #004C73;
  --ec-bleu-actif:      #074D73;
  --ec-bleu-bordure:    #02527D;
  --ec-jaune:           #efad2b;
  --ec-jaune-survol:    #D6930D;
  --ec-jaune-bordure:   #C48404;
  /* Lot 10.3 : le turquoise de la v1 (#00afbd) ne laissait au texte blanc
     qu'un contraste de 2,67 pour 4,5 exigés — le plus mauvais du site, et
     justement celui du bouton « Cartes ». Assombri d'un ton (choix de
     Guillaume du 18/09/2026) : même couleur reconnaissable, blanc lisible. */
  --ec-turquoise:       #00838d;
  --ec-turquoise-v1:    #00afbd;   /* la teinte d'origine, pour mémoire */
  --ec-turquoise-survol:#00707a;
  --ec-turquoise-bord:  #006b75;
  --ec-rose:            #D32E70;
  --ec-rose-survol:     #B0295F;
  --ec-rose-bordure:    #C71A5F;
  --ec-violet:          #5823D3;
  --ec-violet-survol:   #421B9E;
  --ec-violet-bordure:  #400EB5;
  --ec-marron:          #82522D;
  --ec-marron-survol:   #593215;
  --ec-marron-bordure:  #824211;
  --ec-rouge-signale:   #C10003;
  --ec-gris-prive:      #666666;
  --ec-gris-texte:      #555555;
  --ec-police-interface: 'Quicksand', sans-serif;

  /* -------------------------------------------------------------------------
     IMP-010 (20/09/2026) — LA PALETTE OFFICIELLE, DANS SON ORDRE
     -------------------------------------------------------------------------
     Les six couleurs du site, telles que Guillaume les a fournies le
     20/09/2026 (fichier « couleurs-site-escape-cards.xlsx ») :

        Turquoise #00AFBD · Bleu #005E8F · Ocre #EFAD2B
        Violet    #5823D3 · Brun #82522E · Rose #D32E70

     L'ORDRE D'EMPLOI, lui, est celui du prototype — c'est celui des onglets
     et celui des colonnes de « Mes jeux » :

        1 bleu · 2 turquoise · 3 violet · 4 rose · 5 brun · 6 ocre

     DEUX SÉRIES DE VARIABLES, ET IL FAUT SAVOIR POURQUOI.
     « --ec-palette-N » porte la teinte EXACTE du fichier : elle sert aux
     aplats, aux filets et aux liserés, où rien n'est écrit par-dessus.
     « --ec-palette-N-texte » porte la teinte qui laisse le TEXTE BLANC
     lisible, c'est-à-dire un contraste d'au moins 4,5 pour 1 (règle tenue
     par le site depuis le Lot 10.3). Deux couleurs de la charte ne le
     permettent pas telles quelles et sont donc assombries pour ce seul
     usage :
       - le turquoise #00AFBD ne donne que 2,67 — il passe à #00838d,
         exactement l'assombrissement que vous aviez choisi le 18/09/2026 ;
       - l'ocre #EFAD2B ne donne que 1,97 — il garde sa teinte en aplat mais
         porte du texte SOMBRE (--ec-palette-6-encre) plutôt que du blanc,
         comme le fait déjà le bouton « Créer un jeu ».
     Les quatre autres passent sans retouche : bleu 7,01 · violet 8,09 ·
     brun 6,57 · rose 4,78. */
  --ec-palette-1:        #005E8F;   /* bleu      */
  --ec-palette-2:        #00AFBD;   /* turquoise */
  --ec-palette-3:        #5823D3;   /* violet    */
  --ec-palette-4:        #D32E70;   /* rose      */
  --ec-palette-5:        #82522E;   /* brun      */
  --ec-palette-6:        #EFAD2B;   /* ocre      */

  --ec-palette-1-texte:  #005E8F;
  --ec-palette-2-texte:  #00838d;   /* turquoise assombri, D-… du 18/09/2026 */
  --ec-palette-3-texte:  #5823D3;
  --ec-palette-4-texte:  #D32E70;
  --ec-palette-5-texte:  #82522E;
  --ec-palette-6-texte:  #EFAD2B;
  --ec-palette-6-encre:  #4A3403;   /* l'encre sombre posée sur l'ocre */
}

/* ---------------------------------------------------------------------------
 * 2. STRUCTURE DE PAGE : bandeau bleu + cadre blanc arrondi (v1 à l'identique)
 * ------------------------------------------------------------------------ */
body { margin-top: 20px; }          /* v1 : css/modal.css */

.haut-cadre {
  position: relative;
  box-sizing: content-box;
  border: 4px solid var(--ec-bleu);
  border-bottom: 2px solid var(--ec-bleu);
  margin-top: 6px;
  padding: 10px;
  border-radius: 20px 20px 0 0;
  font: normal normal 16px/1;
  color: var(--ec-jaune);
  text-align: center;
  text-overflow: ellipsis;
  background: var(--ec-bleu);
}
.bas-cadre {
  position: relative;
  box-sizing: content-box;
  padding: 16px;
  border: 4px solid var(--ec-bleu);
  border-top-width: 1px;
  border-radius: 0 0 20px 20px;
  font: normal 15px/1;
  color: rgba(0,0,0,1);
  text-overflow: ellipsis;
  background: rgb(255,255,255);
}
/* La règle « font: normal 15px/1 » de la v1 écrase la hauteur de ligne : on la
   rétablit pour les textes courants, sinon les paragraphes se chevauchent. */
.bas-cadre p, .bas-cadre li, .bas-cadre td, .bas-cadre .card-body { line-height: 1.5; }

img { max-width: 100%; height: auto; }

/* .cadreGauche (filet vertical bleu entre les colonnes de l'accueil) :
   retirée le 19/09/2026 — IMP-002. Les deux formulaires sont désormais
   dans un cadre arrondi qui sépare déjà la colonne du reste de la page,
   et deux traits l'un à côté de l'autre alourdissaient l'ensemble.
   Aucune autre page ne s'en servait. */

/* ---------------------------------------------------------------------------
   IMP-002 (19/09/2026) — LA PAGE D'ACCUEIL REFONDUE
   ---------------------------------------------------------------------------
   Trois colonnes : à gauche les deux onglets d'accès, au centre ce que fait
   le service, à droite les encarts. Rien de tout cela n'est utilisé ailleurs
   sur le site : les règles portent donc des noms qui le disent.
   --------------------------------------------------------------------------- */

/* --- Les deux onglets Connexion / Inscription --------------------------- */
/* Ce sont des « nav-pills » de Bootstrap, redessinées aux couleurs de la
   charte : l'onglet ouvert est jaune, comme le bouton « S'inscrire » et comme
   l'onglet actif du tableau de bord. */
.onglets-acces {
  margin-bottom: 14px;
  gap: 8px;
}
.onglets-acces .nav-link {
  border: 2px solid var(--ec-bleu);
  border-radius: 24px;
  padding: 8px 10px;
  font-family: var(--ec-police-interface);
  font-weight: bold;
  color: var(--ec-bleu);
  background-color: #FFFFFF;
}
.onglets-acces .nav-link:hover { background-color: #EEF4F8; }
/* L'onglet OUVERT : fond bleu de la charte, texte BLANC.
   Pourquoi pas du noir sur ce fond ? Parce que le contraste tomberait à
   2,3 pour 1 — illisible, et très en dessous du minimum de 4,5 exigé par le
   niveau AA que le site tient depuis le Lot 10.3. Le blanc sur ce bleu donne
   5,9 pour 1. Le jaune ocre de la charte, lui, ne donnerait que 3,4 : il
   reste réservé au contour de sélection au clavier, où cette valeur suffit.
   (Remarque relevée par Guillaume le 19/09/2026.)
   Le sélecteur descend jusqu'à .nav-item pour passer devant celui de
   Bootstrap, qui repeint sinon le fond en bleu sans toucher au texte. */
.onglets-acces .nav-item .nav-link.active {
  color: #FFFFFF;
  background-color: var(--ec-bleu);
  border-color: var(--ec-bleu);
}
.onglets-acces .nav-item .nav-link.active:hover {
  color: #FFFFFF;
  background-color: var(--ec-bleu-survol);
  border-color: var(--ec-bleu-survol);
}
.onglets-acces .nav-link:focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: 2px;
}

/* Le cadre qui entoure le formulaire ouvert. Il reprend l'arrondi des cartes
   de jeu : la page garde une seule famille de formes. */
.cadre-acces {
  border: 2px solid var(--ec-bleu);
  border-radius: 14px;
  /* IMP-003 : les champs étaient collés au filet bleu (remarque de Guillaume
     du 19/09/2026). Le cadre reçoit donc une vraie marge intérieure. */
  padding: 18px 14px 22px;
}

/* …mais le code de vérification, lui, la reprend : il a besoin de toute la
   largeur pour ranger ses textes À CÔTÉ de la grille plutôt qu'en dessous
   (seuil de 21 rem, voir captcha.css), et il porte déjà son propre cadre et
   sa propre marge. Sans cette reprise, les 28 px gagnés ci-dessus lui
   coûteraient 80 px de hauteur. */
.cadre-acces .bloc-captcha {
  margin-left: -12px;
  margin-right: -12px;
}

/* --- Le centre de la page ------------------------------------------------ */
.accueil-presentation { padding-top: 6px; }

/* Le titre. « clamp » lui donne une taille qui suit la largeur de l'écran
   entre deux bornes : jamais écrasé sur un téléphone, jamais démesuré sur un
   grand écran, et sans aucun palier brutal entre les deux. */
.accueil-titre {
  font-family: var(--ec-police-interface);
  font-size: clamp(1.75rem, 3.1vw, 2.75rem);
  font-weight: normal;
  line-height: 1.15;
  color: var(--ec-bleu);
  margin: 0 0 14px;
}
.accueil-baseline {
  font-size: clamp(1rem, 1.25vw, 1.15rem);
  line-height: 1.45;
  color: #5F5F5F;
  margin: 0 0 18px;
}
.accueil-visuel {
  display: block;
  width: 100%;
  max-width: 560px;
  height: auto;
  margin: 0 auto;
}

/* Sur un écran étroit, les trois colonnes s'empilent : la présentation passe
   AVANT les formulaires, pour qu'on sache d'abord où l'on est. */
@media (max-width: 991.98px) {
  .accueil-presentation { order: -1; margin-bottom: 18px; }
  .accueil-visuel       { max-width: 420px; }
}

/* --- Le texte mis en forme des deux encarts (IMP-002) -------------------- */
/* L'administrateur peut y mettre du gras, de l'italique, du souligné, une
   courte liste et un lien. Sur fond bleu, un lien doit rester lisible : il
   passe en jaune, la seule couleur de la charte qui tienne le contraste. */
.texte-encart p        { margin: 0 0 .5rem; }
.texte-encart p:last-child { margin-bottom: 0; }
.texte-encart ul,
.texte-encart ol       { margin: 0 0 .5rem; padding-left: 1.2rem; }
/* Le lien : sur ce bleu, le jaune de la charte ne donne que 3,6 pour 1 —
   en dessous du minimum de 4,5 du niveau AA que le site tient depuis le
   Lot 10.3. Cette teinte plus claire, de la même famille, donne 5,2 et reste
   nettement distincte du texte blanc qui l'entoure. */
.texte-encart a        { color: #FFD98A; text-decoration: underline; }
.texte-encart a:hover  { color: #FFFFFF; }

/* ===========================================================================
 * IMP-008 (20/09/2026) — LA CLÉ DE COLLABORATION, SUR DOUZE CRANS
 * ---------------------------------------------------------------------------
 * Remarque de Guillaume : « le code fait champ de texte, il mériterait une
 * mise en forme spéciale (lettres plus espacées sur 12 crans à compléter) pour
 * comprendre que c'est un mot de passe de 12 caractères ».
 *
 * COMMENT LES CRANS SONT FAITS — aucune image, aucune bibliothèque (I-5).
 * Le champ prend une écriture à CHASSE FIXE : toutes les lettres y occupent
 * exactement la même largeur, celle que l'unité « ch » du CSS désigne. Avec
 * un espacement d'un « ch » entre les lettres, chaque caractère occupe donc
 * une case de 2 ch, toujours la même, quelle que soit la lettre tapée.
 * Le fond est un dégradé répété de même période : un trait de 1,5 ch, puis
 * 0,5 ch de vide — douze fois. Les lettres tombent donc pile sur les crans.
 *
 * UN SEUL CHAMP, et non douze cases séparées (piste écartée au document 06
 * §15) : le copier-coller d'un bloc, la dictée à un collègue et la saisie au
 * clavier restent ce qu'ils étaient, et le serveur ne voit aucune différence.
 *
 * LES CRANS MONTRENT LA LONGUEUR ATTENDUE, ILS NE L'IMPOSENT PAS : la clé de
 * 6 caractères héritée de la v1 reste valable (question Q-1), s'affiche sur
 * les six premiers crans, et rien ne la signale comme fautive.
 * ======================================================================== */
/* La règle porte le sélecteur « .input-group > » pour la même raison que
   Bootstrap : sans lui, « .input-group > .form-control { flex: 1 1 auto } »
   l'emporte en précision et le champ s'étire sur toute la largeur, laissant
   un grand vide entre le douzième cran et le compteur. */
.input-group > .champ-cle-collaboration,
.champ-cle-collaboration {
  /* La chasse fixe est ce qui rend tout le reste possible. La pile de polices
     est celle des navigateurs, sans téléchargement. */
  font-family: ui-monospace, "SFMono-Regular", "Cascadia Mono", "Segoe UI Mono",
               "Liberation Mono", Menlo, Consolas, monospace;
  font-size: 1.05rem;
  font-weight: 700;
  letter-spacing: 1ch;          /* une case = 1 ch de lettre + 1 ch de vide */
  /* Les chiffres d'une écriture à chasse fixe le sont déjà, mais on le dit :
     certaines polices de repli trichent sur le « 1 ». */
  font-variant-numeric: tabular-nums;
  /* 1 ch de marge à gauche : la première lettre se pose au milieu du premier
     cran, qui commence à 0,75 ch et mesure 1,5 ch. */
  padding-left: 1ch;
  padding-right: .4ch;
  /* Douze cases de 2 ch = 24 ch, plus le 1 ch de marge : la largeur exacte du
     code. « max-width » garde le champ dans sa colonne sur un téléphone. */
  flex: 0 1 auto;
  width: 25.5ch;
  max-width: 100%;
  /* Les douze crans. « no-repeat » avec une taille de 24 ch : le dégradé ne
     se répète pas au-delà du douzième — un treizième cran laisserait croire
     qu'on attend plus de caractères. */
  background-image: repeating-linear-gradient(to right,
                      #9fb3c0 0, #9fb3c0 1.5ch,
                      rgba(0, 0, 0, 0) 1.5ch, rgba(0, 0, 0, 0) 2ch);
  background-repeat: no-repeat;
  background-size: 24ch 2px;
  background-position: left .75ch bottom .42rem;
}
.champ-cle-collaboration:disabled {
  /* Compte verrouillé : les crans s'effacent avec le reste. */
  background-image: none;
}

/* Le compteur « n sur 12 », accroché à droite du champ. Il reprend l'aspect
   des étiquettes de Bootstrap qui encadrent déjà les champs du formulaire. */
.cle-compteur {
  font-size: .8125rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: #4a5560;
}
.cle-compteur-nombre { font-size: 1rem; }
.cle-compteur--complet {
  border-color: #2e7d4f;
  background: #eaf5ee;
  color: #1f5c39;
}

/* Sur un écran étroit, la chasse fixe et l'espacement d'un « ch » rendent le
   champ plus large que la colonne : on resserre l'espacement plutôt que de
   laisser le champ déborder. Les crans suivent, puisqu'ils sont exprimés dans
   la même unité. */
@media (max-width: 575.98px) {
  .input-group > .champ-cle-collaboration,
  .champ-cle-collaboration {
    font-size: .95rem;
    letter-spacing: .5ch;
    padding-left: .5ch;
    width: 19.25ch;
    background-image: repeating-linear-gradient(to right,
                        #9fb3c0 0, #9fb3c0 1.1ch,
                        rgba(0, 0, 0, 0) 1.1ch, rgba(0, 0, 0, 0) 1.5ch);
    background-size: 18ch 2px;
    background-position: left .3ch bottom .42rem;
  }
}

.barre-laterale {
  position: relative;
  padding: 5px;
  color: floralwhite;
  background: var(--ec-bleu);
  /* IMP-008 : les trois encarts bleus de la colonne de droite avaient des
     angles vifs, seuls de leur espèce sur la page. Ils prennent l'arrondi de
     14 px du cadre « Connexion / Inscription » qui leur fait face (choix de
     Guillaume du 20/09/2026) : les deux colonnes se répondent.
     « overflow: hidden » garde le contenu dans les angles arrondis. */
  border-radius: 14px;
  overflow: hidden;
}
/* Correction du Lot 10.2 (débordement repéré au 7.1) : une « row » de
   Bootstrap porte une marge NÉGATIVE de 12 px de chaque côté, pour que ses
   colonnes s'alignent sur la grille de la page. Dans cet encart, qui n'a que
   5 px de marge intérieure, elle dépassait donc de 7 px à gauche et à droite,
   aux trois largeurs d'écran. On annule cette marge ici, et seulement ici :
   l'encart n'a qu'une colonne, il n'a pas besoin de la grille. */
.barre-laterale > .row {
  margin-left: 0;
  margin-right: 0;
}
.titreBarre {
  color: var(--ec-jaune);
  margin: 6px 4px 10px 4px;
  /* Lot 10.3 : le jaune #efad2b sur le bleu #005e8f donne 3,56 pour 4,5
     exigés. La règle d'accessibilité est moins sévère pour un GRAND texte en
     gras (3,0 suffit, à partir de 18,66 px) : le titre passe donc en gras à
     20 px — la taille qu'il avait déjà en v1 — et AUCUNE couleur de la charte
     ne bouge (choix de Guillaume du 18/09/2026).
     La taille est écrite ici explicitement : ces titres ont changé de balise
     au 10.3 (h5 → h2, pour que les titres se suivent dans l'ordre) et
     auraient sinon pris la taille d'un h2. */
  font-size: 20px;
  font-weight: 700;
}
.TitrePhase {
  position: relative;
  box-sizing: content-box;
  padding: 6px;
  color: #FFF;
  text-align: center;
  text-overflow: ellipsis;
  background: var(--ec-bleu);
  font-size: 18px;
  font-weight: bold;
  letter-spacing: 0.11em;
}

/* ---------------------------------------------------------------------------
 * 3. TITRES ET TEXTES (police Quicksand de la v1)
 * ------------------------------------------------------------------------ */
.h2     { font-family: var(--ec-police-interface); font-size: 19px; font-weight: bold; }
.h3     { font-family: var(--ec-police-interface); font-size: 16px; font-weight: bold; color: var(--ec-bleu); }
.h3-sec { font-family: var(--ec-police-interface); font-size: 22px; font-weight: bold; color: var(--ec-bleu); }
.h5     { font-family: var(--ec-police-interface); font-size: 15px; font-weight: bold; }
h1, h2, h3, h4, h5, h6 { font-family: var(--ec-police-interface); }

.petit      { font-size: 14px; color: var(--ec-gris-texte); }
.savoirplus { font-size: 13px; font-style: italic; }
.interdit   { cursor: not-allowed; }
ul.listeSansPuce { list-style-type: none; padding-left: 10px; }

/* ---------------------------------------------------------------------------
 * 4. BOUTONS
 * Bootstrap 5 : on renseigne ses variables, ce qui traite d'un coup l'état
 * normal, le survol, le clic et le bouton désactivé.
 * ------------------------------------------------------------------------ */
.btn-primary {
  --bs-btn-bg: var(--ec-bleu);              --bs-btn-border-color: var(--ec-bleu);
  --bs-btn-hover-bg: var(--ec-bleu-survol); --bs-btn-hover-border-color: var(--ec-bleu-survol);
  --bs-btn-active-bg: var(--ec-bleu-actif); --bs-btn-active-border-color: var(--ec-bleu-bordure);
  --bs-btn-disabled-bg: var(--ec-bleu);     --bs-btn-disabled-border-color: var(--ec-bleu);
}
.btn-warning {
  --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000;
  --bs-btn-bg: var(--ec-jaune);              --bs-btn-border-color: var(--ec-jaune);
  --bs-btn-hover-bg: var(--ec-jaune-survol); --bs-btn-hover-border-color: var(--ec-jaune-bordure);
  --bs-btn-active-bg: var(--ec-jaune-survol);--bs-btn-active-border-color: var(--ec-jaune-bordure);
  --bs-btn-disabled-bg: var(--ec-jaune);     --bs-btn-disabled-border-color: var(--ec-jaune);
}

/* Les six boutons « maison » de la v1. Même construction pour les six. */
.btn-EG-bleu {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--ec-bleu);               --bs-btn-border-color: var(--ec-bleu-bordure);
  --bs-btn-hover-bg: var(--ec-bleu-actif);   --bs-btn-hover-border-color: var(--ec-bleu-bordure);
  --bs-btn-active-bg: var(--ec-bleu-actif);  --bs-btn-active-border-color: var(--ec-bleu-bordure);
  --bs-btn-disabled-bg: var(--ec-bleu);      --bs-btn-disabled-border-color: var(--ec-bleu-bordure);
}
.btn-EG-bleu .badge { color: var(--ec-bleu); background-color: #ffffff; }

.btn-EG-jaune {
  --bs-btn-color: #000; --bs-btn-hover-color: #000; --bs-btn-active-color: #000; --bs-btn-disabled-color: #000;
  --bs-btn-bg: var(--ec-jaune);               --bs-btn-border-color: var(--ec-jaune-bordure);
  --bs-btn-hover-bg: var(--ec-jaune-survol);  --bs-btn-hover-border-color: var(--ec-jaune-bordure);
  --bs-btn-active-bg: var(--ec-jaune-survol); --bs-btn-active-border-color: var(--ec-jaune-bordure);
  --bs-btn-disabled-bg: var(--ec-jaune);      --bs-btn-disabled-border-color: var(--ec-jaune-bordure);
}
.btn-EG-jaune .badge { color: var(--ec-jaune); background-color: #000000; }

.btn-EG-vert {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--ec-turquoise);              --bs-btn-border-color: var(--ec-turquoise-bord);
  --bs-btn-hover-bg: var(--ec-turquoise-survol); --bs-btn-hover-border-color: var(--ec-turquoise-bord);
  --bs-btn-active-bg: var(--ec-turquoise-survol);--bs-btn-active-border-color: var(--ec-turquoise-bord);
  --bs-btn-disabled-bg: var(--ec-turquoise);     --bs-btn-disabled-border-color: var(--ec-turquoise-bord);
}
.btn-EG-vert .badge { color: var(--ec-turquoise); background-color: #FFFFFF; }

.btn-EG-rose {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--ec-rose);               --bs-btn-border-color: var(--ec-rose-bordure);
  --bs-btn-hover-bg: var(--ec-rose-survol);  --bs-btn-hover-border-color: var(--ec-rose-bordure);
  --bs-btn-active-bg: var(--ec-rose-survol); --bs-btn-active-border-color: var(--ec-rose-bordure);
  --bs-btn-disabled-bg: var(--ec-rose);      --bs-btn-disabled-border-color: var(--ec-rose-bordure);
}
.btn-EG-rose .badge { color: var(--ec-rose); background-color: #FFFFFF; }

.btn-EG-violet {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--ec-violet);               --bs-btn-border-color: var(--ec-violet-bordure);
  --bs-btn-hover-bg: var(--ec-violet-survol);  --bs-btn-hover-border-color: var(--ec-violet-bordure);
  --bs-btn-active-bg: var(--ec-violet-survol); --bs-btn-active-border-color: var(--ec-violet-bordure);
  --bs-btn-disabled-bg: var(--ec-violet);      --bs-btn-disabled-border-color: var(--ec-violet-bordure);
}
.btn-EG-violet .badge { color: var(--ec-violet); background-color: #FFFFFF; }

.btn-EG-marron {
  --bs-btn-color: #fff; --bs-btn-hover-color: #fff; --bs-btn-active-color: #fff; --bs-btn-disabled-color: #fff;
  --bs-btn-bg: var(--ec-marron);               --bs-btn-border-color: var(--ec-marron-bordure);
  --bs-btn-hover-bg: var(--ec-marron-survol);  --bs-btn-hover-border-color: var(--ec-marron-bordure);
  --bs-btn-active-bg: var(--ec-marron-survol); --bs-btn-active-border-color: var(--ec-marron-bordure);
  --bs-btn-disabled-bg: var(--ec-marron);      --bs-btn-disabled-border-color: var(--ec-marron-bordure);
}
.btn-EG-marron .badge { color: var(--ec-marron); background-color: #FFFFFF; }

/* ---------------------------------------------------------------------------
 * 5. BARRE DE NAVIGATION ET ONGLETS
 * ------------------------------------------------------------------------ */
.nav-tab  { color: var(--ec-bleu); }
.nav-link { color: var(--ec-bleu); --bs-nav-link-color: var(--ec-bleu); --bs-nav-link-hover-color: var(--ec-bleu-survol); }
.nav-link.active { font-weight: bold; }
.nav-tabs { --bs-nav-tabs-link-active-color: var(--ec-bleu); }
/* Dans la barre de navigation, le lien de la page affichée est en gras et
   presque noir, comme en v1 (c'était le comportement de Bootstrap 4). */
.navbar-nav .nav-link.active { color: rgba(0,0,0,.9); }

/* IMP-010 (20/09/2026) — LA BARRE DE MENU EN BLANC.
   Elle était grise (« bg-light » de Bootstrap). Sur le prototype elle est
   blanche, posée sur le blanc du cadre, et seul un filet gris très clair la
   sépare du contenu : la page paraît d'un seul tenant, et le bandeau bleu
   redevient le seul aplat de couleur du haut de page.
   La classe remplace « bg-light » dans le gabarit, plutôt que de l'écraser :
   on ne se bat pas contre Bootstrap, on ne lui demande rien. */
.navbar-ec {
  background-color: #FFFFFF;
  border-bottom: 1px solid #E7ECEF;
  border-radius: 0;
}

/* IMP-008 (20/09/2026) — DE L'AIR SOUS LE BANDEAU DE MENU.
   Remarque de Guillaume sur la page d'accueil : le menu (Accueil, Mes jeux,
   Le site…) touchait le corps de la page — les boutons de connexion, le titre
   « Faites de l'apprentissage une aventure ! » et les encarts de droite
   commençaient à quelques pixels sous lui, si bien que les deux se lisaient
   comme un seul bloc.

   14 px de marge basse, la valeur retenue le 20/09/2026, la même que l'arrondi
   des encarts et que la marge intérieure du cadre « Connexion / Inscription ».

   La règle ne vise QUE la barre de navigation posée directement dans le cadre
   blanc (« > »), donc la barre du site sur toutes ses pages, et jamais une
   barre qui serait imbriquée ailleurs. Les bandeaux d'alerte qui la suivent
   parfois (maintenance, message flash) portent déjà leur propre marge : ils ne
   s'additionnent pas, la marge basse et la marge haute se chevauchent. */
.bas-cadre > .navbar { margin-bottom: 14px; }

/* Accordéon (FAQ) : Bootstrap 5 propose un bandeau gris ; on rétablit
   l'aspect de la v1 — fond blanc, bordure jaune, intitulé bleu — en gardant
   le chevron de Bootstrap 5, qui signale mieux qu'on peut déplier. */
.accordion {
  --bs-accordion-border-color: var(--ec-jaune);
  --bs-accordion-btn-color: var(--ec-bleu);
  --bs-accordion-active-color: var(--ec-bleu);
  --bs-accordion-btn-bg: #fff;
  --bs-accordion-active-bg: #fff;
  --bs-accordion-btn-focus-box-shadow: none;
}

/* ---------------------------------------------------------------------------
 * 6. CARTES (vignettes de jeux) ET BADGES
 * ------------------------------------------------------------------------ */
.card {
  --bs-card-border-color: var(--ec-jaune);
  border-color: var(--ec-jaune);
  margin-top: 15px;
  margin-bottom: 10px;
}

/* Étiquettes posées sur les vignettes. Toutes sont positionnées « en absolu »
   dans le coin d'une carte : la carte doit donc rester « position: relative »
   (comportement par défaut de Bootstrap). */
.badgeExemple {
  position: absolute; right: 10px; top: 10px;
  background-color: var(--ec-bleu); padding: 6px 10px;
  border: 1px solid white; color: white; border-radius: 8px;
  font-size: 13px; font-family: var(--ec-police-interface); font-weight: bold;
}
.badgeFavoris, .badgeVerrou {
  position: absolute; top: 15px; padding: 8px;
  background-color: rgba(0, 0, 0, .35); color: white; border-radius: 8px;
  font-size: 18px; font-family: var(--ec-police-interface); font-weight: bold;
}
.badgeFavoris { right: 15px; }
.badgeVerrou  { left: 15px; }
.affichageI {
  position: absolute; right: 10px; top: 10px;
  background-color: var(--ec-bleu); padding: 6px 10px;
  border: 1px solid white; color: white; border-radius: 8px; font-size: 15px;
}
.badgeSignalement, .badgeSignale, .badgeLien {
  position: absolute; right: 10px; padding: 6px 10px; border-radius: 8px;
  font-size: 14px; font-family: var(--ec-police-interface); font-weight: bold;
}
.badgeSignalement, .badgeSignale { top: 10px; }
.badgeLien    { top: 40px; }
.badgeSignale { background-color: var(--ec-rouge-signale); }
.badgeAttente, .badgePrive, .badgeValide, .badgeRefus {
  position: absolute; right: 10px; top: 10px; padding: 6px 10px;
  border: 1px solid white; border-radius: 8px; font-size: 13px; font-weight: bold;
}
.badgeAttente { background-color: var(--ec-jaune);      color: black; }
.badgePrive   { background-color: var(--ec-gris-prive); color: white; }
.badgeValide  { background-color: var(--ec-turquoise);  color: white; }
.badgeRefus   { background-color: black; border-color: black; color: white; }
.badgeNiveau, .badgeDiscipline1 {
  position: absolute; left: 10px;
  background-color: rgba(95, 95, 95, .68); padding: 6px 10px;
  color: #E7E7E7; border-radius: 8px;
  font-size: 12px; font-family: var(--ec-police-interface); font-weight: bold;
}
.badgeNiveau       { top: 10px; }
.badgeDiscipline1  { top: 50px; text-align: left; }

/* ---------------------------------------------------------------------------
 * 6 bis. LES ENCARTS DU BANDEAU BLEU  (IMP-003, 19/09/2026)
 * ---------------------------------------------------------------------------
 * Qui est connecté, le lien vers le site et la déconnexion. Ils étaient dans
 * les coins du cadre blanc et n'existaient que sur le tableau de bord ; ils
 * sont désormais dans le bandeau, qui est au même endroit sur toutes les
 * pages (D-187).
 *
 * Le bandeau (.haut-cadre) est en « position: relative » : ces deux encarts
 * s'y posent en absolu, l'un à gauche, l'autre à droite, sans toucher au
 * logo qui reste centré.
 * ------------------------------------------------------------------------ */
/* ===========================================================================
 * IMP-010 (20/09/2026) — LE BANDEAU DEVIENT UNE BARRE
 * ---------------------------------------------------------------------------
 * Le bandeau portait une grande image centrée et deux encarts posés EN ABSOLU
 * dans ses coins. Trois défauts en découlaient : les encarts pouvaient
 * recouvrir le logo sur un écran étroit, la hauteur du bandeau ne dépendait
 * pas de son contenu, et il fallait une exception par écran pour que rien ne
 * se chevauche.
 *
 * Il devient une barre ordinaire, rangée par « flex » : la marque à gauche,
 * les commandes à droite, et la barre prend d'elle-même la hauteur qu'il
 * faut. Plus rien n'est en absolu, donc plus rien ne peut se recouvrir.
 * ======================================================================== */
.haut-cadre--barre {
  box-sizing: border-box;   /* la règle de la v1 était en content-box */
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 14px;
  padding: 10px 16px;
  text-align: left;
  font: normal normal 16px/1.2;
}

/* --- La marque, à gauche : le logo et les deux lignes de texte ------------ */
.marque-bandeau {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
  color: #FFFFFF;
  text-decoration: none;
}
.marque-bandeau:hover,
.marque-bandeau:focus-visible { color: #FFFFFF; }
.marque-bandeau:focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: 3px;
  border-radius: 10px;
}
.marque-bandeau-logo {
  flex: 0 0 auto;
  width: 52px;
  height: 52px;
  border-radius: 10px;
  background: #FFFFFF;
  padding: 4px;
  object-fit: contain;
}
.marque-bandeau-textes { display: flex; flex-direction: column; min-width: 0; }
.marque-bandeau-nom {
  font-family: var(--ec-police-interface);
  font-size: 1.45rem;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: .01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* La baseline sous le nom du service. L'OCRE DE LA CHARTE NE CONVIENT PAS
   ICI : sur le bleu #005E8F il ne donne que 3,64 pour 1, là où un texte de
   cette taille en demande 4,5. C'est le même constat qu'au Lot 10.3 pour les
   titres d'encart, et la même réponse : la teinte plus claire de la même
   famille, #FFD98A, qui donne 6,0 pour 1 et reste un jaune-ocre à l'œil.
   Aucune couleur de la charte n'est modifiée — c'est une nuance d'appoint,
   déjà employée pour les liens des encarts de l'accueil (D-186). */
.marque-bandeau-baseline {
  color: #FFD98A;
  font-family: var(--ec-police-interface);
  font-size: .95rem;
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.marque-bandeau-baseline i { margin-right: .15rem; }

/* --- Les cinq commandes, à droite ----------------------------------------- */
.encart-bandeau {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}
.encart-bandeau--droite { margin-left: auto; }
.encart-bandeau form    { margin: 0; }

/* Le trait qui sépare le pseudonyme des commandes, comme sur le prototype. */
.separateur-bandeau {
  width: 1px;
  height: 22px;
  background: rgba(255, 255, 255, .45);
}

/* Le pseudonyme. Fond blanc et texte bleu : sur le bleu du bandeau, c'est le
   seul couple qui tienne le contraste (8,9 pour 1). Ce n'est pas un bouton —
   rien ne se passe au clic, et rien ne le laisse croire. */
.badge-bandeau {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border-radius: 20px;
  background-color: #FFFFFF;
  color: var(--ec-bleu);
  font-family: var(--ec-police-interface);
  font-size: 14px;
  font-weight: bold;
  line-height: 1.2;
  white-space: nowrap;
  max-width: 40vw;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Les boutons : la mappemonde, la palette, l'extinction. Carrés, bordés de
   blanc sur le bleu du bandeau. 34 px de côté, ce qui laisse une cible
   confortable au doigt une fois le remplissage compté. */
.bouton-bandeau {
  display: grid;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 2px solid rgba(255, 255, 255, .85);
  border-radius: 10px;
  background-color: transparent;
  color: #FFFFFF;
  font-size: 15px;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}
.bouton-bandeau:hover,
.bouton-bandeau:focus-visible {
  background-color: #FFFFFF;
  color: var(--ec-bleu);
  border-color: #FFFFFF;
}
.bouton-bandeau:focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: 2px;
}

/* --- Le choix de la langue (IMP-011, 20/09/2026) -------------------------- *
 * Remplace le drapeau français décoratif de l'IMP-003, qui tenait la place.
 *
 * C'est un `<details>` / `<summary>`, et non un menu Bootstrap : le navigateur
 * sait l'ouvrir et le fermer tout seul, à la souris comme au clavier, SANS LA
 * MOINDRE LIGNE DE JAVASCRIPT. Un petit script (assets/js/langue.js) n'ajoute
 * que le confort : fermeture au clic à côté et à la touche Échap.
 *
 * Le triangle que les navigateurs dessinent par défaut devant un `<summary>`
 * est retiré : il ferait double emploi avec le drapeau, et il ne se met pas
 * aux couleurs du bandeau.
 * ------------------------------------------------------------------------ */
.menu-langue { position: relative; flex: 0 0 auto; }

.menu-langue-bouton {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  cursor: pointer;
  list-style: none;          /* Firefox */
  padding-inline: 7px;
  width: auto;
  min-width: 0;
}
.menu-langue-bouton::-webkit-details-marker { display: none; }   /* Safari, Chrome */
.menu-langue-bouton::marker                 { content: ''; }

.menu-langue-court {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .5px;
  line-height: 1;
}

/* Le drapeau lui-même : un petit rectangle, pas un rond — un drapeau rogné en
   cercle devient méconnaissable, celui du Québec surtout. */
.drapeau {
  display: block;
  width: 22px;
  height: 15px;
  border-radius: 2px;
  flex: 0 0 auto;
}

/* La liste déroulante, ancrée sous le bouton et alignée à droite : le menu est
   au bord droit de la barre, elle ne doit pas sortir de l'écran. */
.menu-langue-liste {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  z-index: 30;
  margin: 0;
  padding: 6px;
  list-style: none;
  min-width: 190px;
  background: #FFFFFF;
  border: 1px solid #D5DEE5;
  border-radius: 10px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .18);
}
.menu-langue-forme { margin: 0; }

.menu-langue-choix {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 9px 10px;
  border: 0;
  border-radius: 7px;
  background: none;
  color: var(--ec-bleu);
  font-size: .95rem;
  text-align: left;
  cursor: pointer;
}
.menu-langue-choix:hover,
.menu-langue-choix:focus-visible { background: #EEF4F8; }
.menu-langue-choix--active { font-weight: 700; }
.menu-langue-coche { margin-left: auto; color: #1F7A46; }

/* Le menu ouvert est signalé aussi sur le bouton : sans cela, sur un écran
   tactile, on ne sait plus lequel des deux états on regarde. */
.menu-langue[open] > .menu-langue-bouton { background: rgba(255, 255, 255, .18); }

/* Écran étroit : les deux lettres disparaissent, le drapeau suffit — la place
   est comptée dans la barre, et le nom de la langue reste annoncé aux lecteurs
   d'écran. */
@media screen and (max-width: 640px) {
  .menu-langue-court { display: none; }
}

/* Réglage « animations réduites » : rien à désactiver ici, le menu n'anime
   rien. La règle est notée pour qui ajouterait une transition plus tard. */

/* Sur un écran étroit, la marque et les commandes se rangent l'une sous
   l'autre, et le pseudonyme se réduit à son icône. Rien ne se chevauche :
   la barre grandit, c'est tout. */
@media (max-width: 767.98px) {
  .haut-cadre--barre     { justify-content: center; }
  .encart-bandeau--droite{ margin-left: 0; justify-content: center; width: 100%; }
  .marque-bandeau        { width: 100%; justify-content: center; }
  .marque-bandeau-nom    { font-size: 1.2rem; }
}
@media (max-width: 575.98px) {
  .badge-bandeau   { font-size: 0; padding: 8px 10px; gap: 0; }
  .badge-bandeau i { font-size: 15px; }
  /* Les boutons gardent leurs 36 px : en dessous, la cible devient
     difficile à viser au doigt (seuil du contrôle d'accessibilité). */
  .separateur-bandeau { display: none; }
}

/* ---------------------------------------------------------------------------
 * 7. ENCARTS D'ANGLE (déconnexion, globe, bandeau administrateur)
 * ------------------------------------------------------------------------ */
.deconnexion, .encartHD, .adminCadre {
  position: absolute; top: 0; right: 0;
  padding: 6px 6px 8px 9px;
  background-color: var(--ec-bleu); color: #FFFFFF;
  border-bottom-left-radius: 6px; z-index: 1;
}
.encartHD:hover { background-color: var(--ec-bleu-survol); color: #FFFFFF; }
.encartBD, .encartBG {
  position: absolute; bottom: 0;
  padding: 8px 6px 6px 6px;
  background-color: #FFFFFF; color: var(--ec-bleu); z-index: 1;
}
.encartBD { right: 0; padding-left: 8px; border-top-left-radius: 6px; }
.encartBG { left: 0; padding-right: 8px; border-top-right-radius: 6px; }
.encartBD:hover, .encartBG:hover { background-color: #CCCCCC; }
/* .encartTHG (coin haut gauche : l'icône de maintenance) a été RETIRÉE le
   18/09/2026 — IMP-001. Elle chevauchait le logo du site, et son outil est
   désormais une carte de l'onglet « Admin » du tableau de bord. */

@media screen and (max-width: 640px) {
  .AffPseudo {
    z-index: 3; font-size: 10px;
    position: absolute; top: 0; right: 0;
    padding: 2px 2px 4px 4px;
    background-color: var(--ec-bleu); color: #FFFFFF;
    border-bottom-left-radius: 3px;
  }
}

/* ---------------------------------------------------------------------------
 * 7 bis. LE CHOIX DE L'AMBIANCE À LA CRÉATION D'UN JEU  (IMP-004, 19/09/2026)
 * ---------------------------------------------------------------------------
 * Quatre blocs : le thème (42 vignettes), la police (3), le visuel (6) et la
 * musique. Tous suivent la même mécanique, déjà éprouvée au Lot 4.6 pour les
 * icônes : un bouton radio RENDU INVISIBLE mais bien présent — il reste donc
 * atteignable au clavier et compris des lecteurs d'écran — et son étiquette,
 * qui porte tout le dessin et reçoit le cadre quand la case est cochée.
 *
 * Les vignettes sont TOUTES DE LA MÊME TAILLE, demande explicite de Guillaume :
 * c'est « aspect-ratio » qui s'en charge, et non une hauteur en pixels — la
 * grille reste ainsi correcte du téléphone au grand écran.
 * ------------------------------------------------------------------------ */
/* ===========================================================================
   LE « CARTOUCHE » — le motif de mise en page nommé (IMP-006, 19/09/2026)
   ===========================================================================
   Guillaume a demandé un NOM pour cette mise en forme, afin de pouvoir dire
   « mets ça en cartouches » sans avoir à la redécrire à chaque fois. Le mot
   est retenu parce qu'il désigne exactement cela en typographie — un encadré
   portant un titre et une légende — et parce que c'était le seul encore libre
   dans le projet : « cadre », « bloc », « carte », « vignette », « encart » et
   « panneau » y désignent déjà six choses différentes.

   ANATOMIE D'UN CARTOUCHE, de haut en bas :
     1. un <fieldset class="cartouche"> : liseré fin gris-bleu #d7dee3,
        coins arrondis 12 px, fond très pâle #fbfcfd ;
     2. une <legend class="cartouche-titre"> qui chevauche le liseré en haut
        à gauche : UNE ICÔNE Font Awesome, puis un TITRE en bleu de la charte,
        gras, 17 px ;
     3. une phrase d'explication en gris (<p class="petit text-start">), qui
        dit à quoi sert le réglage et ce que le joueur verra — jamais une
        redite du titre ;
     4. le contenu : grille de vignettes, cartes cliquables, rangée d'icônes,
        liste de boutons radio… ce que le réglage demande.

   POURQUOI UN <fieldset> ET NON UN <div> : les contrôles d'un même réglage
   forment un groupe, et un lecteur d'écran annonce alors le titre du groupe
   avant chaque choix. L'attribut « disabled » posé sur le fieldset désactive
   d'un coup tout le réglage quand la personne n'a pas le droit de le modifier.

   OÙ IL SERT DÉJÀ : « Créer un jeu » (IMP-004 et 004b), « Modifier le jeu » et
   « Personnaliser le jeu » (IMP-005), « Mes clés d'accès » (IMP-006).

   DEUX BALISAGES, UNE SEULE APPARENCE (IMP-007, D-211)
   Toutes les sections mises en cartouche ne contiennent pas des contrôles de
   formulaire : une liste de comptes, un tableau du journal, un texte d'aide
   n'en contiennent aucun, et les enfermer dans un <fieldset> serait mentir au
   lecteur d'écran. D'où deux formes, rigoureusement identiques à l'œil :

     · CARTOUCHE DE RÉGLAGE — il y a des contrôles :
         <fieldset class="cartouche"><legend class="cartouche-titre">…
       La légende chevauche le liseré toute seule : c'est le comportement
       natif de <legend>, rien à faire.

     · CARTOUCHE DE CONTENU — il n'y en a pas :
         <section class="cartouche cartouche-contenu"><h3 class="cartouche-titre">…
       Un titre ordinaire ne chevauche rien ; on le remonte donc à cheval sur
       le liseré, et on lui donne le fond du cartouche pour qu'il le masque.

   (Les classes s'appelaient « bloc-creation » et « legende-creation » de
   l'IMP-004 à l'IMP-006. Renommées à l'IMP-007, quand Guillaume a donné son
   nom à ce motif : deux noms pour une même chose, c'est une hésitation de
   plus à chaque fois qu'on y revient.) */

.cartouche {
  /* IMP-007, remarque de Guillaume : un cartouche posé juste sous un titre lui
     était collé — le titre de l'onglet et celui du premier cartouche se
     touchaient presque. D'où une marge HAUTE, qui sert deux fois : elle donne
     de l'air sous un titre, et elle espace deux cartouches l'un de l'autre. */
  margin: 16px 0 22px;
  padding: 14px 16px 16px;
  border: 1px solid #d7dee3;
  border-radius: 12px;
  background-color: #fbfcfd;
}
.cartouche-titre {
  float: none;
  width: auto;
  margin-bottom: 2px;
  padding: 0 6px;
  color: var(--ec-bleu);
  font-size: 17px;
  font-weight: bold;
  text-align: left;
}
.cartouche > .petit { margin-bottom: 10px; color: var(--ec-gris-texte, #555); }

/* --- Le cartouche de CONTENU (IMP-007) ------------------------------------
   Même cadre, même liseré, même fond. Seule différence : son titre est un
   vrai titre de section (<h2>/<h3>) et non une <legend>, donc c'est nous qui
   le plaçons à cheval sur le liseré. Le fond du titre masque le trait ;
   « inline-block » lui donne juste la largeur de son texte, sinon il
   effacerait le liseré sur toute la largeur. */
/* R-12 (recette, 23/09/2026) — LE TITRE QUI CHEVAUCHAIT SON TEXTE.
   Le titre était posé en « position: absolute ». Il sortait donc du flux : sa
   hauteur n'était comptée nulle part, et le cartouche ne réservait, par son
   padding, que la place d'UNE ligne. Dès que le titre en prenait DEUX — ce qui
   arrive sur un téléphone, ou avec une traduction plus longue, ou avec une
   police agrandie — la seconde ligne retombait sur le premier paragraphe.
   Relevé par Guillaume dans l'onglet « Aide » : 11 px de chevauchement mesurés
   à 390 px de large.

   LE CORRECTIF : le titre revient DANS LE FLUX, comme la <legend> du cartouche
   de réglage — qui, elle, n'a jamais eu ce défaut, précisément pour cette
   raison. Sa hauteur est de nouveau comptée, quel que soit le nombre de lignes,
   et c'est la mise en page qui la mesure au lieu qu'on la devine.

   Le chevauchement du liseré, lui, est conservé : la marge haute négative fait
   remonter la PREMIÈRE ligne à cheval sur le trait, et le fond du titre masque
   le trait derrière lui. L'œil ne voit aucune différence sur un titre d'une
   ligne ; sur deux, le texte n'est plus mordu.

   CE QU'IL NE FALLAIT PAS FAIRE : agrandir le padding « au jugé ». Cela aurait
   ajouté un blanc inutile sous TOUS les titres d'une ligne pour rattraper le
   cas de deux. */
.cartouche-contenu {
  position: relative;
  /* Le titre remonte lui-même au-dessus du cadre : le cartouche lui laisse la
     place par sa marge haute, et n'ajoute plus de padding en haut. */
  margin-top: 26px;
  padding-top: 0;
}
.cartouche-contenu > .cartouche-titre {
  /* « block » + « fit-content », et NON « inline-block » : un inline-block est
     posé sur une ligne de texte, où une marge haute négative ne le fait pas
     remonter comme on l'attend (la ligne, elle, reste où elle est). En bloc, la
     marge agit vraiment ; « fit-content » lui garde la largeur de son texte,
     sans quoi son fond effacerait le liseré sur toute la largeur. */
  display: block;
  width: fit-content;
  /* -0.72em : la première ligne vient à cheval sur le liseré, exactement où la
     position absolue la mettait. 8 px en bas : l'air entre le titre et le
     premier paragraphe, qui ne dépend plus du padding du cartouche. */
  margin: -0.72em 0 8px;
  background-color: #fbfcfd;
  line-height: 1.2;
  /* Un titre plus large que son cadre revient à la ligne dans le cadre, au
     lieu de le déborder. */
  max-width: 100%;
}
/* Le premier élément qui suit le titre n'a pas à ajouter sa propre marge
   haute : le padding du cartouche s'en charge déjà. */
.cartouche-contenu > .cartouche-titre + * { margin-top: 0; }

/* --- Le code cité dans une phrase (IMP-007, D-213) ------------------------
   Bootstrap affiche <code> en #d63384. Ce rose donne 4,50 pour 1 sur du blanc
   pur — la valeur minimale exacte — et retombe à 4,38 sur le fond très pâle
   d'un cartouche : sous le seuil, donc signalé par le contrôle d'accessibilité.
   On lui donne le ROSE DE LA CHARTE, #D32E70, celui des formes du captcha :
   4,65 sur un cartouche et 4,78 sur du blanc. Aucune couleur nouvelle, et le
   défaut est réglé partout, pas seulement dans les cartouches. */
code {
  color: var(--ec-rose);
}

/* Un cartouche de contenu peut porter un compteur à droite de son titre
   (« 42 comptes »), en gris et en petit : c'est une information, pas un
   titre. */
.cartouche-titre .compteur-cartouche {
  color: var(--ec-gris-texte, #555);
  font-size: 15px;
  font-weight: normal;
}

/* --- La grille des thèmes ------------------------------------------------- */
.grille-themes {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 10px;
}
.choix-theme,
.choix-police,
.choix-fond { position: relative; }

/* Le bouton radio recouvre toute la case : il reste cliquable et focusable,
   mais on ne le voit pas. « opacity: 0 » et non « display: none », qui le
   retirerait de la navigation au clavier. */
.choix-theme .form-check-input,
.choix-police .form-check-input,
.choix-fond .form-check-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choix-theme .form-check-label,
.choix-police .form-check-label,
.choix-fond .form-check-label {
  display: block;
  width: 100%;
  padding: 5px;
  border: 3px solid #e3e8ec;
  border-radius: 12px;
  background-color: #ffffff;
  cursor: pointer;
  text-align: center;
}
.vignette-theme {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 10;          /* toutes les vignettes à la même taille */
  border-radius: 8px;
  background-color: #eef1f3;
  background-position: center center;
  background-size: cover;
}
/* IMP-009 : la mention « Preview » d'un thème en préparation, posée sur la
   vignette (administrateur seul). */
.vignette-theme { position: relative; }
.vignette-theme .mention-preview {
  position: absolute;
  top: 4px;
  left: 4px;
  padding: 1px 7px;
  border-radius: 8px;
  background: var(--ec-jaune);
  color: #111;
  font-size: 11px;
  font-weight: bold;
  line-height: 1.5;
}
.nom-theme,
.nom-fond {
  display: block;
  margin-top: 5px;
  overflow: hidden;
  color: var(--ec-bleu);
  font-size: 13px;
  font-weight: bold;
  line-height: 1.25;
  /* Un nom de thème est court, mais on ne présume de rien : deux lignes au
     plus, et la hauteur est réservée pour que les cases restent alignées.
     « anywhere » parce qu'un nom comme « Aventure_litteraire » n'offre aucun
     endroit où couper : sans cela, il sortirait de sa case. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  min-height: 2.5em;
  overflow-wrap: anywhere;
}

/* --- La grille des polices ------------------------------------------------ */
/* Trois écritures, donc trois colonnes. Les polices des thèmes sont parfois
   très larges (les cursives surtout) : l'exemple doit pouvoir passer à la
   ligne, et il ne porte donc AUCUNE espace insécable. */
.grille-polices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
}
.apercu-police {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 54px;
  padding: 4px;
  color: var(--ec-bleu);
  font-size: 21px;
  line-height: 1.2;
  text-align: center;
  overflow-wrap: anywhere;
}
@media (max-width: 991.98px) { .apercu-police { font-size: 17px; } }

/* --- La grille des visuels ------------------------------------------------ */
/* Six visuels, donc SIX COLONNES sur un écran large : une ligne pleine, et
   jamais une deuxième ligne avec un visuel esseulé. Puis trois, puis deux. */
.grille-fonds {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: 10px;
}
@media (max-width: 991.98px) { .grille-fonds { grid-template-columns: repeat(3, 1fr); } }
/* .apercu-fond existe depuis le Lot 4.6 (onglet « Personnaliser »), où elle
   vaut « max-width: 180px ». Ici les six visuels remplissent leur case et ont
   donc rigoureusement la même taille. */
.grille-fonds .apercu-fond {
  display: block;
  width: 100%;
  max-width: none;
  aspect-ratio: 16 / 10;
  border: 0;
  border-radius: 8px;
  background-color: #eef1f3;
  object-fit: cover;
}

/* --- L'état « choisi » et le passage au clavier ---------------------------- */
.choix-theme .form-check-input:checked + .form-check-label,
.choix-police .form-check-input:checked + .form-check-label,
.choix-fond .form-check-input:checked + .form-check-label {
  border-color: var(--ec-bleu);
  background-color: #e7f1f7;
  box-shadow: inset 0 0 0 2px var(--ec-jaune, #efad2b);
}
.choix-theme .form-check-input:focus-visible + .form-check-label,
.choix-police .form-check-input:focus-visible + .form-check-label,
.choix-fond .form-check-input:focus-visible + .form-check-label {
  outline: 3px solid var(--ec-jaune, #efad2b);
  outline-offset: 2px;
}
.choix-theme .form-check-input:hover + .form-check-label,
.choix-police .form-check-input:hover + .form-check-label,
.choix-fond .form-check-input:hover + .form-check-label { border-color: #9fb9c8; }

/* --- Le type de jeu (IMP-004b) -------------------------------------------- */
/* Quatre cartes, chacune avec son icône, son nom et une phrase d'explication.
   Même mécanique radio que les trois grilles ci-dessus, mais le texte est
   aligné à gauche : ce sont des phrases, pas des étiquettes. */
.grille-modules {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.choix-module { position: relative; }
.choix-module .form-check-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choix-module .form-check-label {
  display: block;
  height: 100%;
  padding: 10px 12px;
  border: 3px solid #e3e8ec;
  border-radius: 12px;
  background-color: #ffffff;
  cursor: pointer;
  text-align: left;
}
.module-titre {
  display: block;
  margin-bottom: 3px;
  color: var(--ec-bleu);
  font-size: 15px;
  font-weight: bold;
}
.module-phrase {
  display: block;
  color: var(--ec-gris-texte, #555);
  font-size: 13px;
  line-height: 1.35;
}
.choix-module .form-check-input:checked + .form-check-label {
  border-color: var(--ec-bleu);
  background-color: #e7f1f7;
  box-shadow: inset 0 0 0 2px var(--ec-jaune, #efad2b);
}
.choix-module .form-check-input:focus-visible + .form-check-label {
  outline: 3px solid var(--ec-jaune, #efad2b);
  outline-offset: 2px;
}
.choix-module .form-check-input:hover + .form-check-label { border-color: #9fb9c8; }

/* --- Les dénominations et les paramètres de jeu (IMP-005) ------------------ */
/* Huit mots courts d'un côté, trois nombres de l'autre : même mécanique radio
   que partout ailleurs, mais des cases basses, alignées sur leur contenu. */
.grille-denominations {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(124px, 1fr));
  gap: 8px;
}
.choix-denomination { position: relative; }
.choix-denomination .form-check-input {
  position: absolute;
  inset: 0;
  z-index: 1;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: pointer;
}
.choix-denomination .form-check-label {
  display: block;
  padding: 8px 10px;
  border: 3px solid #e3e8ec;
  border-radius: 12px;
  background-color: #ffffff;
  color: var(--ec-bleu);
  font-size: 14px;
  font-weight: bold;
  cursor: pointer;
  text-align: center;
}
.choix-denomination .form-check-input:checked + .form-check-label {
  border-color: var(--ec-bleu);
  background-color: #e7f1f7;
  box-shadow: inset 0 0 0 2px var(--ec-jaune, #efad2b);
}
.choix-denomination .form-check-input:focus-visible + .form-check-label {
  outline: 3px solid var(--ec-jaune, #efad2b);
  outline-offset: 2px;
}
.choix-denomination .form-check-input:hover + .form-check-label { border-color: #9fb9c8; }

.grille-parametres {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
}
.choix-parametre {
  padding: 10px 12px;
  border: 1px solid #e3e8ec;
  border-radius: 12px;
  background-color: #ffffff;
}
.parametre-titre {
  display: block;
  margin-bottom: 5px;
  color: var(--ec-bleu);
  font-size: 15px;
  font-weight: bold;
}
.choix-parametre .petit { color: var(--ec-gris-texte, #555); }

/* Les icônes de malus et de code (Lot 4.6) vivent maintenant dans un bloc
   encadré : on leur donne un peu d'air et un fond blanc, comme aux autres. */
.cartouche .choix-icones {
  padding: 8px;
  border-radius: 10px;
  background-color: #ffffff;
}

/* --- L'aperçu en direct (IMP-004b) ---------------------------------------- */
/* Une maquette de l'écran de jeu : le fond du visuel choisi, et par-dessus un
   cadre aux couleurs du thème, dans l'écriture choisie. Les couleurs viennent
   des mêmes fonctions que l'écran de jeu (skin_couleur + couleur_fond_lisible),
   donc ce qu'on voit ici est ce qu'on aura. */
.apercu-jeu {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 22px 16px;
  border-radius: 10px;
  background-color: #2b3238;
  background-position: center center;
  background-size: cover;
}
.apercu-cadre {
  max-width: 100%;
  padding: 16px 22px;
  border: 4px solid #005e8f;
  border-radius: 20px;
  text-align: center;
}
.apercu-titre {
  display: block;
  overflow-wrap: anywhere;
  font-size: 30px;
  line-height: 1.2;
}
.apercu-minuteur {
  display: inline-block;
  margin-top: 10px;
  font-size: 22px;
  letter-spacing: .04em;
}
/* Barre de vie et score n'ont pas de compte à rebours : le script masque la
   pastille plutôt que d'afficher une durée qui ne servira pas. */
.apercu-minuteur[hidden] { display: none; }

@media (max-width: 991.98px) { .grille-parametres { grid-template-columns: 1fr; } }

@media (max-width: 575.98px) {
  .grille-themes  { grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); }
  .grille-fonds   { grid-template-columns: repeat(2, 1fr); }
  .grille-modules { grid-template-columns: 1fr; }
  .grille-denominations { grid-template-columns: repeat(2, 1fr); }
  .nom-theme, .nom-fond { font-size: 12px; }
  .apercu-police { font-size: 18px; }
  .apercu-titre  { font-size: 24px; }
}

/* ---------------------------------------------------------------------------
 * 8. BARRE DE VIE ET BULLE DE SCORE (côté joueur, Lot 5)
 * ------------------------------------------------------------------------ */
.bg-levelV-90 { background-color: #4FC74A !important; }
.bg-levelV-80 { background-color: #78D913 !important; }
.bg-levelV-70 { background-color: #95EB02 !important; }
.bg-levelV-60 { background-color: #C7F90E !important; }
.bg-levelV-50 { background-color: #D2D800 !important; }
.bg-levelV-40 { background-color: #E89E00 !important; }
.bg-levelV-30 { background-color: #E57200 !important; }
.bg-levelV-20 { background-color: #E44E00 !important; }
.bg-levelV-10 { background-color: #DC0003 !important; }
.bg-levelV-5  { background-color: #780002 !important; }
.bg-levelV-0  { background-color: #000000 !important; }

.progressScore {
  height: 10px; border-radius: 10px; box-shadow: none;
  background-color: #000000; border: solid 2px #222222; overflow: visible;
}
.progress-barScore {
  background-color: #686E85; box-shadow: none; text-align: right;
  border-radius: 10px; position: relative;
}
.progress-barScore::before {
  content: attr(aria-valuenow);
  top: -40px; padding: 5px; background-color: #686E85;
  border: solid 2px #B4BAD2; border-radius: 10px; position: absolute;
  width: 60px; z-index: 1; color: #B4BAD2; margin-left: -30px;
  text-align: center; font-family: "Roboto", sans-serif;
}
.progress-barScore::after {
  top: -14px; height: 10px; width: 14px; background-color: #B4BAD2;
  position: absolute; content: " "; z-index: 0;
  transform: rotate(45deg); margin-left: -8px;
}

/* ---------------------------------------------------------------------------
 * 9. COMPATIBILITÉ BOOTSTRAP 4 → 5
 * Trois éléments de la v1 n'existent plus tels quels dans Bootstrap 5 ;
 * on les rétablit pour que la présentation reste celle d'origine.
 * ------------------------------------------------------------------------ */

/* 9a. « jumbotron » (grand encadré gris) : supprimé de Bootstrap 5.

       CORRIGÉ LE 26/09/2026 (IMP-016). Cette règle disait « Utilisé par le
       bandeau de maintenance de la v1 » : ce n'est plus vrai. Ce bandeau a été
       remplacé par le pavé de maintenance, en bas de cette feuille, et PLUS
       AUCUNE PAGE DU SITE n'écrit la classe « jumbotron ».

       POURQUOI ON LA GARDE MALGRÉ TOUT : le contenu des TUTORIELS accepte
       l'attribut « class » (liste blanche de app/fonctions/tutoriels.php). Un
       tutoriel écrit du temps de la v1 peut donc porter class="jumbotron", et
       retirer ces sept lignes changerait son allure sans prévenir personne. */
.jumbotron {
  padding: 2rem 1rem;
  margin-bottom: 2rem;
  background-color: #e9ecef;
  border-radius: .3rem;
}
.jumbotron .display-4 { font-size: 3.5rem; font-weight: 300; line-height: 1.2; }
.jumbotron .lead { font-size: 1.25rem; font-weight: 300; }

/* 9b. « sr-only » (texte lu par les lecteurs d'écran) devient
       « visually-hidden » : on garde l'ancien nom en synonyme. */
.sr-only {
  position: absolute !important; width: 1px !important; height: 1px !important;
  padding: 0 !important; margin: -1px !important; overflow: hidden !important;
  clip: rect(0,0,0,0) !important; white-space: nowrap !important; border: 0 !important;
}

/* 9c. « input-group-prepend » (l'icône devant un champ) : la balise
       intermédiaire a disparu ; la neutraliser suffit. */
.input-group-prepend, .input-group-append { display: flex; }

/* 9d. Le carrousel de la v1 (petits points ronds) */
.carousel-indicators [data-bs-target] { width: 9px; height: 9px; border-radius: 100%; }
.carousel-indicators { bottom: -12px; }
.carousel-control-prev-icon, .carousel-control-next-icon { width: 17px; height: 17px; }

/* ---------------------------------------------------------------------------
 * 10. PIED DE PAGE ET MESSAGES (v2)
 * ------------------------------------------------------------------------ */
.pied-page       { font-size: 14px; color: var(--ec-gris-texte); }
.pied-page a     { color: var(--ec-bleu); }
/* Lot 10.3 : #999 sur blanc ne donnait que 2,85. Ce numéro de version est un
   ajout de la v2, il ne touche pas à l'identité v1 : on l'assombrit. */
/* .pied-page-version : retirée le 19/09/2026 (IMP-002, D-183) — le numéro de
   version ne s'affiche plus dans le pied de page. */

/* 10b. Aplat bleu remplaçant l'image d'une vignette sur la page de contrôle
        test-charte.php (elle n'est pas utilisée par le site lui-même). */
.vignette-exemple { position: relative; height: 120px; background: var(--ec-bleu); }

/* ---------------------------------------------------------------------------
 * 12. BOUTON DE DÉCONNEXION (Lot 2.9)
 * La v1 utilisait un simple lien ; la v2 passe l'action en POST, donc un
 * bouton. Cette règle lui redonne exactement l'aspect d'un lien, pour que
 * rien ne change à l'écran.
 * ------------------------------------------------------------------------ */
.deconnexion-lien {
  color: var(--ec-bleu);
  text-decoration: underline;
  border: 0;
  background: none;
  font-size: inherit;
  vertical-align: baseline;
}
.deconnexion-lien:hover { color: var(--ec-bleu-survol); }

/* Les encarts d'angle du bas (Lot 2.9) sont posés par-dessus le cadre blanc :
   sur les pages qui en portent, le pied de page recule pour rester lisible. */
.pied-page-avec-encarts { margin-bottom: 2.4rem; }
@media screen and (max-width: 640px) {
  .pied-page-avec-encarts { margin-bottom: 4rem; }
}

/* ---------------------------------------------------------------------------
   Vignettes de thème (Lot 3.2)
   Reprises de la fenêtre « SkinModal » de la v1 : l'image du thème en fond,
   son nom écrit dans sa propre police et ses propres couleurs. Les couleurs
   et la police viennent de la table « skin » et sont posées en style sur
   chaque vignette ; seule la géométrie est décrite ici.
   --------------------------------------------------------------------------- */
.theme-vignette {
  height: 80px;
  padding: 10px;
  vertical-align: middle;
  border: 2px solid transparent;
  margin: 4px;
  border-radius: 12px;
  background-position: center center;
  background-size: cover;
}
.theme-etiquette {
  /* Correction du Lot 10.2 (débordement repéré au 7.1) : la largeur était
     fixée à 80 % de la vignette, soit 94 px — huit noms de thèmes sont plus
     longs que cela (« Aventure_litteraire » demande 140 px) et sortaient de
     leur cadre. L'étiquette prend maintenant la largeur de son texte, sans
     jamais dépasser la vignette ; un nom encore plus long revient à la ligne
     au lieu de déborder. L'aspect ne change pas pour les 34 autres thèmes. */
  display: inline-block;
  width: auto;
  min-width: 80%;
  max-width: 96%;
  overflow-wrap: break-word;
  border: 2px solid transparent;
  margin: 4px auto;
  border-radius: 12px;
  font-size: 18px;
  padding: 4px;
  margin-top: 8px;
}

/* Page « Thèmes » (Lot 3.5) : les mêmes vignettes, à la taille de la v1.
   Dans la fenêtre « Voir les thèmes » de l'onglet « Créer un jeu », elles sont
   volontairement plus petites (80 px) pour que la liste tienne à l'écran ;
   sur la page dédiée, on reprend les 110 px et les 20 px de marge intérieure
   de themes.php de la v1. */
.theme-grand {
  height: 110px;
  padding: 20px;
  margin: 8px;
}
/* La présentation « un visuel par thème » écrivait le nom en 22 px en v1
   (themesSimple.php), contre 18 px quand les six fonds sont affichés. */
.theme-etiquette-simple {
  font-size: 22px;
}

/* Étoile des favoris et cadenas du verrou (Lot 3.3) : ce sont maintenant des
   boutons dans un formulaire (envoi en POST avec jeton anti-CSRF), mais ils
   doivent garder l'aspect exact des liens de la v1. */
.bouton-badge {
  background: none;
  border: 0;
  padding: 0;
  color: inherit;
  font: inherit;
  line-height: 1;
  cursor: pointer;
}
.bouton-badge:hover, .bouton-badge:focus { filter: brightness(1.25); }

/* Bouton « Copier » de la fenêtre Partager (Lot 3.4, proposition U-4).
   Il reste masqué tant que copier.js ne l'a pas activé : sans JavaScript,
   mieux vaut pas de bouton qu'un bouton sans effet. */
.bouton-copier { display: none; margin-left: 6px; vertical-align: baseline; }
.bouton-copier.copier-actif { display: inline-block; }

/* ---------------------------------------------------------------------------
   L'éditeur de jeu (Lot 4.1) — editer-jeu.php
   ---------------------------------------------------------------------------
   Le bandeau porte le nom du jeu sur le fond du thème choisi, comme en v1
   (règle « .bandeau » écrite alors dans la page). Seule l'IMAGE change d'un
   jeu à l'autre : elle est posée par un style en ligne dans la page ; tout le
   reste est ici. */
.bandeau {
  margin: -16px -16px 10px -16px;      /* déborde du cadre blanc, comme en v1 */
  padding: 0;
  width: auto;
  height: 38px;
  line-height: 38px;
  text-align: center;
  background-position: center center;
  background-size: cover;
  opacity: 0.6;
  font-family: 'Quicksand', sans-serif;
  color: #FFFFFF;
  font-size: 23px;
  font-weight: bold;
  letter-spacing: 0.13em;
  text-shadow: 0 0 10px black;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  z-index: 2;
}
/* Le bouton « Retour » de la v1 (classe .deconnexion, coin haut droit du cadre
   blanc) est un lien blanc sur fond bleu. */
.deconnexion a { color: #FFFFFF; text-decoration: none; }
.deconnexion a:hover { text-decoration: underline; }

/* Les deux encarts du bandeau bleu de l'éditeur (v1 : encartBD = déconnexion,
   encartBG = site + aperçu) : les icônes sont bleues sur fond blanc. */
.haut-cadre .encartBD a, .haut-cadre .encartBG a,
.haut-cadre .encartBD button { color: var(--ec-bleu); text-decoration: none; }
.haut-cadre .encartBD button { border: 0; background: none; padding: 0; font: inherit; line-height: 1; }

/* Onglets de l'éditeur : mêmes couleurs que le tableau de bord. */
#ongletsEditeur .nav-link { color: var(--ec-bleu); }
#ongletsEditeur .nav-link.active { font-weight: bold; }

/* Carte d'un indice (Lot 4.3) et aperçu d'un contenu : les couleurs et la
   police du thème sont posées par la page (elles dépendent du jeu). */
.cardIndice { border-width: 2px; border-style: solid; }
.cardIndiceText { font-size: 20px; }

/* Un panneau d'onglet pas encore renseigné (méthode des lots cumulatifs). */
.onglet-a-venir { color: var(--ec-gris-texte); font-style: italic; }

/* Contenus des codes et indices (Lot 4.2) : une image liée par son adresse
   ne déborde jamais de sa carte (la v1 posait des attributs « max-width »
   qui n'existent pas en HTML et étaient ignorés). */
.media-image { max-width: 90%; max-height: 300px; height: auto; }
.carte-code .card-text iframe, .carte-code .card-text audio { max-width: 100%; }
.carte-code .card-text iframe { height: 220px; }

/* ---------------------------------------------------------------------------
   Onglet « Personnaliser le jeu » (Lot 4.6)
   Les 24 icônes de malus (rouge sombre) et de code (bleu sombre) de la v1,
   présentées en vrais boutons radio : cliquables, utilisables au clavier, et
   annoncés aux lecteurs d'écran (la v1 n'avait aucune étiquette). */
.choix-icones { display: flex; flex-wrap: wrap; gap: 4px; }
.choix-icone { position: relative; display: inline-block; }
.choix-icone .form-check-input { position: absolute; opacity: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.choix-icone .form-check-label {
  display: inline-flex; align-items: center; justify-content: center;
  width: 46px; height: 46px; font-size: 28px; cursor: pointer;
  border: 2px solid transparent; border-radius: 8px;
}
.icone-malus { color: darkred; }
.icone-code  { color: darkblue; }
.choix-icone .form-check-input:checked + .form-check-label {
  border-color: var(--ec-bleu); background-color: #e7f1f7;
}
.choix-icone .form-check-input:focus-visible + .form-check-label { outline: 3px solid var(--ec-jaune, #efad2b); }

/* Aperçu d'un fond de thème (180 px de large en v1). */
.apercu-fond { width: 100%; max-width: 180px; height: auto; border-radius: 8px; border: 2px solid transparent; }
.form-check-input:checked + .form-check-label .apercu-fond { border-color: var(--ec-bleu); }

/* ---------------------------------------------------------------------------
   Bandeau permanent de l'accès élève (Lot 6.2, proposition U-10)
   Couleur retenue : le jaune de la charte (#efad2b), qui sert déjà au bouton
   « Accès temporaire » de l'onglet Enseignant — l'élève et l'enseignant
   reconnaissent la même couleur des deux côtés du lien.
   --------------------------------------------------------------------------- */
.alert-eleve {
  background-color: #fdf3dd;
  border: 1px solid #efad2b;
  border-left: 6px solid #efad2b;
  color: #6b4c05;
}
.alert-eleve strong { color: #5a3f04; }

/* L'adresse d'un lien d'accès élève, affichée une seule fois (Lot 6.1). */
.lien-eleve-adresse {
  word-break: break-all;
}

/* ---------------------------------------------------------------------------
   Onglet « Enseignant » (Lots 6.1 et 6.4)
   --------------------------------------------------------------------------- */
/* Le tutoriel Genially du mode « Permanent », conservé de la v1 (A-11). */
.tutoriel-permanent {
  border: 0;
  position: relative;
  max-width: 100%;
}
/* Les deux coches vertes du rappel RGPD, comme en v1. */
.rgpd-coche { color: green; }

/* ---------------------------------------------------------------------------
   Corrections d'affichage relevées sur les captures du Lot 6 (15/09/2026)
   --------------------------------------------------------------------------- */
/* 1. Les phrases des fenêtres de confirmation sortaient du cadre blanc.
      Cause : la fenêtre est ÉCRITE dans la cellule « Actions » du tableau des
      liens, qui porte « text-nowrap » (pour que les deux boutons restent côte
      à côte). Or une fenêtre modale s'affiche par-dessus la page mais reste,
      dans le code, à l'intérieur de cette cellule : elle HÉRITE donc du
      « ne jamais revenir à la ligne », et ses phrases partaient tout droit.
      On remet le retour à la ligne normal sur toutes les fenêtres, quel que
      soit l'endroit du code où elles sont écrites. */
.modal { white-space: normal; }

/* 2. Un badge de Bootstrap ne revient jamais à la ligne non plus
      (« white-space: nowrap » d'origine). Le badge de « Mes jeux » disait
      « Partagé avec moi — par <identifiant> » : il dépassait donc de la carte
      du jeu dès que l'identifiant était un peu long. Plutôt que de le laisser
      s'étaler sur deux lignes, le badge a été raccourci à « Partagé avec moi »
      — qui tient toujours — et le nom du créateur passe en dessous, en petit.
      C'est cette ligne-là qui doit pouvoir revenir à la ligne, car la longueur
      d'un identifiant de compte est imprévisible.
      RÈGLE À RETENIR pour les lots suivants : ne jamais mettre dans un badge
      un texte dont on ne maîtrise pas la longueur. */
.partage-auteur { overflow-wrap: anywhere; }

/* 3. Sur un téléphone, l'onglet « Enseignant » se décalait vers la droite :
      toute la page devenait plus large que l'écran et défilait latéralement.
      Cause : le tableau des liens est plus large qu'un téléphone, ce qui est
      prévu — il est enfermé dans un cadre à défilement horizontal
      (« table-responsive »). Mais les textes destinés aux lecteurs d'écran
      (classe « sr-only », placés dans les boutons Révoquer et Renouveler) sont
      en position absolue : faute de repère à l'intérieur du cadre, ils se
      calaient sur la page entière et échappaient au défilement, entraînant la
      page avec eux. Donner un repère au cadre (« position: relative ») les
      enferme dedans avec le tableau. Sans effet sur les fenêtres modales, qui
      sont en position fixe et restent centrées sur l'écran. */
.table-responsive { position: relative; }

/* ---------------------------------------------------------------------------
 * 13. BIBLIOTHÈQUE PUBLIQUE : FILTRES CUMULABLES (Lot 7.1, proposition U-8)
 * ------------------------------------------------------------------------ */

/* Le titre d'un menu de filtre appliqué est mis en évidence dans la barre de
   navigation : d'un coup d'œil, on voit lequel des trois est actif. En v1,
   rien ne le signalait — et comme un filtre effaçait le précédent, on ne
   pouvait pas non plus le deviner. */
.filtre-actif {
  font-weight: bold;
  color: var(--ec-bleu) !important;
}

/* Les menus Thème (43 entrées) et Discipline (51 entrées) sont plus hauts
   qu'un écran de portable : ils défilent à l'intérieur du menu plutôt que de
   pousser la page. La v1 les laissait déborder. */
.dropdown-menu-defilant {
  max-height: 60vh;
  overflow-y: auto;
  /* IMP-001 (18/09/2026) : le menu « Discipline » est large (51 entrées, dont
     « Sciences de la Vie et de la Terre »). Chez une personne CONNECTÉE, la
     barre de navigation porte un lien de plus (« Mes jeux ») : le menu est
     poussé de 19 px vers la droite et sortait de l'écran sur une fenêtre de
     1280 px, ce qui faisait défiler toute la page latéralement. Le menu ne
     peut plus dépasser la largeur de la fenêtre, et son contenu revient à la
     ligne au lieu de pousser. (Défaut présent depuis le Lot 7.1 : les tests
     du Lot 10.2 ouvraient cette page en visiteur, jamais en personne
     connectée.) */
  max-width: calc(100vw - 2rem);
}
.dropdown-menu-defilant .dropdown-item {
  white-space: normal;
}

/* Les étiquettes du bandeau « Filtres actifs ». Le libellé d'une discipline
   (« Sciences de la Vie et de la Terre ») ou un mot recherché peuvent être
   longs : l'étiquette revient à la ligne au lieu de sortir de son cadre —
   c'est la règle retenue après la relecture des captures du Lot 6. */
.filtre-etiquette {
  display: inline-block;
  margin: 0 4px 4px 0;
  white-space: normal;
  text-align: left;
  overflow-wrap: anywhere;
}
.filtre-etiquette:hover,
.filtre-etiquette:focus {
  background-color: var(--ec-bleu) !important;
  color: #FFFFFF;
}

/* La barre de navigation de la bibliothèque porte trois menus de filtres en
   plus des liens habituels : à partir d'une certaine largeur de fenêtre, la
   somme dépasse la place disponible. Plutôt que de laisser le dernier lien
   sortir du cadre (c'était le cas à 1280 px), la barre passe à la ligne.
   Sans effet sur les autres pages, dont la barre tient largement. */
.navbar-collapse { flex-wrap: wrap; }

/* ---------------------------------------------------------------------------
 * 14. QUESTIONS FRÉQUENTES (Lot 7.3)
 * ------------------------------------------------------------------------ */

/* Les coches vertes et les croix rouges des réponses. La v1 écrivait la
   couleur directement dans le HTML (style="color:green") : elle est ici dans
   la charte, comme le reste. */
.reponse-oui { color: #127A2E; }
.reponse-non { color: #B3261E; }

/* L'accordéon aux couleurs du site : Bootstrap 5 le colore en bleu « primaire »
   par ses propres variables, qu'on renseigne pour retrouver la teinte de la
   charte sur la question ouverte. */
.accordion {
  --bs-accordion-btn-focus-box-shadow: 0 0 0 .2rem rgba(0, 94, 143, .25);
  --bs-accordion-active-color: var(--ec-bleu);
  --bs-accordion-active-bg: #E8F1F6;
  --bs-accordion-border-color: var(--ec-jaune);
}
.accordion-button { font-family: var(--ec-police-interface); font-weight: bold; }
/* Un intitulé de question peut tenir sur deux lignes sur un téléphone : sans
   cela, le texte sortirait de son cadre (règle retenue après le Lot 6). */
.accordion-button { text-align: left; }

/* ---------------------------------------------------------------------------
 * 15. TUTORIELS (Lot 7.4)
 * ------------------------------------------------------------------------ */

/* L'espacement entre les boutons, écrit en style « inline » dans la v1. */
.bloc-tutoriel { padding-top: 8px; padding-bottom: 8px; }
/* Un libellé de bouton long (« Présentation générale (4 min) ») revient à la
   ligne au lieu de sortir de son cadre sur un téléphone. */
.bloc-tutoriel .btn { white-space: normal; max-width: 100%; }

/* Le contenu d'un tutoriel : les lecteurs vidéo remplissent la fenêtre sans la
   faire déborder, quelle que soit la largeur déclarée dans la base. */
.contenu-tutoriel iframe,
.contenu-tutoriel video,
.contenu-tutoriel img { max-width: 100%; }
.contenu-tutoriel iframe { aspect-ratio: 16 / 9; height: auto; width: 100%; border: 0; }

/* ---------------------------------------------------------------------------
 * 16. TEXTES LÉGAUX : CGU ET MENTIONS LÉGALES (Lot 7.5)
 * ------------------------------------------------------------------------ */

/* Ces deux pages sont de longs textes : on les rend lisibles (hauteur de ligne,
   titres espacés) sans toucher au reste du site. La v1 les servait sans aucune
   mise en forme, dans un cadre de 90 pixels de haut. */
.texte-legal { line-height: 1.6; }
.texte-legal h3 { margin-top: 1.6em; color: var(--ec-bleu); font-size: 18px; }
.texte-legal h4 { margin-top: 1.2em; font-size: 16px; }
.texte-legal p, .texte-legal li { overflow-wrap: anywhere; }
.texte-legal ul { margin-bottom: 1em; }

/* ---------------------------------------------------------------------------
 * 17. ADMINISTRATION DES CONTENUS ÉDITORIAUX (Lot 7.6)
 * ------------------------------------------------------------------------ */

/* Le cadre d'un formulaire d'édition, pour le distinguer de la liste. */
.cadre-formulaire {
  border: 1px solid var(--ec-jaune);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  background-color: #FCFCFA;
}

/* La barre de boutons de mise en forme, posée au-dessus de la zone de saisie. */
.barre-editeur {
  margin-bottom: 6px;
}
.barre-editeur .btn { margin-right: 2px; margin-bottom: 2px; }

/* ---------------------------------------------------------------------------
   IMP-002 (19/09/2026) — LE PANNEAU D'ÉMOJIS
   ---------------------------------------------------------------------------
   Il s'ouvre sous la barre de boutons, dans les deux encarts de la page
   d'accueil. Un émoji est un caractère : les boutons ne portent donc aucune
   image, seulement du texte agrandi.
   --------------------------------------------------------------------------- */
.panneau-emojis {
  margin-bottom: 8px;
  padding: 10px 12px 4px;
  border: 1px solid #DEE2E6;
  border-radius: 8px;
  background-color: #F8F9FA;
  max-height: 260px;
  overflow-y: auto;      /* cinq rubriques : le panneau ne pousse pas la page */
}
.panneau-emojis-titre {
  margin: 4px 0 4px;
  font-family: var(--ec-police-interface);
  font-size: 12px;
  font-weight: bold;
  color: #5F5F5F;
  text-transform: uppercase;
  letter-spacing: .04em;
}
.panneau-emojis-grille {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  margin-bottom: 8px;
}
.bouton-emoji {
  width: 38px;
  height: 38px;          /* zone tactile confortable, règle du Lot 10.3 */
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  background: none;
  font-size: 20px;
  line-height: 1;
  cursor: pointer;
}
.bouton-emoji:hover { background-color: #FFFFFF; border-color: #CED4DA; }
.bouton-emoji:focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: 1px;
}

/* La zone de saisie : une police à chasse fixe, parce qu'on y lit du balisage
   et qu'un « l » doit se distinguer d'un « 1 ». */
.zone-contenu {
  font-family: ui-monospace, 'Cascadia Mono', 'Consolas', monospace;
  font-size: 13px;
  line-height: 1.5;
}

/* Le cadre d'aperçu : il montre le rendu réel, donc il ressemble à la page. */
.cadre-apercu {
  border: 2px dashed var(--ec-bleu);
  border-radius: 8px;
  padding: 12px;
  background-color: #FFFFFF;
  overflow-x: auto;
}
.cadre-apercu iframe,
.cadre-apercu img { max-width: 100%; }

/* Les onglets de la page : aux couleurs de la charte. */
.nav-tabs .nav-link.active { color: var(--ec-bleu); font-weight: bold; }
.nav-pills .nav-link.active { background-color: var(--ec-bleu); }

/* ---------------------------------------------------------------------------
 * 15. LES STATISTIQUES (Lot 8.5)
 * Des barres dessinées en CSS, sans aucune bibliothèque graphique : le site
 * ne charge rien depuis l'extérieur (impératif I-5).
 * ------------------------------------------------------------------------ */

/* Le grand nombre d'une tuile. */
.stat-nombre {
  font-family: var(--ec-police-interface);
  font-size: 30px;
  font-weight: bold;
  color: var(--ec-bleu);
  line-height: 1.1;
}

/* La cellule qui accueille une barre : elle prend la place disponible. */
.stat-cellule {
  width: 60%;
  min-width: 80px;
}

/* La barre elle-même. Sa largeur est calculée par la page, en pourcentage du
   plus grand nombre du tableau. Elle ne porte aucune information que le
   nombre affiché à côté ne donne déjà : elle est donc masquée aux lecteurs
   d'écran (aria-hidden). */
.stat-barre {
  display: block;
  height: 14px;
  border-radius: 7px;
  min-width: 2px;
}

/* ---------------------------------------------------------------------------
   IMP-001 (18/09/2026) — LE CADRE DES CONDITIONS GÉNÉRALES, À L'INSCRIPTION
   ---------------------------------------------------------------------------
   Le texte des CGU est présenté dans un cadre déroulant au-dessus de la case
   à cocher (comme en v1). Il était trop bas : on n'y lisait que deux lignes à
   la fois. Sa hauteur est passée de 90 à 104 px (+15 %, dans la balise
   elle-même) et il reçoit ici un encadrement fin et discret, qui montre bien
   qu'il s'agit d'une zone que l'on fait défiler.
   --------------------------------------------------------------------------- */
.cadre-cgu {
  display: block;
  border: 1px solid #C9D6DF;
  border-radius: 6px;
  background-color: #FFFFFF;
  /* Une ombre intérieure très légère, en haut et en bas : c'est ce qui donne
     l'impression d'une fenêtre où le texte glisse, sans alourdir le trait. */
  box-shadow: inset 0 3px 4px -3px rgba(0, 0, 0, .18),
              inset 0 -3px 4px -3px rgba(0, 0, 0, .18);
}
.cadre-cgu:focus-within { border-color: var(--ec-bleu); }

/* ---------------------------------------------------------------------------
   IMP-001 (18/09/2026) — LES COURBES DE FRÉQUENTATION
   ---------------------------------------------------------------------------
   Le dessin est un SVG fabriqué par la page elle-même (aucune bibliothèque,
   impératif I-5). Il est tracé dans un repère de 640 × 220 unités, puis étiré
   ici à la largeur disponible : les proportions ne changent jamais.
   --------------------------------------------------------------------------- */
.cadre-courbe {
  margin: 0 0 .5rem;
  padding: .5rem .25rem 0;
  border: 1px solid #DEE2E6;
  border-radius: 8px;
  background-color: #FFFFFF;
}
.courbe {
  display: block;
  width: 100%;
  height: auto;
  overflow: visible;      /* une étiquette de date ne doit pas être rognée */
}

/* Les traits de repère et les graduations restent DISCRETS : ils aident à
   lire la courbe, ils ne rivalisent pas avec elle. */
.courbe-repere     { stroke: #DEE2E6; stroke-width: 1; }
.courbe-graduation {
  fill: #5F5F5F;
  font-family: var(--ec-police-interface);
  font-size: 12px;
}

/* La courbe : un trait franc de 2 px, et sous lui une surface très claire qui
   donne le volume sans masquer les traits de repère. */
.courbe-trait   { fill: none; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.courbe-surface { opacity: .12; stroke: none; }
.courbe-point   { stroke: #FFFFFF; stroke-width: 1.5; }

/* Le disque de survol : invisible, mais assez large pour être visé au doigt.
   C'est lui qui porte la bulle d'aide native du navigateur (<title>). */
.courbe-cible { fill: transparent; cursor: pointer; }

/* Le tableau des valeurs, replié sous chaque courbe. */
.courbe-valeurs           { margin-bottom: 1.25rem; }
.courbe-valeurs > summary {
  cursor: pointer;
  font-family: var(--ec-police-interface);
  font-size: .875rem;
  color: var(--ec-bleu);
}
.courbe-valeurs > summary:hover { text-decoration: underline; }
.courbe-valeurs table           { margin-top: .5rem; }

/* À l'impression, la bulle d'aide ne sert à rien : le tableau des valeurs,
   lui, est toujours utile. On le déplie. */
@media print {
  .courbe-valeurs > div { display: block !important; }
}

/* ---------------------------------------------------------------------------
   Lot 10.2 — Débordements relevés par tests/detecter-debordements.js dans la
   fenêtre « Partager » (écarts E-4 et E-5 de la recette)
   --------------------------------------------------------------------------- */

/* E-4 : les panneaux d'onglets de la fenêtre contiennent des « row » de
   Bootstrap. Une « row » porte une marge négative de 12 px de chaque côté,
   prévue pour être absorbée par le « container » qui l'entoure ; ici il n'y en
   a pas, et le contenu sortait donc de 12 px du cadre de la fenêtre, à toutes
   les largeurs d'écran. Même cause que la barre latérale des thèmes (E-2). */
.modal-body > .tab-content > .tab-pane > .row {
  margin-left: 0;
  margin-right: 0;
}

/* E-5 : les adresses de partage (« http://…/jeu.php?prive=J-Kf7Rm2… ») sont de
   longues suites de caractères sans le moindre espace. Le navigateur n'a donc
   aucun endroit où couper, et la ligne sortait de sa colonne sur tablette et
   sur téléphone. On l'autorise à couper n'importe où — uniquement pour ces
   adresses, pas pour le texte courant, qui continue de couper aux espaces. */
.lien-partage,
.lien-partage a {
  overflow-wrap: anywhere;
  word-break: break-word;
}

/* E-6 : même cause, ailleurs. Une « row » de Bootstrap porte une marge
   négative de 12 px de chaque côté ; elle est prévue pour être absorbée par la
   colonne ou le « container » qui l'entoure. Dans les onglets de l'éditeur,
   plusieurs « row » sont posées directement dans le panneau de l'onglet, dans
   un « fieldset » ou dans une colonne isolée — c'est-à-dire dans des cadres
   qui n'ont pas cette réserve de 12 px. Le contenu sortait donc du cadre, à
   toutes les largeurs d'écran. On annule la marge négative dans ces trois cas
   précis : le contenu revient dans son cadre, et l'espacement entre colonnes
   (le « gutter » intérieur) ne bouge pas. */
main > .row,
.tab-pane > .row,
.tab-pane form > .row,
.tab-pane > [class*="col-"] > .row,
fieldset > .row,
[class*="col-"]:not(.row > *) > .row {
  margin-left: 0;
  margin-right: 0;
}

/* ===========================================================================
   Lot 10.3 — ACCESSIBILITÉ ET CONFORT SUR TÉLÉPHONE
   ---------------------------------------------------------------------------
   Tout ce qui suit sert aux personnes qui n'utilisent pas le site « comme
   tout le monde » : au clavier sans souris, avec un lecteur d'écran, avec une
   vue basse, ou tout simplement au doigt sur une tablette posée sur une table
   de classe. Aucune de ces règles ne change les couleurs ni la mise en page
   de la v1 : elles ajoutent ce qui manquait.
   =========================================================================== */

/* --- 0. Les titres qui ont changé de balise, et pas de taille -------------
   Au Lot 10.3, les titres des fenêtres et des cartes sont passés de <h5> à
   <h2> : la règle d'accessibilité veut que les titres se suivent sans sauter
   de niveau, et un <h5> juste après le <h1> de la page faisait un trou. La
   BALISE change, l'ASPECT ne doit pas : on leur rend ici, au pixel près, la
   taille qu'un <h5> avait dans la v1. */
h2.modal-title,
h2.card-title {
  font-size: 1.25rem;
  font-weight: 500;
}

/* --- 1. Le lien d'évitement ------------------------------------------------
   Première chose que rencontre la touche Tab sur chaque page. Il reste hors
   de l'écran tant qu'on ne l'a pas atteint, puis apparaît en haut à gauche.
   Un clic ou un « Entrée » amène directement au contenu, sans retraverser le
   bandeau et les douze liens du menu. */
.lien-evitement {
  position: absolute;
  top: -100px;
  left: 8px;
  z-index: 2000;
  padding: 10px 16px;
  color: #fff;
  background-color: var(--ec-bleu);
  border: 3px solid var(--ec-jaune);
  border-radius: 6px;
  font-weight: 700;
  text-decoration: none;
  transition: top .1s ease-in-out;
}
.lien-evitement:focus,
.lien-evitement:focus-visible {
  top: 8px;
  color: #fff;
}

/* --- 2. On voit toujours où l'on est au clavier ----------------------------
   Le navigateur dessine un contour par défaut, mais il change d'un navigateur
   à l'autre et se perd sur les fonds sombres des thèmes. On en pose un à
   nous, aux couleurs de la charte, sur TOUT ce qui peut recevoir le clavier.

   « :focus-visible » et non « :focus » : le contour n'apparaît que pour qui
   navigue au clavier, jamais après un clic à la souris — c'est exactement le
   comportement attendu, et c'est pourquoi il ne se voit pas à l'usage
   ordinaire. */
:where(a[href], button, input, select, textarea, summary, [tabindex]:not([tabindex="-1"])):focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: 2px;
  border-radius: 3px;
}
/* Sur le bleu du bandeau et sur les boutons jaunes, le jaune se verrait mal :
   on y bascule sur le bleu foncé, tout aussi contrasté. */
.haut-cadre :where(a, button):focus-visible,
.btn-EG-jaune:focus-visible,
.btn-warning:focus-visible {
  outline-color: #00243a;
}

/* --- 3. Les zones à toucher, sur téléphone et tablette ---------------------
   L'usage recommandé est 44 × 44 px pour un doigt. En classe, les élèves
   jouent souvent à plusieurs autour d'une tablette : un bouton de 24 px se
   rate une fois sur deux. On agrandit la zone SENSIBLE sans grossir le
   dessin : le bouton garde son aspect, c'est sa marge intérieure qui
   s'étend. Rien ne change au-delà de 768 px de large. */
@media (max-width: 768px) {
  .btn-sm,
  .btn-close,
  .bouton-badge,
  .nav-link,
  .navbar-toggler {
    min-width: 44px;
    min-height: 44px;
  }
  /* Une case à cocher ne peut pas grossir sans déformer le formulaire : on
     élargit la zone cliquable autour d'elle. */
  .form-check-input,
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 22px;
    min-height: 22px;
    margin-top: 0.15em;
  }
  label[for] {
    display: inline-block;
    min-height: 32px;
    padding-top: 4px;
  }

  /* Quelques liens sont, par nature, plus petits que 44 px : la vignette de
     licence d'un jeu, une étiquette, les petits boutons d'angle. Les grossir
     déformerait la fiche. On agrandit donc leur BOÎTE d'un remplissage de
     14 px, aussitôt repris par une marge négative de 14 px : à l'écran rien
     ne bouge d'un pixel, mais le doigt a 44 px à viser. */
  /* La vignette de licence est dans une pastille étroite : on ne l'étend
     qu'en hauteur, sans quoi elle sortirait de sa pastille. */
  .zone-tactile-etendue {
    display: inline-block;
    padding: 15px 0;
    margin: -15px 0;
  }
  .encartHD, .encartBD, .encartBG,
  .encartBD form button, .encartBG form button, .encartHD form button,
  .deconnexion a, .deconnexion button,
  .btn-link.btn-sm,
  .bouton-badge {
    display: inline-block;
    padding: 14px;
    margin: -14px;
  }
}

/* --- 4. Deux couleurs d'information trop pâles ----------------------------
   Le bleu clair « info » de Bootstrap (#0dcaf0) ne donne que 1,96 sur blanc.
   Il n'appartient pas à la charte de la v1 — c'est une couleur par défaut de
   Bootstrap employée pour quelques mentions — on l'assombrit donc librement,
   et les pastilles « info » passent en texte foncé. */
.text-info {
  --bs-text-opacity: 1;
  color: #087990 !important;
}
.badge.bg-info,
.alert-info .badge.bg-info {
  color: #04323d !important;
}

/* --- 5. Les tableaux qui défilent sont atteignables au clavier ------------
   Un cadre qui défile horizontalement (listes de comptes, de jeux, de
   domaines) doit pouvoir être parcouru sans souris : la règle veut qu'il
   puisse recevoir le clavier. L'attribut est posé dans les gabarits ; ici on
   lui donne le même contour que le reste. */
.table-responsive:focus-visible,
pre:focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: 2px;
}

/* --- 6. Respecter « animations réduites » ---------------------------------
   Certaines personnes règlent leur appareil pour supprimer les animations
   (vertiges, migraines). On suit ce réglage : les fondus de Bootstrap et nos
   transitions s'arrêtent, tout le reste fonctionne à l'identique. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
    scroll-behavior: auto !important;
  }
}

/* --- 7. Les titres de l'éditeur, passés d'un niveau à l'autre --------------
   Même raison qu'au point 0 : dans les six onglets de l'éditeur, les titres
   sautaient du h1 de la page au h3. Ils sont devenus h2 et h3, et gardent
   ici, au pixel près, la taille et la graisse qu'ils avaient. */
h2.h3-titre {
  font-size: 1.75rem;
  font-weight: 500;
  margin-bottom: .5rem;
}
h3.h4-titre {
  font-size: 1.5rem;
  font-weight: 500;
  margin-bottom: .5rem;
}

/* --- 9. Les boutons-texte discrets ----------------------------------------
   Les boutons « lien » (Annuler, Tout effacer, Voir le détail…) n'ont ni
   fond ni bordure : leur zone sensible se réduit à la hauteur du texte. */
@media (max-width: 768px) {
  .btn-link {
    min-height: 44px;
    padding-top: 10px;
    padding-bottom: 10px;
  }
}

/* --- 10. Le code cité dans une pastille ----------------------------------
   Bootstrap donne au <code> une couleur rose pâle, illisible sur le bleu
   clair d'une pastille « info ». Dans une pastille, il suit la couleur du
   texte qui l'entoure. */
.badge code {
  color: inherit;
}

/* ===========================================================================
   SECTION 12 — LES CLÉS D'ACCÈS (IMP-006)
   ===========================================================================
   Un seul réglage, et il n'existe que pour le téléphone.

   Le champ « Nom de la nouvelle clé » et son bouton « Ajouter cette clé »
   forment un groupe de saisie. Bootstrap laisse le champ rétrécir autant qu'il
   le faut pour que le bouton tienne sur la même ligne : à 390 px, il ne
   restait plus que la place d'écrire « Par exe… ». On impose au champ une
   largeur minimale ; en dessous, le bouton passe tout seul à la ligne
   suivante — le groupe de saisie de Bootstrap revient à la ligne de lui-même.
   Rien ne change au-dessus de cette largeur. */

.bloc-cles-acces .input-group > .form-control {
  min-width: 14rem;
}

/* La liste des clés : sur téléphone, le bouton « Retirer » passe sous le nom
   de la clé plutôt que de le comprimer. C'est déjà ce que fait la classe
   « flex-wrap » de Bootstrap posée sur chaque ligne ; on se contente de lui
   laisser toute la largeur quand il est passé à la ligne. */
@media (max-width: 575.98px) {
  .bloc-cles-acces .list-group-item > .btn {
    width: 100%;
  }
}

/* ===========================================================================
   SECTION 13 — L'ASSISTANT « THÈMES » ET LA GALERIE DES POLICES (IMP-009)
   ===========================================================================
   Pages d'administration : administration-themes.php et
   administration-polices.php. Tout est dans les couleurs de la charte ; les
   seules couleurs « libres » sont celles du thème en cours de réglage, que le
   script pose en style sur l'aperçu. */

/* --- La barre des quatre étapes ------------------------------------------ */
.etapes-theme ol {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin: 14px 0 4px;
  padding: 0;
  list-style: none;
}
.etapes-theme li {
  flex: 1 1 160px;
}
.etapes-theme a,
.etapes-theme li > span {
  display: block;
  padding: 8px 10px;
  border: 1px solid #d7dee3;
  border-radius: 10px;
  background: #fbfcfd;
  color: var(--ec-gris-texte, #555);
  text-decoration: none;
  font-size: 15px;
}
.etapes-theme a:hover,
.etapes-theme a:focus-visible {
  border-color: var(--ec-bleu);
  color: var(--ec-bleu);
}
.etapes-theme li.active a,
.etapes-theme li.active > span {
  border-color: var(--ec-bleu);
  background: var(--ec-bleu);
  color: #fff;
  font-weight: bold;
}
.etapes-theme .numero {
  display: inline-block;
  min-width: 24px;
  height: 24px;
  margin-right: 4px;
  border-radius: 12px;
  background: rgba(0, 0, 0, .12);
  text-align: center;
  line-height: 24px;
  font-size: 13px;
}

/* --- La liste des thèmes ------------------------------------------------- */
.tableau-themes .apercu-theme-liste {
  width: 96px;
  height: 54px;
  object-fit: cover;
  border-radius: 6px;
  border: 1px solid #d7dee3;
}

/* --- Étape 2 : les six emplacements de visuels ---------------------------- */
.grille-visuels {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 14px;
}
.emplacement-visuel .zone-depot {
  display: block;
  cursor: pointer;
  border: 2px dashed #b9c4cc;
  border-radius: 10px;
  padding: 8px;
  background: #fff;
  transition: border-color .15s, background-color .15s;
}
.emplacement-visuel.est-rempli .zone-depot { border-style: solid; }
.emplacement-visuel.a-envoyer .zone-depot  { border-color: var(--ec-jaune); background: #fff8e8; }
.emplacement-visuel.survol .zone-depot     { border-color: var(--ec-bleu); background: #eef6fb; }
.emplacement-visuel .apercu-visuel {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
  border-radius: 6px;
  background: #e9eef2;
}
.emplacement-visuel .apercu-visuel.vide {
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9aa7b1;
  font-size: 2rem;
}
.emplacement-visuel .legende-visuel {
  display: block;
  margin-top: 6px;
  font-size: 14px;
}
.emplacement-visuel .legende-visuel > span { display: block; }
.emplacement-visuel .consigne-depot { color: var(--ec-gris-texte, #555); font-size: 13px; }
.emplacement-visuel input[type="file"] { margin-top: 6px; }

/* --- Étape 3 : les pipettes, les pastilles, l'aperçu ---------------------- */
.champ-couleur .form-control-color { width: 3.2rem; height: 2.2rem; padding: 2px; }
.champ-couleur .valeur-couleur { font-size: 13px; }

.pastille {
  display: inline-block;
  min-width: 3.4em;
  padding: 1px 7px;
  border-radius: 10px;
  text-align: center;
  font-size: 13px;
  font-weight: bold;
  color: #fff;
}
.pastille-bon      { background: #1b7f3b; }
.pastille-passable { background: #9a5700; }
.pastille-faible   { background: #b3261e; }
.pastille-inconnu  { background: #6c757d; }
.liste-contrastes li { margin-bottom: 6px; font-size: 15px; }

.theme-apercu {
  position: relative;
  aspect-ratio: 16 / 9;
  border-radius: 12px;
  background-color: #444;
  background-size: cover;
  background-position: center;
  overflow: hidden;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
}
.theme-apercu-cadre {
  width: min(100%, 420px);
  border: 4px solid #000;
  border-radius: 16px;
  padding: 14px 16px;
  text-align: center;
}
.theme-apercu-titre    { font-size: 1.6rem; line-height: 1.15; margin-bottom: 8px; }
.theme-apercu-minuteur {
  display: inline-block;
  padding: 4px 18px;
  border: 4px solid #000;
  border-radius: 12px;
  font-size: 1.4rem;
  margin-bottom: 10px;
  background: rgba(255, 255, 255, .06);
}
.theme-apercu-boutons { display: flex; gap: 8px; justify-content: center; flex-wrap: wrap; margin-bottom: 10px; }
.theme-apercu-bouton {
  display: inline-block;
  padding: 6px 12px;
  border: 3px solid #000;
  border-radius: 20px;
  font-size: .95rem;
  font-family: 'Quicksand', sans-serif;
}
.theme-apercu-fenetre {
  border-radius: 10px;
  padding: 8px 10px;
  font-family: 'Quicksand', sans-serif;
  font-size: .9rem;
  text-align: left;
}

/* --- Étape 4 : les écritures ----------------------------------------------- */
.exemple-police {
  font-size: 1.5rem;
  line-height: 1.2;
  min-height: 2.4rem;
  padding: 6px 10px;
  border: 1px solid #d7dee3;
  border-radius: 8px;
  background: #fff;
  overflow-wrap: anywhere;
}

/* --- La galerie des polices ------------------------------------------------ */
.galerie-polices {
  margin: 0;
  padding: 0;
  list-style: none;
  columns: 1;
}
@media (min-width: 992px) { .galerie-polices { columns: 2; column-gap: 24px; } }
.galerie-polices li {
  break-inside: avoid;
  padding: 8px 4px 10px;
  border-bottom: 1px solid #eef1f4;
}
.galerie-polices .nom-police {
  display: block;
  font-family: 'Quicksand', sans-serif;
  font-size: 13px;
  color: var(--ec-gris-texte, #555);
}
.galerie-polices .exemple-police-galerie {
  display: block;
  font-size: 28px;
  line-height: 1.25;
  overflow-wrap: anywhere;
}

/* Téléphone : les étapes en colonne, l'aperçu prend toute la largeur. */
@media (max-width: 575.98px) {
  .etapes-theme li { flex-basis: 100%; }
  .theme-apercu-cadre { padding: 10px; }
  .theme-apercu-titre { font-size: 1.2rem; }
}

/* --- Les couleurs d'état de l'assistant ------------------------------------
   Les classes text-success / text-warning de Bootstrap n'atteignent pas 4,5
   pour 1 sur le fond des cartouches : on emploie trois teintes plus sombres. */
.etat-ok        { color: #146c43; }
.etat-attention { color: #8a5a00; }
.etat-ko        { color: #b3261e; }

/* --- IMP-009b : ce qui est fait, ce qui reste (barre des étapes) ----------- */
.etapes-theme .marque {
  display: inline-block;
  width: 18px;
  height: 18px;
  margin-left: 6px;
  border-radius: 9px;
  vertical-align: -3px;
  text-align: center;
  font-size: 11px;
  line-height: 18px;
}
.etapes-theme .marque-faite   { background: #146c43; color: #fff; }
.etapes-theme .marque-a-faire { background: transparent; border: 3px solid #c9780a; width: 14px; height: 14px; vertical-align: -1px; }
.etapes-theme li.active .marque-faite   { background: #fff; color: #146c43; }
.etapes-theme li.active .marque-a-faire { border-color: var(--ec-jaune); }

/* ===========================================================================
 * 15. IMP-010 (20/09/2026) — LE TABLEAU DE BORD « MES JEUX »
 * ---------------------------------------------------------------------------
 * Refonte demandée par Guillaume, d'après le prototype qu'il a fourni.
 * Trois morceaux, dans l'ordre de la page :
 *
 *   15.1  le titre « Mes jeux », sa baseline et le bouton « + Créer un jeu » ;
 *   15.2  les six onglets, chacun dans une couleur de la charte ;
 *   15.3  les cartes de jeu, en colonnes colorées.
 *
 * LES COULEURS VIENNENT TOUTES DES VARIABLES DE LA SECTION 1 : aucune valeur
 * hexadécimale n'est écrite ici. Changer une teinte de la charte se fait donc
 * toujours à un seul endroit.
 * ======================================================================== */

/* ---------------------------------------------------------------------------
 * 15.1  LE TITRE DU TABLEAU DE BORD
 * ------------------------------------------------------------------------ */
.entete-tableau {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 14px 20px;
  margin: 4px 0 18px;
}
.entete-tableau-marque { display: flex; align-items: center; gap: 16px; min-width: 0; }
.entete-tableau-logo   { width: 62px; height: 62px; flex: 0 0 auto; }
.entete-tableau-titre {
  margin: 0;
  font-family: var(--ec-police-interface);
  font-size: clamp(1.75rem, 2.6vw, 2.4rem);
  font-weight: 700;
  line-height: 1.05;
  color: var(--ec-bleu);
}
/* La baseline, en gris : elle explique, elle ne crie pas. #5F5F5F sur blanc
   donne 6,4 pour 1 — largement au-dessus du minimum. */
.entete-tableau-baseline {
  margin: 2px 0 0;
  font-family: var(--ec-police-interface);
  font-size: 1.05rem;
  color: var(--ec-gris-texte);
  line-height: 1.25;
}

/* Le bouton « + Créer un jeu ». Ocre de la charte ; le texte est en ENCRE
   SOMBRE et non en blanc, parce que le blanc sur cet ocre ne donne que 1,97
   pour 1 — c'est la règle posée à la section 1 pour la sixième couleur. */
.bouton-creer-jeu {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 12px 24px;
  border: 0;
  border-radius: 30px;
  background: var(--ec-palette-6);
  color: var(--ec-palette-6-encre);
  font-family: var(--ec-police-interface);
  font-size: 1.1rem;
  font-weight: 700;
  line-height: 1.2;
  text-decoration: none;
  box-shadow: 0 2px 6px rgb(0 0 0 / 14%);
  cursor: pointer;
}
.bouton-creer-jeu:hover { background: var(--ec-jaune-survol); color: var(--ec-palette-6-encre); }
.bouton-creer-jeu:focus-visible { outline: 3px solid var(--ec-bleu); outline-offset: 3px; }
.bouton-creer-jeu i {
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--ec-bleu);
  color: #FFFFFF;
  font-size: .8rem;
}

/* ---------------------------------------------------------------------------
 * 15.2  LES SIX ONGLETS
 * ---------------------------------------------------------------------------
 * Chacun porte sa couleur, dans l'ordre du prototype : bleu, turquoise, ocre,
 * violet, brun, rose. La couleur n'est JAMAIS la seule information — chaque
 * onglet garde son pictogramme et son intitulé écrit, et l'onglet ouvert se
 * distingue aussi par sa taille, son ombre et son attribut aria-selected.
 *
 * POURQUOI « --onglet » ? Chaque onglet pose sa propre couleur dans cette
 * variable ; toutes les règles ci-dessous s'y réfèrent. Ajouter un septième
 * onglet demandera donc UNE ligne, pas un bloc de règles.
 * ------------------------------------------------------------------------ */
.onglets-tableau {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  border: 0;
  margin: 0 0 -2px;
  padding: 0;
}
.onglets-tableau .nav-item { margin: 0; }

.onglets-tableau .nav-link {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 11px 20px;
  border: 0;
  border-radius: 14px 14px 0 0;
  background: var(--onglet, var(--ec-bleu));
  color: #FFFFFF;
  font-family: var(--ec-police-interface);
  font-size: 1rem;
  font-weight: 600;
  line-height: 1.2;
  /* L'onglet FERMÉ est légèrement ASSOMBRI — jamais éclairci.
     La première version le rendait translucide (opacity .78) : sur le blanc de
     la page, la couleur pâlissait et le texte blanc tombait sous le seuil de
     lisibilité (le contrôle d'accessibilité l'a signalé). Assombrir fait
     l'inverse : le contraste du texte AUGMENTE, et l'onglet paraît tout de
     même en retrait. */
  filter: brightness(.88) saturate(.92);
  transition: filter 140ms ease;
}
.onglets-tableau .nav-link img {
  width: 22px;
  height: 22px;
  flex: 0 0 auto;
}
.onglets-tableau .nav-link:hover { filter: brightness(.96); color: #FFFFFF; }
.onglets-tableau .nav-link:focus-visible {
  outline: 3px solid var(--ec-bleu);
  outline-offset: 2px;
  filter: none;
}
/* L'onglet ouvert : pleine couleur, un peu plus haut, et une ombre portée.
   Bootstrap repeint le fond de l'onglet actif en BLANC par ses propres
   variables (--bs-nav-tabs-link-active-bg) : on les renseigne plutôt que de
   lutter contre elles à coups de « !important ». C'est la même méthode que le
   Lot 1.3 pour les boutons de la v1 — on parle à Bootstrap dans sa langue. */
.onglets-tableau {
  --bs-nav-tabs-link-active-bg: transparent;
  --bs-nav-tabs-link-active-color: #FFFFFF;
  --bs-nav-tabs-link-active-border-color: transparent;
  --bs-nav-tabs-border-width: 0;
  --bs-nav-link-color: #FFFFFF;
  --bs-nav-link-hover-color: #FFFFFF;
}
.onglets-tableau .nav-link.active {
  background: var(--onglet, var(--ec-bleu));
  color: #FFFFFF;
  filter: none;
  font-weight: 700;
  padding-top: 15px;
  box-shadow: 0 -2px 6px rgb(0 0 0 / 12%);
}
/* Le filet qui court sous les onglets, à la couleur de l'onglet ouvert. */
.barre-onglets {
  height: 3px;
  border-radius: 2px;
  background: var(--ec-onglet-actif, var(--ec-bleu));
  margin-bottom: 4px;
}

/* Les six couleurs, dans l'ordre du prototype. */
.onglet-jeux       { --onglet: var(--ec-palette-1-texte); }
.onglet-compte     { --onglet: var(--ec-palette-2-texte); }
.onglet-creer      { --onglet: var(--ec-palette-6-texte); }
.onglet-enseignant { --onglet: var(--ec-palette-3-texte); }
.onglet-admin      { --onglet: var(--ec-palette-5-texte); }
.onglet-aide       { --onglet: var(--ec-palette-4-texte); }
/* L'ocre de « Créer un jeu » ne porte pas de blanc lisible : son intitulé
   passe donc en encre sombre, exactement comme le bouton du même nom. */
.onglets-tableau .onglet-creer { color: var(--ec-palette-6-encre); }
.onglets-tableau .onglet-creer:hover,
.onglets-tableau .onglet-creer.active { color: var(--ec-palette-6-encre); }

/* Sur un téléphone, les intitulés disparaissent et les pictogrammes restent :
   six onglets écrits ne tiennent pas sur 390 px. L'intitulé reste lu par les
   lecteurs d'écran, il n'est pas supprimé mais masqué à l'œil. */
@media (max-width: 575.98px) {
  .onglets-tableau { gap: 4px; }
  .onglets-tableau .nav-link { padding: 11px 14px; gap: 0; }
  /* L'intitulé disparaît VRAIMENT de la page — et non « caché hors écran ».
     Un texte de 96 px replié dans un cadre de 1 px reste un texte qui dépasse
     de son cadre, et le détecteur de débordements a raison de le signaler.
     Ce qui remplace l'intitulé pour les lecteurs d'écran, c'est l'attribut
     aria-label posé sur l'onglet lui-même : il porte le même mot, et il est
     là quelle que soit la largeur de l'écran. */
  .onglets-tableau .nav-link .onglet-intitule { display: none; }
}

/* ---------------------------------------------------------------------------
 * 15.3  LES CARTES DE JEU, EN COLONNES COLORÉES
 * ---------------------------------------------------------------------------
 * LA GRILLE. Six cartes de front sur un grand écran, puis quatre, puis deux,
 * puis une. Les largeurs sont fixées ici et non par les classes de Bootstrap :
 * Bootstrap ne propose pas de sixième de largeur, et surtout la COULEUR de
 * chaque carte dépend de sa place dans la grille — il faut donc que la grille
 * et les couleurs soient décrites au même endroit, sous peine de les voir se
 * désaccorder au premier changement.
 *
 * LES COULEURS, ET POURQUOI ELLES CHANGENT AVEC LA LARGEUR (choix de
 * Guillaume du 20/09/2026) :
 *   - à six colonnes : les six couleurs, une par colonne, chaque rangée
 *     identique à la précédente ;
 *   - à quatre colonnes : les quatre premières seulement (bleu, turquoise,
 *     violet, rose), pour que les colonnes restent d'aplomb ;
 *   - à deux colonnes et à une seule : les six couleurs se suivent au fil de
 *     la liste, sans chercher à s'aligner — c'est le défilement qui fait le
 *     rythme, plus la colonne.
 * ------------------------------------------------------------------------ */
.grille-jeux {
  display: grid;
  grid-template-columns: repeat(6, minmax(0, 1fr));
  gap: 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* Six colonnes : une couleur par colonne. */
.grille-jeux > *:nth-child(6n + 1) { --carte: var(--ec-palette-1-texte); }
.grille-jeux > *:nth-child(6n + 2) { --carte: var(--ec-palette-2-texte); }
.grille-jeux > *:nth-child(6n + 3) { --carte: var(--ec-palette-3-texte); }
.grille-jeux > *:nth-child(6n + 4) { --carte: var(--ec-palette-4-texte); }
.grille-jeux > *:nth-child(6n + 5) { --carte: var(--ec-palette-5-texte); }
.grille-jeux > *:nth-child(6n + 6) { --carte: var(--ec-palette-6-texte); }

@media (max-width: 1399.98px) {
  /* Quatre colonnes, quatre couleurs : chaque colonne garde la sienne. */
  .grille-jeux { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .grille-jeux > *:nth-child(4n + 1) { --carte: var(--ec-palette-1-texte); }
  .grille-jeux > *:nth-child(4n + 2) { --carte: var(--ec-palette-2-texte); }
  .grille-jeux > *:nth-child(4n + 3) { --carte: var(--ec-palette-3-texte); }
  .grille-jeux > *:nth-child(4n + 4) { --carte: var(--ec-palette-4-texte); }
}

@media (max-width: 991.98px) {
  /* Deux colonnes : on revient aux six couleurs, qui se suivent. */
  .grille-jeux { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .grille-jeux > *:nth-child(6n + 1) { --carte: var(--ec-palette-1-texte); }
  .grille-jeux > *:nth-child(6n + 2) { --carte: var(--ec-palette-2-texte); }
  .grille-jeux > *:nth-child(6n + 3) { --carte: var(--ec-palette-3-texte); }
  .grille-jeux > *:nth-child(6n + 4) { --carte: var(--ec-palette-4-texte); }
  .grille-jeux > *:nth-child(6n + 5) { --carte: var(--ec-palette-5-texte); }
  .grille-jeux > *:nth-child(6n + 6) { --carte: var(--ec-palette-6-texte); }
}

@media (max-width: 575.98px) {
  /* Une seule colonne, et toujours les six couleurs qui se suivent. */
  .grille-jeux { grid-template-columns: minmax(0, 1fr); gap: 16px; }
}

/* Le <li> : il porte la couleur de la colonne et les fenêtres modales du
   jeu ; la carte, elle, remplit toute sa hauteur pour que les cartes d'une
   même rangée s'alignent quelle que soit la longueur des descriptions. */
.colonne-jeu { display: flex; min-width: 0; }

/* --- LA CARTE ------------------------------------------------------------ */
.carte-jeu {
  /* La carte se mesure elle-même : c'est sa propre largeur qui décide de la
     disposition des boutons, pas celle de la fenêtre. */
  container-type: inline-size;
  display: flex;
  flex-direction: column;
  width: 100%;
  border: 2px solid var(--carte, var(--ec-bleu));
  border-radius: 16px;
  background: #FFFFFF;
  overflow: hidden;
  box-shadow: 0 1px 4px rgb(0 0 0 / 8%);
}

/* Le bandeau de titre, à la couleur de la colonne. Le petit pictogramme de
   cartes est à gauche, comme sur le prototype ; il est décoratif, le nom du
   jeu est juste à côté, écrit. */
.carte-jeu-titre {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 11px 14px;
  background: var(--carte, var(--ec-bleu));
  color: #FFFFFF;
  font-family: var(--ec-police-interface);
  font-size: 1.02rem;
  font-weight: 700;
  line-height: 1.2;
  margin: 0;
  min-height: 56px;
}
.carte-jeu-titre img { width: 24px; height: 24px; flex: 0 0 auto; }
.carte-jeu-titre span { min-width: 0; overflow-wrap: anywhere; }
/* L'ocre ne porte pas de blanc lisible : l'encre sombre prend le relais. */
.grille-jeux > *:nth-child(6n + 6) .carte-jeu-titre { color: var(--ec-palette-6-encre); }
@media (max-width: 1399.98px) and (min-width: 992px) {
  /* À quatre colonnes, l'ocre ne sort pas : la règle ci-dessus ne doit pas
     s'appliquer aux cartes qui sont alors roses ou bleues. */
  .grille-jeux > *:nth-child(6n + 6) .carte-jeu-titre { color: #FFFFFF; }
}

/* --- L'image du thème, et les deux badges posés dessus -------------------- */
.carte-jeu-visuel { position: relative; }
.carte-jeu-visuel img {
  display: block;
  width: 100%;
  aspect-ratio: 16 / 9;
  object-fit: cover;
}

/* Le verrou (à gauche) et le favori (à droite). PARFAITEMENT CARRÉS, comme
   demandé : 34 px de côté exactement, le pictogramme centré par une grille.
   Le fond translucide sombre les rend lisibles sur n'importe quelle vignette,
   claire ou foncée. */
.carte-jeu-badge {
  /* UN CARRÉ PARFAIT, c'est la demande. Un seul réglage, « --badge », donne
     sa taille au cadre, au formulaire qu'il contient et au bouton : les trois
     ne peuvent donc plus se désaccorder. Sur téléphone et tablette, la règle
     du Lot 10.3 porte toute zone à toucher à 44 px — le carré suit, au lieu
     de laisser le bouton grossir à l'intérieur d'un cadre resté petit. */
  --badge: 34px;
  position: absolute;
  top: 8px;
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  border-radius: 8px;
  background: rgb(0 0 0 / 45%);
  backdrop-filter: blur(2px);
  overflow: hidden;
}
.carte-jeu-badge--verrou { left: 8px; }
.carte-jeu-badge--favori { right: 8px; }
.carte-jeu-badge form,
.carte-jeu-badge .bouton-badge {
  display: grid;
  place-items: center;
  width: var(--badge);
  height: var(--badge);
  min-width: var(--badge);
  min-height: var(--badge);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: #FFFFFF;
  font-size: 1.02rem;
  line-height: 1;
  cursor: pointer;
}
.carte-jeu-badge .bouton-badge:focus-visible {
  outline: 3px solid var(--ec-jaune);
  outline-offset: -3px;
  border-radius: 8px;
}
.carte-jeu-badge > i { color: #FFFFFF; font-size: 1.02rem; }

@media (max-width: 768px) {
  .carte-jeu-badge { --badge: 44px; }
}

/* --- Le corps de la carte ------------------------------------------------- */
.carte-jeu-corps {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  padding: 13px 11px 12px;
  text-align: center;
}
/* La description : légèrement en gras, comme demandé. */
.carte-jeu-description {
  flex: 1 1 auto;
  margin: 0 0 10px;
  font-size: .95rem;
  font-weight: 600;
  line-height: 1.35;
  color: #1d2633;
  overflow-wrap: anywhere;
}
/* Le filet du prototype : fin, gris clair, sur toute la largeur du corps. */
.carte-jeu-filet {
  height: 1px;
  margin: 0 0 10px;
  background: #E2E8EC;
}
/* La ligne des informations : durée, diffusion, auteur. */
.carte-jeu-infos {
  margin: 0 0 12px;
  font-size: .82rem;
  line-height: 1.4;
  color: var(--ec-gris-texte);
  overflow-wrap: anywhere;
}
.carte-jeu-infos i { color: var(--carte, var(--ec-bleu)); }
/* Sur l'ocre, l'encre sombre reprend la main pour les pictogrammes aussi. */
.grille-jeux > *:nth-child(6n + 6) .carte-jeu-infos i { color: var(--ec-palette-6-encre); }

/* --- La rangée de boutons ------------------------------------------------- */
/* LES CINQ BOUTONS, ET LE SEUL VRAI ARBITRAGE DE CETTE CARTE.
   Ils tiennent sur une seule ligne — la disposition du prototype — dès que la
   carte dispose de 288 px, ce qui est le cas à quatre colonnes sur un écran
   ordinaire. En dessous (six colonnes, ou une fenêtre étroite), il fallait
   choisir entre trois maux : rogner le mot « Modifier », rapetisser les
   cibles sous le seuil tactile, ou passer à deux lignes.
   C'est la troisième voie qui est retenue, et rangée proprement : « Modifier »
   prend alors TOUTE la largeur, et les quatre pictogrammes se centrent en
   dessous. Le mot reste écrit, comme demandé, et aucune cible ne descend sous
   38 px.
   La bascule est décidée par la largeur de LA CARTE (« @container ») et non
   par celle de la fenêtre : une carte étroite se range en deux lignes où
   qu'elle soit, y compris dans une colonne étroite d'un grand écran. */
.carte-jeu-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 4px;
  margin: auto 0 0;
}
.carte-jeu-actions .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  /* 36 × 38 px au minimum. Le contrôle d'accessibilité demande 32 px et ne
     s'applique qu'en dessous de 768 px de large — c'est-à-dire là où il n'y a
     plus qu'une seule colonne et où les boutons sont de toute façon larges.
     On resserre le remplissage, jamais la cible. */
  min-width: 36px;
  min-height: 38px;
  padding: 7px 8px;
  border-radius: 9px;
  font-size: .84rem;
  font-weight: 600;
}
.carte-jeu-actions .btn-modifier { padding-inline: 10px; }

@container (max-width: 17rem) {
  .carte-jeu-actions .btn-modifier { flex: 1 0 100%; }
}
/* « Modifier » porte son mot, à la couleur de la colonne ; les quatre autres
   n'ont que leur pictogramme, avec leur intitulé lu par les lecteurs d'écran
   et affiché en infobulle. */
.carte-jeu-actions .btn-modifier {
  background: var(--carte, var(--ec-bleu));
  border-color: var(--carte, var(--ec-bleu));
  color: #FFFFFF;
}
.grille-jeux > *:nth-child(6n + 6) .carte-jeu-actions .btn-modifier { color: var(--ec-palette-6-encre); }
@media (max-width: 1399.98px) and (min-width: 992px) {
  .grille-jeux > *:nth-child(6n + 6) .carte-jeu-actions .btn-modifier { color: #FFFFFF; }
}
.carte-jeu-actions .btn-modifier:hover,
.carte-jeu-actions .btn-modifier:focus-visible { filter: brightness(.9); color: #FFFFFF; }

/* Le badge « Partagé avec moi » garde sa place, au-dessus de la description. */
.carte-jeu-partage { margin: 0 0 8px; font-size: .8rem; }

/* ---------------------------------------------------------------------------
 * 15.4  L'ONGLET « AIDE »
 * ------------------------------------------------------------------------ */
.aide-colonnes {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 22px;
  align-items: start;
}
@media (max-width: 991.98px) {
  .aide-colonnes { grid-template-columns: minmax(0, 1fr); }
}
.aide-texte-libre { margin-bottom: 20px; }
.aide-vide {
  padding: 40px 20px;
  text-align: center;
  font-family: var(--ec-police-interface);
  font-size: 1.6rem;
  font-weight: 700;
  color: var(--ec-bleu);
}

/* ---------------------------------------------------------------------------
 * 15.5  IMP-010 — UN DÉFAUT TROUVÉ EN CHEMIN : LES LIENS DANS UN CARTOUCHE
 * ---------------------------------------------------------------------------
 * Le fond très pâle d'un cartouche (#fbfcfd) suffit à faire tomber le bleu de
 * Bootstrap (#0d6efd) à 4,38 pour 1 — juste sous le minimum de 4,5. Le défaut
 * ne se voyait pas parce qu'aucun cartouche ne portait de lien jusqu'ici ;
 * le premier (celui de l'onglet Aide) l'a révélé.
 *
 * Le bleu de la charte, lui, donne 6,82 sur le même fond. Il prend donc la
 * place — et c'est aussi la couleur des liens partout ailleurs sur le site :
 * un lien dans un cartouche ne détonne plus.
 * ------------------------------------------------------------------------ */
.cartouche a:not(.btn):not(.alert-link) { color: var(--ec-bleu); }
.cartouche a:not(.btn):not(.alert-link):hover { color: var(--ec-bleu-survol); }

/* ---------------------------------------------------------------------------
 * 15.6  IMP-010b — L'ONGLET ADMIN EN CARTOUCHES
 * ---------------------------------------------------------------------------
 * Chaque outil est un cartouche à l'intérieur du cartouche de sa section. Ils
 * se rangent en grille — trois de front sur un grand écran, deux, puis un —
 * et prennent tous la MÊME HAUTEUR : leurs boutons « Ouvrir » se retrouvent
 * ainsi alignés, quelle que soit la longueur des explications.
 * ------------------------------------------------------------------------ */
.grille-admin {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 6px 18px;
  align-items: stretch;
}
@media (max-width: 1199.98px) { .grille-admin { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 767.98px)  { .grille-admin { grid-template-columns: minmax(0, 1fr); } }

.brique-admin {
  display: flex;
  flex-direction: column;
  /* La marge haute du cartouche ordinaire (16 px) est ici celle de la grille :
     sans cette remise à zéro, les cartouches d'une même rangée se
     décaleraient les uns des autres. Le haut reste assez large pour que la
     légende, qui chevauche le liseré, ne soit pas rognée. */
  margin: 14px 0 8px;
}
/* Le texte pousse le bouton vers le bas : tous les boutons s'alignent. */
.brique-admin-texte { flex: 1 1 auto; }

/* ===========================================================================
 * 16. IMP-010b (20/09/2026) — L'ONGLET « SUIVI DE PARTIE »
 * ---------------------------------------------------------------------------
 * Un accordéon des parties récentes ; dans chaque volet, la grille de tous les
 * codes du jeu — gris pour ce qui manque, vert pour ce qui est trouvé.
 *
 * LA COULEUR N'EST JAMAIS LA SEULE INFORMATION (règle du Lot 10.3) : une case
 * trouvée porte une COCHE pleine et l'HEURE à laquelle elle l'a été ; une case
 * en attente porte un rond vide. Une personne qui ne distingue pas le vert du
 * gris lit exactement la même chose.
 * ======================================================================== */

/* --- La barre du haut : les périodes, et le rafraîchissement -------------- */
.suivi-barre {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 10px 18px;
}
.suivi-periodes { display: flex; gap: 6px; }
.suivi-auto     { display: flex; align-items: center; }
.suivi-compte   { color: var(--ec-gris-texte); font-variant-numeric: tabular-nums; }

/* --- L'accordéon des parties --------------------------------------------- */
.suivi-accordeon { --bs-accordion-btn-padding-y: .7rem; }
.suivi-accordeon .accordion-item { margin-bottom: 8px; border-radius: 10px; overflow: hidden; }
.suivi-accordeon .accordion-button { gap: 10px; }

/* La ligne toujours visible d'une partie : heure, repère, avancement. */
.suivi-entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px 18px;
  width: 100%;
  min-width: 0;
}
.suivi-heure { white-space: nowrap; font-variant-numeric: tabular-nums; }
.suivi-heure i { color: var(--ec-bleu); margin-right: .25rem; }
.suivi-nom {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 12px;
  border-radius: 20px;
  background: var(--ec-bleu);
  color: #FFFFFF;
  font-weight: 700;
  font-size: .9rem;
  max-width: 22ch;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* L'avancement : une jauge, puis « 3 / 8 » en chiffres. La jauge seule ne
   dirait rien à qui ne la voit pas. */
.suivi-avancement {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}
.suivi-jauge {
  display: block;
  width: 110px;
  height: 9px;
  border-radius: 6px;
  background: #E2E8EC;
  overflow: hidden;
}
.suivi-jauge-remplie {
  display: block;
  height: 100%;
  border-radius: 6px;
  background: var(--ec-bleu);
  transition: width 300ms ease;
}
.suivi-compteur { font-weight: 700; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* Une partie terminée : le liseré et la jauge passent au vert. */
.suivi-partie--complete { border-color: #2e7d4f; }
.suivi-partie--complete .suivi-jauge-remplie { background: #2e7d4f; }

/* --- La légende ----------------------------------------------------------- */
.suivi-legende { margin: 14px 0 8px; color: var(--ec-gris-texte); }
.suivi-puce {
  display: inline-block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  vertical-align: -1px;
  margin-right: 2px;
}
.suivi-puce--trouve  { background: #2e7d4f; }
.suivi-puce--attente { background: #C7D0D6; }

/* --- La grille des codes -------------------------------------------------- */
.suivi-grille {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr));
  gap: 10px;
  margin: 0 0 14px;
  padding: 0;
  list-style: none;
}
.suivi-case {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 12px;
  border: 1px solid #DCE3E8;
  border-left: 4px solid #C7D0D6;
  border-radius: 10px;
  background: #F7F9FA;
  /* Gris assombri le 20/09/2026 : #6B7780 ne donnait que 4,34 pour 1 sur ce
     fond, sous le seuil de 4,5 du projet. #5C6870 en donne 5,4 — la case
     reste visiblement « en attente », mais le code s'y lit sans effort. */
  color: #5C6870;
  min-width: 0;
}
.suivi-case-etat i { font-size: 1.05rem; line-height: 1.2; }
.suivi-case-textes { display: flex; flex-direction: column; min-width: 0; }
.suivi-case-code {
  font-family: ui-monospace, "SFMono-Regular", "Liberation Mono", Menlo, Consolas, monospace;
  font-weight: 700;
  font-size: .95rem;
  overflow-wrap: anywhere;
}
.suivi-case-intitule {
  font-size: .8rem;
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.suivi-case-heure {
  margin-top: 3px;
  font-size: .78rem;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* Le code trouvé. Le vert #1F5C39 sur le fond #EAF5EE donne 7,4 pour 1 :
   largement au-dessus du minimum, et lisible au vidéoprojecteur — c'est
   souvent là qu'on regarde ce tableau, au fond d'une salle. */
.suivi-case--trouve {
  border-color: #9CCFB3;
  border-left-color: #2e7d4f;
  background: #EAF5EE;
  color: #1F5C39;
}

.suivi-extras { color: var(--ec-gris-texte); margin: 0; }
.suivi-extras i { color: var(--ec-bleu); }

/* Sur un téléphone, l'avancement passe sous l'heure plutôt que de serrer les
   trois informations sur une seule ligne. */
@media (max-width: 575.98px) {
  .suivi-avancement { margin-left: 0; width: 100%; }
  .suivi-jauge { flex: 1 1 auto; width: auto; }
  .suivi-grille { grid-template-columns: minmax(0, 1fr); }
}

/* Réglage « animations réduites » du système : la jauge ne glisse plus. */
@media (prefers-reduced-motion: reduce) {
  .suivi-jauge-remplie { transition: none; }
}

/* ---------------------------------------------------------------------------
 * 16 bis. IMP-010b — UN DÉFAUT ANTÉRIEUR TROUVÉ EN CHEMIN
 * ---------------------------------------------------------------------------
 * Le bouton « Retour » de l'angle de l'éditeur débordait de son cadre de 8 px,
/* ---------------------------------------------------------------------------
 * 16 bis. IMP-010b — UN DÉFAUT ANTÉRIEUR TROUVÉ EN CHEMIN
 * ---------------------------------------------------------------------------
 * Le bouton « Retour » de l'angle haut droit de l'éditeur débordait de son
 * cadre de 8 px, en dessous de 768 px de large.
 *
 * La cause, en clair : pour que chaque zone à toucher fasse au moins 44 px
 * (règle du Lot 10.3), on ajoute au lien une marge intérieure de 14 px puis on
 * la reprend par une marge extérieure NÉGATIVE de 14 px. Le lien occupe alors
 * la même place dans la mise en page, mais sa boîte, elle, dépasse bel et bien
 * de 14 px de chaque côté. Dans un encart posé en ABSOLU, qui se mesure sur
 * son contenu, ce dépassement sort du cadre : c'est le débordement signalé.
 *
 * La correction : dans cet encart précis, on n'utilise plus l'astuce de la
 * marge négative. Le lien devient une boîte souple d'au moins 44 px de haut,
 * et c'est l'encart qui s'élargit autour de lui. Même cible au doigt, aucun
 * dépassement.
 *
 * Le défaut est antérieur à cette livraison — il est présent à l'identique
 * dans une copie non modifiée du dépôt, sur l'onglet « Modifier le jeu ». Il
 * est corrigé ici parce que le détecteur l'a signalé en chemin et que la
 * correction tient en quelques lignes.
 * ------------------------------------------------------------------------ */
.deconnexion {
  display: flex;
  align-items: center;
  width: auto;
}

@media screen and (max-width: 768px) {
  .deconnexion {
    /* L'encart reprend à son compte la respiration que le lien n'a plus. */
    padding: 4px 8px 6px 11px;
  }
  .deconnexion a {
    /* On annule l'astuce « marge intérieure + marge négative » du Lot 10.3
       pour ce seul encart : ici elle fabriquait le débordement. */
    display: flex;
    align-items: center;
    min-height: 44px;
    padding: 0;
    margin: 0;
  }
}

/* ---------------------------------------------------------------------------
 * 16 ter. IMP-010b — DEUX RETOUCHES DE L'ONGLET « SUIVI DE PARTIE »
 * ---------------------------------------------------------------------------
 * Relevées par le contrôle d'accessibilité du 20/09/2026, sur l'onglet neuf.
 *
 * 1. Le bouton de période NON choisie (« Dernières 48 h ») portait le bleu
 *    d'usine de Bootstrap (#0d6efd) sur un fond presque blanc : 4,38 pour 1,
 *    juste sous le seuil de 4,5 que le projet s'impose. On lui rend le bleu du
 *    site (#005E8F), nettement plus sombre — environ 7 pour 1.
 *
 * 2. Le bouton « Enregistrer » du repère de partie est dans un groupe de
 *    saisie compact : 31 px de haut, trop peu pour être visé au doigt. Sur
 *    écran étroit, le champ et son bouton reprennent les 44 px de la règle du
 *    Lot 10.3. Sur ordinateur, où l'on vise à la souris, ils restent compacts.
 * ------------------------------------------------------------------------ */
.suivi-periodes .btn-outline-primary {
  --bs-btn-color:        var(--ec-bleu);
  --bs-btn-border-color: var(--ec-bleu);
  --bs-btn-hover-bg:         var(--ec-bleu);
  --bs-btn-hover-border-color: var(--ec-bleu);
  --bs-btn-active-bg:          var(--ec-bleu);
  --bs-btn-active-border-color: var(--ec-bleu);
}

@media screen and (max-width: 768px) {
  .suivi-nommage .input-group > .form-control,
  .suivi-nommage .input-group > .input-group-text,
  .suivi-nommage .input-group > .btn {
    min-height: 44px;
  }
}

/* ===========================================================================
   IMP-011b — La mention « ces contenus ne sont pas traduits »
   ===========================================================================
   Elle apparaît sous le titre des pages dont le contenu s'écrit depuis
   l'administration (FAQ, Tutoriels, onglet Aide) quand le site est lu dans une
   autre langue que le français. Elle doit se remarquer sans s'imposer : c'est
   une explication, pas un avertissement. Le gris retenu (#5C6870) est celui
   déjà employé pour les textes secondaires — mesuré à 5,4 pour 1 sur blanc,
   au-dessus des 4,5 exigés.
   ------------------------------------------------------------------------ */
.contenu-non-traduit {
  margin: -4px 0 14px;
  color: #5C6870;
  font-style: italic;
}

/* ===========================================================================
   IMP-012 — Le bouton « afficher le mot de passe » (D-236)
   ===========================================================================
   Ce bouton n'est écrit dans aucune page : il est posé par
   assets/js/oeil-mot-de-passe.js, à la fin du groupe de saisie. Sans
   JavaScript, il n'existe pas et le champ reste un champ de mot de passe
   ordinaire — rien n'est cassé (règle D-214).

   Deux exigences se rencontrent ici :
     - la zone tactile de 44 px du Lot 10.3, y compris sur un ordinateur : ce
       bouton est le seul de son groupe, et le rater fait taper à l'aveugle ;
     - le contour de sélection au clavier, qui doit rester visible alors que le
       bouton touche le champ.
   ------------------------------------------------------------------------ */
.bouton-oeil {
  min-width: 44px;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* Le contour de sélection passe AU-DESSUS du champ voisin : sans cela,
   Bootstrap le laisse glisser sous la bordure du champ et on ne voit plus où
   l'on est au clavier. */
.bouton-oeil:focus-visible {
  position: relative;
  z-index: 3;
}

/* L'œil barré, quand le mot de passe est affiché, doit se distinguer au premier
   coup d'œil de l'œil ouvert : la couleur de la charte le signale sans
   dépendre de la seule forme de l'icône. */
.bouton-oeil[aria-pressed="true"] {
  color: var(--ec-bleu, #005E8F);
  border-color: var(--ec-bleu, #005E8F);
}

/* ===========================================================================
   AM-4 (23/09/2026) — « Poser Escape Cards sur votre écran d'accueil »
   ===========================================================================
   Ce mode d'emploi ne s'affiche que là où poser une icône sur l'écran d'accueil
   existe : un écran TACTILE d'au plus 1024 px de large — téléphone ou tablette.

   Pourquoi par la feuille de style, et non en PHP ? Parce que le serveur ne
   sait pas quel écran il a en face : il faudrait renifler le nom du navigateur,
   ce que le projet s'interdit (un contrôle unitaire le refuse) et qui se trompe
   constamment. « pointer: coarse » dit que le principal moyen de désignation
   est le doigt ; combiné à la largeur, il écarte l'ordinateur portable tactile.

   Masqué par défaut, montré ensuite : ainsi, un navigateur trop ancien pour
   comprendre « pointer » ne l'affiche pas — et c'est le bon sens, puisque ces
   navigateurs-là sont sur les ordinateurs.
   ========================================================================= */
.aide-installation-mobile { display: none; }

@media (pointer: coarse) and (max-width: 1024px) {
  .aide-installation-mobile { display: block; }
}

/* ===========================================================================
   AM-5 (23/09/2026) — La brique « Maintenance du site », repérable
   ===========================================================================
   Une brique de l'onglet Admin peut porter une couleur de la charte. Une seule
   en a une : la Maintenance, celle que l'administrateur ouvre le plus souvent.
   Liseré, légende, icône et bouton passent au violet #5823D3 — contraste 8,09
   avec le blanc, bien au-delà du seuil exigé (voir l'en-tête de ce fichier).
   Les autres briques ne changent pas d'un pixel.
   ========================================================================= */
.brique-admin-violet {
  /* 2 px et non 1 : le liseré doit se voir de loin, c'est tout l'objet. */
  border: 2px solid var(--ec-violet);
}
.brique-admin-violet > .cartouche-titre { color: var(--ec-violet); }
.brique-admin-violet .btn-primary {
  background-color: var(--ec-violet);
  border-color: var(--ec-violet-bordure);
}
.brique-admin-violet .btn-primary:hover,
.brique-admin-violet .btn-primary:focus {
  background-color: var(--ec-violet-survol);
  border-color: var(--ec-violet-bordure);
}

/* ===========================================================================
   IMP-016 (26/09/2026) — L'ÉCRAN DE MAINTENANCE SUR LES PAGES RESTÉES OUVERTES
   ===========================================================================
   Pendant une maintenance TOTALE, cinq pages restent ouvertes — l'accueil, la
   connexion, la déconnexion, l'erreur et le choix de la langue — sans quoi un
   administrateur non connecté s'enfermerait dehors. C'est là que ce pavé
   s'affiche. Toutes les autres pages, elles, ne s'affichent pas du tout : elles
   répondent 503 avec la page écrite par afficher_page_maintenance().

   CE QU'IL REMPLACE, ET POURQUOI. Jusqu'ici ces pages portaient DEUX éléments
   qui disaient la même chose : un bandeau rouge « alert-danger » puis un gros
   pavé gris « jumbotron » de Bootstrap 4, resté tel quel depuis la v1. Un seul
   pavé, à la charte, dit la même chose une fois.

   LE DESSIN EST LE MÊME QUE CELUI DE LA PAGE 503 (app/fonctions/maintenance_visuel.php)
   et c'est voulu : c'est le même message, il doit avoir le même visage.

   DEUX AFFICHAGES, PARCE QU'IL Y A DEUX LECTEURS
     - le VISITEUR, sur l'accueil ou la connexion : le pavé ;
     - l'ADMINISTRATEUR, qui continue de circuler partout pendant la fermeture :
       une ligne. Un pavé pleine largeur sur chacune de ses pages le gênerait.
   ========================================================================= */

.pave-maintenance {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 320px);
  gap: 26px;
  align-items: center;
  /* L'ESPACE SOUS LE PAVÉ EST DÉLIBÉRÉ, ET IL VALAIT 6 px. Sur l'accueil, la
     page reprend juste en dessous (boutons Connexion / Inscription) : le pavé
     et le contenu se touchaient et se lisaient comme un seul bloc. Demandé par
     Guillaume le 26/09/2026, à la lecture de la page réelle. */
  margin: 14px 0 34px;
  padding: 30px 34px;
  border: 2px solid #dceaf3;
  border-radius: 20px;
  background: #faf9f6;
}
.pave-maintenance-texte { min-width: 0; }

.pave-maintenance-etat {
  display: flex;
  align-items: center;
  gap: 13px;
  margin-bottom: 18px;
}
.pave-maintenance-etat img { width: 42px; height: 42px; flex: 0 0 auto; }
.pave-maintenance-etat span {
  display: inline-block;
  padding: 8px 18px;
  border-radius: 999px;
  background: #e3eef6;
  color: #005e8f;
  font-weight: 700;
  font-size: 1rem;
}

.pave-maintenance h2 {
  margin: 0 0 14px;
  color: #005e8f;
  font-weight: 700;
  /* clamp() : le titre suit la largeur de l'écran sans jamais déborder. */
  font-size: clamp(1.65rem, 3.6vw, 2.35rem);
  line-height: 1.12;
  letter-spacing: -0.01em;
}
.pave-maintenance h2 .ligne { display: block; }

.pave-maintenance p {
  margin: 0 0 10px;
  max-width: 60ch;
  color: #34586e;
  font-size: 1.0625rem;
  font-weight: 500;
}
.pave-maintenance p:last-child { margin-bottom: 0; }

.pave-maintenance-cartes { min-width: 0; }
.pave-maintenance-cartes svg { width: 100%; height: auto; display: block; }

/* Sous 768 px, le pavé est suivi du contenu habituel de la page : on ne garde
   que ce qui porte le message, le dessin s'efface. */
@media (max-width: 767px) {
  .pave-maintenance { display: block; padding: 22px 20px; margin-bottom: 26px; }
  .pave-maintenance-cartes { display: none; }
  .pave-maintenance-etat img { width: 36px; height: 36px; }
}

/* --- La ligne de l'administrateur ---------------------------------------- */
/* Ambre et non rouge : pour lui, ce n'est pas une alerte, c'est un état du
   site qu'il a lui-même décidé. Contrastes mesurés sur le fond #fdf8ec :
   5,08 pour le titre, 6,33 pour le texte — au-delà du seuil AA de 4,5. */
.bandeau-maintenance {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  /* Même respiration que le pavé, à la mesure de sa hauteur. */
  margin: 14px 0 24px;
  padding: 12px 18px;
  border: 2px solid #f0dcae;
  border-radius: 14px;
  background: #fdf8ec;
  font-size: 0.9375rem;
}
.bandeau-maintenance img { width: 26px; height: 26px; flex: 0 0 auto; }
.bandeau-maintenance-titre { color: #8a6400; font-weight: 700; }
.bandeau-maintenance-texte { color: #6b5a30; }