/* ============================================================
   auth.css — écran de connexion, « Mot de passe oublié ? », « Mon accès » (voir auth.js)
   Chargé dans <head> AVANT le <style> d'index.html : les sélecteurs sont préfixés par
   .auth-ov (+ une classe) pour l'emporter sur les règles générales (input[type=text], .btn…).
   Variables :root d'index.html utilisées : --navy, --gold, --border, --danger.
   z-index : #loginOverlay 700, « Mon accès » (#pwdOverlay) 650.
   ============================================================ */
#loginOverlay.auth-ov, #pwdOverlay.auth-ov {
  position: fixed; inset: 0; z-index: 700;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 1rem; overflow-y: auto; -webkit-overflow-scrolling: touch;
  background: radial-gradient(circle at 50% 18%, #2b3c6b 0%, #1E254F 60%, #131d33 100%);
  font-family: "DM Sans", sans-serif;
}
#pwdOverlay.auth-ov { z-index: 650; background: rgba(19, 29, 51, 0.72); }
.auth-ov .login-card {
  background: #fff; border-radius: 16px; max-width: 400px; width: 100%; overflow: hidden; margin: auto;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.45); animation: loginCard .8s ease both; color: var(--navy, #1E254F);
}
.auth-ov .login-card.auth-compte { max-width: 460px; }
@keyframes loginCard { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }

