/* ───── Overrides spécifiques login.html (mappe les classes existantes
   sur le système design cockpit, sans changer le HTML/JS) ───── */
.page{min-height:100vh;display:flex;flex-direction:column;position:relative;z-index:1}

/* Header */
.header{padding:18px 32px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border-glass);background:var(--glass);backdrop-filter:blur(20px) saturate(160%);-webkit-backdrop-filter:blur(20px) saturate(160%)}
.logo{display:flex;align-items:center;gap:10px;text-decoration:none}
.logo-mark{width:32px;height:32px;background:linear-gradient(135deg,var(--copper) 0%,var(--gold) 100%);border-radius:9px;display:grid;place-items:center;font-family:'JetBrains Mono',monospace;font-weight:700;font-size:13px;color:var(--bg-deep);box-shadow:0 6px 20px rgba(155,27,48,.45),inset 0 1px 0 rgba(255,255,255,.4)}
.logo-text{font-size:17px;font-weight:700;color:var(--cream);letter-spacing:-0.02em}
.header-link{font-size:13px;color:var(--text-3)}
.header-link a{color:var(--copper-bright);text-decoration:underline;font-weight:500}
.header-link a:hover{color:var(--gold)}

/* Main + card glass */
.main{flex:1;display:flex;align-items:center;justify-content:center;padding:40px 20px}
.card{background:var(--glass-strong);backdrop-filter:blur(28px) saturate(180%);-webkit-backdrop-filter:blur(28px) saturate(180%);border:1px solid var(--border-glass);border-radius:var(--r-xl);width:100%;max-width:460px;overflow:hidden;box-shadow:0 30px 80px -20px rgba(0,0,0,.6),inset 0 1px 0 rgba(255,255,255,.05)}
/* Wrapper card : juste centrage horizontal (la flèche est en fixed à part) */
.card-wrap{
  width:100%;
  max-width:460px;
  margin:0 auto;
}
/* Flèche back : fixed top-left du viewport — ne bouge JAMAIS,
   peu importe la taille/le scroll/le contenu de la card. */
.card-back{
  position:fixed;
  top:max(24px, env(safe-area-inset-top));
  left:max(24px, env(safe-area-inset-left));
  z-index:100;
  width:42px; height:42px;
  display:inline-grid; place-items:center;
  border-radius:999px;
  background:rgba(20,21,22,0.62);
  -webkit-backdrop-filter:blur(20px) saturate(160%);
  backdrop-filter:blur(20px) saturate(160%);
  border:1px solid rgba(255,255,255,0.1);
  color:var(--text-2);
  text-decoration:none;
  border-bottom:none !important;
  box-shadow:0 8px 24px rgba(0,0,0,0.25);
  transition:transform .25s cubic-bezier(.16,1,.3,1), background .25s, border-color .25s, color .25s, box-shadow .25s;
}
.card-back:hover{
  background:rgba(155,27,48,0.18);
  border-color:rgba(155,27,48,0.5);
  color:var(--copper-bright);
  transform:translateX(-3px);
  box-shadow:0 12px 32px rgba(155,27,48,0.25);
}
@media (max-width:600px){
  .card-back{ top:14px; left:14px; width:38px; height:38px; }
}

.card-head{padding:36px 36px 0;text-align:center}
.card-head h1{font-family:'Inter',sans-serif;font-size:26px;font-weight:700;letter-spacing:-0.025em;color:var(--cream);margin-bottom:8px}
.card-head p{font-size:14px;color:var(--text-2);line-height:1.55}

.card-body{padding:24px 36px 36px}

/* Tabs */
.tabs{display:flex;background:rgba(255,255,255,0.03);border-radius:var(--r-md);padding:4px;margin:20px 36px 0;border:1px solid var(--border-glass)}
.tab{flex:1;padding:10px;text-align:center;font-size:13px;font-weight:600;border-radius:var(--r-sm);cursor:pointer;color:var(--text-3);transition:all .25s;font-family:'Inter',sans-serif}
.tab:hover{color:var(--cream)}
.tab.active{background:linear-gradient(135deg,var(--copper) 0%,var(--copper-bright) 100%);color:var(--bg-deep);box-shadow:0 4px 14px rgba(155,27,48,0.35)}

/* Form */
.form-group{margin-bottom:18px}
.form-group label{display:block;font-size:11px;color:var(--text-3);margin-bottom:6px;text-transform:uppercase;letter-spacing:.12em;font-family:'JetBrains Mono',monospace;font-weight:500}
.form-group input{width:100%;padding:14px 16px;background:rgba(255,255,255,0.03);border:1px solid var(--border-glass);border-radius:var(--r-md);color:var(--cream);font-family:'Inter',sans-serif;font-size:15px;outline:none;transition:border-color .25s,background .25s,box-shadow .25s}
.form-group input:focus{border-color:var(--copper-bright);background:rgba(255,255,255,0.05);box-shadow:0 0 0 3px rgba(155,27,48,0.18)}
.form-group input::placeholder{color:var(--text-4)}
.form-error{font-size:12px;color:var(--red);margin-top:6px;display:none}
.form-group.error input{border-color:var(--red);box-shadow:0 0 0 3px rgba(239,68,68,0.12)}
.form-group.error .form-error{display:block}

