/* =====================================================================
   Mises en page
   ===================================================================== */

/* ---------- Logo ---------- */
.logo { display: flex; align-items: center; gap: var(--e-3); text-decoration: none; color: var(--c-texte); }
.logo-icone {
  width: 40px; height: 40px;
  flex: 0 0 auto;
  border-radius: 12px;
  background: var(--c-primaire);
  color: var(--c-sur-primaire);
  display: flex; align-items: center; justify-content: center;
}
.logo-nom { font-weight: 700; font-size: var(--t-md); line-height: 1.2; }
.logo-sous-titre { font-size: var(--t-xs); color: var(--c-texte-doux); }

/* ---------- Écrans d'authentification ---------- */
.auth {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: var(--e-8) var(--e-5);
}
.auth-boite {
  width: 100%;
  max-width: 440px;
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.auth-carte {
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-lg);
  padding: var(--e-8);
  box-shadow: var(--ombre-haute);
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.auth-entete { display: flex; flex-direction: column; gap: var(--e-2); }
.auth-entete p { color: var(--c-texte-doux); }
.auth-icone {
  width: 56px; height: 56px;
  border-radius: 16px;
  background: var(--c-primaire-doux);
  color: var(--c-primaire-texte);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--e-2);
}
.auth form { display: flex; flex-direction: column; gap: var(--e-5); }
.auth-pied {
  display: flex; align-items: center; justify-content: center; gap: var(--e-2);
  font-size: var(--t-xs); color: var(--c-texte-doux); text-align: center;
}
.lien-bouton {
  background: none; border: 0; padding: 0;
  min-height: var(--cible-min);
  color: var(--c-primaire-fort);
  font-weight: 600; font-size: var(--t-sm);
  cursor: pointer; text-decoration: underline; text-underline-offset: 3px;
}

/* QR code d'enrôlement MFA */
.qr-mfa {
  align-self: center;
  width: 200px; height: 200px;
  padding: var(--e-3);
  background: #FFFFFF;           /* toujours blanc pour rester lisible */
  border: 1px solid var(--c-trait);
  border-radius: var(--r-md);
}
.qr-mfa img { width: 100%; height: 100%; }
.secret-mfa {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: var(--t-sm);
  word-break: break-all;
  background: var(--c-surface-2);
  padding: var(--e-3);
  border-radius: var(--r-sm);
}
.etapes { margin: 0; padding-left: var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); color: var(--c-texte-2); font-size: var(--t-sm); }

/* ---------- Coquille de l'application ---------- */
.app { min-height: 100vh; display: flex; flex-wrap: wrap; }

.app-nav {
  flex: 1 1 248px;
  max-width: 100%;
  background: var(--c-surface);
  border-right: 1px solid var(--c-trait);
  padding: var(--e-6) var(--e-4);
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.app-nav .logo { padding: 0 var(--e-2); }
.nav-liste { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-1); }
.nav-lien {
  display: flex; align-items: center; gap: var(--e-3);
  min-height: var(--cible-min);
  padding: 0 var(--e-3);
  border-radius: var(--r-sm);
  color: var(--c-texte-2);
  font-size: var(--t-sm); font-weight: 500;
  text-decoration: none;
}
.nav-lien:hover { background: var(--c-surface-2); color: var(--c-texte); }
.nav-lien[aria-current="page"] { background: var(--c-primaire-doux); color: var(--c-primaire-texte); font-weight: 600; }
.nav-lien[aria-disabled="true"] { color: var(--c-texte-doux); cursor: default; }
.nav-lien[aria-disabled="true"]:hover { background: transparent; }
.nav-lien .badge { margin-left: auto; }

.app-utilisateur {
  margin-top: auto;
  display: flex; align-items: center; gap: var(--e-3);
  padding: var(--e-3) var(--e-2) 0;
  border-top: 1px solid var(--c-trait);
}
.avatar {
  width: 40px; height: 40px; flex: 0 0 auto;
  border-radius: var(--r-rond);
  background: var(--c-primaire-doux);
  color: var(--c-primaire-texte);
  font-weight: 600; font-size: var(--t-sm);
  display: flex; align-items: center; justify-content: center;
}
.app-utilisateur-nom { font-size: var(--t-sm); font-weight: 600; }
.app-utilisateur-role { font-size: var(--t-xs); color: var(--c-texte-doux); }

