/* =====================================================================
   Technologie LFT · pages connectées : connexion, mot de passe, classeur
   de l'élève, classeur et comptes du professeur.

   Ces pages gardent leur propre enveloppe (elles doivent charger et
   fonctionner même quand le reste du site peine), mais elles parlent la
   même langue visuelle que style.css : mêmes couleurs, mêmes polices,
   mêmes formes. Les noms de classes sont ceux que ces pages utilisent
   depuis leur première version.
   ===================================================================== */

@import url('../fonts/faces.css');

:root {
  --encre: #1F2A37; --encre-2: #4B5867; --encre-3: #5F6B7A; --gris: #5F6B7A;
  --papier: #F3F5F7; --papier-2: #FFFFFF; --grille: #E3E8EE; --trait: #D5DCE4;
  --bleu: #004E8C; --bleu-2: #0A63AD; --bleu-pale: #E4EFF9;
  --cyan: var(--bleu); --orange: #B45309;
  --fait: #166534; --fait-pale: #DCF3E3; --encours: #9A3F05; --encours-pale: #FDEBD3;
  --erreur: #B91C1C; --erreur-pale: #FEE2E2; --or: #D4A017;
  --display: 'Bricolage Grotesque', 'Nunito Sans', system-ui, sans-serif;
  --texte: 'Nunito Sans', system-ui, -apple-system, 'Segoe UI', Roboto, sans-serif;
  --mono: 'JetBrains Mono', ui-monospace, Menlo, monospace;
  --r: 10px; --r-lg: 16px;
  --ombre: 0 1px 2px rgba(31, 42, 55, .06), 0 4px 14px rgba(31, 42, 55, .06);
}
* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; color: var(--encre);
  font: 16px/1.55 var(--texte); -webkit-font-smoothing: antialiased;
  background-color: var(--papier);
  background-image: linear-gradient(var(--grille) 1px, transparent 1px), linear-gradient(90deg, var(--grille) 1px, transparent 1px);
  background-size: 32px 32px; background-position: -1px -1px;
}
@media (max-width: 640px) { body { font-size: 17px; } }
:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; box-shadow: 0 0 0 5px #fff; }
a { color: var(--bleu); }
h1, h2, h3 { font-family: var(--display); letter-spacing: -.01em; line-height: 1.2; }

/* ---- en-tête des pages connectées ---- */
header {
  background: var(--papier-2); border-bottom: 1px solid var(--trait);
  padding: .7rem 1.25rem; display: flex; align-items: center; gap: 1rem; flex-wrap: wrap;
  position: sticky; top: 0; z-index: 10;
}
.marque { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; flex: none; text-align: left; }
.marque img { width: 36px; height: 36px; border-radius: 50%; }
.marque b { font: 800 1.05rem var(--display); color: var(--bleu); display: block; line-height: 1.1; }
.marque small { display: block; font-size: .7rem; color: var(--encre-3); letter-spacing: .04em; white-space: nowrap; }
.marque-page { text-align: center; margin: 0 0 1rem; }
[hidden] { display: none !important; }
header h1 { font: 700 1.1rem var(--display); color: var(--encre); margin: 0; flex: 1; min-width: 12rem; }
header .qui { font-size: .88rem; color: var(--encre-3); }
header a.retour, header .lien-tete { font-size: .88rem; color: var(--bleu); text-decoration: none; font-weight: 700; }
.sortir {
  padding: .45rem .9rem; border: 1.5px solid var(--trait); border-radius: var(--r);
  background: var(--papier-2); color: var(--encre-2); font: 700 .86rem var(--texte); cursor: pointer;
}
.sortir:hover { border-color: var(--erreur); color: var(--erreur); }

/* ---- corps ---- */
main { max-width: 52rem; margin: 0 auto; padding: 1.5rem 1.25rem 4rem; }
main.etroit, body.etroit main { width: 100%; max-width: 27rem; margin: 6vh auto 0; }
section {
  background: var(--papier-2); border: 1px solid var(--trait); border-radius: var(--r-lg);
  padding: 1.5rem; margin-bottom: 1.25rem;
}
h2 { font: 700 1.15rem var(--display); margin: 0 0 1rem; }
.intro { font-size: .92rem; color: var(--encre-2); margin: 0 0 1.2rem; }
.sous { color: var(--encre-3); font-size: .9rem; margin: 0 0 1.5rem; }

