/* ===========================================================================
   login.css — habillage des pages de connexion (Espace Pro + Admin)
   Thème clair émeraude, cohérent avec l'accueil. Chargé APRÈS base.css.
   Aucune dépendance JS (compatible avec la CSP stricte de l'admin :
   style-src 'self' / script-src 'none').
   Les deux pages portent body.page-login.
   =========================================================================== */

.page-login{
  --lp-ink:#0f1f1a; --lp-text:#1f2d29; --lp-muted:#4f6b61;
  --lp-primary:#10a877; --lp-primary-600:#0a7150; --lp-teal:#0fb6a8;
  --lp-surface:#ffffff; --lp-border:#e2ebe7; --lp-border-hi:#cfe0d8;
  --lp-field:#f5fbf8;

  min-height:100vh; margin:0; display:flex; flex-direction:column;
  font-family:Inter,system-ui,-apple-system,"Segoe UI",Roboto,Arial,sans-serif;
  color:var(--lp-text);
  background:
    radial-gradient(820px 460px at 50% -160px, rgba(16,168,119,.16), transparent 60%),
    radial-gradient(640px 420px at 100% 0, rgba(15,182,168,.12), transparent 60%),
    linear-gradient(180deg,#f5fbf8 0%, #f1f8f4 60%, #edf5f1 100%);
  background-attachment:fixed;
  -webkit-font-smoothing:antialiased;
}

/* ── Barre du haut (lien retour) ───────────────────────────────────────── */
.page-login .topbar{
  position:sticky; top:0; z-index:10; background:transparent; border:0;
  backdrop-filter:none;
}
.page-login .topbar .wrap{
  max-width:1100px; margin:0 auto; padding:14px 18px; display:flex; align-items:center;
}
/* En-tête de l'admin (header/nav/brand) → version claire */
.page-login .header{
  position:static; background:transparent; border:0; backdrop-filter:none;
}
.page-login .header .nav,
.page-login .nav.container{
  display:flex; align-items:center; justify-content:space-between; gap:14px;
  max-width:1100px; margin:0 auto; padding:14px 18px;
}
.page-login .brand{display:flex; align-items:center; gap:10px; font-weight:800; color:var(--lp-ink)}
.page-login .brand img{height:34px; width:auto; border-radius:8px}
.page-login .header .links a,
.page-login .topbar a{ color:var(--lp-muted); font-weight:700; font-size:14px; text-decoration:none }
.page-login .header .links a:hover,
.page-login .topbar a:hover{ color:var(--lp-primary-600) }

/* Le bouton retour « ← Accueil » de l'espace pro (classe .btn .btn-ghost) */
.page-login .topbar .btn,
.page-login .topbar .btn-ghost{
  display:inline-flex; align-items:center; gap:6px;
  padding:9px 14px; border-radius:999px; font-weight:700; font-size:14px;
  background:var(--lp-surface); color:var(--lp-ink);
  border:1px solid var(--lp-border-hi); box-shadow:0 4px 14px rgba(15,31,26,.06);
  text-decoration:none; transition:border-color .15s, background .15s;
}
.page-login .topbar .btn:hover,
.page-login .topbar .btn-ghost:hover{ border-color:var(--lp-primary); background:#f0f8f4 }
/* ⌨️ Le focus se voit (04/10) : l'ombre posée ci-dessus, plus précise que
   `.btn:focus` de base.css, effaçait l'anneau de focus — « ← Accueil » ne
   montrait rien quand on y arrivait au clavier. */
.page-login .topbar .btn:focus-visible{ outline:2px solid var(--lp-primary); outline-offset:2px }

/* ── Logo + sous-titre ─────────────────────────────────────────────────── */
.page-login .hero{ text-align:center; padding:26px 18px 6px }
.page-login .hero .logo{
  width:min(280px,68vw); height:auto; margin:0 auto; border-radius:18px;
  box-shadow:0 14px 36px rgba(12,90,64,.14);
}
.page-login .subtitle{
  margin:18px 0 0; color:var(--lp-muted); font-weight:600; letter-spacing:.01em;
}
/* Le sous-titre est le `<h1>` de la page (04/10) : même rendu que l'ancien
   `<p>`, sans la taille de `.hero h1` de base.css. */
.page-login .hero h1.subtitle{ font-size:1rem; line-height:inherit; }

/* ── Carte de connexion (pro: .panel · admin: main>.card) ──────────────── */
.page-login .content,
.page-login main{ flex:1 0 auto; width:100%; }
.page-login .panel,
.page-login main .card{
  width:100%; max-width:420px; margin:22px auto 40px; padding:26px 24px;
  background:var(--lp-surface); border:1px solid var(--lp-border);
  border-radius:20px; box-shadow:0 18px 44px rgba(12,90,64,.12);
}
.page-login main{ padding:0 18px }
.page-login main .card h3{
  margin:0 0 16px; font-size:21px; font-weight:800; color:var(--lp-ink); text-align:center;
}

/* ── Onglets Auto-école / Moniteur (espace pro) ───────────────────────── */
.page-login .tabs{
  display:flex; gap:6px; background:#eef6f1; border:1px solid var(--lp-border);
  border-radius:14px; padding:5px; margin-bottom:20px;
}
.page-login .tabs a{
  flex:1; text-align:center; padding:11px 12px; border-radius:10px;
  font-weight:800; font-size:14.5px; color:var(--lp-muted); text-decoration:none;
  transition:background .15s, color .15s;
}
.page-login .tabs a:hover{ color:var(--lp-primary-600) }
.page-login .tabs a.active{
  background:linear-gradient(180deg,var(--lp-primary),var(--lp-primary-600));
  color:#fff; box-shadow:0 6px 16px rgba(12,138,96,.28);
}

/* ── Formulaire (labels, champs, bouton) ──────────────────────────────── */
.page-login form{ display:flex; flex-direction:column }
.page-login label{
  margin:12px 0 6px; font-weight:700; font-size:14px; color:var(--lp-ink);
}
.page-login input,
.page-login .input{
  width:100%; box-sizing:border-box; padding:13px 14px; font-size:16px;
  color:var(--lp-text); background:var(--lp-field);
  border:1px solid var(--lp-border-hi); border-radius:12px; outline:0;
  transition:border-color .15s, box-shadow .15s;
}
.page-login input:focus,
.page-login .input:focus{
  border-color:var(--lp-primary); box-shadow:0 0 0 3px rgba(16,168,119,.18);
}
.page-login button[type=submit],
.page-login .btn-primary{
  margin-top:20px; width:100%; padding:14px 18px; border:0; cursor:pointer;
  font-weight:800; font-size:16px; color:#fff; border-radius:12px;
  background:linear-gradient(180deg,var(--lp-primary),var(--lp-primary-600));
  box-shadow:0 10px 24px rgba(12,138,96,.3), inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .15s, box-shadow .15s, filter .15s;
}
.page-login button[type=submit]:hover,
.page-login .btn-primary:hover{
  transform:translateY(-1px); box-shadow:0 14px 30px rgba(12,138,96,.42); filter:brightness(1.04);
}

/* Champ code 2FA (admin) : sa mise en forme était en style="" inline, bloquée
   par la CSP stricte de l'admin → on la pose ici (feuille externe autorisée). */
.page-login #code{
  font-size:22px; letter-spacing:8px; text-align:center;
  font-family:ui-monospace,Menlo,Consolas,monospace;
}

/* ── Alertes (pro: .alert · admin: .flash) + aide ─────────────────────── */
.page-login .alert,
.page-login .flash{
  margin:0 0 16px; padding:12px 14px; border-radius:12px; font-weight:600;
  border:1px solid transparent; line-height:1.45; font-size:14.5px;
}
.page-login .alert.info,
.page-login .alert.ok{ background:rgba(16,168,119,.1); border-color:rgba(16,168,119,.3); color:var(--lp-primary-600) }
.page-login .alert.warn{ background:rgba(245,158,11,.12); border-color:rgba(245,158,11,.35); color:#92400e }
.page-login .alert.err,
.page-login .flash.err{ background:rgba(239,68,68,.1); border-color:rgba(239,68,68,.32); color:#b42318 }
.page-login .help{
  margin-top:14px; color:var(--lp-muted); font-size:13px; line-height:1.5; text-align:center;
}

/* ── Liens secondaires (inscription, mot de passe oublié…) ────────────── */
.page-login .links{ margin-top:18px; text-align:center; line-height:2 }
.page-login .links a{
  color:var(--lp-primary-600); font-weight:700; font-size:14px; text-decoration:none;
}
.page-login .links a:hover{ text-decoration:underline }

/* ── Pied de page ─────────────────────────────────────────────────────── */
.page-login footer,
.page-login .footer{
  margin-top:auto; border-top:1px solid var(--lp-border);
  background:rgba(255,255,255,.7); color:var(--lp-muted); text-align:center;
}
.page-login .footer .wrap,
.page-login footer .wrap{ max-width:1100px; margin:0 auto; padding:16px 18px; font-size:13.5px }

/* ── 🏁 La vérification de la connexion (espace pro, 05/10) ───────────────
   Posée par `assets/js/login-pro.js` au clic : un petit compteur dont
   l'aiguille monte et redescend, et une route qui défile en bas du bouton.
   Sans le script, rien de tout ça n'existe. */
.page-login button[type=submit].en-verif{
  position:relative; overflow:hidden; cursor:progress;
  display:flex; align-items:center; justify-content:center; gap:12px;
  transform:none; filter:none;
}
.page-login button[type=submit].en-verif::after{
  content:""; position:absolute; left:0; right:0; bottom:0; height:5px;
  background:repeating-linear-gradient(90deg, rgba(255,255,255,.85) 0 18px, transparent 18px 34px);
  animation:tpc-route .45s linear infinite;
}
.page-login .tpc-compteur{
  position:relative; width:26px; height:14px; flex:0 0 auto;
  border:3px solid rgba(255,255,255,.95); border-bottom:0;
  border-radius:26px 26px 0 0;
}
.page-login .tpc-aiguille{
  position:absolute; left:50%; bottom:-2px; width:2.6px; height:13px; margin-left:-1.3px;
  background:#fff; border-radius:2px; transform-origin:50% 100%;
  animation:tpc-aiguille 1.1s ease-in-out infinite alternate;
}
.page-login .tpc-aiguille::after{
  content:""; position:absolute; left:50%; bottom:-2.5px; width:6px; height:6px; margin-left:-3px;
  background:#fff; border-radius:50%;
}
@keyframes tpc-route{ from{ background-position:0 0 } to{ background-position:-34px 0 } }
@keyframes tpc-aiguille{ from{ transform:rotate(-70deg) } to{ transform:rotate(70deg) } }
@media (prefers-reduced-motion: reduce){
  .page-login button[type=submit].en-verif::after,
  .page-login .tpc-aiguille{ animation:none }
}