/* 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);
}
.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); }

@media (max-width: 640px) {
	.barre__action span { position: absolute; left: -9999px; }
	.barre__action { padding: .45rem; }
}
.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; }