.password-wrap{position:relative}
.password-wrap input{padding-right:44px}
.password-toggle{position:absolute;right:12px;top:50%;transform:translateY(-50%);background:none;border:none;color:var(--text-3);cursor:pointer;font-size:16px;padding:6px;border-radius:6px;transition:color .2s;display:flex;align-items:center;justify-content:center}
.password-toggle:hover{color:var(--copper-bright)}
.password-toggle svg{width:18px;height:18px}

.btn-submit{width:100%;padding:15px;border:none;border-radius:var(--r-sm);font-family:'Inter',sans-serif;font-size:14px;font-weight:600;cursor:pointer;transition:transform .25s,box-shadow .25s,background .25s;letter-spacing:-0.01em}
.btn-submit.primary{background:linear-gradient(135deg,var(--copper) 0%,var(--copper-bright) 100%);color:var(--bg-deep);box-shadow:0 12px 32px rgba(155,27,48,.35),inset 0 1px 0 rgba(255,255,255,.3)}
.btn-submit.primary:hover{filter:brightness(1.08);transform:translateY(-1px);box-shadow:0 16px 40px rgba(155,27,48,.5),inset 0 1px 0 rgba(255,255,255,.4)}
.btn-submit:disabled{opacity:.55;cursor:not-allowed;transform:none;box-shadow:0 6px 18px rgba(155,27,48,.2)}

.divider{display:flex;align-items:center;gap:14px;margin:24px 0;color:var(--text-4);font-size:11px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.14em}
.divider::before,.divider::after{content:'';flex:1;height:1px;background:var(--border-glass)}

.alert{padding:14px 18px;border-radius:var(--r-md);font-size:14px;line-height:1.5;margin-bottom:18px;display:none}
.alert.error{background:rgba(239,68,68,.1);color:#fca5a5;border:1px solid rgba(239,68,68,.3);display:block}
.alert.success{background:rgba(16,185,129,.1);color:#6ee7b7;border:1px solid rgba(16,185,129,.3);display:block}

.trial-badge{display:inline-block;padding:5px 12px;border-radius:var(--r-pill);font-size:11px;font-weight:500;background:rgba(155,27,48,.12);color:var(--copper-bright);border:1px solid rgba(155,27,48,.3);margin-top:10px;font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.1em}

/* Footer */
.footer{padding:20px 32px;text-align:center;font-size:11px;color:var(--text-4);border-top:1px solid var(--border-glass);font-family:'JetBrains Mono',monospace}
.footer a{color:var(--text-3);text-decoration:none;transition:color .2s}
.footer a:hover{color:var(--copper-bright)}

/* Liens dans la card (CGU, politique, "Mot de passe oublié", etc.) :
   cuivre cohérent avec le thème, jamais de bleu navigateur par défaut */
.card a{
  color:var(--copper-bright) !important;
  text-decoration:none;
  border-bottom:1px solid rgba(155,27,48,0.35);
  transition:color .2s, border-color .2s;
}
.card a:hover{
  color:var(--gold) !important;
  border-bottom-color:rgba(155,27,48,0.55);
}
.footer a:hover{color:var(--copper-bright)}

/* Loading overlay (palette cockpit) */
.loading-overlay{position:fixed;inset:0;background:rgba(1,1,2,0.9);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;flex-direction:column;gap:14px;z-index:100;transition:opacity .3s}
.loading-overlay.hidden{opacity:0;pointer-events:none}
.spinner{width:32px;height:32px;border:3px solid var(--border-glass);border-top-color:var(--copper-bright);border-radius:50%;animation:spin .7s linear infinite}
.loading-overlay div:last-child{font-size:12px;color:var(--text-3);font-family:'JetBrains Mono',monospace;text-transform:uppercase;letter-spacing:.12em}
@keyframes spin{to{transform:rotate(360deg)}}

/* 2FA step inline (override) */
#twofa-step{background:rgba(155,27,48,0.08) !important;border:1px solid rgba(155,27,48,0.3) !important;border-radius:var(--r-lg) !important;padding:24px !important}
#twofa-code,#twofa-backup{background:rgba(255,255,255,0.04) !important;border-color:var(--border-glass) !important;border-radius:var(--r-md) !important;color:var(--cream) !important;font-family:'JetBrains Mono',monospace !important}

/* Responsive */
@media(max-width:480px){
  .card{border-radius:var(--r-lg);max-width:100%}
  .card-head{padding:28px 24px 0}
  .card-body{padding:20px 24px 24px}
  .tabs{margin:18px 24px 0}
  .header{padding:14px 18px}
}

/* ronde 06/10/2026 : le bouton support (fixe, bas droite) recouvrait le lien CGU sur téléphone */
@media (max-width:640px){.footer{padding-right:84px;padding-left:16px}}