/* =====================================================================
   connexion.css — PAGES DE CONNEXION & DE COMPTE
   ---------------------------------------------------------------------
   ROLE      : styles specifiques aux pages d'authentification et de compte
               (saisie/affichage du mot de passe, saisie du code de
               verification avec le bloc de contact associe).
   CHARGE    : uniquement sur les pages concernees (connexion, verification
               du code, creation/changement/reinitialisation de mot de passe).
   DEPEND DE : base.css (variables, .auth-card, .form-input, boutons...).
   SOURCE    : sections "PASSWORD" et "VERIFY CODE - CONTACT BLOCK"
               de l'ancien main.css, reprises a l'identique.
   ===================================================================== */


/* =========================
   MOT DE PASSE (champ + bouton afficher/masquer)
   ========================= */

.password-input-wrap{
    position: relative;
}

.password-input-wrap .form-input{
    padding-right: 3.2rem;
}

.password-toggle{
    position: absolute;
    top: 50%;
    right: 0.85rem;
    transform: translateY(-50%);
    border: 0;
    background: transparent;
    color: var(--brand-muted);
    cursor: pointer;
    font-size: 1rem;
    padding: 0.35rem;
}

.password-toggle:hover{
    color: var(--brand-brown);
}


/* =========================
   SAISIE DU CODE — bloc de contact associe
   NB : .auth-card est defini dans base.css ; ici on ne gere que
   le bloc de contact place juste apres la carte de connexion.
   ========================= */

.auth-card ~ .contact-form-card{
    max-width: 720px;
    margin: 1.8rem auto 0;
}

.auth-card ~ .contact-form-card .intro{
    margin-bottom: 1.4rem;
}