/* ---- formulaires ---- */
label { display: block; font-weight: 700; margin: .9rem 0 .3rem; font-size: .92rem; }
select, input, textarea {
  width: 100%; padding: .65rem .8rem; border: 1.5px solid #7B8794; border-radius: var(--r);
  font: inherit; font-size: .98rem; background: var(--papier-2); color: var(--encre);
}
textarea { min-height: 4.5rem; resize: vertical; }
select:focus, input:focus, textarea:focus { border-color: var(--bleu); box-shadow: 0 0 0 3px var(--bleu-pale); }
select:focus-visible, input:focus-visible, textarea:focus-visible { outline: 3px solid var(--bleu); outline-offset: 2px; }
input[type="file"] { padding: .5rem; background: var(--papier); }
/* L'œil des mots de passe (js/oeil.js) : le champ garde toute sa largeur, le bouton se pose dedans. */
.champ-mdp { position: relative; }
.champ-mdp input { display: block; padding-right: 3rem; }
/* margin: 0 : la page de connexion donne une marge haute à tous ses boutons, l'œil n'en veut pas. */
.oeil { position: absolute; right: 4px; top: 50%; transform: translateY(-50%); width: 40px; height: 40px; margin: 0; padding: 0; border: 0; border-radius: 8px; background: transparent; color: var(--encre-2); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; }
.oeil svg { width: 22px; height: 22px; }
.oeil:hover { background: var(--bleu-pale); color: var(--bleu); }
.oeil:focus-visible { outline: 3px solid var(--bleu); outline-offset: 1px; }
.oeil[aria-pressed="true"] { color: var(--bleu); }
.aide { font-size: .84rem; color: var(--encre-3); margin: .35rem 0 0; }
button, .bouton {
  display: inline-flex; align-items: center; justify-content: center; gap: .45rem;
  padding: .7rem 1.2rem; border: 1.5px solid var(--bleu); border-radius: var(--r);
  background: var(--bleu); color: #fff; font: 700 .95rem var(--texte); cursor: pointer;
  text-decoration: none; transition: background .12s;
}
button:hover, .bouton:hover { background: var(--bleu-2); }
button[disabled] { opacity: .55; cursor: progress; }
button.principal { width: 100%; margin-top: 1.25rem; padding: .8rem 1.5rem; font-size: 1rem; }
button.secondaire, .bouton.secondaire { background: var(--papier-2); color: var(--bleu); }
button.secondaire:hover { background: var(--bleu-pale); }
button.discret { background: transparent; color: var(--encre-2); border-color: var(--trait); }
.ligne { display: flex; gap: .6rem; align-items: flex-end; flex-wrap: wrap; }
.ligne > *, .ligne > div { flex: 1; min-width: 9rem; }
.ligne button { flex: 0 0 auto; }
.lien-sup { background: none; border: 0; padding: .6rem 0; min-height: 44px; color: var(--encre-3); font: inherit; font-size: .85rem; text-decoration: underline; cursor: pointer; }
.lien-sup:hover { color: var(--erreur); background: none; }
.lien-sup[disabled] { opacity: .5; cursor: progress; }
.oubli { display: block; margin-top: 1.1rem; text-align: center; color: var(--bleu); font-size: .92rem; font-weight: 700; }
.retour { display: block; margin-top: 1rem; text-align: center; font-size: .86rem; color: var(--encre-3); }

/* ---- messages ---- */
/* La zone de message reste rendue même vide : une région role=status qui
   entre dans la page en même temps que son texte n'est pas annoncée par
   tous les lecteurs d'écran. */
.msg { margin: 0; padding: 0; border-radius: 0 var(--r) var(--r) 0; font-size: .92rem; display: block; min-height: 0; }
.msg.err, .msg.ok, .msg.info, .msg.attention { margin-top: 1rem; padding: .75rem 1rem; border-left: 4px solid var(--trait); }
.msg.err { background: var(--erreur-pale); border-left-color: var(--erreur); }
.msg.ok { background: var(--fait-pale); border-left-color: var(--fait); }
.msg.info { background: var(--bleu-pale); border-left-color: var(--bleu); }
.msg.attention { background: var(--encours-pale); border-left-color: var(--encours); }
.avert { margin-top: 1.5rem; padding-top: 1.1rem; border-top: 1px solid var(--trait); font-size: .84rem; color: var(--encre-3); }
.avert strong { color: var(--encours); }
.note { background: var(--papier); border-left: 4px solid var(--bleu); padding: .75rem 1rem; border-radius: 0 var(--r) var(--r) 0; font-size: .88rem; margin: .8rem 0; }
.vide { color: var(--encre-3); font-style: italic; }

