/* Paquet « connexion » assemblé par outils/assembler.py — ne pas modifier : modifier les sources. */
/* ---- css/base.css ---- */
/* base.css — jetons, typographie, primitives.
   Aucune couleur en dur : tout vient des variables injectées par
   inc/branding.php depuis config/<etablissement>.json. */

/* Police unique : Nunito, auto-hébergée. Pas de Google Fonts en direct,
   le chargement distant transmet l'adresse IP des élèves à un tiers, ce
   que la CNIL a sanctionné. Une seule famille pour tout l'écran : les
   titres se distinguent par la graisse (800) et non par une seconde
   police, ce qui supprime les ruptures visuelles entre le haut et le bas
   d'une page. Nunito a des terminaisons arrondies — lisible pour un
   sixième, jamais enfantine pour un terminale. */
@font-face {
	font-family: 'JCF Sans';
	src: url('../fonts/nunito-400.woff2') format('woff2');
	font-weight: 400;
	font-display: swap;
}
@font-face {
	font-family: 'JCF Sans';
	src: url('../fonts/nunito-600.woff2') format('woff2');
	font-weight: 600;
	font-display: swap;
}
@font-face {
	font-family: 'JCF Sans';
	src: url('../fonts/nunito-800.woff2') format('woff2');
	font-weight: 800;
	font-display: swap;
}

