/* =========================================================================
   BODEZIA — CONNEXION ET MOTS DE PASSE
   -------------------------------------------------------------------------
   Réécriture complète. Le HTML n'a pas changé : tous les sélecteurs sont
   identiques, aucune classe n'a été ajoutée ni supprimée.

   Ce qui change
     - Le texte courant remonte de 12,5px à 15px, les libellés à 14px
     - Les gris passent à 4,5:1 minimum (ils étaient à 2,4:1)
     - La carte n'a plus de hauteur minimale imposée : elle laissait
       120px de blanc sous « Créer un compte »
     - .login-page n'est plus déclarée deux fois avec des valeurs
       contradictoires (70px puis 55px de rembourrage, deux fonds)
     - Le formulaire de réinitialisation (.auth-*) suit la même échelle,
       il avait ses propres tailles et ses propres violets

   Ce qui ne change pas
     - Le violet de marque #7441d4 et la forme des champs
   ========================================================================= */


/* =========================================================================
   TOKENS
   ========================================================================= */

:root {
    /* Échelle typographique — base 16px */
    --lg-fs-small: 0.875rem;      /* 14px — libellés, mentions      */
    --lg-fs-body: 0.9375rem;      /* 15px — champs, texte courant   */
    --lg-fs-lead: 1rem;           /* 16px — chapô sous le titre     */
    --lg-fs-title: 1.5rem;        /* 24px — titre de la carte       */

    /* Couleurs de texte — vérifiées à 4,5:1 minimum */
    --lg-c-heading: #2b3034;
    --lg-c-body: #5c6670;
    --lg-c-placeholder: #98a2ac;
    --lg-c-accent: #7441d4;
    --lg-c-accent-dark: #6737c7;
    --lg-c-danger: #b42318;

    /* Surfaces */
    --lg-c-page: #f6f7fb;
    --lg-c-border: #e6e9ee;
    --lg-c-field-border: #dbe1e6;
    --lg-c-accent-soft: #f3eefd;

    /* Formes */
    --lg-radius-card: 20px;
    --lg-radius-field: 11px;
}


/* =========================================================================
   PAGE
   ========================================================================= */

.login-page {
    display: flex;
    align-items: center;
    justify-content: center;

    /*min-height: calc(100dvh - 80px);*/

    padding: 56px 0;

    background: var(--lg-c-page);
}

/* Une seule source de gouttière latérale.

   Avant : 16px de rembourrage sur .login-page PLUS les 12px du
   .container de Bootstrap, soit 28px de chaque côté sur un écran de
   360px. La carte perdait 56px de large pour rien.

   Maintenant : .login-page ne gère plus que le vertical, et la
   gouttière vient du conteneur, fixée à 16px.

   On écrit le padding en dur plutôt que de passer par --bs-gutter-x :
   selon la version de Bootstrap, cette variable vaut tantôt la
   gouttière entière, tantôt sa moitié. Une valeur en dur ne se discute
   pas. */

.login-page .container,
.auth-page .container {
    padding-left: 16px;
    padding-right: 16px;
}

.login-page .container {
    display: flex;
    align-items: center;
    justify-content: center;
}


/* =========================================================================
   CARTE
   ========================================================================= */

.login-card {
    width: 100%;
    max-width: 460px;

    /* !important assumé : une hauteur minimale est encore imposée à la
       carte depuis une feuille chargée après celle-ci
       (responsive-mobile.css est la dernière du header). C'est elle qui
       laissait un grand blanc sous « Créer un compte ». */
    min-height: auto !important;
    height: auto !important;

    padding: 34px;

    background: #fff;

    border: 1px solid var(--lg-c-border);
    border-radius: var(--lg-radius-card);

    box-shadow:
            0 18px 45px rgba(35, 31, 55, 0.08);
}


/* =========================================================================
   EN-TÊTE
   ========================================================================= */

.login-card-header {
    display: flex;
    align-items: center;

    gap: 14px;

    margin-bottom: 28px;
}

.login-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 48px;
    height: 48px;

    color: var(--lg-c-accent);

    background: var(--lg-c-accent-soft);

    border-radius: 13px;

    font-size: 1.05rem;
}

.login-card-header h1 {
    margin: 0;

    color: var(--lg-c-heading);

    font-size: var(--lg-fs-title);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -0.01em;
}

.login-card-header p {
    margin: 5px 0 0;

    color: var(--lg-c-body);

    font-size: var(--lg-fs-lead);
    line-height: 1.5;
}


/* =========================================================================
   CHAMPS
   ========================================================================= */

.login-card .form-group {
    margin-bottom: 18px;
}

.login-card .form-label {
    margin-bottom: 7px;

    color: var(--lg-c-body);

    font-size: var(--lg-fs-small);
    font-weight: 600;
}

.login-input-wrapper {
    position: relative;
}

.login-input-wrapper > i {
    position: absolute;

    top: 50%;
    left: 17px;
    z-index: 2;

    width: 20px;

    color: var(--lg-c-body);

    font-size: 0.9375rem;

    text-align: center;

    transform: translateY(-50%);

    pointer-events: none;
}

