/* ============================================================
   Connexion, bandeau d'identité, tableau de bord.

   Feuille séparée de cours.css : ces écrans n'existent que pour
   les pages raccordées à la base, et le cours doit pouvoir s'en
   passer. Les variables viennent de cours.css, chargée avant.
   ============================================================ */

/* ------------------------------------------------------------
   La page de connexion
   ------------------------------------------------------------ */

.page-connexion{
  display:grid;place-items:center;min-height:100vh;min-height:100svh;
  padding:1.5rem;
  /* Deux aplats très pâles pour ne pas laisser un fond nu. */
  background:
    radial-gradient(60rem 40rem at 15% -10%, var(--jaune-clair), transparent 60%),
    radial-gradient(50rem 35rem at 95% 110%, var(--bleu-clair), transparent 60%),
    var(--paper);
}

.connexion-carte{
  width:100%;max-width:26rem;
  background:var(--carte);border:var(--bord);border-radius:var(--rayon);
  box-shadow:var(--ombre-forte);
  padding:2rem 1.75rem 1.5rem;
}

.connexion-sur{
  margin:0;font-family:var(--titre);font-weight:700;
  font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);
}

.connexion-titre{
  margin:.2rem 0 .75rem;font-family:var(--titre);font-size:1.75rem;
  line-height:1.15;
}

.connexion-sous{
  margin:0 0 1.5rem;color:var(--muted);font-size:.9375rem;line-height:1.5;
}

.connexion-label{
  display:block;margin:0 0 .3rem;font-weight:600;font-size:.875rem;
}

.connexion-champ{
  width:100%;margin:0 0 1.1rem;padding:.7rem .85rem;
  font-family:var(--sans);font-size:1rem;color:var(--ink);
  background:var(--paper);border:var(--bord);border-radius:var(--rayon-petit);
  transition:box-shadow var(--vitesse) var(--courbe);
}
.connexion-champ:focus{
  outline:none;box-shadow:3px 3px 0 var(--accent);border-color:var(--accent);
}

.connexion-btn{
  width:100%;margin:.4rem 0 0;padding:.8rem 1rem;
  font-family:var(--titre);font-weight:700;font-size:1rem;color:var(--ink);
  background:var(--jaune);border:var(--bord);border-radius:var(--rayon-petit);
  box-shadow:var(--ombre);cursor:pointer;
  transition:transform .12s var(--courbe), box-shadow .12s var(--courbe);
}
.connexion-btn:hover:not(:disabled){ background:var(--jaune-clair); }
/* Le bouton s'enfonce au clic, comme partout sur le site. */
.connexion-btn:active:not(:disabled){ transform:translate(3px,3px);box-shadow:none; }
.connexion-btn:disabled{ opacity:.6;cursor:progress; }

.connexion-err{
  margin:1rem 0 0;padding:.65rem .8rem;
  background:var(--alerte-soft);border:2px solid var(--alerte);
  border-radius:var(--rayon-petit);
  color:var(--alerte);font-size:.9rem;font-weight:600;
}

.connexion-aide{
  margin:1.5rem 0 0;padding-top:1rem;border-top:1px solid var(--rule-doux);
  color:var(--muted);font-size:.8125rem;line-height:1.5;
}

/* ------------------------------------------------------------
   Le bandeau d'identité, posé par session.js en haut des pages
   protégées. Il se glisse au-dessus de tout le reste, y compris
   de la barre de progression du cours.
   ------------------------------------------------------------ */

.sess-barre{
  display:flex;align-items:center;gap:1rem;
  padding:.5rem 1rem;
  background:var(--ink);color:var(--paper);
  font-size:.8125rem;
}

.sess-qui{ font-weight:600;margin-right:auto; }

.sess-lien{ color:var(--jaune);text-decoration:none;font-weight:600; }
.sess-lien:hover{ text-decoration:underline; }

.sess-sortir{
  padding:.25rem .7rem;
  font-family:var(--sans);font-size:.8125rem;font-weight:600;
  color:var(--paper);background:transparent;
  border:1px solid var(--paper);border-radius:var(--rayon-pilule);
  cursor:pointer;
}
.sess-sortir:hover{ background:var(--paper);color:var(--ink); }

/* Le bandeau ne sort pas à l'impression : une copie papier n'a
   que faire d'un bouton de déconnexion. */
@media print{ .sess-barre{ display:none; } }

/* ------------------------------------------------------------
   Deux ajouts au QCM, pour les évaluations servies par la base.
   Le reste de l'habillage vient de cours.css, inchangé.
   ------------------------------------------------------------ */

/* Le chronomètre, dans l'en-tête du QCM. Chiffres à chasse fixe :
   sans cela la largeur saute à chaque seconde. */
.q-chrono{
  display:inline-block;
  padding:0 .6rem;
  font-family:var(--titre);font-weight:700;
  font-variant-numeric:tabular-nums;
  color:var(--ink);background:var(--bleu-clair);
  border:1.5px solid var(--ink);border-radius:var(--rayon-pilule);
}
.q-chrono[hidden]{ display:none; }

/* Sous deux minutes, il passe au rouge et respire. */
.q-chrono-fin{
  background:var(--alerte-vif);
  animation:chrono-fin 1s var(--courbe) infinite;
}
@keyframes chrono-fin{
  0%,100%{ transform:scale(1); }
  50%    { transform:scale(1.06); }
}

/* En contrôle, la réponse choisie se marque sans rien dire de sa
   justesse : ni vert ni rouge, seulement « c'est parti ». */
.q-opts button.choisi{
  background:var(--bleu-clair);
  border-color:var(--ink);
  font-weight:700;
}
.q-opts button.choisi::after{
  content:" ✓";
  font-weight:700;
}

/* ------------------------------------------------------------
   La page « Mes résultats » de l'étudiant.
   ------------------------------------------------------------ */

.res-carte{
  margin:0 0 1rem;padding:1.1rem 1.25rem;
  background:var(--carte);border:var(--bord);border-radius:var(--rayon);
  box-shadow:var(--ombre);
}
.res-tete{ display:flex;align-items:center;gap:.5rem;margin-bottom:.4rem; }
.res-chap{
  font-family:var(--titre);font-size:.75rem;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--muted);
}
.res-titre{ margin:0 0 .2rem;font-family:var(--titre);font-size:1.125rem; }
.res-meta{ margin:0 0 .8rem;font-size:.8125rem;color:var(--muted); }
.res-bas{
  display:flex;align-items:baseline;gap:1rem;
  padding-top:.7rem;border-top:1px solid var(--rule-doux);
}
.res-note{
  font-family:var(--titre);font-size:1.5rem;font-weight:700;
  font-variant-numeric:tabular-nums;margin-right:auto;
}
.res-note-vide{ color:var(--muted); }
.res-lien{ color:var(--accent);font-weight:700;text-decoration:none; }
.res-lien:hover{ text-decoration:underline; }

/* Les pastilles d'état sont partagées avec le back-office : la
   page de résultats en a besoin sans charger prof.css, qui ne
   regarde pas les étudiants. */
.prof-etat{
  display:inline-block;padding:.1rem .55rem;
  font-size:.6875rem;font-weight:700;letter-spacing:.04em;text-transform:uppercase;
  border:1.5px solid var(--ink);border-radius:var(--rayon-pilule);
  vertical-align:middle;
}
.prof-etat-ouverte{ background:var(--ok-soft);color:var(--ok-encre); }
.prof-etat-vive{ background:var(--jaune);color:var(--ink); }
.prof-etat-attente{ background:var(--bleu-clair);color:var(--ink); }
.prof-etat-close{ background:var(--surface-2);color:var(--muted); }