.app-contenu {
  flex: 999 1 560px;
  min-width: 0;
  padding: var(--e-8);
  display: flex;
  flex-direction: column;
  gap: var(--e-6);
}
.app-entete {
  display: flex; flex-wrap: wrap;
  align-items: flex-end; justify-content: space-between;
  gap: var(--e-4);
}
.app-entete p { margin-top: var(--e-2); color: var(--c-texte-doux); }
.app-actions { display: flex; flex-wrap: wrap; gap: var(--e-2); }

/* Grille de raccourcis de l'accueil */
.raccourcis {
  list-style: none; margin: 0; padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
  gap: var(--e-4);
}
.raccourci {
  height: 100%;
  display: flex; flex-direction: column; gap: var(--e-2);
  padding: var(--e-5);
  background: var(--c-surface);
  border: 1px solid var(--c-trait);
  border-radius: var(--r-md);
  color: var(--c-texte);
  text-decoration: none;
}
a.raccourci:hover { border-color: var(--c-primaire-trait); color: var(--c-texte); }
.raccourci-titre { font-weight: 600; display: flex; align-items: center; justify-content: space-between; gap: var(--e-2); }
.raccourci-texte { font-size: var(--t-sm); color: var(--c-texte-doux); }

@media (max-width: 720px) {
  .app-nav { border-right: 0; border-bottom: 1px solid var(--c-trait); }
  .app-contenu { padding: var(--e-5); }
  .auth-carte { padding: var(--e-6); }
}

/* Coquille : compléments */
.app-utilisateur-texte { display: flex; flex-direction: column; min-width: 0; }
.app-nav-actions { display: flex; flex-direction: column; gap: var(--e-1); }
.app-nav-actions .btn { justify-content: flex-start; }
.section { display: flex; flex-direction: column; gap: var(--e-4); }
.section-titre { display: flex; align-items: baseline; justify-content: space-between; gap: var(--e-3); flex-wrap: wrap; }

/* =====================================================================
   Poste de scan (agent)
   ===================================================================== */
.poste { display: flex; flex-wrap: wrap; gap: var(--e-6); align-items: flex-start; }
.poste-principal { flex: 999 1 600px; min-width: 0; display: flex; flex-direction: column; gap: var(--e-5); }
.poste-cote { flex: 1 1 300px; min-width: 0; display: flex; flex-direction: column; gap: var(--e-5); }

