/* =====================================================================
   25-auth.css — le panneau de connexion posé sur l'application floutée.

   Contrainte de départ : le voile est volontairement léger (voir
   --overlay-auth et --blur-auth). L'application reste donc perceptible
   derrière, et le panneau doit tenir tout seul contre un fond chargé.
   D'où le fond opaque, le liseré et l'ombre portée profonde : ce ne sont
   pas des effets, c'est ce qui rend le formulaire lisible.
   ===================================================================== */

.auth-panel{
    width:420px;
    max-width:calc(100vw - var(--space-8));
    max-height:calc(100vh - var(--space-8));
    overflow-y:auto;

    /* Opaque, jamais translucide : un formulaire de connexion qui laisse
       transparaître l'interface derrière devient illisible dès que le
       contenu de fond est contrasté. */
    background:var(--surface);

    border:1px solid var(--border);
    box-shadow:0 24px 70px rgba(15,23,42,.28), 0 2px 8px rgba(15,23,42,.10);
}

body.dark .auth-panel{
    box-shadow:0 24px 70px rgba(0,0,0,.55), 0 0 0 1px rgba(255,255,255,.06);
}

.auth-marque{
    display:flex;
    align-items:center;
    gap:var(--space-2);
    font-size:15px;
    font-weight:700;
    color:var(--primary);
    letter-spacing:.2px;
    margin-bottom:var(--space-6);
}

.auth-panel h1{
    font-size:24px;
    line-height:1.25;
}

.auth-sous-titre{
    margin-top:var(--space-2);
    font-size:14px;
    color:var(--text-light);
}

/* Libellé et lien « mot de passe oublié » sur la même ligne : le lien est
   là où l'on se pose la question, pas relégué en bas du formulaire. */
.label-ligne{
    display:flex;
    align-items:baseline;
    justify-content:space-between;
    gap:var(--space-3);
}

.lien-discret{
    background:none;
    border:none;
    padding:0;
    font-size:13px;
    font-weight:600;
    color:var(--primary);
    cursor:pointer;
    text-decoration:underline;
    text-underline-offset:2px;
}

.lien-discret:hover{ color:var(--primary-dark); }

/* ---------------------------------------------------------------------
   Champ de mot de passe révélable.
   Le bouton est posé dans le champ, et le champ reçoit une réserve à
   droite pour que le texte saisi ne passe jamais dessous.
   --------------------------------------------------------------------- */
.champ-mdp{
    position:relative;
    display:flex;
    align-items:center;
}

.champ-mdp input{
    width:100%;
    padding-right:var(--space-10);
}

.bascule-mdp{
    position:absolute;
    right:var(--space-3);
    display:flex;
    align-items:center;
    justify-content:center;
    width:var(--space-6);
    height:var(--space-6);
    background:none;
    border:none;
    padding:0;
    color:var(--text-light);
    cursor:pointer;
    border-radius:var(--radius-xs);
}

.bascule-mdp:hover{ color:var(--text); }
.bascule-mdp[aria-pressed="true"]{ color:var(--primary); }

/* ---------------------------------------------------------------------
   Jauge de robustesse.
   Quatre segments, et un texte qui dit ce qui manque — un indicateur
   coloré sans explication laisse l'utilisateur deviner quoi corriger.
   --------------------------------------------------------------------- */
/* Même piège : la jauge est posée `hidden` dans le balisage et ne se
   montre qu'à la première frappe. `display:flex` gagnait contre
   l'attribut, et elle s'affichait vide dès l'ouverture du formulaire. */
.jauge-mdp[hidden]{ display:none; }

.jauge-mdp{
    display:flex;
    flex-direction:column;
    gap:var(--space-1);
    margin-top:var(--space-1);
}

.jauge-barres{
    display:flex;
    gap:var(--space-1);
}

.jauge-barres span{
    flex:1;
    height:4px;
    border-radius:var(--radius-full);
    background:var(--border);
    transition:background .15s ease;
}

.jauge-mdp[data-score="1"] .jauge-barres span.remplie{ background:var(--danger); }
.jauge-mdp[data-score="2"] .jauge-barres span.remplie{ background:var(--warning); }
.jauge-mdp[data-score="3"] .jauge-barres span.remplie{ background:var(--secondary); }
.jauge-mdp[data-score="4"] .jauge-barres span.remplie{ background:var(--success); }

.jauge-texte{
    font-size:12.5px;
    color:var(--text-light);
    line-height:1.45;
}

/* ---------------------------------------------------------------------
   Message dans le formulaire.
   Une notification passagère oblige à recommencer pour relire l'erreur.
   Celui-ci reste jusqu'à la prochaine tentative.
   --------------------------------------------------------------------- */
