/* ═══════════════════════════════════════════════════════════════
   ÉCRAN DE CONNEXION — commun aux 8 PWA élève
   Chargé AVANT le styles.css de chaque PWA : chaque APS n'y garde que son
   identité (fond de #screen-login, .login-icon, décor de .login-hero, flèche
   des <select>), qui l'emporte par ordre de chargement.
   La logique du formulaire est dans pwa-core.js (même écran partout).
   ⚠️ Jamais d'étoile suivie d'une barre oblique dans un commentaire : ça le
   ferme et avale la règle suivante (incident pwa-aide.css du 27/09/2026).
═══════════════════════════════════════════════════════════════ */

/* ─── Champs de formulaire (aussi utilisés dans les applis) ─── */
.field { margin-bottom: 1rem }
.field-label {
  font-size: .75rem; font-weight: 600; color: var(--muted);
  text-transform: uppercase; letter-spacing: .1em; margin-bottom: .4rem; display: block;
}
select,
input[type=password],
.mdp-wrap input {
  width: 100%; background: var(--s2); border: 1px solid var(--border); border-radius: 10px;
  color: var(--text); font-family: 'DM Sans', sans-serif; font-size: 1rem;
  padding: .7rem .9rem; outline: none; transition: border-color .2s;
  -webkit-appearance: none; appearance: none;
}
select:focus,
input:focus { border-color: var(--accent) }
.mdp-rules { font-size: .72rem; color: var(--muted); margin-top: .35rem; line-height: 1.5 }
.error-msg { color: var(--red); font-size: .8rem; margin-top: .5rem; display: none }

/* ─── Bouton « œil » afficher / masquer le mot de passe (pwa-core.js) ─── */
.mdp-wrap { position: relative }
.mdp-wrap input { padding-right: 2.8rem }
.mdp-oeil {
  position: absolute; right: 0; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px; display: flex; align-items: center; justify-content: center;
  background: none; border: none; padding: 0; cursor: pointer; color: var(--muted);
  -webkit-tap-highlight-color: transparent;
}
.mdp-oeil[aria-pressed="true"] { color: var(--accent) }

/* ─── Mise en page de l'écran ─── */
#screen-login {
  justify-content: center; align-items: center;
  padding: 1.5rem; overflow-y: auto;
}
.login-wrap  { width: 100%; max-width: 400px; margin: auto }
.login-hero  { text-align: center; margin-bottom: 2rem }
.login-logo  {
  font-family: 'Bebas Neue', sans-serif; font-size: 2.8rem; letter-spacing: .04em; line-height: 1;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text;
}
.login-sub   { font-size: .8rem; letter-spacing: .25em; text-transform: uppercase; color: var(--muted); margin-top: .25rem }
.brand-my    { font-family: 'DM Sans', sans-serif; font-weight: 700; font-size: .5em; letter-spacing: 0 }
.login-card  {
  background: var(--s1); border: 1px solid var(--border); border-radius: 18px;
  padding: 1.5rem; width: 100%; max-width: 380px; margin: 0 auto;
}
.login-card h2 { font-family: 'Bebas Neue', sans-serif; font-size: 1.4rem; letter-spacing: .05em; margin-bottom: 1.25rem; color: var(--text) }

/* ─── Mention RGPD sous le bouton Entrer ─── */
.login-rgpd { font-size: .72rem; color: var(--muted); text-align: center; margin-top: 1rem; line-height: 1.5 }
.login-rgpd button {
  background: none; border: none; color: var(--accent); font-size: .72rem;
  cursor: pointer; padding: 0; text-decoration: underline;
}

/* ─── Bas de page : lien d'aide + bascule du thème ─── */
.login-footer {
  text-align: center; margin-top: 1.25rem;
  display: flex; justify-content: center; align-items: center; gap: 1.2rem;
}
.login-footer-btn {
  font-size: .82rem; color: var(--muted); background: none; border: none;
  cursor: pointer; font-family: 'DM Sans', sans-serif; text-decoration: none;
}
.login-theme-btn { border: none; background: none; cursor: pointer; font-size: 1.2rem; line-height: 1; padding: 0 }