/* ===== Mise en page partagée : pages d'authentification (connexion, inscription) =====
   Layout 2 colonnes (formulaire + photo) et footer communs aux pages LogOn et
   RegisterUnknownCustomerNew. Les styles propres à chaque page restent dans
   login.css / register.css. */

/* ----- Conteneur principal ----- */
/* position/flex/background/overflow/opacity/transition identiques sur les deux pages.
   Les différences (min-height pour login, align-items pour register, modificateur
   visible spécifique) restent dans login.css / register.css. */
.login,
.register {
    position: relative;
    flex: 1;
    display: flex;
    background: var(--color-hero-bg);
    overflow: hidden;
    opacity: 0;
    transition: opacity var(--transition-page-fade);
}

/* ----- Colonne gauche : formulaire ----- */
/* flex-grow:1 => quand la photo passe en display:none (≤75em), cette colonne
   reprend automatiquement toute la largeur. */
.login__inner,
.register__inner {
    flex: 1 1 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--spacing-xl5) var(--spacing-xxl);

    @media (max-width: 75em) {
        padding: var(--spacing-xxl) var(--spacing-lg2);
    }

    @media (max-width: 48em) {
        padding: var(--spacing-xl4) var(--spacing-lg);
    }

    @media (max-width: 38.75em) {
        padding: var(--spacing-xl3) var(--spacing-md2);
    }
}

/* ----- Panneau formulaire ----- */
/* Largeur max par défaut (442px) posée dans login.css / register.css respectivement.
   Seul le dépassement responsive (70rem, ≤75em où l'inner reprend 100% de la page) est partagé. */
.login__panel,
.register__panel {
    width: 100%;

    @media (max-width: 75em) {
        max-width: 70rem;
    }
}

/* ----- Colonne droite : photo en background-image ----- */
/* En background plutôt qu'en <img> => non téléchargée quand display:none (mobile).
   register__photo ajoute aspect-ratio et align-self dans register.css. */
.login__photo,
.register__photo {
    flex: 1 1 50%;
    min-width: 0;
    background-color: var(--color-hero-bg);
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;

    /* Charge l'image uniquement au-dessus de 75em : display:none seul ne bloque pas le téléchargement. */
    @media (min-width: 75.0625em) {
        background-image: url('/Content/themes/Visa/images/img-logon.webp');
    }

    @media (max-width: 75em) {
        display: none;
    }
}

/* ----- Titre principal (h1) ----- */
.login__title,
.register__title {
    line-height: 1.2;
    margin: 0 0 var(--spacing-lg2);

    @media (max-width: 48em) {
        font-size: clamp(2rem, 4vw, 2.8rem);
    }

    @media (max-width: 38.75em) {
        font-size: var(--font-size-xl);
        margin: 0 0 var(--spacing-md3);
    }
}

/* ===== Footer d'authentification ===== */
/* Barre identique pour « Pas de compte ? » (connexion) et « Déjà un compte ? » (inscription).
   Le groupe occupe 50 % de la largeur pour s'aligner sous le formulaire ; quand la photo
   disparaît (≤75em), il reprend 100 % automatiquement. */
.login-footer,
.register-footer {
    background: var(--color-white);
    border-top: 0.1rem solid var(--color-border);
    padding: var(--spacing-md) 0;
}

.login-footer__inner,
.register-footer__inner {
    display: flex;
}

.login-footer__group,
.register-footer__group {
    flex: 0 0 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--spacing-md2);
    padding: 0 var(--spacing-xxl);

    @media (max-width: 75em) {
        flex-basis: 100%;
        padding: 0 var(--spacing-lg2);
    }

    @media (max-width: 38.75em) {
        flex-direction: column;
        gap: var(--spacing-sm2);
        padding: 0 var(--spacing-md2);
    }
}

.login-footer__text,
.register-footer__text {
    color: var(--color-text-muted-hero);
}

@media (max-width: 38.75em) {
    .login-footer,
    .register-footer {
        padding: var(--spacing-sm3) 0;
    }

    .login-footer__group .btn,
    .register-footer__group .btn {
        width: 100%;
    }
}