/* Class liées composants LOGIN */
body {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre verticalement DANS la modale */
    align-items: center; /* Centre horizontalement DANS la modale */
    text-align: center;
    width: 100%; /* Prend toute la largeur de la modale */
    min-height: 300px; /* Ou une hauteur fixe adaptée à ton contenu */
    margin: 0 auto;
    
}

form, .container-form {
    display: flex;
    flex-direction: column;
    justify-content: center; /* Centre verticalement DANS la modale */
    align-items: center; /* Centre horizontalement DANS la modale */
    align-content: center;
    text-align: center;
    width: 50%;
    min-width: 320px;
    height: fit-content;
    padding: 0.5rem;
    overflow: hidden;
    margin-top: auto;
    margin-bottom: auto;
    /* container-type: inline-size; On dit au navigateur de surveiller la largeur de ce bloc */
}


.container-logo-oauth {
    background-color: transparent;
}

.container-login {
    width: 40%;
    height: auto;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.title-modern {
    text-align: center;
    color: #ec6907;
    opacity: 0.8;
    font-weight: 800;
    letter-spacing: 0.5px;
    text-transform: uppercase;
    margin: 1rem auto;
}

.font-clamp-big {
    /*font-size: var(--f-size-title);*/
    font-size: clamp(1rem, 5vw, 1.8rem);
}

.font-clamp-small {
    /*font-size: var(--f-size-small);*/
    font-size: clamp(1rem, 3vw, 1.5rem);
}

.title-login h1 {
    color: var(--color-white);
}


.container-btn-submit {
    display:flex;
    flex-direction:row;
    width:90%;
    justify-content:center;
    align-content:center;
    text-align:center;
    margin: 2rem auto 1rem;
}


/************************************/
/* PERSO : INPUT password + bouton */

/* le wrapper du bouton */
.password-wrapper {
    display: flex;
    align-items: center;
    gap: 0.25rem;
    pointer-events: none; /* IMPORTANT : le wrapper lui-même ne capture pas les clics */
}

/* le bouton reste cliquable mais hors du flux pour le label */
.password-toggle-btn {
    pointer-events: all; /* le bouton reste cliquable */
    background: transparent;
    border: none;
    cursor: pointer;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
}


.password-toggle-btn:focus {
    outline: none;
}

    .password-toggle-btn .btn-ico-visible {
        margin-left: -2.2rem;
        width: 60px;
        height: 60px;
    }

/***************************/


@media (min-width: 768px) and (max-width: 1439px) {
    /* Class liées composants LOGIN */
    .container-login {
        width: 70%; /* C'est maintenant spécifique à la tablette */
        height: auto;
        display: flex;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }

    .logo-CA-login {
        width: 8rem;
        height: auto;
        align-items: center;
        /*margin: 1rem;*/
    }
}