.message-auth{
    margin-top:var(--space-4);
    padding:var(--space-3);
    border-radius:var(--radius-md);
    font-size:13.5px;
    line-height:1.5;
    border:1px solid transparent;
}

.message-auth--erreur{
    background:color-mix(in srgb, var(--danger) 12%, transparent);
    border-color:color-mix(in srgb, var(--danger) 35%, transparent);
    color:var(--text);
}

.message-auth--succes{
    background:color-mix(in srgb, var(--success) 12%, transparent);
    border-color:color-mix(in srgb, var(--success) 35%, transparent);
    color:var(--text);
}

.message-auth--info{
    background:var(--surface-accent);
    border-color:var(--border);
    color:var(--text);
}

/* V3, Cycle 141 — le type employé quand une chose a réussi et qu'une autre
   a échoué : l'adresse est confirmée, mais la session ouverte par le lien
   n'a pas pu être fermée. Ni un succès, ni une erreur.

   Ce type était employé par le contrôleur SANS que cette règle existe : le
   message se serait affiché sans sa couleur, et rien ne l'aurait dit. La
   garde `type-de-message-sans-style` le refuse désormais.

   Fond et encre pris à la même paire de tokens, comme l'exige le Cycle 133.
   Contraste mesuré : 6,37:1 de jour, 9,13:1 la nuit. */
.message-auth--avertissement{
    background:var(--surface-warning);
    border-color:color-mix(in srgb, var(--texte-warning) 30%, transparent);
    color:var(--texte-warning);
}

/* Témoin de verrouillage des majuscules.
   Première version : une bannière sous le champ, en couleur d'avertissement.
   Elle apparaissait et disparaissait à chaque frappe de la touche, en
   poussant tout ce qui suivait — c'est ce décalage qui gênait, pas
   l'information. Le témoin est donc posé DANS le champ, en position
   absolue : il ne participe pas au flux, rien ne bouge quand il s'affiche.
   Et sa couleur est neutre : signaler un état n'est pas signaler une faute. */
.temoin-maj{
    position:absolute;
    right:var(--space-10);
    font-size:10.5px;
    font-weight:700;
    letter-spacing:.6px;
    padding:2px 6px;
    border-radius:var(--radius-xs);
    background:var(--surface-muted);
    color:var(--text-light);
    border:1px solid var(--border);
    pointer-events:none;
    user-select:none;
}

.temoin-maj[hidden]{ display:none; }

/* Le champ réserve la place des deux éléments : le texte saisi ne passe
   jamais sous le témoin, même quand il apparaît en cours de frappe. */
.champ-mdp:has(.temoin-maj:not([hidden])) input{
    padding-right:calc(var(--space-10) + var(--space-8));
}

.auth-panel .primary-button{ margin-top:var(--space-5); }
.auth-panel .secondary-button{ margin-top:var(--space-3); }

@media (max-width:480px){
    .auth-panel{
        width:100%;
        padding:var(--space-6);
    }
}

/* ---------------------------------------------------------------------
   Onglets Email / Téléphone.
   Ils ne s'affichent que si un fournisseur SMS est configuré : proposer
   un mode de connexion qui ne peut pas fonctionner serait pire que de
   ne pas le proposer du tout. Voir js/core/config/auth.config.js.
   --------------------------------------------------------------------- */
.onglets-auth{
    display:flex;
    gap:var(--space-1);
    padding:var(--space-1);
    margin-top:var(--space-5);
    background:var(--surface-muted);
    border-radius:var(--radius-md);
}

.onglets-auth[hidden]{ display:none; }

.onglet-auth{
    flex:1;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:var(--space-2);
    padding:var(--space-2);
    border:none;
    background:none;
    border-radius:var(--radius-sm);
    font-size:14px;
    font-weight:600;
    color:var(--text-light);
    cursor:pointer;
}

.onglet-auth.actif{
    background:var(--surface);
    color:var(--text);
    box-shadow:var(--ombre-panneau);
}

/* Un code à six chiffres se relit chiffre par chiffre : espacement large
   et chasse fixe, pour qu'une erreur de saisie se voie. */
.champ-code{
    font-size:22px;
    font-weight:700;
    letter-spacing:.4em;
    text-align:center;
    font-variant-numeric:tabular-nums;
}

/* Liste d'aide de l'écran « adresse oubliée ». */
.liste-aide{
    margin:var(--space-5) 0 0;
    padding-left:var(--space-5);
    display:flex;
    flex-direction:column;
    gap:var(--space-3);
    font-size:14px;
    line-height:1.55;
    color:var(--text-light);
}

.liste-aide strong{ color:var(--text); }
.liste-aide li[hidden]{ display:none; }