.login-card .login-input-wrapper .form-control {
    min-height: 52px;

    padding-left: 52px !important;
    padding-right: 16px;

    color: var(--lg-c-heading);

    background: #fff;

    border: 1px solid var(--lg-c-field-border);
    border-radius: var(--lg-radius-field);

    font-size: var(--lg-fs-body);

    box-shadow: none;
}

.login-input-wrapper .form-control::placeholder {
    color: var(--lg-c-placeholder);
}

.login-input-wrapper .form-control:focus {
    border-color: var(--lg-c-accent);

    box-shadow:
            0 0 0 3px rgba(116, 65, 212, 0.12);
}

/* L'icône suit le champ au focus : elle appartient au champ, pas au
   décor. */

.login-input-wrapper:focus-within > i {
    color: var(--lg-c-accent);
}


/* Remplissage automatique du navigateur — Chrome peint le champ en bleu
   pâle et écrase la couleur du texte. */

.login-card .login-input-wrapper .form-control:-webkit-autofill,
.login-card .login-input-wrapper .form-control:-webkit-autofill:hover,
.login-card .login-input-wrapper .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-c-heading);

    -webkit-box-shadow: 0 0 0 1000px #fff inset;

    caret-color: var(--lg-c-heading);

    transition: background-color 9999s ease-in-out 0s;
}

.auth-card .auth-input-wrapper .form-control:-webkit-autofill,
.auth-card .auth-input-wrapper .form-control:-webkit-autofill:hover,
.auth-card .auth-input-wrapper .form-control:-webkit-autofill:focus {
    -webkit-text-fill-color: var(--lg-c-heading);

    -webkit-box-shadow: 0 0 0 1000px #fff inset;

    caret-color: var(--lg-c-heading);

    transition: background-color 9999s ease-in-out 0s;
}


/* Champ en erreur */

.login-card .login-input-wrapper .form-control.is-invalid,
.login-card .login-input-wrapper .form-control.error {
    border-color: var(--lg-c-danger);
}


/* =========================================================================
   MOT DE PASSE OUBLIÉ
   ========================================================================= */

.login-forgot-password {
    display: flex;
    justify-content: flex-end;

    margin: -4px 0 20px;
}

.login-forgot-password a {
    color: var(--lg-c-accent);

    font-size: var(--lg-fs-small);
    font-weight: 600;

    text-decoration: none;
}

.login-forgot-password a:hover,
.login-forgot-password a:focus {
    color: var(--lg-c-accent-dark);

    text-decoration: underline;
}


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

.login-card .login_user_btn {
    min-height: 50px;

    color: #fff;

    background: var(--lg-c-accent);

    border: 1px solid var(--lg-c-accent);
    border-radius: 999px;

    font-size: var(--lg-fs-body);
    font-weight: 600;

    box-shadow: none;
}

.login-card .login_user_btn:hover,
.login-card .login_user_btn:focus {
    color: #fff;

    background: var(--lg-c-accent-dark);
    border-color: var(--lg-c-accent-dark);
}

.login-card .login_user_btn:focus-visible {
    outline: 2px solid var(--lg-c-accent);
    outline-offset: 2px;
}


/* =========================================================================
   CRÉER UN COMPTE
   ========================================================================= */

.login-card-signup {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;

    gap: 6px;

    margin-top: 24px;
    padding-top: 22px;

    border-top: 1px solid var(--lg-c-border);

    color: var(--lg-c-body);

    font-size: var(--lg-fs-small);
}

.login-card-signup a {
    color: var(--lg-c-accent);

    font-weight: 600;

    text-decoration: none;
}

.login-card-signup a:hover,
.login-card-signup a:focus {
    color: var(--lg-c-accent-dark);

    text-decoration: underline;
}


/* =========================================================================
   ERREURS
   -------------------------------------------------------------------------
   Sur une page de connexion, c'est l'état le plus lu : il était à 11px.
   ========================================================================= */

.login-card .error-message {
    display: block;

    margin-top: 6px;

    color: var(--lg-c-danger);

    font-size: 0.8125rem;
    line-height: 1.45;
}

.login-card .signup-global-error {
    display: flex;
    align-items: flex-start;

    gap: 10px;

    margin-bottom: 16px;
    padding: 12px 14px;

    color: var(--lg-c-danger);

    background: #fef3f2;

    border: 1px solid #fadcd7;
    border-radius: var(--lg-radius-field);

    font-size: var(--lg-fs-small);
    font-weight: 500;
    line-height: 1.5;
}


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

@media (max-width: 575.98px) {

    :root {
        --lg-fs-title: 1.25rem;   /* 20px */
        --lg-fs-lead: 0.9375rem;  /* 15px — plancher de lisibilité */
    }

    .login-page {
        min-height: calc(100dvh - 64px);

        padding: 32px 0 48px;
    }

    .login-card {
        padding: 24px 20px;

        border-radius: 17px;
    }

    .login-card-header {
        align-items: center;

        gap: 12px;

        margin-bottom: 22px;
    }

    .login-icon {
        width: 44px;
        height: 44px;
    }

}