.scan-zone { display: flex; flex-wrap: wrap; gap: var(--e-3); align-items: flex-end; }
.scan-zone .champ { flex: 1 1 320px; }
.saisie-scan { min-height: 56px; font-size: var(--t-lg); font-weight: 500; border-width: 2px; border-color: var(--c-primaire); }
.camera { width: 100%; max-height: 320px; border-radius: var(--r-md); background: #000; object-fit: cover; }

.resultat { border-radius: var(--r-lg); overflow: hidden; background: var(--c-surface); border: 1px solid var(--c-trait); box-shadow: var(--ombre-haute); }
.resultat-attente { padding: var(--e-10) var(--e-6); text-align: center; color: var(--c-texte-doux); }
.bandeau { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) var(--e-6); font-size: var(--t-lg); font-weight: 700; color: #FFFFFF; flex-wrap: wrap; }
.bandeau-succes { background: #15803D; }
.bandeau-attention { background: #B45309; }
.bandeau-erreur { background: #B91C1C; }
.bandeau .bandeau-info { margin-left: auto; font-size: var(--t-sm); font-weight: 500; }
.resultat-corps { padding: var(--e-6); display: flex; flex-wrap: wrap; gap: var(--e-8); }
.photo-grande {
  flex: 0 0 220px; width: 220px; height: 280px; border-radius: var(--r-md); object-fit: cover;
  background: var(--c-primaire-doux); color: var(--c-primaire-texte);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--e-2);
  font-size: 4rem; font-weight: 700; border: 1px dashed var(--c-primaire-trait);
}
.photo-grande small { font-size: var(--t-sm); font-weight: 600; }
.resultat-infos { flex: 1 1 320px; min-width: 0; display: flex; flex-direction: column; gap: var(--e-5); }
.nom-xl { font-size: 2.75rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.1; margin: 0; }
.sous-nom { font-size: var(--t-lg); color: var(--c-texte-2); margin-top: var(--e-2); }
.cases-infos { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--e-3); }
.case-info { background: var(--c-surface-2); border: 1px solid var(--c-trait); border-radius: var(--r-sm); padding: var(--e-3) var(--e-4); }
.case-info-alerte { background: var(--c-danger-fond); border-color: var(--c-danger-fond); color: var(--c-danger-texte); }
.case-info-titre { font-size: var(--t-xs); font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: inherit; opacity: 0.85; }
.case-info-valeur { font-size: 1.6rem; font-weight: 700; margin-top: var(--e-1); }
.case-info-detail { font-size: var(--t-sm); }
.puces { display: flex; flex-wrap: wrap; gap: var(--e-2); }
.puce {
  min-height: var(--cible-min); padding: 0 var(--e-4); border-radius: var(--r-rond);
  border: 1px solid var(--c-trait-fort); background: var(--c-surface); color: var(--c-texte-2);
  font-size: var(--t-sm); font-weight: 500; cursor: pointer;
}
.puce[aria-pressed="true"] { border: 2px solid var(--c-primaire); background: var(--c-primaire-doux); color: var(--c-primaire-texte); font-weight: 600; }

.liste-scans { list-style: none; margin: 0; padding: 0; }
.liste-scans li { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-3) 0; border-top: 1px solid var(--c-trait); font-size: var(--t-sm); }
.liste-scans li:first-child { border-top: 0; }
.liste-scans .heure { color: var(--c-texte-doux); width: 44px; font-variant-numeric: tabular-nums; }
.liste-scans .nom { flex: 1 1 auto; font-weight: 600; }
.resultat-recherche { display: flex; align-items: center; gap: var(--e-3); padding: var(--e-2) 0; border-top: 1px solid var(--c-trait); }
.resultat-recherche img, .resultat-recherche .vignette { width: 44px; height: 56px; border-radius: 6px; object-fit: cover; }
.resultat-recherche .infos { flex: 1 1 auto; min-width: 0; font-size: var(--t-sm); }

/* =====================================================================
   Code de fin de séance (professeur) — lisible au vidéoprojecteur
   ===================================================================== */
.vue-code { display: flex; flex-direction: column; gap: var(--e-6); }
.vue-code:fullscreen { background: var(--c-fond); padding: var(--e-8); overflow: auto; }
.vue-code-corps { display: flex; flex-wrap: wrap; gap: var(--e-8); align-items: center; justify-content: center; }
.qr-projete { flex: 0 1 460px; display: flex; flex-direction: column; align-items: center; gap: var(--e-3); }
.qr-projete-cadre {
  width: 100%; max-width: 440px; aspect-ratio: 1; padding: var(--e-6);
  background: #FFFFFF; border-radius: var(--r-lg); border: 1px solid var(--c-trait); box-shadow: var(--ombre-haute);
}
.qr-projete-cadre svg { width: 100%; height: 100%; }
.barre-progression { width: 100%; max-width: 440px; height: 8px; border-radius: var(--r-rond); background: var(--c-primaire-doux); overflow: hidden; }
.barre-progression > span { display: block; height: 100%; background: var(--c-primaire); transition: width 1s linear; }
.code-infos { flex: 1 1 420px; max-width: 580px; display: flex; flex-direction: column; gap: var(--e-6); }
.code-titre { font-size: clamp(1.75rem, 3vw, 2.5rem); font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; margin: 0; }
.code-court { display: flex; align-items: center; gap: var(--e-4); }
.code-court strong { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: clamp(2rem, 4vw, 3rem); letter-spacing: 0.15em; }
.compteur { font-size: 3rem; font-weight: 800; }
.compteur small { font-size: 1.4rem; font-weight: 600; color: var(--c-texte-doux); }
.barre-progression.epaisse { height: 14px; max-width: none; }
.liste-noms { display: flex; flex-wrap: wrap; gap: var(--e-2); list-style: none; margin: 0; padding: 0; }

/* =====================================================================
   Espace étudiant (téléphone)
   ===================================================================== */
.etudiant-page { max-width: 560px; width: 100%; margin: 0 auto; }
.grand-message { text-align: center; padding: var(--e-8) var(--e-5); border-radius: var(--r-lg); display: flex; flex-direction: column; gap: var(--e-3); align-items: center; }
.grand-message strong { font-size: var(--t-xl); }
.grand-message-succes { background: var(--c-succes-fond); color: var(--c-succes-texte); }
.grand-message-erreur { background: var(--c-danger-fond); color: var(--c-danger-texte); }
.grand-message-attention { background: var(--c-attention-fond); color: var(--c-attention-texte); }
.saisie-code-seance { text-transform: uppercase; letter-spacing: 0.3em; text-align: center; font-size: 1.75rem; font-weight: 700; min-height: 64px; }

/* Notifications */
.liste-notifications { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--e-3); }
.notification { background: var(--c-surface); border: 1px solid var(--c-trait); border-radius: var(--r-md); padding: var(--e-4) var(--e-5); display: flex; flex-direction: column; gap: var(--e-2); }
.notification.non-lue { border-left: 4px solid var(--c-primaire); }
.notification-entete { display: flex; flex-wrap: wrap; align-items: center; gap: var(--e-3); }
.notification-entete time { margin-left: auto; font-size: var(--t-sm); }

