/* ============================================================================
   auth-pages.css — pages publiques d'accès (activation élève / parent / prof).
   Même identité que login.html (06/10/2026) : teal de la marque (décision D1),
   carte blanche, en-tête dégradé avec le logo Omega. Autonome : ne dépend ni de
   styles.css ni de om-ui.css (pages chargées hors de l'application).
   ============================================================================ */
:root {
  --brand-50:#f0fdfa; --brand-100:#ccfbf1; --brand-200:#99f6e4; --brand-300:#5eead4;
  --brand-600:#0d9488; --brand-700:#0f766e; --brand-800:#115e59; --brand-900:#134e4a;
  --ink-900:#0f172a; --ink-700:#334155; --ink-500:#64748b; --line:#e5e7eb;
  --focus-ring:0 0 0 3px rgba(13,148,136,.25);
}
*, *::before, *::after { box-sizing: border-box; }
body.ap {
  margin: 0;
  min-height: 100vh;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 16px;
  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;
  color: var(--ink-900);
  background:
    radial-gradient(1200px 600px at 10% -10%, rgba(13,148,136,.16), transparent 60%),
    radial-gradient(900px 500px at 110% 110%, rgba(17,94,89,.14), transparent 60%),
    #f1f5f4;
}
.ap-card {
  background: #fff; width: 100%; max-width: 460px; overflow: hidden;
  border-radius: 20px; border: 1px solid rgba(15,118,110,.10);
  box-shadow: 0 24px 60px -20px rgba(15,52,50,.35), 0 2px 6px rgba(15,23,42,.05);
}
.ap-head {
  background: linear-gradient(135deg, var(--brand-900) 0%, var(--brand-700) 60%, var(--brand-600) 100%);
  color: #fff; text-align: center; padding: 26px 26px 22px;
}
.ap-logo {
  width: 52px; height: 52px; margin: 0 auto 12px; border-radius: 15px;
  background: rgba(255,255,255,.12); border: 1px solid rgba(255,255,255,.22);
  display: flex; align-items: center; justify-content: center;
}
.ap-logo img { width: 32px; height: auto; display: block; }
.ap-head h1 { font-size: 21px; font-weight: 700; letter-spacing: -.01em; margin: 0 0 4px; }
.ap-head p { font-size: 14px; opacity: .88; margin: 0; }
.ap-body { padding: 26px; }

.ap-body label, .ap-label { display: block; font-size: 13.5px; font-weight: 600; color: var(--ink-700); margin: 14px 0 6px; }
.ap-body input[type="text"], .ap-body input[type="email"], .ap-body input[type="password"], .ap-input {
  width: 100%; font-size: 15px; padding: 11px 14px; color: var(--ink-900); background: #fff;
  border: 1px solid #d1d5db; border-radius: 10px; transition: border-color .15s, box-shadow .15s;
}
.ap-body input:focus, .ap-input:focus { outline: none; border-color: var(--brand-600); box-shadow: var(--focus-ring); }
.ap-hint { font-size: 12.5px; color: var(--ink-500); margin-top: 5px; }

.ap-btn {
  width: 100%; margin-top: 20px; padding: 13px; border: 1px solid var(--brand-700); border-radius: 10px;
  background: var(--brand-700); color: #fff; font-size: 15.5px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.ap-btn:hover { background: var(--brand-800); border-color: var(--brand-800); }
.ap-btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.ap-btn:disabled { opacity: .6; cursor: not-allowed; }
.ap-btn-2 {
  width: 100%; margin-top: 10px; padding: 11px; border-radius: 10px; cursor: pointer;
  background: #fff; color: var(--brand-800); border: 1px solid var(--brand-200); font-size: 14px; font-weight: 600;
}
.ap-btn-2:hover { background: var(--brand-50); }
.ap-btn-2:focus-visible { outline: none; box-shadow: var(--focus-ring); }

.ap-foot { text-align: center; font-size: 13px; color: var(--ink-500); margin-top: 18px; }
.ap-foot a, .ap-link { color: var(--brand-700); font-weight: 600; text-decoration: none; }
.ap-foot a:hover, .ap-link:hover { text-decoration: underline; }
.ap-legal { margin-top: 16px; text-align: center; font-size: 11.5px; color: var(--ink-500); }
.ap-legal a { color: var(--ink-500); }

/* Alertes (deux conventions existantes : .alert.error/.show et .alert-error) */
.ap .alert { padding: 11px 14px; border-radius: 10px; font-size: 14px; line-height: 1.45; }
.ap .alert.error, .ap .alert-error { background: #fef2f2; color: #b91c1c; border: 1px solid #fecaca; }
.ap .alert.success, .ap .alert-success { background: #f0fdf4; color: #15803d; border: 1px solid #bbf7d0; }
.ap .alert-info { background: var(--brand-50); color: var(--brand-800); border: 1px solid var(--brand-100); }

.loading {
  display: inline-block; width: 16px; height: 16px; vertical-align: -3px;
  border: 3px solid rgba(255,255,255,.3); border-radius: 50%; border-top-color: #fff;
  animation: ap-spin 1s ease-in-out infinite;
}
@keyframes ap-spin { to { transform: rotate(360deg); } }

@media (max-width: 480px) {
  body.ap { padding: 12px; justify-content: flex-start; }
  .ap-head { padding: 22px 20px 18px; }
  .ap-body { padding: 22px 20px; }
}