/* ==========================================================================
     Thème & tokens (ne pas renommer)
     ========================================================================== */
  :root{
    --panel-bg:#0b1222; --panel-bd:#1f2937;
    --text:#e5e7eb; --muted:#9ca3af; --dim:#6b7280;
    --focus:#334155; --primary:#2563eb;
    --shadow:0 10px 24px rgba(0,0,0,.25);
  }

  /* ==========================================================================
     Layout global (centrage vertical + respect des safe-areas)
     ========================================================================== */
  .auth-wrapper{
    min-height: calc(100vh - var(--navbar-h, 0px));
    padding:
      max(16px, env(safe-area-inset-top))
      max(16px, env(safe-area-inset-right))
      max(16px, env(safe-area-inset-bottom))
      max(16px, env(safe-area-inset-left));
    display: grid;
    place-items: center;
  }

  /* ==========================================================================
     Carte d'authentification (design conservé)
     ========================================================================== */
  .auth-card{
    width: min(420px, 92vw);
    background: var(--panel-bg);
    border: 1px solid var(--panel-bd);
    border-radius: 14px;
    box-shadow: var(--shadow);
  }
  .auth-card header{ padding:18px 18px 0 18px; }
  .brand{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
  .brand .dot{ width:10px; height:10px; border-radius:50%; background:var(--primary); box-shadow:0 0 12px rgba(37,99,235,.6); }
  .auth-card h1{ font-size:1.25rem; margin:0; }
  .sub{ margin:.25rem 0 0 0; color:var(--muted); font-size:.95rem; }

  /* ==========================================================================
     Formulaire & champs
     ========================================================================== */
  form{ padding:18px; display:grid; gap:12px; }
  label{ display:block; font-size:.9rem; color:var(--muted); margin-bottom:6px; }
  .field{ display:grid; gap:6px; }

  .input{
    width:100%; padding:10px 12px; border-radius:10px;
    background:#0b1222; color:var(--text);
    border:1px solid var(--panel-bd);
    font-size:1rem;
  }
  .input:focus{
    outline:none;
    border-color:var(--focus);
    box-shadow:0 0 0 3px rgba(51,65,85,.35);
  }

  .row{ display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; }
  .checkbox{ display:flex; align-items:center; gap:8px; color:var(--muted); }
  .link{ color:var(--muted); text-decoration:none; }
  .link:hover{ color:#fff; text-decoration:underline; }

  .btn{
    appearance:none;
    border:1px solid var(--primary);
    background:var(--primary);
    color:#fff;
    border-radius:10px;
    padding:10px 14px;
    font-size:1rem;
    cursor:pointer;
    transition:filter .15s ease;
    width:100%;
  }
  .btn:hover{ filter:brightness(1.06); }

  /* Messages d’erreur (champ & non-field) */
  .errors, .nonfield{
    background:rgba(220, 38, 38, .10);
    border:1px solid rgba(220,38,38,.35);
    color:#fecaca;
    padding:10px 12px;
    border-radius:10px;
    font-size:.95rem;
  }

  /* Petit texte d’aide (sécurité, cookies…) */
  .help{ color:var(--dim); font-size:.85rem; margin:6px 0 0; text-align:center; }

  /* Afficher/masquer mot de passe (ne pas renommer les classes) */
  .pass-wrap{ position:relative; }
  .toggle-pass{
    position:absolute; right:10px; top:50%; transform:translateY(-50%);
    font-size:.85rem; color:var(--muted); background:none; border:0; cursor:pointer;
  }

  /* ==========================================================================
     Responsive
     ========================================================================== */
  /* Si ta navbar est fixe, définis la hauteur globale:
     :root { --navbar-h: 64px; } */
  @media (max-width: 768px){
    .auth-card{ width: min(460px, 94vw); }
    .auth-card h1{ font-size:1.15rem; }
    form{ gap: 14px; }
  }
  @media (max-width: 480px){
    .auth-card{ width: 100%; max-width: 420px; }
    .auth-card header{ padding:16px 16px 0 16px; }
    form{ padding:16px; gap:12px; }
    .row{ gap:8px; }
    .btn{ padding:12px 14px; font-size:1rem; }
  }
  @media (max-width: 360px){
    .brand{ gap:8px; }
    .auth-card h1{ font-size:1.05rem; }
    .input{ font-size:.95rem; padding:10px 11px; }
  }

  /* Respecte les préférences utilisateur (réduction d'animations) */
  @media (prefers-reduced-motion: reduce){
    *{ animation: none!important; transition: none!important; }
  }

  /* Cache le message global "Saisissez un nom d’utilisateur..." */
  ul.errorlist.nonfield {
    display: none;
  }