/* ---- dépôts, groupes, élèves ---- */
.rendu { border: 1px solid var(--trait); border-radius: 12px; padding: 1rem; margin-bottom: .85rem; background: var(--papier-2); }
.rendu h3 { font: 700 1rem var(--display); margin: 0 0 .2rem; }
.rendu.attente { border-left: 5px solid var(--encours); }
.rendu.fait { border-left: 5px solid var(--fait); }
.meta { font-size: .84rem; color: var(--encre-3); }
.etiquette { display: inline-block; font-size: .72rem; font-weight: 800; letter-spacing: .03em; padding: .15rem .6rem; border-radius: 999px; margin-left: .4rem; vertical-align: middle; }
.etiquette.attente { background: var(--encours-pale); color: var(--encours); }
.etiquette.corrige { background: var(--fait-pale); color: var(--fait); }
.etiquette.incomplet { background: var(--erreur-pale); color: var(--erreur); }
.correction { margin-top: .75rem; padding: .75rem; background: var(--papier); border-left: 4px solid var(--fait); border-radius: 0 var(--r) var(--r) 0; }
.correction strong { color: var(--fait); }
.mot { margin: .6rem 0; padding: .6rem .75rem; background: var(--papier); border-radius: var(--r); font-size: .9rem; font-style: italic; }
.manquants { font-size: .9rem; color: var(--encre-3); }
.manquants b { color: var(--encre); }
.mdp { font: 700 1.25rem/1.4 var(--mono); letter-spacing: .06em; background: var(--papier-2); border: 1px dashed var(--trait); padding: .5rem .8rem; border-radius: var(--r); display: inline-block; }
.groupe { border: 1px solid var(--trait); border-radius: 12px; padding: 1rem; margin-bottom: .85rem; }
.groupe h3 { font: 700 1rem var(--display); margin: 0 0 .1rem; }
.eleve { display: flex; align-items: center; gap: .6rem; padding: .4rem 0; border-top: 1px solid var(--grille); font-size: .92rem; }
.eleve span.qui { flex: 1; }
.eleve .att { font-size: .78rem; color: var(--encours); font-weight: 700; }
.eleve { flex-wrap: wrap; }
.eleve .edition { flex-basis: 100%; display: flex; flex-wrap: wrap; gap: .5rem .8rem; align-items: flex-end; padding: .5rem 0 .3rem; }
.eleve .edition label { display: flex; flex-direction: column; gap: .2rem; font-size: .82rem; color: var(--encre-3); }
.eleve .edition input { min-width: 11rem; }
.eleve .edition p.att { color: var(--erreur); margin: 0; }
button.danger { background: var(--erreur); border-color: var(--erreur); color: #fff; }
button.danger:hover { filter: brightness(.9); }
#bloc-corbeille .eleve:first-child { border-top: 0; }
.barre { height: 6px; background: var(--grille); border-radius: 999px; margin-top: .75rem; overflow: hidden; display: none; }
.barre div { height: 100%; background: var(--bleu); width: 0; transition: width .25s; }

/* Petits écrans, après les règles générales pour l'emporter à spécificité égale :
   l'en-tête replié prend un tiers de l'écran d'un téléphone, il défile avec la page. */
@media (max-width: 640px) {
  header { position: static; padding: .6rem 1rem; }
  section { padding: 1.1rem 1rem; }
}
/* ---- la carte de l'année de l'élève (classeur/index.html) ----
   Un chemin vertical, une étape par séquence, dans l'ordre du plan du groupe.
   L'état est un affichage : les liens restent ouverts, les pages sont
   publiques. Pas de mascotte, pas de série, pas de classement. */
.annee-barre { display: block; height: 10px; margin: .5rem 0 .4rem; }
.annee-barre div { background: var(--fait); }
.parcours { list-style: none; margin: 1rem 0 0; padding: 0; position: relative; }
.parcours::before { content: ""; position: absolute; left: 17px; top: 18px; bottom: 18px; width: 2px; background: var(--grille); }
.etape { display: grid; grid-template-columns: 36px 1fr; gap: .8rem; align-items: start; padding: .55rem 0; position: relative; }
.etape-num { width: 36px; height: 36px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font: 800 .95rem var(--display); background: var(--papier-2); border: 2px solid var(--trait); color: var(--encre-3); position: relative; z-index: 1; }
.etape.fait .etape-num { background: var(--fait); border-color: var(--fait); color: #fff; }
.etape.encours .etape-num { background: var(--encours); border-color: var(--encours); color: #fff; box-shadow: 0 0 0 4px var(--encours-pale); }
.etape.masquee .etape-num { border-style: dashed; }
.etape-corps { min-width: 0; padding: .45rem .8rem .6rem; border: 1px solid var(--trait); border-radius: 12px; background: var(--papier-2); }
.etape.encours .etape-corps { border-color: #F0C48A; }
.etape.masquee .etape-corps { background: var(--papier); border-style: dashed; }
.etape h3 { font: 700 .98rem var(--display); margin: 0 0 .3rem; display: flex; flex-wrap: wrap; gap: .3rem .5rem; align-items: center; }
.etape.masquee h3 { color: var(--encre-2); }
.pastille { display: inline-block; font-size: .76rem; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; padding: .1rem .5rem; border-radius: 999px; }
.pastille.fait { background: var(--fait-pale); color: var(--fait); }
.pastille.encours { background: var(--encours-pale); color: var(--encours); }
.pastille.avenir { background: var(--grille); color: var(--encre-2); }
.pastille.masquee { background: var(--grille); color: var(--encre-2); }
.pastille.quiz { background: var(--bleu-pale); color: var(--bleu); text-transform: none; letter-spacing: 0; }
.badge-annee { display: inline-flex; align-items: center; gap: .25rem; font-size: .78rem; font-weight: 800; color: var(--encre); }
.badge-annee svg { width: 18px; height: 18px; color: var(--or); }
/* Chaque point porte un glyphe en plus de sa couleur : coche (faite),
   coche cerclée (rattrapée), point d'exclamation (à rattraper), flèche
   (à reprendre), vide (pas encore faite). */
.points { display: flex; flex-wrap: wrap; gap: 6px; margin: .2rem 0 .4rem; padding: 0; list-style: none; }
.point { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--encre-3); background: var(--papier); display: inline-flex; align-items: center; justify-content: center; font: 800 12px/1 var(--texte); color: var(--encre); vertical-align: middle; }
.point.fait { background: var(--fait); border-color: var(--fait); color: #fff; }
.point.fait::before { content: "\2713"; }
.point.rattrape { background: var(--fait-pale); border-color: var(--fait); color: var(--fait); }
.point.rattrape::before { content: "\2713"; }
.point.a-rattraper { background: var(--erreur-pale); border-color: var(--erreur); color: var(--erreur); }
.point.a-rattraper::before { content: "!"; }
.point.a-reprendre { background: var(--encours-pale); border-color: var(--encours); color: var(--encours); }
.point.a-reprendre::before { content: "\21BB"; }
.etape-liens { display: flex; flex-wrap: wrap; gap: .3rem .9rem; font-size: .86rem; }
.etape-liens a { font-weight: 700; }
.legende-parcours { font-size: .84rem; color: var(--encre-2); margin: .8rem 0 0; line-height: 2; }
.legende-parcours .point { width: 18px; height: 18px; font-size: 11px; margin: 0 .1rem 0 .2rem; }
.visually-hidden { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* Pied de page des pages connectées : les trois liens légaux, rien d'autre. */
.pied-legal { max-width: 52rem; margin: 0 auto; padding: 1rem 1.25rem 2rem; display: flex; flex-wrap: wrap; gap: .5rem 1.25rem; font-size: .82rem; }
.pied-legal a { color: var(--encre-2); min-height: 44px; display: inline-flex; align-items: center; }
body.etroit .pied-legal { justify-content: center; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; } }
@media print { header, .sortir, .avert { display: none !important; } body { background: #fff; } }

/* Les deux entrées de la page de connexion (décision D16) : un choix d'aide, pas de rôle. */
.entrees { display: flex; gap: .5rem; margin: 0 0 .5rem; }
.entrees .entree { flex: 1; margin: 0; padding: .6rem .5rem; background: var(--papier-2); color: var(--encre-2); border: 1.5px solid var(--trait); font-weight: 700; font-size: .92rem; min-height: 44px; }
.entrees .entree[aria-pressed="true"] { background: var(--bleu); color: #fff; border-color: var(--bleu); }
.entrees .entree:hover { filter: brightness(.97); }
.aide { margin: .35rem 0 0; font-size: .84rem; color: var(--encre-3); }