/* ═══════════════════════════════════════════════════════════════════════
   Mentorix — pages d'authentification
   Cadre commun à la connexion, au mot de passe oublié, à la réinitialisation
   et à l'activation de compte. Repris de maquettes/mentorix_auth_v2/,
   transposé sur la palette « univers ». Requiert univers-base.css.
   ═══════════════════════════════════════════════════════════════════════ */

:root { --or: #c29433; --or-pale: #f6edd6; }

body.auth { background: var(--cream); }

.auth-shell { display: grid; grid-template-columns: minmax(400px, 44%) minmax(0, 56%); min-height: 100vh; }

/* ── Panneau illustré ────────────────────────────────────────────────── */
.auth-hero { position: relative; overflow: hidden; isolation: isolate; background: #9ec0c9; }
.auth-hero > img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; object-position: 51% center; }
/* Deux voiles : un voile clair à gauche pour que le titre reste lisible sur
   l'illustration, un voile sombre en bas pour la signature. */
.auth-hero::before, .auth-hero::after { content: ''; position: absolute; inset: 0; z-index: 1; pointer-events: none; }
.auth-hero::before { background: linear-gradient(101deg, #fbf7edee 0, #fbf7edc4 30%, #fbf7ed52 52%, transparent 72%); }
.auth-hero::after  { background: linear-gradient(180deg, #0a2f2c33 0, transparent 13%, transparent 55%, #062426e8 100%); }
.auth-hero-top { position: absolute; z-index: 2; top: 34px; left: clamp(22px, 4vw, 60px); }
.auth-pill {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 15px; border-radius: 30px;
  background: #0d413ec2; border: 1px solid #ffffffa6; color: #fff;
  font-size: 11px; font-weight: 800; letter-spacing: .07em; text-transform: uppercase;
}
.auth-pill svg { width: 14px; height: 14px; color: var(--lime); }
.auth-hero-copy { position: absolute; z-index: 2; left: clamp(26px, 5vw, 74px); top: 21%; width: min(84%, 500px); }
.auth-hero-copy .eyebrow {
  margin-bottom: 15px; color: #10534e;
  font-size: 12px; font-weight: 900; letter-spacing: .15em; text-transform: uppercase;
}
.auth-hero-copy h1 {
  margin-bottom: 16px; color: #10333a;
  font-size: clamp(34px, 3.9vw, 60px); font-weight: 1000; line-height: 1.07; letter-spacing: -2px;
  text-shadow: 0 2px 16px #ffffffaa;
}
.auth-hero-copy h1 span { color: #0d6a53; }
.auth-hero-copy p {
  max-width: 375px; color: #2d554f; font-size: clamp(13px, 1vw, 16px); font-weight: 600; line-height: 1.6;
  text-shadow: 0 1px 9px #ffffffaa;
}
.auth-hero-foot {
  position: absolute; z-index: 2; bottom: 30px; left: clamp(24px, 4vw, 60px); right: 26px;
  display: flex; align-items: center; gap: 12px; color: #f7f4e8;
}
.auth-hero-foot img { width: 39px; height: 39px; object-fit: contain; filter: drop-shadow(0 2px 8px #0006); }
.auth-hero-foot strong { display: block; font-size: 13px; }
.auth-hero-foot span { display: block; margin-top: 3px; color: #e2e8dc; font-size: 11px; }

/* ── Panneau des formulaires ─────────────────────────────────────────── */
.auth-main {
  display: flex; align-items: center; justify-content: center;
  min-width: 0; padding: 46px clamp(24px, 5vw, 86px);
  background: radial-gradient(circle at 95% 6%, #fdf6dc 0, transparent 26%), var(--cream);
}
.auth-panel { width: min(100%, 520px); margin: auto; }
.auth-brand { display: block; width: fit-content; margin: 0 auto 12px; }
.auth-brand img { display: block; width: min(290px, 70vw); height: auto; }
.auth-baseline {
  margin-bottom: 32px; text-align: center; color: #697d72;
  font-size: 10px; font-weight: 800; letter-spacing: .2em; text-transform: uppercase;
}
.auth-card {
  position: relative; padding: clamp(22px, 2.6vw, 34px);
  background: var(--white); border: 1px solid var(--line); border-radius: 22px;
  box-shadow: 0 20px 70px #173c3018, 0 3px 16px #173c300d;
}
.auth-card::after {
  content: ''; position: absolute; top: -1px; left: calc(50% - 29px);
  width: 58px; height: 4px; border-radius: 0 0 10px 10px; background: var(--or);
}
.auth-kicker {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  color: var(--green); font-size: 11px; font-weight: 900; letter-spacing: .12em; text-transform: uppercase;
}
.auth-kicker svg { width: 14px; height: 14px; }
.auth-card h1, .auth-card h2 {
  margin: 10px 0 8px; text-align: center;
  font-size: clamp(24px, 2.2vw, 31px); font-weight: 1000; line-height: 1.15; letter-spacing: -1.2px;
}
.auth-lead { max-width: 370px; margin: 0 auto 24px; text-align: center; color: var(--muted); font-size: 13px; line-height: 1.5; }

/* ── Onglets de profil ───────────────────────────────────────────────── */
.auth-roles {
  display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 5px;
  margin-bottom: 23px; padding: 5px;
  background: #eef1e7; border: 1px solid var(--line); border-radius: 15px;
}
.auth-role {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  padding: 12px 5px; border: 1px solid transparent; border-radius: 11px;
  background: transparent; color: #66746c;
  font-size: 12px; font-weight: 800; white-space: nowrap;
}
.auth-role svg { width: 17px; height: 17px; }
.auth-role[aria-selected="true"] { background: var(--white); border-color: var(--line); color: var(--green); box-shadow: 0 3px 10px #102f2915; }

/* ── Étapes du parcours élève ────────────────────────────────────────── */
.auth-steps { display: flex; align-items: center; justify-content: center; gap: 7px; margin-bottom: 15px; }
.auth-steps i { width: 31px; height: 5px; border-radius: 30px; background: #e7ece3; }
.auth-steps i.en-cours { background: var(--or); }
.auth-steps i.faite    { background: var(--green); }
.auth-step-title { margin-bottom: 7px; text-align: center; font-size: 17px; font-weight: 900; letter-spacing: -.4px; }
.auth-step-sub   { margin-bottom: 17px; text-align: center; color: var(--muted); font-size: 12px; line-height: 1.55; }

.auth-back {
  display: inline-flex; align-items: center; gap: 5px; padding: 0 0 14px;
  border: 0; background: none; color: var(--green); font-size: 11px; font-weight: 800;
}
.auth-back:hover { text-decoration: underline; }

.auth-note {
  display: flex; align-items: flex-start; gap: 9px; padding: 11px 12px;
  background: #f1f6ec; border: 1px solid #e4efdf; border-radius: 11px;
  color: #5f7369; font-size: 11.5px; line-height: 1.5;
}
.auth-note svg { width: 15px; height: 15px; margin-top: 1px; color: #39745d; }

/* Code de classe : six cases, chiffres visibles (ce n'est pas un secret personnel) */
.code-cases { gap: 7px; }
.code-cases .pin-case { width: 42px; height: 52px; font-size: 24px; font-weight: 900; }
.code-cases .pin-case:nth-child(3) { margin-right: 8px; }   /* 048 213 : comme sur la fiche imprimée */
.code-erreur {
  margin: -8px 0 14px; padding: 9px 12px; border-radius: 11px;
  background: #fbeee6; border: 1px solid #f0d3c1; color: #7a3b1d;
  font-size: 12px; font-weight: 700; line-height: 1.45; text-align: center;
}
.code-erreur[hidden] { display: none; }
.code-note { margin-top: 14px; }

/* « Ton enseignant(e) est bien… ? » */
.confirmer-nom { margin: 6px 0 4px; text-align: center; color: var(--green); font-size: 24px; font-weight: 900; line-height: 1.2; overflow-wrap: anywhere; }
.confirmer-classe { margin-bottom: 20px; text-align: center; color: var(--muted); font-size: 12px; }
.confirmer-classe[hidden] { display: block; visibility: hidden; }
.confirmer-choix { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 8px; }
.choix-oui, .choix-non {
  min-height: 64px; border-radius: 15px; font-size: 18px; font-weight: 900;
  transition: transform .12s, box-shadow .12s;
}
.choix-oui { border: 0; background: linear-gradient(180deg, #1a6f5c, #0f4f44); color: #fff; box-shadow: 0 5px 0 #0a3b34; }
.choix-non { border: 1.5px solid #e2cbbd; background: #fff8f3; color: #8a4526; box-shadow: 0 5px 0 #efdcd0; }
.choix-oui:active, .choix-non:active { transform: translateY(3px); box-shadow: none; }

.classe-de { margin-bottom: 9px; text-align: center; color: var(--muted); font-size: 11px; }
.classe-de b { color: var(--green); }

.eleve-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin-bottom: 13px; }
.eleve-opt {
  position: relative; min-width: 0; padding: 7px 4px 9px; overflow: hidden;
  background: #fafcf8; border: 2px solid #e2e9df; border-radius: 12px;
  color: var(--ink); font-size: 10px; font-weight: 800; text-align: center;
  transition: transform .15s, border-color .15s, background .15s;
}
.eleve-opt:hover { transform: translateY(-2px); border-color: #7bb89a; }
.eleve-opt[aria-pressed="true"] { background: #eaf5e7; border-color: var(--green); box-shadow: 0 0 0 2px #cbe5d1; }
.eleve-opt[aria-pressed="true"]::after {
  content: '✓'; position: absolute; right: 4px; top: 4px;
  display: grid; place-items: center; width: 17px; height: 17px;
  border-radius: 50%; background: var(--green); color: #fff; font-size: 10px;
}
.eleve-opt img { display: block; width: 100%; height: 66px; margin: 0 auto 4px; object-fit: contain; }
.eleve-opt span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.eleve-vide { grid-column: 1 / -1; padding: 14px 0; text-align: center; color: var(--muted); font-size: 12px; }

/* ── Code secret ─────────────────────────────────────────────────────── */
.pin-eleve { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; color: var(--muted); font-size: 11px; }
.pin-eleve img { width: 38px; height: 38px; object-fit: contain; }
.pin-cases { display: flex; justify-content: center; gap: 13px; margin: 11px 0 18px; }
.pin-case {
  display: grid; place-items: center; width: 51px; height: 54px;
  background: #f7fbf5; border: 1.5px solid #d4e3d8; border-radius: 12px;
  color: var(--green); font-size: 30px; line-height: 1;
}
.pin-case.remplie { background: #e6f2e8; border-color: var(--green); }
.pin-aide { margin-bottom: 10px; text-align: center; color: var(--muted); font-size: 11px; }
.pin-clavier { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; width: min(260px, 100%); margin: 0 auto 18px; }
.pin-touche {
  height: 48px; background: var(--white); border: 1px solid #dde7dd; border-radius: 12px;
  box-shadow: 0 3px 0 #e3e9e0; color: var(--ink); font-size: 18px; font-weight: 800;
}
.pin-touche:hover  { background: #eff6e8; }
.pin-touche:active { transform: translateY(2px); box-shadow: 0 1px 0 #e3e9e0; }
.pin-touche.grise  { background: #eff4ec; color: var(--green); font-size: 15px; }
.pin-touche.valide { background: var(--green); border-color: var(--green); color: #fff; box-shadow: 0 3px 0 #0b4b3e; }

/* ── Boutons et champs ───────────────────────────────────────────────── */
.auth-submit {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: 100%; padding: 15px 14px; border: 0; border-radius: 12px;
  background: linear-gradient(180deg, #1a6f5c, #0f4f44); color: #fff;
  font-size: 13px; font-weight: 900;
  box-shadow: 0 5px 0 #0a3b34, 0 10px 17px #0b58442a;
  transition: transform .12s, box-shadow .12s, background .15s;
}
.auth-submit:not(:disabled):hover  { background: linear-gradient(180deg, #1e8069, #12604f); }
.auth-submit:not(:disabled):active { transform: translateY(3px); box-shadow: 0 2px 0 #0a3b34; }
.auth-submit:disabled { opacity: .55; }
.auth-submit svg { width: 16px; height: 16px; }

.auth-field { margin-bottom: 16px; }
.auth-field label { display: block; margin-bottom: 8px; font-size: 12px; font-weight: 800; }
.auth-field input {
  width: 100%; height: 48px; padding: 0 14px;
  background: var(--white); border: 1.5px solid #d8e3d9; border-radius: 11px;
  color: var(--ink); font-size: 13px;
}
.auth-field input:focus { border-color: var(--green); outline: 0; box-shadow: 0 0 0 4px #15966a18; }
.auth-field input::placeholder { color: #9baaa0; }
.auth-field.mot-de-passe { position: relative; }
.auth-field.mot-de-passe input { padding-right: 82px; }
.voir-mdp {
  position: absolute; right: 8px; bottom: 5px;
  min-height: 38px; padding: 7px 8px; border: 0; background: none;
  color: var(--green); font-size: 11px; font-weight: 800;
}
.auth-options { display: flex; justify-content: flex-end; margin-bottom: 18px; }
.auth-lien { padding: 5px 0; border: 0; background: none; color: var(--green); font-size: 11px; font-weight: 800; text-decoration: underline; text-underline-offset: 3px; }

.auth-message {
  margin-top: 16px; padding: 11px 12px; border-radius: 11px;
  background: #eff5ea; border: 1px solid #cfe6d2; color: #345e4c; font-size: 12px; line-height: 1.55;
}
.auth-message.erreur { background: var(--try-bg); border-color: var(--try-line); color: #8a4028; }
.auth-message.reussi { background: var(--ok-bg); border-color: var(--ok-line); color: #37582c; }

.auth-bas { margin-top: 17px; padding-top: 17px; border-top: 1px solid var(--line); color: var(--muted); font-size: 11px; line-height: 1.55; text-align: center; }
.auth-bas strong { color: var(--green); }
.auth-retour { display: block; margin-top: 18px; text-align: center; color: var(--green); font-size: 12px; font-weight: 700; }
.auth-pied { margin-top: 20px; color: #7d8d84; font-size: 10px; line-height: 1.7; text-align: center; }
.auth-pied a { color: #537e6a; }

/* Force du mot de passe */
.force-piste { height: 6px; margin: 9px 0 6px; border-radius: 20px; background: #e8eddf; overflow: hidden; }
.force-jauge { width: 0; height: 100%; border-radius: 20px; background: var(--try-line); transition: width .2s, background .2s; }
.force-texte { margin-bottom: 14px; color: var(--muted); font-size: 11px; line-height: 1.45; }

.auth-illustration { display: none; }

/* ── Écrans étroits ──────────────────────────────────────────────────── */
@media (max-width: 1100px) {
  .auth-shell { grid-template-columns: minmax(330px, 42%) minmax(0, 58%); }
  .auth-main { padding: 36px 26px; }
  .auth-hero-copy { left: 32px; top: 19%; width: 88%; }
}
@media (max-width: 780px) {
  .auth-shell { display: block; }
  .auth-hero { display: none; }
  .auth-main { display: block; min-height: 100vh; padding: 24px 18px 26px; }
  .auth-panel { width: min(100%, 530px); }
  .auth-brand { margin-bottom: 6px; }
  .auth-brand img { width: 242px; }
  .auth-baseline { margin-bottom: 16px; }
  .auth-illustration {
    display: flex; align-items: center; justify-content: center; gap: 7px;
    width: fit-content; margin: 0 auto 13px; padding: 7px 13px;
    background: #e8f1e4; border: 1px solid #dde9d6; border-radius: 30px;
    color: var(--green); font-size: 10px; font-weight: 800;
  }
  .auth-illustration img { width: 19px; height: 19px; object-fit: contain; }
}
@media (max-width: 420px) {
  .auth-main { padding: 18px 12px 26px; }
  .auth-brand img { width: 210px; }
  .auth-card { padding: 19px 15px; border-radius: 18px; }
  .auth-role { gap: 4px; padding: 10px 2px; font-size: 11px; }
  .auth-role svg { width: 15px; height: 15px; }
  .eleve-grid { gap: 5px; }
  .eleve-opt img { height: 56px; }
  .code-cases { gap: 5px; }
  .code-cases .pin-case { width: 38px; height: 48px; font-size: 22px; }
  .pin-case { width: 45px; height: 49px; }
  .pin-touche { height: 44px; }
}
@media (prefers-reduced-motion: reduce) {
  .eleve-opt, .auth-submit, .choix-oui, .choix-non, .force-jauge { transition: none; }
}