/* ============================================================
  login.css – Feuille de style principale
  SFCB eSecours – Login 2FA
  Couleurs : Bleu Pantone 301C #004C80 | Rouge Pantone 200C #BB2B35
  Police  : Outfit (identique à login original)
  ============================================================ */

/* ---- Variables — alignées sur esecours.css ---- */
:root {
 --brand-blue: 	#004C80;
 --brand-blue-dark: #003560;
 --brand-red: 	 #BB2B35;
 --brand-red-dark: #941f27;
 --brand-white: 	#FFFFFF;

 --cb-border:  rgba(255,255,255,.20);
 --cb-glass:	rgba(255,255,255,.10);
 --cb-glass-hv: rgba(255,255,255,.16);
 --cb-shadow:  0 8px 40px rgba(0,0,0,.50);
 --cb-radius:  14px;
 --transition: .22s cubic-bezier(.4,0,.2,1);
}

/* ---- Reset minimal ---- */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ---- Body / Fond — photo originale conservée ---- */
body {
 min-height: 100vh;
 font-family: 'Outfit', 'Segoe UI', sans-serif;
 background: #111 url('https://ebrigade.croixblanche.org//images/user-specific/uploaded_Visuelebrigade20261000x800-3.jpg')
		 	center/cover no-repeat fixed;
 display: flex;
 flex-direction: column;
 align-items: center;
 justify-content: center;
 padding: 1.5rem;
 position: relative;
 overflow: hidden;
}

/* Voile — dégradé bleu institutionnel cohérent avec la sidebar */
body::before {
 content: '';
 position: fixed; inset: 0;
 background: linear-gradient(135deg,
	rgba(0,0,0,.65)	0%,
	rgba(0,76,128,.35) 55%,
	rgba(0,0,0,.70)	100%);
 z-index: 0;
}

/* ---- Focus visible — anneau doré WCAG 2.1 AA (identique esecours.css) ---- */
*:focus-visible {
 outline: 3px solid #FFD700 !important;
 outline-offset: 2px !important;
 box-shadow: 0 0 0 3px rgba(255,200,0,.85) !important;
}

/* ---- Sélecteur de langue — toutes les langues conservées ---- */
#lang-bar {
 position: fixed;
 top: 1rem; right: 1.2rem;
 z-index: 20;
 display: flex;
 gap: .35rem;
 flex-wrap: wrap;
}
#lang-bar button {
 background: var(--cb-glass);
 color: var(--brand-white);
 border: 1px solid var(--cb-border);
 border-radius: 6px;
 padding: .25rem .6rem;
 font-size: .72rem;
 font-weight: 600;
 font-family: 'Outfit', 'Segoe UI', sans-serif;
 letter-spacing: .05em;
 cursor: pointer;
 transition: background var(--transition), transform var(--transition);
 backdrop-filter: blur(8px);
}
#lang-bar button:hover,
#lang-bar button.active {
 background: var(--brand-red);
 border-color: var(--brand-red-dark);
 transform: translateY(-1px);
}

/* ---- Carte principale ---- */
.card {
 position: relative; z-index: 10;
 width: 100%; max-width: 420px;
 background: var(--cb-glass);
 backdrop-filter: blur(24px) saturate(1.5);
 -webkit-backdrop-filter: blur(24px) saturate(1.5);
 border: 1px solid var(--cb-border);
 border-radius: var(--cb-radius);
 box-shadow: var(--cb-shadow), inset 0 1px 0 rgba(255,255,255,.12);
 padding: 2.4rem 2.2rem 2rem;
 animation: slideUp .45s ease both;
}

@keyframes slideUp {
 from { opacity: 0; transform: translateY(24px); }
 to  { opacity: 1; transform: translateY(0); }
}

/* ---- Logo / Entête ---- */
.logo-wrap {
 text-align: center;
 margin-bottom: 1.6rem;
}