:root {
	/* Repli si branding.php n'a pas encore injecté la charte. */
	--sa-navy: #364763;
	--sa-navy-deep: #222E42;
	--sa-navy-soft: #5B6C88;
	--sa-paper: #F2F4F7;
	--sa-line: #D5DBE4;
	--sa-ink: #1B2331;

	/* Couleurs d'état : fonctionnelles, jamais décoratives. */
	--sa-alerte: #A6321F;
	--sa-succes: #2E6B4F;

	--police-display: 'JCF Sans', 'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;
	--police-texte: 'JCF Sans', 'Nunito', 'Avenir Next', system-ui, -apple-system, sans-serif;

	/* Échelle typographique, ratio 1.25. */
	--t-xs: 0.75rem;
	--t-s: 0.875rem;
	--t-m: 1rem;
	--t-l: 1.25rem;
	--t-xl: 1.75rem;
	--t-2xl: 2.5rem;
	--t-3xl: 3.5rem;

	/* Espacement, base 4px. */
	--e-1: 0.25rem;
	--e-2: 0.5rem;
	--e-3: 0.75rem;
	--e-4: 1rem;
	--e-5: 1.25rem;
	--e-6: 1.5rem;
	--e-7: 1.75rem;
	--e-8: 2rem;
	--e-10: 2.5rem;
	--e-12: 3rem;
	--e-16: 4rem;
	--e-20: 5rem;

	--rayon: 3px;          /* Le blason est anguleux : presque aucun arrondi. */
	--filet: 1px solid var(--sa-line);
	--transition: 160ms ease;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	background: var(--sa-paper);
	color: var(--sa-ink);
	font-family: var(--police-texte);
	font-size: var(--t-m);
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

h1, h2, h3 {
	font-family: var(--police-display);
	font-weight: 800;
	line-height: 1.15;
	letter-spacing: -0.015em;
	margin: 0;
}

a { color: var(--sa-navy); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* Focus toujours visible : une partie des élèves navigue au clavier
   sur les tablettes de l'établissement. */
:focus-visible {
	outline: 3px solid var(--sa-navy);
	outline-offset: 2px;
}

/* Le motif du blason : deux filets qui encadrent le nom.
   Seul ornement de l'interface, repris là où une séparation porte du sens. */
.double-filet {
	border-top: 2px solid currentColor;
	border-bottom: 2px solid currentColor;
	padding: var(--e-2) 0;
}

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

/* ---- css/layout.css ---- */
/* layout.css — structure de l'application : barre, écran, cartes, série.
   Les couleurs viennent exclusivement des variables de base.css,
   surchargées par établissement via inc/branding.php. */

.jcf-app { min-height: 100vh; min-height: 100dvh; }

/* --- Barre --- */

.barre { background: var(--sa-navy); color: #fff; }
.barre__fil {
	max-width: 1080px; margin: 0 auto;
	display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
	padding: var(--e-3) var(--e-4);
}
/* Le logo du produit, identique partout : vitrine, écran de connexion,
   barre de l'application, pied de page. Une seule version. */
.barre__logo { display: block; width: 34px; height: 34px; flex: none; }
.barre__logo svg { width: 100%; height: 100%; display: block; }

.barre__nom {
	font-family: var(--police-display); letter-spacing: .14em;
	font-size: var(--t-xs); text-transform: uppercase;
	color: #fff; text-decoration: none; opacity: .85;
}
.barre__moi { margin-left: auto; display: flex; align-items: center; gap: var(--e-3); font-size: var(--t-s); }
/* --- Commandes de la barre : toujours lisibles, quel que soit le rôle ---
   L'ancien lien de déconnexion était blanc sur toutes les barres, donc
   invisible sur celles des espaces adultes, qui sont claires. */
.barre__action {
	display: inline-flex; align-items: center; gap: .4rem;
	padding: .4rem .85rem; border-radius: 999px;
	border: 1px solid currentColor; font-size: var(--t-xs); font-weight: 700;
	text-decoration: none; color: inherit; opacity: .85; white-space: nowrap;
}
.barre__action:hover, .barre__action:focus-visible { opacity: 1; }
.barre__action svg { width: 1.05em; height: 1.05em; flex: none; }
.barre__action--sortie {
	border-color: transparent; background: var(--sa-navy); color: #fff;
}
.barre__action--sortie:hover, .barre__action--sortie:focus-visible { background: var(--encre); }

/* Retour, matière en cours, mon espace : boutons de navigation de la barre, sur tous les appareils. */
button.barre__action { background: transparent; font: inherit; font-size: var(--t-xs); font-weight: 700; cursor: pointer; }
.barre__action[hidden] { display: none; }
.barre__retour { border-width: 2px; opacity: 1; }
.barre__matiere { border-color: var(--matiere, currentColor); opacity: 1; }
.barre__embleme { display: inline-flex; width: 1.6em; height: 1.6em; }
.barre__embleme svg { width: 100%; height: 100%; }
.barre__espace { position: relative; opacity: 1; }
.pastille {
	display: inline-grid; place-items: center; min-width: 1.35rem; height: 1.35rem; padding: 0 .3rem;
	border-radius: 999px; background: #d62828; color: #fff; font-size: .72rem; font-weight: 800; line-height: 1;
	box-shadow: 0 0 0 2px var(--sa-navy, #1b2331);
}
.pastille[hidden] { display: none; }
.barre__espace .pastille { position: absolute; top: -.45rem; right: -.45rem; }
.barre { position: sticky; top: 0; z-index: 50; }

@media (max-width: 640px) {
	/* Sur téléphone : l'icône et un libellé court dessous, de grandes zones de toucher. */
	.barre__action { flex-direction: column; gap: .1rem; padding: .3rem .45rem; min-width: 44px; min-height: 44px; justify-content: center; border-radius: 12px; }
	.barre__action span:not(.pastille):not(.barre__embleme) { position: static; font-size: .62rem; line-height: 1.1; }
	.barre__matiere span:not(.barre__embleme) { display: none; }
	.barre__moi { gap: .3rem; }
	.barre__moi .jeton, .barre__devise { display: none; }
	.barre__marque { font-size: .7rem; }
}
.jeton {
	width: 30px; height: 30px; display: grid; place-items: center;
	background: rgba(255,255,255,.16); border: 1px solid rgba(255,255,255,.28);
	font-family: var(--police-display); font-size: var(--t-xs);
}

/* --- Écran --- */

.ecran { max-width: 1080px; margin: 0 auto; padding: var(--e-6) var(--e-4) var(--e-16); }
.retour {
	display: inline-block; margin-bottom: var(--e-4);
	font-size: var(--t-s); color: var(--sa-navy-soft); text-decoration: none;
}
.retour:hover { color: var(--sa-navy); text-decoration: underline; }
.chargement, .vide { color: var(--sa-navy-soft); }
.erreur { border-left: 4px solid var(--sa-alerte); background: #fff; color: var(--sa-alerte);
	padding: var(--e-3) var(--e-4); }

/* --- Accueil --- */

.accueil__tete h1 {
	font-size: var(--t-2xl); color: var(--sa-navy);
	border-top: 3px solid var(--sa-navy); border-bottom: 3px solid var(--sa-navy);
	padding: var(--e-2) 0; display: inline-block;
}
.mesures { display: flex; gap: var(--e-8); margin: var(--e-4) 0 var(--e-8); }
.mesure__val { font-family: var(--police-display); font-size: var(--t-xl); color: var(--sa-navy); display: block; }
.mesure__lib { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--sa-navy-soft); }

.section > h2 {
	font-size: var(--t-l); color: var(--sa-navy);
	border-bottom: 2px solid var(--sa-navy); padding-bottom: var(--e-2); margin-bottom: var(--e-4);
}
.grille { display: grid; gap: var(--e-4); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); }

.carte {
	background: #fff; border: var(--filet); border-top: 4px solid var(--sa-navy);
	padding: var(--e-4); text-decoration: none; color: inherit;
	display: flex; flex-direction: column; gap: var(--e-3);
}
.carte:hover { outline: 2px solid var(--sa-navy); outline-offset: -1px; }
.carte__tete { display: flex; justify-content: space-between; align-items: baseline; }
.carte__nom { font-family: var(--police-display); font-weight: 800; font-size: var(--t-m); color: var(--sa-navy); }
.carte__taux { font-family: var(--police-display); color: var(--sa-navy-soft); }
.jauge { height: 5px; background: var(--sa-line); display: block; }
.jauge span { display: block; height: 100%; background: var(--sa-navy); }
.carte__outils { font-size: var(--t-xs); color: var(--sa-navy-soft); }

/* --- Matière --- */

.outils-liste { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); margin-top: var(--e-6); }
.outil-carte {
	background: #fff; border: var(--filet); padding: var(--e-4);
	font-family: var(--police-display); text-transform: uppercase; letter-spacing: .04em;
	color: var(--sa-navy); text-decoration: none; text-align: center;
}
.outil-carte:hover { background: var(--sa-navy); color: #fff; }
.outil-carte--bientot { color: var(--sa-navy-soft); background: var(--sa-paper); }
.outil-carte--bientot small { display: block; font-family: var(--police-texte); text-transform: none; letter-spacing: 0; }

/* --- Série d'exercices --- */

.serie { background: #fff; border: var(--filet); padding: var(--e-6); max-width: 46rem; }
.serie__compteur { font-size: var(--t-xs); letter-spacing: .12em; text-transform: uppercase; color: var(--sa-navy-soft); margin: 0 0 var(--e-3); }
.serie__enonce { font-size: var(--t-l); color: var(--sa-ink); text-transform: none; font-family: var(--police-texte); font-weight: 600; line-height: 1.4; }
.serie__choix { list-style: none; margin: var(--e-4) 0 0; padding: 0; display: grid; gap: var(--e-2); }
.choix {
	width: 100%; text-align: left; font: inherit; font-size: max(16px, var(--t-m));
	background: var(--sa-paper); border: var(--filet); padding: var(--e-3) var(--e-4); cursor: pointer;
}
.choix:hover:not(:disabled) { border-color: var(--sa-navy); }
.choix--juste { background: #E8F0EA; border-color: var(--sa-succes); color: var(--sa-succes); font-weight: 600; }
.choix--faux { background: #FAF0EE; border-color: var(--sa-alerte); color: var(--sa-alerte); }

.serie__actions { display: flex; gap: var(--e-3); margin-top: var(--e-4); flex-wrap: wrap; }
.btn {
	font-family: var(--police-display); font-size: var(--t-m); letter-spacing: .05em; text-transform: uppercase;
	background: var(--sa-navy); color: #fff; border: 2px solid var(--sa-navy);
	padding: var(--e-3) var(--e-6); cursor: pointer;
}
.btn:hover:not(:disabled) { background: var(--sa-navy-deep); }
.btn--sobre { background: #fff; color: var(--sa-navy); }
.btn--sobre:hover:not(:disabled) { background: var(--sa-paper); }

.verdict { font-family: var(--police-display); text-transform: uppercase; font-size: var(--t-l); margin: var(--e-4) 0 var(--e-2); }
.verdict--juste { color: var(--sa-succes); }
.verdict--faux { color: var(--sa-alerte); }
.explication { color: var(--sa-ink); }
.solution, .carte__verso {
	background: var(--sa-paper); border-left: 4px solid var(--sa-navy);
	padding: var(--e-3) var(--e-4); margin-top: var(--e-3); white-space: pre-line;
}
.carte__question { font-weight: 600; margin: var(--e-4) 0 0; }
.bilan__score { font-family: var(--police-display); font-size: var(--t-2xl); color: var(--sa-navy); }
.btn--suite { margin-top: var(--e-4); }

@media (max-width: 640px) {
	.mesures { gap: var(--e-4); }
	.serie { padding: var(--e-4); }
}

/* --- Salle de jeux --- */
.jeux__regle { font-size: var(--t-s); color: var(--sa-navy-soft); }
.carte--jeu:hover { border-top-color: var(--sa-succes); }
.carte--verrou { opacity: .55; background: var(--sa-paper); }
.jeu { background: #fff; border: var(--filet); padding: var(--e-4); max-width: 480px; }
.jeu__tete { display: flex; align-items: center; gap: var(--e-3); border-bottom: var(--filet); padding-bottom: var(--e-3); margin-bottom: var(--e-3); }
.jeu__nom { font-family: var(--police-display); text-transform: uppercase; color: var(--sa-navy); }
.jeu__temps { margin-left: auto; font-family: var(--police-display); font-size: var(--t-l); color: var(--sa-navy); }
.jeu__stop { font-size: var(--t-xs); background: none; border: var(--filet); padding: var(--e-1) var(--e-2); cursor: pointer; color: var(--sa-alerte); }
.jeu__aire { display: grid; place-items: center; min-height: 200px; }
.jeu__canvas { max-width: 100%; height: auto; background: var(--sa-navy-deep); }
.jeu__regles p { font-size: var(--t-s); }
.jeu__fin { text-align: center; padding: var(--e-8) 0; }
.jeu__fin-titre { font-family: var(--police-display); text-transform: uppercase; color: var(--sa-navy); font-size: var(--t-l); }
.jeu__fin-score { font-family: var(--police-display); font-size: var(--t-2xl); color: var(--sa-navy); margin: var(--e-2) 0 0; }
.pave { margin-top: var(--e-3); user-select: none; -webkit-user-select: none; }
.pave__ligne { display: flex; justify-content: center; gap: var(--e-2); margin-top: var(--e-2); }
.pave__btn { width: 56px; height: 48px; font-size: var(--t-l); background: var(--sa-paper); border: var(--filet); cursor: pointer; touch-action: none; }
.pave__btn:active { background: var(--sa-navy); color: #fff; }
.pave__vide { width: 56px; }
@media (hover:hover) and (pointer:fine) { .pave { display: none; } }

/* --- Cours (mode lecture) et bilan --- */
.cours { background: #fff; border: var(--filet); padding: var(--e-6); max-width: 52rem; }
.cours h1 { font-size: var(--t-xl); color: var(--sa-navy); margin-bottom: var(--e-4); }
.cours__corps { line-height: 1.65; }
.cours__corps img { max-width: 100%; height: auto; }
.cours__corps h2, .cours__corps h3 { color: var(--sa-navy); margin-top: var(--e-6); }
.outil-carte--cours { text-transform: none; letter-spacing: 0; font-family: var(--police-texte); font-weight: 600; text-align: left; }
.bilan-table { width: 100%; max-width: 42rem; background: #fff; border: var(--filet); border-collapse: collapse; margin-top: var(--e-4); }
.bilan-table th, .bilan-table td { border: 1px solid var(--sa-line); padding: var(--e-2) var(--e-3); text-align: left; font-size: var(--t-s); }
.bilan-table thead th { background: var(--sa-navy); color: #fff; font-family: var(--police-display); text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .08em; }
.jauge--table { display: inline-block; width: 90px; vertical-align: middle; margin-right: var(--e-2); }

/* --- Cours (mode lecture) --- */
.chapitres { display: grid; gap: var(--e-2); max-width: 46rem; }
.chapitre { display: flex; gap: var(--e-3); align-items: baseline; background: #fff; border: var(--filet); padding: var(--e-3) var(--e-4); text-decoration: none; color: var(--sa-ink); }
.chapitre:hover { border-color: var(--sa-navy); }
.chapitre__no { font-family: var(--police-display); color: var(--sa-navy-soft); min-width: 2ch; }
.chapitre__titre { font-weight: 600; }
.cours { background: #fff; border: var(--filet); padding: var(--e-6); max-width: 52rem; line-height: 1.65; }
.cours__titre { color: var(--sa-navy); font-size: var(--t-xl); }
.cours__sous-titre { color: var(--sa-navy-soft); margin-top: 0; }
.cours__section h3 { color: var(--sa-navy); border-bottom: 1px solid var(--sa-line); padding-bottom: var(--e-1); margin-top: var(--e-6); }
.cours__contenu img { max-width: 100%; height: auto; }
.cours__contenu .definition-box, .cours__contenu .example-box { border: var(--filet); border-left: 4px solid var(--sa-navy); padding: var(--e-3) var(--e-4); margin: var(--e-3) 0; background: var(--sa-paper); }
.cours__contenu .def-title { font-weight: 700; color: var(--sa-navy); }

/* --- Bilan --- */
.tableau-bilan { width: 100%; max-width: 46rem; background: #fff; border-collapse: collapse; margin-top: var(--e-4); }
.tableau-bilan th, .tableau-bilan td { border: 1px solid var(--sa-line); padding: var(--e-2) var(--e-3); text-align: left; }
.tableau-bilan thead th { background: var(--sa-navy); color: #fff; font-family: var(--police-display); font-weight: 600; text-transform: uppercase; font-size: var(--t-xs); letter-spacing: .08em; }
.ligne--courante { background: var(--sa-paper); font-weight: 600; }

/* --- Avatars --- */
.avatars { display: grid; gap: var(--e-3); grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); }
.avatar { background: #fff; border: var(--filet); padding: var(--e-3); cursor: pointer; font: inherit; text-align: center; display: flex; flex-direction: column; gap: var(--e-2); align-items: center; }
.avatar:hover { border-color: var(--sa-navy); }
.avatar--choisi { outline: 3px solid var(--sa-navy); outline-offset: -3px; }
.avatar__image { width: 96px; height: 96px; display: grid; place-items: center; overflow: hidden; }
.avatar__image img { width: 100%; height: 100%; object-fit: cover; }
.avatar__initiales { font-family: var(--police-display); font-size: var(--t-xl); color: var(--sa-navy); }
.avatar__nom { font-family: var(--police-display); text-transform: uppercase; color: var(--sa-navy); }
.avatar__pays { font-size: var(--t-xs); color: var(--sa-navy-soft); display: flex; gap: .35rem; align-items: center; }
.pastille-pt { width: 8px; height: 8px; border-radius: 50%; display: inline-block; }
.avatar__trait { font-size: var(--t-xs); color: var(--sa-navy-soft); line-height: 1.35; }

/* --- Mascotte de matière (SVG d'origine) --- */
.mascotte { display: flex; align-items: center; gap: var(--e-4); background: #fff; border: var(--filet); border-left-width: 4px; padding: var(--e-3) var(--e-4); margin-top: var(--e-4); max-width: 46rem; }
.mascotte__svg { width: 72px; height: 82px; flex: none; }
.mascotte__mot { margin: 0; font-size: var(--t-s); }

/* --- Expression d'avatar au verdict --- */
.avatar-expression { width: 84px; height: 84px; object-fit: cover; float: right; margin: 0 0 var(--e-2) var(--e-3); animation: apparaitre .2s ease-out; }
@keyframes apparaitre { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .avatar-expression { animation: none; } }

/* --- Tableau enseignant --- */
.tableau-bilan--large { max-width: 100%; }
.tableau-bilan--large thead th:hover { background: var(--sa-navy-deep); }
.ligne--inactif td { color: var(--sa-alerte); }

/* --- Fiche de suivi individuel --- */
.ligne--cliquable { cursor: pointer; }
.ligne--cliquable:hover td { background: var(--sa-paper); }
.temps-liste { max-width: 46rem; display: grid; gap: var(--e-2); }
.temps-ligne { display: grid; grid-template-columns: 9rem 1fr 6rem; gap: var(--e-3); align-items: center; background: #fff; border: var(--filet); padding: var(--e-2) var(--e-3); }
.temps-ligne--mienne { border-left: 4px solid var(--sa-navy); font-weight: 600; }
.temps-ligne__matiere { text-transform: capitalize; font-size: var(--t-s); }
.temps-ligne__val { text-align: right; font-family: var(--police-display); color: var(--sa-navy); }
.tri { font-family: var(--police-display); }
.tri small { display: block; font-family: var(--police-texte); font-size: var(--t-xs); color: var(--sa-navy-soft); }
.tri--bon { background: #E8F0EA; color: var(--sa-succes); }
.tri--moyen { background: #F5EFE1; color: var(--sa-attente, #8C6D2F); }
.tri--faible { background: #FAF0EE; color: var(--sa-alerte); }
.tri-vide { color: var(--sa-line); text-align: center; }

/* --- Journal d'activités (fiche élève) --- */
.activites { max-width: 46rem; display: grid; gap: 2px; }
.activite { display: grid; grid-template-columns: 7rem 1fr 5.5rem; gap: var(--e-3); align-items: center; background: #fff; border: 1px solid var(--sa-line); padding: var(--e-2) var(--e-3); font-size: var(--t-s); }
.activite__jour { color: var(--sa-navy-soft); font-variant-numeric: tabular-nums; }
.activite__quoi small { color: var(--sa-navy-soft); margin-left: .4rem; }
.activite__score { text-align: center; font-family: var(--police-display); padding: .15rem .3rem; }

/* --- Évaluations --- */
.eval { display: flex; align-items: center; gap: var(--e-4); background: #fff; border: var(--filet); border-left: 4px solid var(--sa-navy-soft); padding: var(--e-3) var(--e-4); margin-bottom: var(--e-2); text-decoration: none; color: inherit; max-width: 46rem; flex-wrap: wrap; }
.eval--ouverte { border-left-color: var(--sa-alerte); }
.eval--fermee { border-left-color: var(--sa-attente, #8C6D2F); }
.eval--publiee { border-left-color: var(--sa-succes); }
.eval__etat { margin-left: auto; font-family: var(--police-display); font-size: var(--t-xs); letter-spacing: .06em; text-transform: uppercase; color: var(--sa-navy-soft); }
.eval__note { margin-left: auto; font-family: var(--police-display); font-size: var(--t-l); color: var(--sa-navy); }
.eval-q { border-top: 1px solid var(--sa-line); padding-top: var(--e-4); margin-top: var(--e-4); }
.choix--retenu { border-color: var(--sa-navy); background: var(--sa-navy); color: #fff; }
.creer-eval { display: flex; gap: var(--e-2); flex-wrap: wrap; }
.creer-eval select, .creer-eval input { font: inherit; font-size: max(16px, 1rem); padding: var(--e-2) var(--e-3); border: var(--filet); }
.creer-eval input[type=number] { width: 6rem; }

/* --- Questions rédigées et correction --- */
.redige { width: 100%; font: inherit; font-size: max(16px, 1rem); border: var(--filet); padding: var(--e-3); resize: vertical; }
.creer-eval label { display: flex; flex-direction: column; font-size: var(--t-xs); color: var(--sa-navy-soft); }
.corr { display: inline-flex; gap: var(--e-2); align-items: center; margin-top: var(--e-3); font-weight: 600; }
.corr__pts { width: 5rem; font: inherit; font-size: max(16px, 1rem); padding: var(--e-1) var(--e-2); border: var(--filet); }
details summary { cursor: pointer; color: var(--sa-navy); margin-top: var(--e-3); }

/* --- Console de direction --- */
.onglets { display: flex; gap: var(--e-1); flex-wrap: wrap; border-bottom: 2px solid var(--sa-line); margin: var(--e-4) 0; }
.onglet { font-family: var(--police-display); font-size: var(--t-s); letter-spacing: .06em; text-transform: uppercase; padding: var(--e-2) var(--e-3); color: var(--sa-navy-soft); text-decoration: none; border-bottom: 3px solid transparent; }
.onglet--actif, .onglet:hover { color: var(--sa-navy); border-bottom-color: var(--sa-navy); }
.param { display: block; margin: var(--e-2) 0; }
.enveloppe { overflow-x: auto; }
.case-act { width: 100%; min-height: 2.4rem; border: 0; cursor: pointer; font-family: var(--police-display); font-size: var(--t-m); }
.case-act--on { background: #E8F0EA; color: var(--sa-succes); }
.case-act--off { background: #fff; color: var(--sa-navy-soft); }
.case-act--ko { background: #FAF0EE; color: var(--sa-alerte); text-align: center; font-family: var(--police-display); }

/* --- Plan de synchronisation --- */
.plan { display: grid; gap: var(--e-3); margin-top: var(--e-3); }
.plan__bloc { background: #fff; border: var(--filet); border-left: 4px solid var(--sa-navy-soft); padding: var(--e-3) var(--e-4); }
.plan__bloc ul { margin: var(--e-2) 0 0; padding-left: 1.2rem; font-size: var(--t-s); }
.plan--plus { border-left-color: var(--sa-succes); }
.plan--moins { border-left-color: var(--sa-alerte); }
.plan--erreur { border-left-color: var(--sa-alerte); background: #FAF0EE; }

/* Suivi personnalisé (espaces enseignant et élève) */
.suivi__actions { display: flex; flex-wrap: wrap; gap: .5rem; margin: .8rem 0; }
.suivi__form { border: 1px solid var(--trait, #e2e6ee); border-radius: .6rem; padding: .8rem 1rem; background: var(--fond-doux, #f7f8fb); }
.suivi__form textarea, .suivi__form input[type="text"] { width: 100%; max-width: 42rem; font: inherit; }
.suivi__item, .suivi__bloc { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; padding: .4rem 0; border-bottom: 1px dashed var(--trait, #e2e6ee); }
.suivi__bloc p { flex-basis: 100%; margin: .2rem 0; }
.suivi__item input[type="number"], .suivi__bloc input[type="number"] { width: 4.5rem; }
.suivi__garder { font-size: .85rem; }
.suivi__eleve { display: inline-block; margin: .1rem .5rem .1rem 0; }
.suivi__liste li { margin: .3rem 0; }
.suivi__table input[type="number"] { width: 4rem; }
.suivi__th-theme { font-size: .8rem; max-width: 9rem; }
.suivi__taux { display: inline-block; padding: .1rem .45rem; border-radius: 1rem; font-size: .85rem; font-weight: 600; }
.suivi__taux--faible { background: #fde2e1; color: #9b1c1c; }
.suivi__taux--moyen { background: #fff1d6; color: #8a5a00; }
.suivi__taux--fort { background: #dff5e3; color: #1d6b32; }
.suivi__etat { display: inline-block; padding: .05rem .5rem; border-radius: 1rem; font-size: .8rem; background: #eef1f6; }
.suivi__etat--rendu { background: #e2ecff; }
.suivi__etat--vu { background: #dff5e3; }
.suivi__etat--retard { background: #fde2e1; color: #9b1c1c; }
.suivi__doc { display: inline-block; margin: .2rem .6rem .2rem 0; }
.suivi__message { padding: .6rem .8rem; border-left: 3px solid var(--accent, #2f6fde); background: var(--fond-doux, #f4f7fb); }
.suivi__message--prof { border-left-color: #1d6b32; }
.suivi__enonce, .suivi__reponse, .suivi__solution { padding: .5rem .7rem; border-radius: .4rem; background: var(--fond-doux, #f7f8fb); margin: .4rem 0; white-space: pre-wrap; }
.suivi__solution { background: #eef8f0; }
.suivi__saisie { width: 100%; font: inherit; }
.btn--petit { padding: .2rem .6rem; font-size: .85rem; }
.btn--actif { outline: 2px solid var(--accent, #2f6fde); }
@media (prefers-color-scheme: dark) {
	.suivi__taux--faible { background: #4a1f1f; color: #ffb4b0; }
	.suivi__taux--moyen { background: #4a3a14; color: #ffd98a; }
	.suivi__taux--fort { background: #1d3d26; color: #a6e3b4; }
	.suivi__solution { background: #1d3226; }
}

/* Anneau de progression vers la prochaine tranche de jeu, autour de l'avatar */
.energie { display: inline-flex; align-items: center; gap: .45rem; color: inherit; text-decoration: none; }
.energie__anneau { display: inline-grid; place-items: center; padding: 4px; border-radius: 50%;
	background: conic-gradient(#f59e0b var(--energie, 0deg), #dfe3ea 0); }
.energie--prete .energie__anneau { background: conic-gradient(#10b981 var(--energie, 0deg), #dfe3ea 0); }
.energie__anneau .jeton { box-shadow: 0 0 0 2px #fff; }
.energie__texte { font-size: var(--t-xs, .78rem); white-space: nowrap; opacity: .95; }
.energie__court { display: none; font-size: var(--t-xs, .78rem); white-space: nowrap; }
@media (max-width: 640px) { .energie__texte { display: none; } .energie__court { display: inline; } }

/* Écrans tactiles (tablettes comprises) : zones de toucher d'au moins 44 px dans la barre. */
@media (pointer: coarse) {
	.barre__action { min-height: 44px; min-width: 44px; justify-content: center; }
}
@media (max-width: 640px) {
	/* Sur téléphone, « Se déconnecter » garde son icône seule pour que la barre tienne sur une ligne. */
	.barre__action--sortie span { display: none; }
	.barre__moi { flex-wrap: nowrap; }
}

/* Jeux historiques : variables de couleur de l'ancienne version, redéfinies pour l'aire de jeu.
   Sans elles, les cartes du Memory, les cases de Séquence ou les trous de la Taupe étaient invisibles. */
.jeu, #pgContent { --teal: #0f9d8a; --teal2: #14b8a6; --bd: #cfd6e0; --muted: #6b7280; --surf: #ffffff; --surf2: #f1f4f8; }
@media (prefers-color-scheme: dark) {
	.jeu, #pgContent { --bd: #3b4557; --muted: #a3acb9; --surf: #1f2633; --surf2: #2a3242; }
}

/* Correction d'un QCM ou du Tour des savoirs : la bonne réponse doit sauter aux yeux après une erreur (fond vert
   franc, étiquette « ✓ Bonne réponse »), la réponse choisie à tort est encadrée de rouge (« ✗ Ta réponse »).
   Sélecteurs renforcés : ils l'emportent sur la couleur de sélection de l'espace élève (.choix--retenu). */
.serie__choix .choix.choix--juste, .jcf-role-eleve .serie__choix .choix.choix--juste {
	position: relative; background: #1e7d45; border: 2px solid #135c32; color: #fff; font-weight: 700; opacity: 1;
	box-shadow: 0 0 0 4px rgba(30, 125, 69, .22); padding-right: 10.5rem; animation: choix-juste .7s ease-out 1;
}
.serie__choix .choix.choix--juste::after {
	content: "✓ Bonne réponse"; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
	font-size: .8rem; font-weight: 800; letter-spacing: .01em; white-space: nowrap; background: #fff; color: #1e7d45; border-radius: 999px; padding: .2rem .65rem;
}
.serie__choix .choix.choix--faux, .jcf-role-eleve .serie__choix .choix.choix--faux {
	position: relative; background: #fdecea; border: 2px solid #c62828; color: #8e1c1c; opacity: 1; padding-right: 9rem;
}
.serie__choix .choix.choix--faux::after {
	content: "✗ Ta réponse"; position: absolute; right: .8rem; top: 50%; transform: translateY(-50%);
	font-size: .8rem; font-weight: 800; white-space: nowrap; background: #c62828; color: #fff; border-radius: 999px; padding: .2rem .65rem;
}
@keyframes choix-juste { 0% { transform: scale(1); } 35% { transform: scale(1.025); } 100% { transform: scale(1); } }
@media (max-width: 560px) {
	.serie__choix .choix.choix--juste, .jcf-role-eleve .serie__choix .choix.choix--juste,
	.serie__choix .choix.choix--faux, .jcf-role-eleve .serie__choix .choix.choix--faux { padding-right: var(--e-4); }
	.serie__choix .choix.choix--juste::after, .serie__choix .choix.choix--faux::after { position: static; transform: none; display: table; margin-top: .4rem; }
}
@media (prefers-reduced-motion: reduce) { .serie__choix .choix.choix--juste { animation: none; } }

/* ==== Socle des jeux : boutons, pause, commandes tactiles ==== */
.jeu__btn { min-height: 40px; padding: .3rem .7rem; border-radius: 999px; border: 1px solid #cbd5e1; background: #fff; font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer; }
.jeu__aire { position: relative; }
.jeu__voile { position: absolute; inset: 0; z-index: 30; display: grid; place-content: center; justify-items: center; gap: .4rem; background: rgba(15, 23, 42, .78); color: #fff; border-radius: 12px; text-align: center; }
.jeu__preavis { position: sticky; top: 0; z-index: 20; margin: .3rem 0; padding: .35rem .8rem; border-radius: 999px; background: #fef3c7; color: #92400e; font-weight: 700; font-size: .85rem; text-align: center; }
.jeu__commandes { display: flex; flex-wrap: wrap; justify-content: center; gap: .4rem; margin: .5rem 0; }
.jeu__commandes button { min-width: 64px; min-height: 48px; padding: .3rem .8rem; border-radius: 12px; border: 1px solid #cbd5e1; background: #fff; font: inherit; font-weight: 700; touch-action: none; user-select: none; cursor: pointer; }
.jeu__commandes button.actif { background: #1d4ed8; color: #fff; border-color: #1d4ed8; }
.jeu__commandes button:disabled { opacity: .5; cursor: not-allowed; }
.jeu__commandes label { display: inline-flex; align-items: center; gap: .4rem; font-weight: 700; }
.jeu__commandes select, .dem__haut select, .p4__haut select, .ech__haut select { font: inherit; padding: .3rem .5rem; border-radius: 8px; }
.jeu__aire canvas { max-width: 100%; height: auto; touch-action: none; display: block; margin: 0 auto; border-radius: 10px; }

/* ==== Solitaire ==== */
.sol { user-select: none; touch-action: none; }
.sol__haut { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-bottom: .5rem; }
.sol__info { margin-left: auto; font-weight: 700; font-size: .85rem; }
.sol__ligne { display: flex; gap: 8px; margin-bottom: 12px; }
.sol__pile { position: relative; border-radius: 8px; border: 2px dashed rgba(255, 255, 255, .45); background: rgba(0, 0, 0, .08); display: grid; place-items: center; }
.sol__tableau .sol__pile { align-items: start; }
.sol__col { border-style: dotted; }
.sol__vide { color: rgba(255, 255, 255, .8); font-size: 1.4rem; }
.sol { background: #166534; padding: .6rem; border-radius: 12px; }
.sol__c { position: absolute; left: 0; top: 0; }
.sol__ligne:first-of-type .sol__c { position: static; }
.sol__carte { position: relative; border-radius: 7px; background: #fff; border: 1px solid #94a3b8; box-shadow: 0 1px 3px rgba(0, 0, 0, .35); color: #111827; cursor: grab; }
.sol__rouge { color: #dc2626; }
.sol__dos { background: repeating-linear-gradient(45deg, #1d4ed8 0 6px, #1e40af 6px 12px); border: 2px solid #fff; }
.sol__coin { position: absolute; top: 2px; left: 4px; font-weight: 800; font-size: .85rem; line-height: 1; }
.sol__centre { position: absolute; inset: 0; display: grid; place-items: center; font-size: 1.6rem; }
.sol__msg { color: #fff; font-weight: 800; text-align: center; min-height: 1.4em; }

/* ==== Démineur ==== */
.dem__haut { display: flex; flex-wrap: wrap; align-items: center; gap: .5rem; margin-bottom: .5rem; }
.dem__info { margin-left: auto; font-weight: 800; }
.dem__actif { background: #fee2e2 !important; border-color: #f87171 !important; }
.dem__defile { overflow-x: auto; padding-bottom: .3rem; }
.dem__grille { display: grid; gap: 1px; width: max-content; margin: 0 auto; background: #94a3b8; border: 2px solid #64748b; user-select: none; }
.dem__case { border: 0; padding: 0; background: linear-gradient(#e2e8f0, #cbd5e1); font-weight: 800; cursor: pointer; line-height: 1; }
.dem__vue { background: #f8fafc; cursor: default; }
.dem__boum { background: #fecaca; }
.dem__msg { text-align: center; font-weight: 800; min-height: 1.4em; }

/* ==== Puissance 4 ==== */
.p4__haut { display: flex; flex-wrap: wrap; align-items: center; gap: .6rem; margin-bottom: .5rem; }
.p4__info { font-weight: 700; }
.p4__grille { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; max-width: 460px; margin: 0 auto; padding: 10px; background: #1d4ed8; border-radius: 14px; }
.p4__case { aspect-ratio: 1; border: 0; padding: 4px; background: transparent; cursor: pointer; }
.p4__jeton { display: block; width: 100%; height: 100%; border-radius: 50%; background: #eff6ff; box-shadow: inset 0 3px 6px rgba(0, 0, 0, .25); transition: background .15s; }
.p4__rouge { background: #ef4444; }
.p4__jaune { background: #facc15; }
.p4__gagnant { outline: 4px solid #fff; animation: p4clign .6s infinite alternate; }
@keyframes p4clign { to { filter: brightness(1.35); } }
.p4__msg { text-align: center; font-weight: 800; min-height: 1.4em; }

/* ==== Échecs ==== */
.ech__haut { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; }
.ech__statut { font-weight: 800; margin: .5rem 0; }
.ech__corps { display: flex; flex-wrap: wrap; gap: 1rem; align-items: flex-start; }
.ech__plateau { display: grid; grid-template-columns: repeat(8, 1fr); width: min(92vw, 480px); aspect-ratio: 1; border: 3px solid #44403c; border-radius: 6px; overflow: hidden; }
.ech__case { position: relative; border: 0; padding: 0; display: grid; place-items: center; cursor: pointer; }
.ech__clair { background: #f0d9b5; }
.ech__fonce { background: #b58863; }
.ech__choix { box-shadow: inset 0 0 0 4px #2563eb; }
.ech__dernier { background-image: linear-gradient(rgba(250, 204, 21, .45), rgba(250, 204, 21, .45)); }
.ech__echec { background-image: radial-gradient(#ef4444, transparent 70%); }
.ech__piece { font-size: min(9.5vw, 46px); line-height: 1; }
.ech__b { color: #fff; text-shadow: 0 0 2px #000, 0 0 1px #000; }
.ech__n { color: #111; }
.ech__point { position: absolute; width: 28%; height: 28%; border-radius: 50%; background: rgba(37, 99, 235, .45); }
.ech__rang, .ech__col { position: absolute; font-size: .6rem; font-weight: 700; color: rgba(0, 0, 0, .55); }
.ech__rang { top: 2px; left: 3px; }
.ech__col { bottom: 1px; right: 3px; }
.ech__coups { flex: 1; min-width: 150px; max-height: 300px; overflow-y: auto; margin: 0; font-size: .85rem; font-family: ui-monospace, monospace; }
.ech__promo { margin-top: .6rem; display: flex; gap: .4rem; align-items: center; font-weight: 700; }
.ech__promo button { font-size: 2rem; min-width: 56px; min-height: 56px; border-radius: 10px; border: 1px solid #cbd5e1; background: #fff; cursor: pointer; }
.sol__btn { min-height: 40px; padding: .35rem .9rem; border: 0; border-radius: 999px; background: #fff; color: #14532d; font: inherit; font-weight: 800; font-size: .85rem; cursor: pointer; }
.sol__btn:hover { background: #dcfce7; }
.sol__info { color: #fff; }
.jeu__fin-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: .5rem; margin-top: .8rem; }

/* ---- css/login.css ---- */
/* login.css — page de connexion.
   Deux panneaux : le blason à gauche sur fond marine, la saisie à droite
   sur papier. Sur mobile, le blason passe en bandeau réduit. */

.cx {
	min-height: 100vh;
	min-height: 100dvh;
	display: grid;
	grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
	grid-template-areas:
		"scene panneau"
		"identite panneau";
	grid-template-rows: 1fr auto;
}
.cx__scene { grid-area: scene; }
.cx__identite { grid-area: identite; }
.cx__panneau { grid-area: panneau; }

/* --- L'identité de l'établissement : blason et nom ---
   Jamais posée sur les visages, jamais superposée à elle-même. */
.cx__identite {
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 0.6rem;
	padding: var(--e-5) var(--e-5) var(--e-8);
	background: var(--sa-paper);
	position: relative;
	z-index: 2;
}

/* --- Panneau illustré ------------------------------------------------
   Une cour d'établissement en pastel occupe tout le panneau ; le blason
   n'est plus qu'un médaillon posé dessus. Un aplat marine plein écran
   faisait sévère, et le blason agrandi à 340 px écrasait le reste. */

.cx__scene {
	position: relative;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	gap: var(--e-5);
	padding: var(--e-10);
	overflow: hidden;
	background: var(--sa-paper);
}

.cx__fond-dessin,
.cx__fond-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
	object-fit: cover;
}

/* Le voile pastel : il reprend la couleur de l'établissement, assez
   dilué pour que l'illustration reste lisible, assez présent pour que le
   médaillon et le nom se détachent. */
.cx__voile {
	position: absolute;
	inset: 0;
	background:
		linear-gradient(
			180deg,
			rgba(255, 255, 255, 0.22) 0%,
			rgba(255, 255, 255, 0.46) 70%,
			color-mix(in srgb, var(--sa-paper) 70%, transparent) 100%
		),
		color-mix(in srgb, var(--sa-navy) 18%, transparent);
}

/* --- Le médaillon ----------------------------------------------------
   Une seule variable gouverne tout : le diamètre. Largeur et hauteur sont
   posées explicitement, sans aspect-ratio ni marge en pourcentage — ces
   deux mécanismes se combinaient mal et donnaient une ellipse démesurée.
   L'image est dimensionnée sur la même variable, donc jamais désaccordée
   de son cercle. */

.cx__medaillon {
	--d: 132px;
	position: relative;
	width: var(--d);
	height: var(--d);
	flex: 0 0 var(--d);
	border-radius: 50%;
	background: #fff;
	box-shadow: 0 10px 28px rgba(27, 35, 49, 0.16);
	/* Le médaillon chevauche la scène qui le précède. */
	margin-top: calc(var(--d) / -2);
	/* Les deux enfants sont superposés au centre : le blason par-dessus
	   les initiales, qui ne se voient donc que s'il manque. */
	display: grid;
	grid-template: "pile" 1fr / 1fr;
	place-items: center;
	overflow: hidden;
}

.cx__medaillon > * { grid-area: pile; }

.cx__logo {
	/* 78 % du diamètre : le blason respire sans paraître perdu. */
	width: calc(var(--d) * 0.78);
	height: calc(var(--d) * 0.78);
	object-fit: contain;
}

.cx__initiales {
	font-family: var(--police-display);
	font-size: calc(var(--d) * 0.30);
	font-weight: 800;
	color: var(--sa-navy);
	letter-spacing: 0.04em;
	opacity: 0.5;
}

.cx__enseigne {
	margin: 0;
	text-align: center;
}
.cx__enseigne strong {
	display: block;
	font-family: var(--police-display);
	font-size: 1.1rem;
	color: var(--sa-navy);
	letter-spacing: 0.04em;
}
.cx__enseigne span {
	font-size: var(--t-xs);
	color: var(--sa-navy-soft);
	text-transform: uppercase;
	letter-spacing: 0.14em;
}

/* --- La marque, sur le panneau de saisie --- */
.cx__marque {
	display: flex;
	align-items: center;
	gap: 0.85rem;
	margin-bottom: var(--e-5);
}
.cx__marque-symbole { width: 54px; height: 54px; flex: none; }
.cx__marque-symbole svg { width: 100%; height: 100%; }
@font-face {
	font-family: 'JCF Marque';
	src: url('../fonts/marque.woff2') format('woff2');
	font-weight: 400 700;
	font-display: swap;
}

.cx__marque-nom {
	font-family: 'JCF Marque', var(--police-display);
	font-size: 1.45rem;
	font-weight: 700;
	letter-spacing: -0.005em;
	color: var(--sa-ink);
	line-height: 1.1;
}
.cx__marque-ext { color: #17685C; }
.cx__marque-nom small {
	display: block;
	font-family: var(--police-texte);
	font-size: var(--t-xs);
	font-weight: 600;
	color: var(--sa-navy-soft);
	letter-spacing: 0;
}

/* --- Panneau saisie --- */

.cx__panneau {
	display: flex;
	flex-direction: column;
	justify-content: center;
	padding: var(--e-12) clamp(var(--e-6), 6vw, var(--e-16));
	background: var(--sa-paper);
}

.cx__boite { width: 100%; max-width: 27rem; }

.cx__eyebrow {
	font-family: var(--police-display);
	font-size: var(--t-s);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--sa-navy-soft);
	margin: 0 0 var(--e-6);
	display: flex;
	gap: var(--e-2);
	flex-wrap: wrap;
}

.cx__ville::before { content: "— "; }

.cx__intro {
	color: var(--sa-navy-soft);
	margin: var(--e-4) 0 var(--e-8);
	font-size: var(--t-s);
}

.cx__alerte {
	border-left: 4px solid var(--sa-alerte);
	background: #fff;
	color: var(--sa-alerte);
	padding: var(--e-3) var(--e-4);
	margin: 0 0 var(--e-6);
	font-size: var(--t-s);
}

/* --- Champs --- */

.champ { margin-bottom: var(--e-4); }

.champ__label {
	display: block;
	font-size: var(--t-xs);
	font-weight: 600;
	letter-spacing: 0.1em;
	text-transform: uppercase;
	color: var(--sa-navy);
	margin-bottom: var(--e-2);
}

.champ__saisie {
	width: 100%;
	padding: var(--e-3) var(--e-4);
	font: inherit;
	color: var(--sa-ink);
	background: #fff;
	border: var(--filet);
	border-radius: var(--rayon);
	transition: border-color var(--transition);
	/* 16px minimum : en dessous, iOS zoome sur la saisie. */
	font-size: max(16px, var(--t-m));
}

.champ__saisie:hover { border-color: var(--sa-navy-soft); }
.champ__saisie:focus { border-color: var(--sa-navy); outline-offset: 1px; }

.cx__bouton {
	width: 100%;
	margin-top: var(--e-4);
	padding: var(--e-3) var(--e-4);
	font-family: var(--police-display);
	font-size: var(--t-l);
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: #fff;
	background: var(--sa-navy);
	border: 2px solid var(--sa-navy);
	border-radius: var(--rayon);
	cursor: pointer;
	transition: background var(--transition), border-color var(--transition);
}

.cx__bouton:hover { background: var(--sa-navy-deep); border-color: var(--sa-navy-deep); }
.cx__bouton:active { transform: translateY(1px); }

.cx__aide {
	margin: var(--e-6) 0 0;
	font-size: var(--t-s);
	color: var(--sa-navy-soft);
}

.cx__pied {
	margin-top: var(--e-12);
	display: flex;
	gap: var(--e-3);
	align-items: center;
	font-size: var(--t-xs);
	letter-spacing: 0.12em;
	text-transform: uppercase;
	color: var(--sa-navy-soft);
}

/* --- Tablette et mobile --- */

@media (max-width: 860px) {
	/* Une seule colonne : le bandeau annonce l'établissement sans
	   repousser le formulaire sous la ligne de flottaison. */
	.cx {
		grid-template-columns: 1fr;
		grid-template-areas: "scene" "identite" "panneau";
		grid-template-rows: auto auto 1fr;
	}

	.cx__scene { min-height: 26vh; max-height: 30vh; padding: 0; }
	.cx__medaillon { --d: 104px; }
	.cx__enseigne strong { font-size: 0.98rem; }
	.cx__marque-symbole { width: 44px; height: 44px; }
	.cx__marque-nom { font-size: 1.15rem; }

	.cx__panneau { padding: var(--e-8) var(--e-6) var(--e-12); }
	.cx__boite { max-width: none; }
	.cx__pied { margin-top: var(--e-8); }
}

/* --- Harmonisation avec le reste du produit (police unique, angles
   arrondis, plume et devise). Le repère visuel doit être le même dès la
   connexion : c'est le premier écran que voient les 400 élèves. --- */
.cx__eyebrow { font-weight: 600; letter-spacing: .04em; text-transform: uppercase; font-size: var(--t-xs); color: var(--sa-navy-soft); }
.cx__boite { border-radius: 18px; }
.cx__champ input, .cx input[type="text"], .cx input[type="password"] { border-radius: 10px; font-size: max(16px, 1rem); }
.cx .btn, .cx button[type="submit"] { border-radius: 999px; font-family: var(--police-texte); font-weight: 700; text-transform: none; letter-spacing: 0; }
.cx__erreur { border-radius: 10px; }

/* --- Variante « photo d'établissement » ------------------------------
   Une photo de groupe est très large : la faire tenir dans un panneau
   vertical n'en montrerait qu'une tranche, et couperait les visages. La
   page passe donc sur une seule colonne, la photo en bandeau. */

.cx--photo {
	grid-template-columns: 1fr;
	grid-template-areas: "scene" "identite" "panneau";
	grid-template-rows: auto auto 1fr;
}

.cx--photo .cx__scene {
	/* La hauteur est pilotée directement. Avec « aspect-ratio » et un
	   « max-height », le navigateur rétrécissait la LARGEUR pour conserver
	   le rapport : le bandeau ne couvrait plus tout l'écran. L'image, elle,
	   se recadre d'elle-même en « cover ». */
	width: 100%;
	height: clamp(180px, 34vh, 340px);
	padding: 0;
}

.cx--photo picture,
.cx--photo .cx__fond-photo {
	position: absolute;
	inset: 0;
	width: 100%;
	height: 100%;
}
.cx--photo .cx__fond-photo { object-fit: cover; object-position: center 38%; }

/* Le voile ne sert plus à faire lire du texte sur la photo — il n'y en a
   plus. Il fond simplement le bas de l'image dans le panneau, pour que la
   jonction ne soit pas une ligne nette en travers des visages. */
.cx--photo .cx__voile {
	background: linear-gradient(
		180deg,
		rgba(255, 255, 255, 0) 55%,
		color-mix(in srgb, var(--sa-paper) 55%, transparent) 82%,
		var(--sa-paper) 100%
	);
}

.cx--photo .cx__identite { padding-bottom: var(--e-5); }

.cx--photo .cx__panneau {
	align-items: center;
	padding-top: var(--e-4);
}
.cx--photo .cx__boite { max-width: 27rem; }

@media (max-width: 860px) {
	.cx--photo .cx__scene { height: clamp(150px, 26vh, 220px); }
}

/* --- Second facteur ---------------------------------------------------
   Même habillage que la connexion : la personne est identifiée mais pas
   encore entrée. Un écran sobre, une seule chose à faire. */
.deux { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: var(--e-6); background: var(--sa-paper); }
.deux__boite { width: min(30rem, 100%); background: #fff; border: 1px solid var(--sa-line); border-radius: 20px; padding: var(--e-8); }
.deux__marque { display: flex; align-items: center; gap: .7rem; margin-bottom: var(--e-6); }
.deux__logo { width: 40px; height: 40px; flex: none; }
.deux__logo svg { width: 100%; height: 100%; display: block; }
.deux__nom { font-family: var(--police-display); font-weight: 700; color: var(--sa-navy); }
.deux h1 { font-size: 1.3rem; margin: 0 0 var(--e-3); color: var(--sa-navy); }
.deux__intro { color: var(--sa-navy-soft); font-size: var(--t-s); margin-bottom: var(--e-5); }
.deux__etapes { color: var(--sa-navy-soft); font-size: var(--t-s); padding-left: 1.2rem; margin-bottom: var(--e-5); }
.deux__etapes li { margin-bottom: .4rem; }
.deux__qr { display: grid; place-items: center; margin-bottom: var(--e-5); }
.deux__qr svg { border: 1px solid var(--sa-line); border-radius: 12px; }
.deux__manuel { margin-bottom: var(--e-5); font-size: var(--t-s); color: var(--sa-navy-soft); }
.deux__manuel summary { cursor: pointer; font-weight: 700; }
.deux__secret { font-family: ui-monospace, "SFMono-Regular", Menlo, monospace; font-size: 1.05rem; letter-spacing: .06em; background: var(--sa-paper); border-radius: 10px; padding: .6rem .8rem; word-break: break-all; }
.deux__label { display: block; font-weight: 700; font-size: var(--t-s); margin-bottom: .3rem; }
.deux__code { width: 100%; padding: .8rem 1rem; border: 1px solid var(--sa-line); border-radius: 12px; font: inherit; font-size: 1.6rem; letter-spacing: .32em; text-align: center; font-variant-numeric: tabular-nums; }
.deux__code:focus { outline: 3px solid rgba(54, 71, 99, .3); border-color: var(--sa-navy); }
.deux__erreur { color: var(--sa-alerte); font-size: var(--t-s); min-height: 1.3em; margin: .4rem 0; }
.deux__valider { width: 100%; }
.deux__aide { color: var(--sa-navy-soft); font-size: var(--t-xs); margin-top: var(--e-4); }
.deux__attente { color: var(--sa-navy-soft); }
.deux__sortie { margin: var(--e-6) 0 0; font-size: var(--t-xs); text-align: center; }
.deux__secours h2 { font-size: 1.05rem; color: var(--sa-navy); }
.deux__liste { list-style: none; padding: 0; margin: var(--e-4) 0; display: grid; grid-template-columns: 1fr 1fr; gap: .4rem; }
.deux__liste li { font-family: ui-monospace, Menlo, monospace; font-size: 1.05rem; background: var(--sa-paper); border-radius: 8px; padding: .45rem .6rem; text-align: center; letter-spacing: .04em; }
.deux__actions { display: flex; gap: .6rem; flex-wrap: wrap; }

@media print {
	.deux__boite { border: 0; }
	.deux__actions, .deux__sortie, .deux__marque { display: none; }
}

/* Afficher / masquer le mot de passe : bouton dans le champ, à droite, zone de toucher de 44 px. */
.champ__mdp { position: relative; }
.champ__mdp .champ__saisie { padding-right: 6.2rem; }
.champ__voir {
	position: absolute; top: 50%; right: .35rem; transform: translateY(-50%);
	min-height: 44px; min-width: 44px; padding: 0 .8rem; border: 0; border-radius: 10px;
	background: transparent; color: var(--sa-navy, #1b2331); font: inherit; font-size: .85rem; font-weight: 700; cursor: pointer;
}
.champ__voir:hover, .champ__voir:focus-visible { background: rgba(27, 35, 49, .08); }
.champ__voir[aria-pressed="true"] { color: var(--accent, #2563eb); }