/* =========================================================
   FORMULAIRE LOGIN
========================================================= */

.login-form-container {

    width: 100%;

}


/* =========================================================
   GROUPE
========================================================= */

.login-form-group {

    margin-bottom: 22px;

}


/* =========================================================
   LABEL
========================================================= */

.login-label {

    display: block;

    margin-bottom: 8px;

    color: #343a40;

    font-size: 14px;

    font-weight: 600;

}


.login-label i {

    width: 20px;

    margin-right: 5px;

    color: #198754;

}


/* =========================================================
   CONTENEUR INPUT
========================================================= */

.login-input-wrapper {

    position: relative;

    width: 100%;

}


/* =========================================================
   ICÔNE À GAUCHE
========================================================= */

.login-input-icon {

    position: absolute;

    left: 14px;

    top: 50%;

    transform: translateY(-50%);

    z-index: 2;

    color: #9ca3af;

    pointer-events: none;

}


/* =========================================================
   INPUT / SELECT
========================================================= */

.login-input {

    display: block;

    width: 100%;

    min-height: 46px;

    box-sizing: border-box;

    padding: 11px 14px 11px 42px;

    border: 1px solid #ced4da;

    border-radius: 8px;

    background-color: #ffffff;

    color: #212529;

    font-size: 14px;

    outline: none;

    transition:
        border-color 0.2s ease,
        box-shadow 0.2s ease;

}


.login-input:focus {

    border-color: #198754;

    box-shadow:
        0 0 0 3px rgba(25, 135, 84, 0.12);

}


/* =========================================================
   SELECT
========================================================= */

.login-select {

    cursor: pointer;

    appearance: auto;

}


/* =========================================================
   MOT DE PASSE
========================================================= */

.login-password {

    padding-right: 48px;

}


/* =========================================================
   BOUTON AFFICHER MOT DE PASSE
========================================================= */

.login-password-toggle {

    position: absolute;

    right: 7px;

    top: 50%;

    transform: translateY(-50%);

    width: 38px;

    height: 36px;

    display: flex;

    align-items: center;

    justify-content: center;

    border: none;

    border-radius: 6px;

    background: transparent;

    color: #6c757d;

    cursor: pointer;

}


.login-password-toggle:hover {

    background: #f1f3f5;

    color: #198754;

}


.login-password-toggle:focus {

    outline: none;

    box-shadow:
        0 0 0 2px rgba(25, 135, 84, 0.15);

}


/* =========================================================
   ERREURS
========================================================= */

.login-error {

    display: block;

    margin-top: 6px;

    color: #dc3545;

    font-size: 13px;

}


/* =========================================================
   SE SOUVENIR
========================================================= */

.login-remember {

    display: flex;

    align-items: center;

    margin-bottom: 22px;

}


.login-checkbox {

    width: 17px;

    height: 17px;

    margin: 0;

    cursor: pointer;

    accent-color: #198754;

}


.login-remember-label {

    margin-left: 8px;

    margin-bottom: 0;

    color: #495057;

    font-size: 14px;

    cursor: pointer;

}


/* =========================================================
   BOUTON CONNEXION
========================================================= */

.login-button {

    width: 100%;

    min-height: 46px;

    display: flex;

    align-items: center;

    justify-content: center;

    gap: 10px;

    padding: 11px 20px;

    border: none;

    border-radius: 8px;

    background: #198754;

    color: #ffffff;

    font-size: 15px;

    font-weight: 600;

    cursor: pointer;

    transition:
        background-color 0.2s ease,
        transform 0.1s ease,
        box-shadow 0.2s ease;

}


.login-button:hover {

    background: #146c43;

    box-shadow:
        0 4px 10px rgba(25, 135, 84, 0.20);

}


.login-button:active {

    transform: scale(0.99);

}


.login-button i {

    font-size: 14px;

}


/* =========================================================
   STATUT SESSION
========================================================= */

.login-status {

    display: block;

    margin-bottom: 20px;

    padding: 10px 12px;

    border-radius: 7px;

    background: #d1e7dd;

    color: #0f5132;

    font-size: 14px;

}


/* =========================================================
   FOOTER
========================================================= */

.login-footer {

    margin-top: 24px;

    padding-top: 20px;

    border-top: 1px solid #e9ecef;

    text-align: center;

}


.login-footer p {

    margin: 0;

    color: #6c757d;

    font-size: 12px;

}


/* =========================================================
   MOBILE
========================================================= */

@media (max-width: 576px) {

    .login-form-container {

        width: 100%;

    }

    .login-input {

        min-height: 44px;

    }

}