/* Cercle bleu institutionnel (cohérent avec .logo-icon de la sidebar) */
.cross-icon {
 width: 62px; height: 62px;
 margin: 0 auto .8rem;
 background: var(--brand-blue);
 border-radius: 50%;
 display: flex; align-items: center; justify-content: center;
 border: 2px solid rgba(255,255,255,.25);
 box-shadow: 0 4px 20px rgba(0,76,128,.55);
}
.cross-icon svg { width: 36px; height: 36px; fill: #fff; }

.logo-wrap h1 {
 font-size: 1.55rem;
 font-weight: 800;
 color: var(--brand-white);
 letter-spacing: -.02em;
}
.logo-wrap p {
 font-size: .82rem;
 color: rgba(255,255,255,.65);
 margin-top: .2rem;
}

/* Barre décorative bleu→rouge sous le titre */
.logo-divider {
 height: 2px;
 width: 56px;
 margin: .65rem auto 0;
 background: linear-gradient(90deg, var(--brand-blue), var(--brand-red));
 border-radius: 1px;
}

/* ---- Indicateur d'étape ---- */
.step-dots {
 display: flex;
 justify-content: center;
 gap: 6px;
 margin-bottom: 1.2rem;
}
.step-dot {
 width: 24px;
 height: 4px;
 border-radius: 2px;
 background: rgba(255,255,255,.18);
 transition: background .3s;
}
.step-dot.done  { background: var(--brand-blue); }
.step-dot.active { background: var(--brand-red); }

/* ---- Champs de saisie ---- */
.field {
 margin-bottom: 1.1rem;
}
.field label {
 display: block;
 font-size: .78rem;
 font-weight: 600;
 color: rgba(255,255,255,.75);
 margin-bottom: .38rem;
 letter-spacing: .04em;
 text-transform: uppercase;
}
.field input {
 width: 100%;
 padding: .72rem 1rem;
 border-radius: 10px;
 border: 1px solid var(--cb-border);
 background: rgba(255,255,255,.09);
 color: var(--brand-white);
 font-size: .95rem;
 font-family: 'Outfit', 'Segoe UI', sans-serif;
 transition: border-color var(--transition), background var(--transition), box-shadow var(--transition);
 outline: none;
}
.field input::placeholder { color: rgba(255,255,255,.35); }
.field input:focus {
 border-color: var(--brand-blue);
 background: rgba(0,76,128,.18);
 box-shadow: 0 0 0 3px rgba(0,76,128,.28);
}

/* ---- Bouton principal (rouge — action primaire) ---- */
.btn-primary {
 width: 100%;
 padding: .82rem 1rem;
 background: var(--brand-red);
 color: #fff;
 border: none;
 border-bottom: 2px solid var(--brand-red-dark);
 border-radius: 10px;
 font-size: 1rem;
 font-weight: 700;
 font-family: 'Outfit', 'Segoe UI', sans-serif;
 letter-spacing: .03em;
 cursor: pointer;
 transition: background var(--transition), transform var(--transition), box-shadow var(--transition);
 position: relative;
 overflow: hidden;
}
.btn-primary:hover:not(:disabled) {
 background: var(--brand-red-dark);
 transform: translateY(-2px);
 box-shadow: 0 6px 20px rgba(187,43,53,.45);
}
.btn-primary:active:not(:disabled) { transform: translateY(0); }
.btn-primary:disabled { opacity: .55; cursor: not-allowed; }

/* Ripple */
.btn-primary::after {
 content: '';
 position: absolute; inset: 0;
 background: rgba(255,255,255,.08);
 opacity: 0;
 transition: opacity .2s;
}
.btn-primary:active::after { opacity: 1; }

/* ---- Bouton secondaire (style topbar-btn de esecours.css) ---- */
.btn-secondary {
 width: 100%;
 padding: .72rem 1rem;
 background: rgba(255,255,255,.08);
 color: rgba(255,255,255,.80);
 border: 1px solid rgba(255,255,255,.15);
 border-radius: 10px;
 font-size: .9rem;
 font-weight: 600;
 font-family: 'Outfit', 'Segoe UI', sans-serif;
 cursor: pointer;
 margin-top: .7rem;
 transition: background var(--transition), border-color var(--transition);
}
.btn-secondary:hover {
 background: var(--cb-glass-hv);
 border-color: rgba(255,255,255,.28);
}

/* ---- Méthode 2FA ---- */
.method-select {
 display: flex; gap: .6rem;
 margin-bottom: 1.2rem;
}
.method-btn {
 flex: 1;
 padding: .65rem .5rem;
 border-radius: 10px;
 border: 1.5px solid var(--cb-border);
 background: transparent;
 color: rgba(255,255,255,.75);
 font-size: .82rem;
 font-weight: 600;
 font-family: 'Outfit', 'Segoe UI', sans-serif;
 cursor: pointer;
 transition: all var(--transition);
 text-align: center;
}
.method-btn:hover { background: var(--cb-glass-hv); }
.method-btn.active {
 border-color: var(--brand-blue);
 background: rgba(0,76,128,.28);
 color: #fff;
}

/* ---- Checkbox remember ---- */
.remember-wrap {
 display: flex; align-items: center; gap: .5rem;
 margin: .9rem 0 1.1rem;
}
.remember-wrap input[type=checkbox] {
 width: 16px; height: 16px;
 accent-color: var(--brand-blue);
 cursor: pointer;
}
.remember-wrap label {
 font-size: .80rem;
 color: rgba(255,255,255,.70);
 cursor: pointer;
}

/* ---- Messages d'erreur / succès ---- */
.error-msg {
 background: rgba(187,43,53,.22);
 border: 1px solid rgba(187,43,53,.50);
 border-left: 3px solid var(--brand-red);
 border-radius: 8px;
 padding: .6rem .9rem;
 color: #ffb3b8;
 font-size: .83rem;
 margin-bottom: .9rem;
 display: none;
}
.error-msg.show { display: block; }

.success-msg {
 background: rgba(34,197,94,.18);
 border: 1px solid rgba(34,197,94,.40);
 border-left: 3px solid #22c55e;
 border-radius: 8px;
 padding: .6rem .9rem;
 color: #86efac;
 font-size: .83rem;
 margin-bottom: .9rem;
 display: none;
}
.success-msg.show { display: block; }

/* ---- Info ---- */
.info-text {
 font-size: .80rem;
 color: rgba(255,255,255,.55);
 text-align: center;
 margin-top: .5rem;
}

/* ---- QR-code enrôlement ---- */
.qr-wrap {
 text-align: center;
 margin: 1rem 0;
}
.qr-wrap svg {
 max-width: 180px;
 border-radius: 8px;
 background: #fff;
 padding: 8px;
}
.secret-display {
 font-family: 'Courier New', monospace;
 font-size: .78rem;
 background: rgba(0,0,0,.30);
 border: 1px solid var(--cb-border);
 border-radius: 6px;
 padding: .4rem .7rem;
 color: #e2e8f0;
 word-break: break-all;
 text-align: center;
 margin-top: .4rem;
}

/* ---- Séparateur ---- */
.divider {
 display: flex; align-items: center;
 gap: .8rem;
 margin: 1rem 0;
 color: rgba(255,255,255,.35);
 font-size: .75rem;
}
.divider::before, .divider::after {
 content: ''; flex: 1;
 height: 1px;
 background: var(--cb-border);
}

/* ---- Code OTP (6 chiffres) ---- */
.otp-input {
 text-align: center;
 font-size: 1.6rem;
 letter-spacing: .3em;
 font-weight: 700;
}

/* ---- Footer ---- */
.card-footer {
 text-align: center;
 margin-top: 1.4rem;
 padding-top: 1rem;
 border-top: 1px solid rgba(255,255,255,.10);
 font-size: .73rem;
 color: rgba(255,255,255,.38);
}
.card-footer a {
 color: rgba(255,255,255,.55);
 text-decoration: none;
 transition: color var(--transition);
}
.card-footer a:hover { color: var(--brand-white); }

/* ---- Spinner ---- */
.spinner {
 display: inline-block;
 width: 18px; height: 18px;
 border: 2.5px solid rgba(255,255,255,.35);
 border-top-color: #fff;
 border-radius: 50%;
 animation: spin .7s linear infinite;
 vertical-align: middle;
 margin-right: .4rem;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---- Étapes (transitions) ---- */
.step { display: none; }
.step.active {
 display: block;
 animation: fadeIn .3s ease both;
}
@keyframes fadeIn {
 from { opacity: 0; transform: translateY(10px); }
 to  { opacity: 1; transform: translateY(0); }
}

/* ---- Responsive ---- */
@media (max-width: 480px) {
 .card { padding: 2rem 1.4rem 1.6rem; }
 .logo-wrap h1 { font-size: 1.3rem; }
}

/* ---- Réduction de mouvement (cohérence avec esecours.css) ---- */
@media (prefers-reduced-motion: reduce) {
 *, *::before, *::after {
	transition-duration: 0.01ms !important;
	animation-duration: 0.01ms !important;
 }
}