/* Jauge du mois (étudiant) */
.jauge { display: grid; grid-template-columns: repeat(var(--n, 5), minmax(0, 1fr)); gap: var(--e-2); }
.jauge span { height: 12px; border-radius: var(--r-rond); background: var(--c-trait); }
.jauge span.pleine { background: var(--c-attention); }
.jauge span.depassee { background: var(--c-danger); }
.resume { display: flex; flex-direction: column; gap: var(--e-3); }
.resume-chiffre { font-size: 2.25rem; font-weight: 800; }
.resume-chiffre small { font-size: var(--t-lg); color: var(--c-texte-doux); font-weight: 600; }
.cta-scan {
  display: flex; align-items: center; gap: var(--e-4); padding: var(--e-5);
  background: var(--c-primaire); color: var(--c-sur-primaire); border-radius: var(--r-lg);
  text-decoration: none; box-shadow: var(--ombre-haute);
}
.cta-scan:hover { color: var(--c-sur-primaire); background: var(--c-primaire-fort); }
.cta-scan strong { font-size: var(--t-lg); display: block; }

/* =====================================================================
   Tableau de bord
   ===================================================================== */
.indicateurs { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: var(--e-4); }
.indicateur { display: flex; flex-direction: column; gap: var(--e-2); }
.indicateur-libelle { font-size: var(--t-sm); font-weight: 500; color: var(--c-texte-doux); }
.indicateur-valeur { font-size: 2rem; font-weight: 700; letter-spacing: -0.02em; }
.indicateur-note { font-size: var(--t-sm); color: var(--c-texte-doux); }
.indicateur-note.alerte { color: var(--c-danger-texte); font-weight: 500; }
.grille-2 { display: flex; flex-wrap: wrap; gap: var(--e-4); }
.grille-2 > * { flex: 1 1 380px; min-width: 0; }
.histo { height: 200px; display: flex; align-items: flex-end; gap: var(--e-3); border-bottom: 1px solid var(--c-trait); padding-bottom: var(--e-2); }
.barre-histo { flex: 1 1 0; height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: var(--e-1); }
.barre-histo span { width: 100%; max-width: 48px; border-radius: 8px 8px 0 0; background: var(--c-primaire-trait); }
.barre-histo:last-child span { background: var(--c-primaire); }
.barre-histo b { font-size: var(--t-xs); color: var(--c-texte-2); }
.etiquettes-histo { display: flex; gap: var(--e-3); }
.etiquettes-histo span { flex: 1 1 0; text-align: center; font-size: var(--t-xs); color: var(--c-texte-doux); }
.barre-motif { height: 8px; border-radius: var(--r-rond); background: var(--c-primaire-doux); }
.barre-motif span { display: block; height: 100%; border-radius: var(--r-rond); background: var(--c-primaire); }
.ligne-motif { display: flex; flex-direction: column; gap: var(--e-1); }
.ligne-motif div:first-child { display: flex; justify-content: space-between; font-size: var(--t-sm); }
.detail-audit { font-family: ui-monospace, "SF Mono", Consolas, monospace; font-size: var(--t-xs); white-space: pre-wrap; word-break: break-word; margin: var(--e-2) 0 0; color: var(--c-texte-2); }