/* =========================================================================
   GRANDS ÉCRANS  (>= 1600px)
   ========================================================================= */

@media (min-width: 1600px) {

    :root {
        --lg-fs-small: 0.9375rem;  /* 15px */
        --lg-fs-body: 1rem;        /* 16px */
        --lg-fs-lead: 1.0625rem;   /* 17px */
        --lg-fs-title: 1.75rem;    /* 28px */
    }

    .login-card {
        max-width: 500px;

        padding: 40px;
    }

}


/* =========================================================================
   RÉINITIALISATION DU MOT DE PASSE  (.auth-*)
   -------------------------------------------------------------------------
   Même page, même formulaire, mais elle avait ses propres tailles, ses
   propres gris et un violet légèrement différent (#7441d8 contre
   #7441d4). Tout est aligné sur les tokens ci-dessus.
   ========================================================================= */

.auth-page {
    display: flex;
    align-items: center;
    justify-content: center;

    min-height: calc(100dvh - 80px);

    padding: 56px 0;

    background: var(--lg-c-page);
}

.auth-card {
    width: 100%;
    max-width: 540px;

    margin: 0 auto;

    padding: 38px;

    background: #fff;

    border: 1px solid var(--lg-c-border);
    border-radius: var(--lg-radius-card);

    box-shadow:
            0 18px 45px rgba(35, 31, 55, 0.08);
}

.auth-card-header {
    display: flex;
    align-items: center;

    gap: 16px;

    margin-bottom: 30px;
}

.auth-icon {
    display: flex;
    align-items: center;
    justify-content: center;

    flex: 0 0 auto;

    width: 52px;
    height: 52px;

    color: var(--lg-c-accent);

    background: var(--lg-c-accent-soft);

    border-radius: 14px;

    font-size: 1.15rem;
}

.auth-card-header h3 {
    margin: 0;

    color: var(--lg-c-heading);

    font-size: var(--lg-fs-title);
    font-weight: 600;

    line-height: 1.25;
    letter-spacing: -0.01em;
}

.auth-card-header p {
    margin: 5px 0 0;

    color: var(--lg-c-body);

    font-size: var(--lg-fs-lead);
    line-height: 1.5;
}

.auth-card .form-label {
    margin-bottom: 7px;

    color: var(--lg-c-body);

    font-size: var(--lg-fs-small);
    font-weight: 600;
}

.auth-input-wrapper {
    position: relative;
}

.auth-input-wrapper > i {
    position: absolute;

    top: 50%;
    left: 17px;
    z-index: 2;

    width: 20px;

    color: var(--lg-c-body);

    font-size: 0.9375rem;

    text-align: center;

    transform: translateY(-50%);

    pointer-events: none;
}

.auth-card .auth-input-wrapper .form-control {
    min-height: 52px;

    padding-left: 52px !important;
    padding-right: 16px;

    color: var(--lg-c-heading);

    background: #fff;

    border: 1px solid var(--lg-c-field-border);
    border-radius: var(--lg-radius-field);

    font-size: var(--lg-fs-body);

    box-shadow: none;
}

.auth-card .auth-input-wrapper .form-control::placeholder {
    color: var(--lg-c-placeholder);
}

.auth-card .auth-input-wrapper .form-control:focus {
    border-color: var(--lg-c-accent);

    box-shadow:
            0 0 0 3px rgba(116, 65, 212, 0.12);
}

.auth-input-wrapper:focus-within > i {
    color: var(--lg-c-accent);
}

.auth-card .error-message {
    display: block;

    margin-top: 6px;

    color: var(--lg-c-danger);

    font-size: 0.8125rem;
    line-height: 1.45;
}

.auth-submit {
    min-height: 50px;

    color: #fff;

    background: var(--lg-c-accent);

    border: 1px solid var(--lg-c-accent);
    border-radius: 999px;

    font-size: var(--lg-fs-body);
    font-weight: 600;

    box-shadow: none;
}

.auth-submit:hover,
.auth-submit:focus {
    color: #fff;

    background: var(--lg-c-accent-dark);
    border-color: var(--lg-c-accent-dark);
}

.auth-card-footer {
    margin-top: 24px;
    padding-top: 22px;

    border-top: 1px solid var(--lg-c-border);

    text-align: center;
}

.auth-card-footer a {
    color: var(--lg-c-accent);

    font-size: var(--lg-fs-small);
    font-weight: 600;

    text-decoration: none;
}

.auth-card-footer a:hover,
.auth-card-footer a:focus {
    color: var(--lg-c-accent-dark);

    text-decoration: underline;
}


@media (max-width: 575.98px) {

    .auth-page {
        min-height: calc(100dvh - 64px);

        padding: 32px 0 48px;
    }

    .auth-card {
        padding: 24px 20px;

        border-radius: 17px;
    }

    .auth-card-header {
        gap: 12px;

        margin-bottom: 24px;
    }

    .auth-icon {
        width: 46px;
        height: 46px;
    }

}


@media (min-width: 1600px) {

    .auth-card {
        max-width: 580px;

        padding: 44px;
    }

}