/* ═══════════════════════════════════════════════════════════════════════
   Assan — Pages d'authentification publiques (login, login_profil,
   mot de passe oublié, réinitialiser)
   Palette kente maison, pattern kente subtil en fond, 3 glows animés.
   Un seul fichier partagé pour garantir la cohérence visuelle.
═══════════════════════════════════════════════════════════════════════ */

:root {
  --bg:#0a0d16; --surface:#141a29; --surface-1:#0d111d; --surface-2:#141a29;
  --raise:#232b43; --border:#232a41; --border-strong:#333c5a;
  --text:#f2ede3; --text-primary:#f2ede3; --text-secondary:#b4afa1; --text-muted:#9194A2;
  --accent:#eab24c; --accent-2:#f5cd7d; --accent-soft:rgba(234,178,76,.14); --on-accent:#1A1408;
  --green:#43c193; --red:#e2624b;
  --radius:12px; --font-sans:'Inter',system-ui,sans-serif; --font-display:'Sora','Inter',sans-serif;
  --kente:linear-gradient(90deg,#eab24c 0%,#d6714f 38%,#43c193 72%,#eab24c 100%);
  --ease:cubic-bezier(.4,0,.2,1); --spring:cubic-bezier(.34,1.4,.64,1);
}
* { box-sizing:border-box; margin:0; padding:0; }
*:focus { outline:none; }
*:focus-visible { outline:2px solid #14110A !important; outline-offset:0 !important; box-shadow:0 0 0 4px #F0C876 !important; }

body {
  font-family:var(--font-sans); background:var(--bg); color:var(--text);
  min-height:100vh; display:flex; flex-direction:column; align-items:center; justify-content:center;
  padding:20px; position:relative; overflow-x:hidden; /* jamais overflow:hidden : la carte doit pouvoir défiler sur petit écran */
  width:100%;
  background:
    radial-gradient(1200px 600px at 15% -10%, rgba(234,178,76,.09), transparent 60%),
    radial-gradient(1000px 700px at 100% 110%, rgba(67,193,147,.07), transparent 55%),
    radial-gradient(900px 500px at 50% 50%, rgba(214,113,79,.04), transparent 60%),
    var(--bg);
}
/* Pattern kente subtil en losanges 44px */
body::after {
  content:''; position:absolute; inset:0; z-index:0; pointer-events:none; opacity:.045;
  background-image:
    linear-gradient(45deg, var(--accent) 25%, transparent 25%),
    linear-gradient(-45deg, var(--green) 25%, transparent 25%),
    linear-gradient(45deg, transparent 75%, var(--terra) 75%),
    linear-gradient(-45deg, transparent 75%, var(--accent) 75%);
  background-size: 44px 44px;
  background-position: 0 0, 0 22px, 22px -22px, -22px 0;
}
body::before {
  content:''; position:absolute; top:0; left:0; right:0; height:3px;
  background:var(--kente); z-index:2;
}
.glow { position:fixed; border-radius:50%; filter:blur(90px); opacity:.16; pointer-events:none; z-index:0; }
.glow.a { width:420px; height:420px; background:var(--accent); top:-120px; right:-80px; animation:glowFloat var(--dur-slow) ease-in-out infinite; }
.glow.b { width:380px; height:380px; background:var(--green); bottom:-140px; left:-100px; animation:glowFloat var(--dur-slow) ease-in-out infinite reverse; }
.glow.c { width:340px; height:340px; background:var(--terra); top:40%; left:50%; transform:translate(-50%,-50%); animation:glowFloat var(--dur-slow) ease-in-out infinite; opacity:.06; }
@keyframes glowFloat {
  0%, 100% { transform: translate(0,0) scale(1); }
  50% { transform: translate(20px, -20px) scale(1.05); }
}

.card {
  width:380px; max-width:100%;
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:20px; padding:32px 28px 26px; position:relative; z-index:1;
  box-shadow:0 24px 60px rgba(0,0,0,.5), 0 1px 0 rgba(255,255,255,.03) inset;
  animation: cardIn var(--dur-slow) var(--spring);
}
@keyframes cardIn { from { opacity:0; transform:translateY(12px) scale(.98); } to { opacity:1; transform:none; } }

.brand { display:flex; flex-direction:column; align-items:center; margin-bottom:22px; }
.brand-logo {
  width:56px; height:56px; border-radius:16px; background:var(--kente);
  display:flex; align-items:center; justify-content:center;
  margin-bottom:14px; font-size:26px;
  box-shadow:0 8px 24px rgba(234,178,76,.35);
}
.brand-name { font-family:var(--font-display); font-size:26px; font-weight:800; letter-spacing:-.02em; }
.brand-sub { font-size:13px; color:var(--text-muted); margin-top:4px; }
.brand-aide { font-size:12px; color:var(--text-secondary); margin-top:10px; text-align:center; padding:0 8px; line-height:1.4; }

.flash {
  border-radius:10px; padding:10px 13px; margin-bottom:14px; font-size:13px; line-height:1.4;
  background:rgba(226,98,75,.12); border:1px solid rgba(226,98,75,.4); color:#f5c1b5;
}
.flash.success, .flash.info {
  background:rgba(67,193,147,.12); border:1px solid rgba(67,193,147,.4); color:#b7e5d1;
}

.form-group { margin-bottom:14px; }
label { display:block; font-size:12.5px; color:var(--text-secondary); margin-bottom:6px; font-weight:500; letter-spacing:.02em; }
input[type="text"], input[type="email"], input[type="password"], input[type="tel"] {
  width:100%; background:var(--surface-1); border:1px solid var(--border-strong);
  border-radius:10px; padding:11px 13px; color:var(--text); font-family:inherit; font-size:14.5px;
  transition:border-color var(--dur-fast) var(--ease), background var(--dur-fast) var(--ease);
}
input:focus { border-color:var(--accent); background:var(--surface); }
input.mono { font-family:'JetBrains Mono','Menlo','Courier New',monospace; letter-spacing:.04em; }

.pw-wrap { position:relative; }
.pw-toggle {
  position:absolute; right:8px; top:50%; transform:translateY(-50%);
  background:none; border:none; cursor:pointer; padding:6px; color:var(--text-muted);
  font-size:15px; line-height:1;
}
.pw-toggle:hover { color:var(--accent); }

.forgot {
  display:block; text-align:right; font-size:12.5px; color:var(--accent);
  text-decoration:none; margin:-6px 0 16px; opacity:.85;
}
.forgot:hover { opacity:1; text-decoration:underline; }

.btn-primary {
  width:100%; background:var(--accent); color:var(--on-accent); border:none;
  border-radius:10px; padding:12px 16px; font-family:var(--font-sans); font-weight:700;
  font-size:15px; cursor:pointer; letter-spacing:.01em;
  transition:filter var(--dur-fast) var(--ease), transform var(--dur-fast) var(--ease);
  display:inline-flex; align-items:center; justify-content:center; gap:8px;
}
.btn-primary:hover { filter:brightness(1.06); }
.btn-primary:active { transform:translateY(1px); }

.btn-outline {
  width:100%; background:transparent; color:var(--text-secondary); border:1px solid var(--border);
  border-radius:10px; padding:11px 16px; font-family:var(--font-sans); font-weight:500;
  font-size:14px; cursor:pointer; text-decoration:none; text-align:center; display:block;
  transition:all var(--dur-fast) var(--ease); margin-top:10px;
}
.btn-outline:hover { border-color:var(--accent); color:var(--text); }

.divider {
  display:flex; align-items:center; gap:12px; margin:18px 0 12px;
  color:var(--text-muted); font-size:12px; text-transform:uppercase;
  letter-spacing:.1em; font-weight:600;
}
.divider::before, .divider::after { content:''; flex:1; height:1px; background:var(--border); }

.emo { font-style:normal; }

/* Bandeau langue en haut à droite de la carte */
/* ── Accessibilité ── */
.sr-only { position:absolute !important; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
.lang-switch { position:absolute; top:12px; right:12px; display:flex; gap:4px; z-index:3; }
.lang-switch .lang-on, .lang-switch a { display:inline-flex; align-items:center; justify-content:center;
  min-width:30px; min-height:28px; padding:0 8px; border-radius:6px; font-size:12px; text-decoration:none; }
.lang-switch .lang-on { background:var(--accent-soft); color:var(--accent); font-weight:700; }
.lang-switch a { color:var(--text-secondary); font-weight:600; }
.lang-switch a:hover { color:var(--text); background:var(--surface-1); }


/* Back link (retour à la connexion) */
.back-link {
  display:inline-flex; align-items:center; gap:6px; font-size:13px; color:var(--accent);
  text-decoration:none; margin-top:16px; opacity:.9;
}
.back-link:hover { opacity:1; text-decoration:underline; }

/* Case « Rester connecté » */
.remember-row {
  display:flex; align-items:center; gap:8px;
  font-size:12.5px; color:var(--text-secondary);
  margin:8px 0 4px; cursor:pointer; user-select:none;
}
.remember-row input[type="checkbox"] {
  width:16px; height:16px; margin:0;
  accent-color:var(--accent);
  cursor:pointer;
}
.remember-hint {
  color:var(--text-muted); font-size:12px; font-style:italic;
}

/* Remplissage automatique du navigateur : Chrome et Edge repeignent le champ
   en blanc et ignorent « background ». Le seul levier est une ombre interne
   massive, qui recouvre ce fond ; la couleur du texte passe par
   -webkit-text-fill-color, « color » étant elle aussi écrasée. Sans cette
   règle, un identifiant mémorisé s'affiche en pavé blanc sur le thème sombre. */
input:-webkit-autofill,
input:-webkit-autofill:hover,
input:-webkit-autofill:focus,
input:-webkit-autofill:active {
  -webkit-box-shadow:0 0 0 1000px var(--surface-2, var(--surface)) inset !important;
          box-shadow:0 0 0 1000px var(--surface-2, var(--surface)) inset !important;
  -webkit-text-fill-color:var(--text-primary) !important;
  caret-color:var(--text-primary);
  border-radius:inherit;
  transition:background-color 9999s ease-in-out 0s;
}

/* Champs date/heure : le focus passe sur les segments internes (jour, mois,
   année, calendrier) où :focus-visible ne s'applique pas toujours. */
input:is([type=date],[type=time],[type=datetime-local],[type=month],[type=week]):is(:focus, :focus-within) {
  outline:2px solid #14110A !important; outline-offset:0 !important; box-shadow:0 0 0 4px #F0C876 !important; }