/* =========================================================
   Écrans d'authentification
   Pas de rail ni de sous-menu : un bloc centré sur un fond
   de marque. Le kit de formulaire vient d'app.css.

   Aucune création de compte n'est possible ici : les comptes
   sont créés par l'administration, qui envoie un lien
   d'activation. Les écrans ne proposent donc pas d'inscription.

   Les pages publiques (démo, contact) ont leur propre feuille,
   public.css : leur mise en page est scindée, pas centrée, et
   mélanger les deux dans un même fichier obligeait à surcharger
   les règles de centrage.
   ========================================================= */

/* ===== 1. MISE EN PAGE CENTRÉE ===== */
.auth {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--sp-5);
    min-height: 100vh;
    padding: var(--sp-6) var(--sp-4);

    /* Deux voiles très légers : la page reste sobre, mais pas neutre */
    background-color: var(--bg-app);
    background-image:
        radial-gradient(circle at 15% 10%, rgba(21, 36, 83, .07), transparent 45%),
        radial-gradient(circle at 85% 85%, rgba(41, 133, 71, .09), transparent 45%);
}

.auth__logo img { height: 30px; width: auto; }

.auth__legal {
    font-size: 12px;
    color: var(--text-muted);
    text-align: center;
}

.auth__legal a { color: var(--text-muted); }
.auth__legal a:hover { text-decoration: underline; }

/* ===== 2. LE BLOC ===== */
.auth-card {
    width: 100%;
    max-width: 400px;
    padding: var(--sp-5);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background-color: var(--bg-panel);
    box-shadow: 0 8px 32px rgba(21, 36, 83, .08);
}

.auth-card__title { font-size: 21px; font-weight: 600; text-align: center; }

.auth-card__sub {
    margin-top: var(--sp-2);
    margin-bottom: var(--sp-5);
    font-size: 13px;
    color: var(--text-muted);
    line-height: 1.5;
    text-align: center;
}

.auth-card__form { display: flex; flex-direction: column; gap: var(--sp-4); }

.auth-card__submit { width: 100%; padding: 11px 16px; }

.auth-card__foot {
    margin-top: var(--sp-5);
    padding-top: var(--sp-4);
    border-top: 1px solid var(--border);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
    line-height: 1.5;
}

.auth-card__foot a { color: var(--brand-green); font-weight: 500; }
.auth-card__foot a:hover { text-decoration: underline; }

/* ===== 3. CHAMP MOT DE PASSE ===== */
.pwd { position: relative; }
.pwd .form-control { padding-right: 40px; }

.pwd__toggle {
    position: absolute;
    top: 50%;
    right: 6px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    cursor: pointer;
}

.pwd__toggle:hover { background-color: var(--bg-subtle); color: var(--text); }

/* Force du mot de passe : la barre dit ce que le texte n'ose pas */
.pwd-meter { display: flex; gap: 4px; margin-top: 6px; }
/* `display: flex` l'emporterait sur [hidden] : il faut le dire. */
.pwd-meter[hidden] { display: none; }

.pwd-meter__bar {
    flex: 1 1 auto;
    height: 4px;
    border-radius: 999px;
    background-color: var(--border);
}

.pwd-meter__bar.is-on { background-color: var(--pwd-ink, var(--brand-green)); }

.pwd-meter--weak   { --pwd-ink: #b02a2a; }
.pwd-meter--medium { --pwd-ink: #c8860d; }
.pwd-meter--strong { --pwd-ink: var(--brand-green); }

.pwd-hint { margin-top: 5px; font-size: 11px; color: var(--text-muted); }

/* ===== 4. LIGNE OPTIONS ===== */
.auth-options {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--sp-3);
    font-size: 13px;
}

.auth-options a { color: var(--brand-green); }
.auth-options a:hover { text-decoration: underline; }

/* ===== 5. CODE DE VÉRIFICATION ===== */
.code-input { display: flex; gap: var(--sp-2); justify-content: space-between; }

.code-input input {
    width: 100%;
    height: 52px;
    padding: 0;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background-color: var(--bg-panel);
    font: inherit;
    font-size: 21px;
    font-weight: 600;
    text-align: center;
    font-variant-numeric: tabular-nums;
    color: var(--text);
}

.code-input input:focus {
    outline: none;
    border-color: var(--brand-green);
    box-shadow: 0 0 0 3px var(--brand-green-light);
}

.code-resend {
    margin-top: var(--sp-3);
    font-size: 13px;
    color: var(--text-muted);
    text-align: center;
}

.code-resend a { color: var(--brand-green); font-weight: 500; }

/* ===== 6. MESSAGE D'ÉTAT ===== */
.auth-note {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-3);
    padding: var(--sp-3);
    border-left: 3px solid var(--note-ink, var(--border));
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: var(--note-bg, var(--bg-subtle));
    font-size: 12px;
    line-height: 1.5;
}

.auth-note i { color: var(--note-ink); font-size: 14px; margin-top: 1px; }

.auth-note--info    { --note-ink: #2f6fae; --note-bg: rgba(47, 111, 174, .07); }
.auth-note--success { --note-ink: var(--brand-green); --note-bg: var(--brand-green-light); }
.auth-note--warning { --note-ink: #c8860d; --note-bg: rgba(200, 134, 13, .08); }
.auth-note--danger  { --note-ink: #b02a2a; --note-bg: rgba(176, 42, 42, .07); }

/* Un encart suivi d'une action : sans cette marge, le bouton colle
   au bandeau et les deux se lisent comme un seul bloc. */
.auth-note + .auth-card__form { margin-top: var(--sp-4); }

/* L'erreur du serveur, posee dans le formulaire.
   Elle vit au-dessus des champs, dans le meme langage que les encarts
   ci-dessus : un liseré, un fond tres clair, le texte en pleine page. Un
   message passager en haut a droite se ratait — on regarde le champ qu'on
   vient de remplir, pas le coin de l'ecran. */
.auth-error {
    display: flex;
    align-items: flex-start;
    gap: var(--sp-2);
    padding: var(--sp-3);
    border-left: 3px solid #b02a2a;
    border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
    background-color: rgba(176, 42, 42, .07);
    color: #b02a2a;
    font-size: 13px;
    line-height: 1.5;
}

/* [hidden] ne suffit pas face au display du dessus : la regle du navigateur
   perd contre une classe. Sans cette ligne, l'emplacement vide se voit. */
.auth-error[hidden] { display: none; }

/* Le champ refuse. « border-danger » vient des anciens gabarits Bootstrap :
   c'est form.js qui le pose, autant lui donner un sens ici. */
.auth-card__form .border-danger,
.form-control.border-danger {
    border-color: #b02a2a;
    box-shadow: 0 0 0 3px rgba(176, 42, 42, .10);
}

/* ===== 7. ÉCRAN BLOQUANT ===== */
.auth-block { text-align: center; }

.auth-block__icon {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 60px;
    height: 60px;
    margin-bottom: var(--sp-4);
    border-radius: 50%;
    background-color: rgba(176, 42, 42, .10);
    color: #b02a2a;
    font-size: 26px;
}

/* ===== 8. RESPONSIVE ===== */
@media (max-width: 480px) {
    .auth { padding: var(--sp-5) var(--sp-3); }
    .auth-card { padding: var(--sp-4); }
    .code-input input { height: 46px; font-size: 18px; }
}