/* LEBIPEUR_AUTH_CSS_V43 */

/*
 * Cette feuille concerne uniquement les pages
 * Connexion et Créer mon bipeur.
 */

body.auth43 {
    padding:
        max(30px, env(safe-area-inset-top))
        max(24px, env(safe-area-inset-right))
        max(55px, env(safe-area-inset-bottom))
        max(24px, env(safe-area-inset-left)) !important;
}

/* Largeur générale plus confortable sur ordinateur. */

body.auth43 .auth-wrap41 {
    width: min(650px, 100%) !important;
}

body.auth43.auth-login .auth-wrap41 {
    width: min(580px, 100%) !important;
}

body.auth43.auth-register .auth-wrap41 {
    width: min(660px, 100%) !important;
}

/* Retour plus visible et plus proche du formulaire. */

body.auth43 .back41 {
    margin: 0 0 16px !important;

    color: #F7F7F2 !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

/* Panneau principal plus affirmé. */

body.auth43 .panel41 {
    padding: clamp(32px, 4vw, 46px) !important;

    border: 4px solid #F7F7F2 !important;
    border-radius: 26px !important;

    background: #075BCA !important;
}

/* En-tête plus compact et plus lisible. */

body.auth43 .auth-head41 {
    margin: 0 0 29px !important;
}

body.auth43 .auth-title41 {
    margin: 0 !important;

    color: #F7F7F2 !important;

    font-size: clamp(48px, 5vw, 64px) !important;
    font-weight: 900 !important;
    line-height: .96 !important;
    letter-spacing: -.055em !important;
}

body.auth43.auth-register .auth-title41 {
    font-size: clamp(47px, 4.5vw, 58px) !important;
}

body.auth43 .auth-intro41 {
    max-width: 510px !important;
    margin: 19px auto 0 !important;

    color: #F7F7F2 !important;

    font-size: 18px !important;
    font-weight: 400 !important;
    line-height: 1.55 !important;
}

/* Messages d'erreur. */

body.auth43 .alert41 {
    margin-bottom: 20px !important;
    padding: 14px 16px !important;

    border: 3px solid #F88504 !important;
    border-radius: 13px !important;

    font-size: 16px !important;
    line-height: 1.45 !important;
}

/* Formulaire. */

body.auth43 .form41 {
    gap: 17px !important;
}

body.auth43 .field41 {
    gap: 9px !important;
}

body.auth43 .label41 {
    color: #F7F7F2 !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    line-height: 1.2 !important;
}

body.auth43 .input41 {
    min-height: 62px !important;
    padding: 14px 17px !important;

    border: 3px solid #F7F7F2 !important;
    border-radius: 14px !important;

    background: #075BCA !important;
    color: #F7F7F2 !important;

    font-size: 18px !important;
    font-weight: 900 !important;
}

body.auth43 .input41:focus {
    border-color: #F88504 !important;
    outline: none !important;
}

body.auth43 .input41::placeholder {
    color: rgba(247, 247, 242, .56) !important;
    opacity: 1 !important;
}

/* Bouton principal. */

body.auth43 .submit41 {
    min-height: 68px !important;
    margin-top: 8px !important;
    padding: 16px 24px !important;

    border: 3px solid #F88504 !important;
    border-radius: 16px !important;

    background: #F88504 !important;
    color: #12171C !important;

    font-size: 20px !important;
    font-weight: 900 !important;
}

/* Lien sous le formulaire. */

body.auth43 .switch41 {
    margin: 23px 0 0 !important;

    color: #F7F7F2 !important;

    font-size: 16px !important;
    line-height: 1.55 !important;
}

body.auth43 .link41,
body.auth43 .link41:visited {
    color: #F7F7F2 !important;

    font-size: 16px !important;
    font-weight: 900 !important;

    text-decoration-thickness: 2px !important;
    text-underline-offset: 5px !important;
}

/* Ordinateur : titre d'inscription sur une ligne. */

@media (min-width: 760px) {
    body.auth43.auth-register .auth-title41 {
        white-space: nowrap !important;
    }
}

/* Téléphone et tablette verticale. */

@media (max-width: 600px) {
    body.auth43 {
        align-items: flex-start !important;

        padding-top:
            max(20px, env(safe-area-inset-top)) !important;

        padding-left: 18px !important;
        padding-right: 18px !important;
    }

    /*
     * Empêche la barre inférieure de Safari
     * de masquer la fin du formulaire.
     */
    body.auth43.auth-register {
        padding-bottom:
            max(
                125px,
                calc(env(safe-area-inset-bottom) + 95px)
            ) !important;
    }

    body.auth43.auth-login {
        padding-bottom:
            max(
                75px,
                calc(env(safe-area-inset-bottom) + 50px)
            ) !important;
    }

    /*
     * Le margin:auto de la V41 recentrait
     * verticalement le formulaire.
     */
    body.auth43 .auth-wrap41 {
        width: 100% !important;
        margin: 0 auto !important;
    }

    body.auth43 .back41 {
        margin-bottom: 14px !important;
        font-size: 15px !important;
    }

    body.auth43 .panel41 {
        padding: 25px 20px !important;

        border-width: 3px !important;
        border-radius: 21px !important;
    }

    body.auth43 .auth-head41 {
        margin-bottom: 22px !important;
    }

    body.auth43 .auth-title41,
    body.auth43.auth-register .auth-title41 {
        font-size: clamp(41px, 10.7vw, 50px) !important;
        line-height: .97 !important;
        white-space: normal !important;
    }

    body.auth43 .auth-intro41 {
        max-width: 390px !important;
        margin-top: 15px !important;

        font-size: 16px !important;
        line-height: 1.5 !important;
    }

    body.auth43 .form41 {
        gap: 13px !important;
    }

    body.auth43 .field41 {
        gap: 7px !important;
    }

    body.auth43 .label41 {
        font-size: 15px !important;
    }

    body.auth43 .input41 {
        min-height: 55px !important;
        padding: 12px 14px !important;

        border-width: 3px !important;
        border-radius: 13px !important;

        font-size: 17px !important;
    }

    body.auth43 .submit41 {
        min-height: 63px !important;
        margin-top: 5px !important;

        font-size: 19px !important;
    }

    body.auth43 .switch41 {
        margin-top: 18px !important;
        font-size: 15px !important;
    }

    body.auth43 .link41,
    body.auth43 .link41:visited {
        font-size: 15px !important;
    }
}

/* Téléphones particulièrement étroits. */

@media (max-width: 390px) {
    body.auth43 {
        padding-left: 14px !important;
        padding-right: 14px !important;
    }

    body.auth43 .panel41 {
        padding-left: 16px !important;
        padding-right: 16px !important;
    }

    body.auth43 .auth-title41,
    body.auth43.auth-register .auth-title41 {
        font-size: 39px !important;
    }
}

/* Écrans mobiles de faible hauteur. */

@media (max-height: 740px) and (max-width: 600px) {
    body.auth43 .back41 {
        margin-bottom: 10px !important;
    }

    body.auth43 .panel41 {
        padding-top: 20px !important;
        padding-bottom: 20px !important;
    }

    body.auth43 .auth-head41 {
        margin-bottom: 17px !important;
    }

    body.auth43 .auth-title41,
    body.auth43.auth-register .auth-title41 {
        font-size: 38px !important;
    }

    body.auth43 .auth-intro41 {
        margin-top: 10px !important;
    }

    body.auth43 .form41 {
        gap: 10px !important;
    }

    body.auth43 .input41 {
        min-height: 51px !important;
    }

    body.auth43 .submit41 {
        min-height: 57px !important;
    }

    body.auth43 .switch41 {
        margin-top: 13px !important;
    }
}

/* LEBIPEUR_AUTH_COLOR_V44 */

/*
 * Cadre orange plus affirmé :
 * on réduit ainsi la domination du blanc.
 */
body.auth43 .panel41 {
    border: 4px solid #F88504 !important;
}

/*
 * Le retour devient un vrai petit bouton secondaire,
 * plus éloigné du formulaire.
 */
body.auth43 .back41 {
    margin: 0 0 25px !important;
    padding: 11px 16px !important;

    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;

    border: 2px solid #F88504 !important;
    border-radius: 12px !important;

    background: #12171C !important;
    color: #F7F7F2 !important;

    font-size: 16px !important;
    line-height: 1.25 !important;
    text-decoration: none !important;
}

body.auth43 .back41:hover,
body.auth43 .back41:focus-visible {
    color: #F88504 !important;
}

/*
 * Les libellés orange créent une hiérarchie
 * plus proche du logo et de l'accueil.
 */
body.auth43 .label41 {
    color: #F88504 !important;
}

/*
 * Les champs restent clairs et lisibles,
 * sans ajouter trop d'orange.
 */
body.auth43 .input41 {
    border-color: #F7F7F2 !important;
}

body.auth43 .input41:focus {
    border-color: #F88504 !important;
}

/*
 * Bouton inspiré directement du boîtier :
 * orange avec contour et texte noirs.
 */
body.auth43 .submit41 {
    border: 3px solid #12171C !important;
    background: #F88504 !important;
    color: #12171C !important;
}

/*
 * Petit bandeau noir au pied du formulaire.
 * Le lien orange devient immédiatement identifiable.
 */
body.auth43 .switch41 {
    margin: 24px 0 0 !important;
    padding: 14px 17px !important;

    border: 0 !important;
    border-radius: 12px !important;

    background: #12171C !important;
    color: #F7F7F2 !important;

    text-align: center !important;
}

body.auth43 .link41,
body.auth43 .link41:visited {
    color: #F88504 !important;
    text-decoration-color: #F88504 !important;
}

body.auth43 .link41:hover,
body.auth43 .link41:focus-visible {
    color: #F7F7F2 !important;
}

/*
 * Mobile : davantage d'air autour du retour
 * et lien inférieur proprement séparé.
 */
@media (max-width: 600px) {
    body.auth43 .back41 {
        margin-bottom: 22px !important;
        padding: 10px 14px !important;

        font-size: 15px !important;
    }

    body.auth43 .panel41 {
        border-width: 4px !important;
    }

    body.auth43 .switch41 {
        margin-top: 20px !important;
        padding: 13px 12px !important;

        font-size: 15px !important;
        line-height: 1.45 !important;
    }

    body.auth43 .switch41 .link41 {
        width: fit-content !important;
        margin: 7px auto 0 !important;

        display: block !important;

        font-size: 16px !important;
        white-space: nowrap !important;
    }
}

/*
 * Très petits écrans : on conserve le contraste
 * sans coller le contenu aux bords.
 */
@media (max-width: 390px) {
    body.auth43 .back41 {
        margin-bottom: 19px !important;
    }

    body.auth43 .switch41 {
        padding-left: 9px !important;
        padding-right: 9px !important;
    }
}

/* LEBIPEUR_AUTH_V45_NO_BLACK */

/* Retour : bleu, orange et blanc uniquement. */
body.auth43 .back41 {
    margin-bottom: 28px !important;
    background: #075BCA !important;
    border: 2px solid #F88504 !important;
    color: #F7F7F2 !important;
}

body.auth43 .back41:hover,
body.auth43 .back41:focus-visible {
    background: #F88504 !important;
    color: #075BCA !important;
}

/* Bouton principal sans contour ni texte noirs. */
body.auth43 .submit41 {
    background: #F88504 !important;
    border: 3px solid #F88504 !important;
    color: #075BCA !important;
}

/* Bas du formulaire sans pavé noir. */
body.auth43 .switch41 {
    margin-top: 25px !important;
    padding: 17px 4px 0 !important;

    background: transparent !important;
    border: 0 !important;
    border-top: 2px solid #F88504 !important;
    border-radius: 0 !important;

    color: #F7F7F2 !important;
}

body.auth43 .link41,
body.auth43 .link41:visited {
    color: #F88504 !important;
    text-decoration-color: #F88504 !important;
}

/* Messages éventuels sans fond noir. */
body.auth43 .alert41 {
    background: #075BCA !important;
    border-color: #F88504 !important;
    color: #F7F7F2 !important;
}

@media (max-width: 600px) {
    body.auth43 .back41 {
        margin-bottom: 25px !important;
    }

    body.auth43 .switch41 {
        padding-top: 15px !important;
    }

    body.auth43 .switch41 .link41 {
        display: block !important;
        width: fit-content !important;
        margin: 7px auto 0 !important;
    }
}

/* LEBIPEUR_AUTH_FINISH_V46
   Bleu, orange et blanc cassé uniquement. */

/* Cadre principal blanc. */
body.auth43 .panel41 {
    border: 4px solid #F7F7F2 !important;
    background: #075BCA !important;
}

/* Retour à l'accueil : bouton orange rempli, texte blanc. */
body.auth43 .back41,
body.auth43 .back41:visited {
    margin-bottom: 30px !important;
    padding: 12px 18px !important;

    border: 3px solid #F88504 !important;
    border-radius: 13px !important;

    background: #F88504 !important;
    color: #F7F7F2 !important;

    font-size: 16px !important;
    font-weight: 900 !important;
    text-decoration: none !important;
}

body.auth43 .back41:hover,
body.auth43 .back41:focus-visible {
    background: #F88504 !important;
    color: #F7F7F2 !important;
}

body.auth43 .back41:active {
    transform: scale(.975) !important;
}

/* Boutons Créer et Entrer : orange rempli, texte blanc. */
body.auth43 .submit41 {
    border: 3px solid #F88504 !important;
    background: #F88504 !important;
    color: #F7F7F2 !important;
}

/* Les libellés restent orange. */
body.auth43 .label41 {
    color: #F88504 !important;
}

/* Champs avec contours blancs. */
body.auth43 .input41 {
    border-color: #F7F7F2 !important;
    background: #075BCA !important;
    color: #F7F7F2 !important;
}

body.auth43 .input41:focus {
    border-color: #F88504 !important;
}

/* Zone inférieure légère, sans noir. */
body.auth43 .switch41 {
    background: transparent !important;
    color: #F7F7F2 !important;

    border: 0 !important;
    border-top: 2px solid #F88504 !important;
    border-radius: 0 !important;
}

/* Lien inférieur orange. */
body.auth43 .link41,
body.auth43 .link41:visited {
    color: #F88504 !important;
    text-decoration-color: #F88504 !important;
}

/* Messages sans noir. */
body.auth43 .alert41 {
    background: #075BCA !important;
    color: #F7F7F2 !important;
    border-color: #F88504 !important;
}

@media (max-width: 600px) {
    body.auth43 .back41 {
        margin-bottom: 28px !important;
        padding: 11px 15px !important;
        font-size: 15px !important;
    }

    body.auth43 .panel41 {
        border-width: 4px !important;
    }
}

/* LEBIPEUR_AUTH_V47_BLACK_TEXT */

/* Retour à l'accueil : orange avec écriture noire. */
body.auth43 .back41,
body.auth43 .back41:visited,
body.auth43 .back41:hover,
body.auth43 .back41:focus-visible {
    background: #F88504 !important;
    border-color: #F88504 !important;
    color: #12171C !important;
}

/* Boutons Créer et Entrer : orange avec écriture noire. */
body.auth43 .submit41,
body.auth43 .submit41:hover,
body.auth43 .submit41:focus-visible {
    background: #F88504 !important;
    border-color: #F88504 !important;
    color: #12171C !important;
}

/* Le cadre principal reste blanc. */
body.auth43 .panel41 {
    border-color: #F7F7F2 !important;
}