/* Illustration */
.auth-ov .login-illu { position: relative; height: 178px; background: linear-gradient(160deg, #1f2e52, #1E254F); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.auth-ov .login-illu svg { width: 320px; height: 170px; }
.auth-ov .sil-l { animation: silInL 1.5s cubic-bezier(.16, .84, .24, 1) both; }
.auth-ov .sil-r { animation: silInR 1.5s .18s cubic-bezier(.16, .84, .24, 1) both; }
@keyframes silInL { from { opacity: 0; transform: translateX(-28px); } to { opacity: 1; transform: translateX(0); } }
@keyframes silInR { from { opacity: 0; transform: translateX(28px); } to { opacity: 1; transform: translateX(0); } }
.auth-ov .login-logo-wrap {
  position: absolute; left: 50%; top: 50%; width: 154px; height: 84px; border-radius: 16px; background: #fff;
  display: flex; align-items: center; justify-content: center; box-shadow: 0 8px 22px rgba(0, 0, 0, 0.28);
  transform: translate(-50%, -50%); animation: loginPop 1.1s .5s both;
}
.auth-ov .login-logo-ring { position: absolute; left: 50%; top: 50%; width: 154px; height: 84px; border-radius: 16px; transform: translate(-50%, -50%); animation: loginGlow 3.4s ease-in-out 3; pointer-events: none; }
@keyframes loginPop { 0% { opacity: 0; transform: translate(-50%, -50%) scale(.55); } 60% { transform: translate(-50%, -50%) scale(1.08); } 100% { opacity: 1; transform: translate(-50%, -50%) scale(1); } }
@keyframes loginGlow { 0%, 100% { box-shadow: 0 0 0 0 rgba(208, 189, 26, .5); } 50% { box-shadow: 0 0 0 16px rgba(208, 189, 26, 0); } }
.auth-ov .login-logo-img { width: 134px; height: 64px; border-radius: 8px; object-fit: contain; }
.auth-ov .login-logo-txt { font-family: "Lora", serif; font-weight: 600; color: var(--navy, #1E254F); }

/* Corps de carte */
.auth-ov .login-body { padding: 1.6rem 1.8rem; }
.auth-ov .login-body .lt { font-family: "Lora", serif; color: var(--navy, #1E254F); font-size: 1.25rem; font-weight: 600; text-align: center; }
.auth-ov .login-body .ls { color: #4b5160; font-size: 0.92rem; text-align: center; margin: 4px 0 1.2rem; line-height: 1.45; }
.auth-ov .login-body .ls.ls-gauche { text-align: left; }
.auth-ov .login-field { animation: loginUp .8s .25s both; }
.auth-ov .login-field.f2 { animation-delay: .4s; }
@keyframes loginUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
.auth-ov .login-body label { display: block; font-size: 0.95rem; color: #2f3545; margin-bottom: 4px; font-weight: 500; }
.auth-ov .login-body input {
  display: block; width: 100%; min-height: 48px; padding: 12px 13px; border: 1px solid #b9b3a5; border-radius: 9px;
  font-size: 16px; line-height: 1.3; margin: 0 0 1rem; box-sizing: border-box; background: #fff;
  transition: border .15s, box-shadow .15s; font-family: inherit; color: var(--navy, #1E254F);
}
.auth-ov .login-body input:focus { outline: none; border-color: var(--navy, #1E254F); box-shadow: 0 0 0 3px rgba(208, 189, 26, 0.45); background: #fff; }
.auth-ov .login-body input:focus-visible { outline: 2px solid var(--navy, #1E254F); outline-offset: 1px; }
.auth-ov .login-body .btn-gold { width: 100%; justify-content: center; font-size: 1rem; padding: 12px; margin-top: 4px; min-height: 48px; }
.auth-ov .login-body .btn:disabled { opacity: .7; cursor: progress; transform: none; }
.auth-ov .login-body .login-link {
  display: block; margin: 14px auto 0; background: none; border: none; color: var(--navy, #1E254F); text-decoration: underline;
  font-size: 0.95rem; cursor: pointer; font-family: inherit; padding: 8px 12px; min-height: 44px;
}
.auth-ov .login-body .login-link:hover { color: #3a4680; }
.auth-ov .login-body .login-link.login-link-inline { display: inline; margin: 0; padding: 0 2px; min-height: 0; font-size: inherit; color: inherit; font-weight: 600; }
.auth-ov .login-link:focus-visible, .auth-ov .btn:focus-visible, .auth-ov .pwd-eye:focus-visible, .auth-ov .pwd-close:focus-visible {
  outline: 3px solid var(--navy, #1E254F); outline-offset: 2px; box-shadow: 0 0 0 5px rgba(208, 189, 26, .55);
}

/* Messages */
.auth-ov .login-msg { font-size: 0.92rem; border-radius: 8px; padding: 10px 12px; margin-bottom: 0.9rem; line-height: 1.45; display: none; }
.auth-ov .login-msg.err { display: block; background: #fdecea; color: #8a1c1c; }
.auth-ov .login-msg.info { display: block; background: #eef4ea; color: #24502f; }
.auth-ov .login-msg.warn { display: block; background: #fff3e0; color: #a84300; }
.auth-ov .login-msg-detail { display: block; margin-top: 6px; font-size: 0.82rem; color: #4b5160; }

/* Mots de passe */
.auth-ov .pwd-wrap { position: relative; }
.auth-ov .pwd-wrap input { padding-right: 96px; }
.auth-ov .pwd-eye {
  position: absolute; right: 2px; top: 2px; height: 44px; min-width: 80px; padding: 0 12px; border: none;
  background: #f3f1ea; color: var(--navy, #1E254F); border-radius: 7px; font-size: 0.85rem; cursor: pointer; font-family: inherit;
}
.auth-ov .pwd-meter { height: 6px; border-radius: 4px; background: #ece8dc; margin: -6px 0 6px; overflow: hidden; }
.auth-ov .pwd-meter span { display: block; height: 100%; width: 0; transition: width .2s, background .2s; }
.auth-ov .pwd-hint { font-size: 0.85rem; color: #4b5160; margin-bottom: 0.9rem; min-height: 1.1em; }
.auth-ov .pwd-close {
  float: right; background: none; border: none; font-size: 1.6rem; line-height: 1; color: #4b5160; cursor: pointer;
  padding: 4px 8px; min-width: 44px; min-height: 44px; margin: -10px -12px 0 0; border-radius: 8px;
}
.auth-ov .auth-cache { position: absolute !important; width: 1px !important; height: 1px !important; min-height: 0 !important; padding: 0 !important; margin: -1px !important; overflow: hidden; clip: rect(0 0 0 0); border: 0 !important; opacity: 0; pointer-events: none; }

/* « Mon accès » */
.auth-ov .auth-section { border-top: 1px solid var(--border, #ddd8cc); padding-top: 1rem; margin-top: 1rem; }
.auth-ov .auth-section h3 { font-family: "Lora", serif; font-size: 1.02rem; font-weight: 600; color: var(--navy, #1E254F); margin-bottom: .7rem; }
.auth-ov .auth-aide, .auth-ov .auth-etat p, .auth-ov .auth-confirmer { font-size: 0.9rem; color: #2f3545; line-height: 1.5; margin: .4rem 0 .6rem; }
.auth-ov .auth-etat { font-size: 0.9rem; color: #2f3545; line-height: 1.5; }
.auth-ov .auth-detail { font-size: 0.82rem !important; color: #4b5160 !important; }
.auth-ov .auth-pastille { display: inline-block; font-size: 0.78rem; font-weight: 600; border-radius: 10px; padding: 1px 9px; margin-right: 4px; }
.auth-ov .auth-pastille.ok { background: #e3f1e7; color: #1f5a3a; }
.auth-ov .auth-pastille.non { background: #fff3e0; color: #a84300; }
.auth-ov .login-body .btn.auth-large { min-height: 48px; justify-content: center; font-size: 0.95rem; padding: 10px 16px; }
.auth-ov .auth-boutons { display: flex; flex-wrap: wrap; gap: 8px; }
.auth-ov .auth-boutons .btn { flex: 1 1 180px; }

/* Petits écrans et fenêtres basses (iPhone en paysage, clavier ouvert) */
@media (max-width: 480px) {
  #loginOverlay.auth-ov, #pwdOverlay.auth-ov { padding: .6rem; }
  .auth-ov .login-body { padding: 1.3rem 1.1rem; }
}
@media (max-height: 560px) {
  .auth-ov .login-illu { height: 96px; }
  .auth-ov .login-illu svg { display: none; }
  .auth-ov .login-logo-wrap, .auth-ov .login-logo-ring { width: 120px; height: 64px; }
  .auth-ov .login-logo-img { width: 104px; height: 50px; }
}
@media (prefers-reduced-motion: reduce) {
  .auth-ov .login-card, .auth-ov .sil-l, .auth-ov .sil-r, .auth-ov .login-logo-wrap, .auth-ov .login-logo-ring, .auth-ov .login-field { animation: none !important; }
  .auth-ov .login-body input, .auth-ov .pwd-meter span { transition: none !important; }
}