/* =============================================================================
   login-split.css — page de connexion en DEUX COLONNES (Login + parcours)
   -----------------------------------------------------------------------------
   Chargé APRÈS `login-generique.css` (posé par `_LoginGeneriqueLayout`) : il en
   reprend tout l'habillage de carte/champs et ne redéfinit que la mise en page
   deux colonnes, plus les éléments propres à cette maquette (panneau de marque,
   séparateur « ou », bouton SSO en contour, pied de carte).

   🛑 COULEURS : uniquement des tokens de thème (`--bs-primary`, `--bs-main`,
   `--bs-info`, `--bs-*-rgb`). Aucun hex de charte en dur : le thème abonné doit
   pouvoir recolorer la page sans toucher ce fichier.

   Tout est scopé par `.login-split` : les pages personnalisées héritées
   (`Login_<Abonne>`, gabarit à une colonne) n'en dépendent pas. Le contenu
   propre à un abonné (option « page de connexion personnalisée ») s’affiche
   dans la colonne gauche, dans un cadre isolé : voir la section « variante
   CADRE » en fin de fichier.
   ============================================================================= */

.login-split {
    /* Fond du panneau de marque : le marine du thème, assombri pour le dégradé.
       `color-mix` n'est pas connu des moteurs anciens -> `background-color` de repli
       déclaré avant le dégradé (une valeur non comprise est simplement ignorée). */
    --tg-login-marine: var(--bs-primary, #2e3862);
    --tg-login-marine-sombre: color-mix(in srgb, var(--bs-primary, #2e3862) 62%, #000);
    /* Accent clair du logo : lisible sur le marine (texte de grande taille). */
    --tg-login-accent: var(--bs-info, #7096ff);
    /* Texte des liens sur fond blanc : le marine, seul ton de la charte qui tienne
       le contraste WCAG AA (4.5:1) en corps de texte. */
    --tg-login-lien: var(--bs-primary, #2e3862);

    display: grid;
    grid-template-columns: 1fr 1fr;
    width: 100%;
    min-height: 100vh;
}

/* Le layout centre son contenu via des utilitaires BS5 sur `<body>` : sur une mise en
   page pleine page, ce centrage n'a plus lieu d'être (il empêcherait les colonnes de
   prendre toute la hauteur). `:has` évite de devoir toucher au layout partagé. */
body.login-page:has(.login-split) {
    display: block !important;
    padding: 0;
}

/* -----------------------------------------------------------------------------
   Colonne GAUCHE — panneau de marque
   ----------------------------------------------------------------------------- */
.login-split__marque {
    position: relative;
    display: flex;
    align-items: center;
    padding: 3rem clamp(2rem, 6vw, 5rem);
    overflow: hidden;
    background-color: var(--tg-login-marine);
    background-image: linear-gradient(135deg, var(--tg-login-marine), var(--tg-login-marine-sombre));
    color: #fff;
}

/* ⚠️ Les 5 declarations `rgb(var(--bs-*-rgb, …) / xx%)` de ce fichier (halos ci-dessous, fond de    la coche, ombre de la carte, halo de focus) sont INERTES : les tokens du theme sont ecrits    avec des VIRGULES (« 255, 97, 54 »), donc l'expression donne `rgb(255, 97, 54 / 22%)`,    invalide, que le navigateur ignore en silence.    Le rendu obtenu — coche sans aplat, pas de halo — est celui qui a ete VALIDE le 2026-08-24, et    les pages de maintenance s'alignent dessus. Ne pas « corriger » la syntaxe en    `rgba(var(--x-rgb, r, g, b), .22)` sans arbitrage : cela ferait apparaitre des aplats et des    halos qui n'ont jamais ete voulus. */
/* Halos décoratifs : un bleu en haut à droite, un orange en bas à gauche. Portés par
   des pseudo-éléments (aucun markup décoratif dans la vue) et non interactifs. */
.login-split__marque::before,
.login-split__marque::after {
    content: "";
    position: absolute;
    width: 38rem;
    height: 38rem;
    border-radius: 50%;
    pointer-events: none;
}

.login-split__marque::before {
    top: -14rem;
    right: -12rem;
    background: radial-gradient(circle, rgb(var(--bs-info-rgb, 112 150 255) / 30%) 0%, transparent 70%);
}

.login-split__marque::after {
    bottom: -16rem;
    left: -14rem;
    background: radial-gradient(circle, rgb(var(--bs-main-rgb, 255 97 54) / 22%) 0%, transparent 70%);
}

/* `position: relative` : le contenu passe au-dessus des halos. */
.login-split__marque-contenu {
    position: relative;
    max-width: 40rem;
}

.login-split__brand {
    font-size: clamp(2.2rem, 3.4vw, 3.1rem);
}

.login-split__baseline {
    margin: .75rem 0 0;
    font-size: clamp(1rem, 1.2vw, 1.15rem);
    color: rgb(255 255 255 / 78%);
}

.login-split__arguments {
    margin: 3.5rem 0 0;
    padding: 0;
    list-style: none;
    display: grid;
    gap: 1.6rem;
}

/* Chaque argument = puce + (titre, paragraphe). `flex-start` et non `center` : le texte fait
   plusieurs lignes, une puce centree verticalement flotterait au milieu du paragraphe. */
.login-split__arguments li {
    display: flex;
    align-items: flex-start;
    gap: 1rem;
    font-size: 1rem;
}

.login-split__argument-titre {
    display: block;
    font-weight: 600;
    line-height: 1.35;
}

.login-split__argument-texte {
    margin: .35rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 72%);
}

/* Puce carrée arrondie de l'argument. `flex: 0 0 auto` : elle ne se comprime pas
   quand le libellé passe sur deux lignes. */
.login-split__puce {
    flex: 0 0 auto;
    /* Cale la puce sur la 1re ligne du titre plutot que sur le haut exact du bloc. */
    margin-top: .1rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2rem;
    height: 2rem;
    border-radius: .5rem;
    /* Coche en ORANGE de charte (2026-08-24) : fond teinte a 22 %, trait plein. */
    background-color: rgb(var(--bs-main-rgb, 255 97 54) / 22%);
    color: var(--bs-main, #ff6136);
}

/* 🛑 Cibler `> i` ET `> svg`, jamais `[data-lucide]` : `lucide-init.js` retire l'attribut
   du `<svg>` rendu (parade anti-boucle), une règle sur `[data-lucide]` serait morte dès
   l'icône affichée. `fill: none` : les icônes Lucide sont en trait seul. */
.login-split__puce > i,
.login-split__puce > svg {
    width: 16px;
    height: 16px;
    fill: none;
    stroke-width: 3;
}

/* Variante SERVEUR DE TEST (InstanceServeurModel.EstTest) : avertissement à la place des
   arguments commerciaux. Texte plus long, donc espacements resserrés pour tenir à l’écran. */
.login-split__test {
    margin-top: 2.25rem;
}

.login-split__test-titre {
    margin: 0;
    font-size: 1.15rem;
    font-weight: 600;
    line-height: 1.35;
}

.login-split__test-intro,
.login-split__test-conclusion {
    margin: .6rem 0 0;
    font-size: .875rem;
    line-height: 1.5;
    color: rgb(255 255 255 / 72%);
}

.login-split__test-sous-titre {
    margin: 1.5rem 0 0;
    font-weight: 600;
}

.login-split__arguments--test {
    margin-top: 1rem;
    gap: 1rem;
}

.login-split__test-conclusion {
    margin-top: 1.5rem;
    color: #fff;
}

/* -----------------------------------------------------------------------------
   Colonne DROITE — formulaire
   ----------------------------------------------------------------------------- */
.login-split__formulaire {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 3rem 1.5rem;
    background-color: var(--bs-secondary-bg, #eef1f6);
}

.login-split__colonne {
    width: 100%;
    max-width: 27rem;
}

.login-split__carte {
    border-radius: 1.125rem;
    box-shadow: 0 1.25rem 3rem rgb(var(--bs-primary-rgb, 46 56 98) / 10%);
}

.login-split__carte .card-body {
    padding: 2rem 2rem .5rem;
}

.login-split__carte .card-footer {
    padding: 0 2rem 1.75rem;
}

/* Couleur choisie par l’abonné (option « page de connexion personnalisée ») : variable posée en style en
   ligne par la vue (valeur #rrggbb validée) ; sans elle, le primaire du thème. */
.login-split__titre {
    margin: 0 0 .35rem;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--tg-login-titre-couleur, var(--bs-primary, #2e3862));
}

/* Écrans sans sous-titre (session expirée, connexion interrompue, accès bloqué) : le titre
   est suivi directement d'une alerte, qu'il faut décoller. */
.login-split__titre + .alert,
.login-split__titre + .validation-summary-errors {
    margin-top: 1rem;
}

/* Sous-titre = `.legend` (le handler « Mot de passe oublié ? » y réécrit sa consigne) :
   pas d'`italic` ni de hauteur figée, le texte de remplacement est bien plus long. */
.login-split__carte .legend.login-split__sous-titre {
    margin-bottom: 1.5rem;
    font-size: .8rem;
    font-style: normal;
    color: var(--bs-secondary-color, #6c757d);
}

/* Astérisque « obligatoire » en orange de charte (le modèle générique le met en rouge). */
.login-split__carte .required-star {
    color: var(--bs-main, #ff6136);
}

/* Placeholders : le gris BS5 par défaut est trop clair pour l'AA -> ton secondaire plein. */
.login-split__carte .form-control::placeholder {
    color: var(--bs-secondary-color, #6c757d);
    opacity: 1;
}

/* Focus : la bordure ne change PAS de couleur (demande du 07/10/2026) — c’est l’icône du champ qui
   signale le focus (rebond + couleur d’accent, plus bas). Le gris de repos est reposé explicitement,
   le thème BS5 colorant sinon la bordure au focus. La boîte d’icône n’est plus teintée non plus.
   Le box-shadow est conservé tel quel : il est inerte (cf. l’avertissement en tête de fichier). */
.login-split__carte .form-control:focus {
    border-color: var(--bs-border-color);
    box-shadow: 0 0 0 .25rem rgb(var(--bs-primary-rgb, 46 56 98) / 15%);
}

/* Coins droits arrondis sur TOUS les champs de la carte, comme le mot de passe (qui l’obtient par
   un style en ligne). Bootstrap carre les coins droits de tout enfant d’un input-group qui n’est
   pas son dernier (`.input-group:not(.has-validation) > :not(:last-child)…`, spécificité 0,6,0) :
   l’ID l’emporte sans `!important`. Les coins gauches restent carrés, accolés à l’icône. */
#loginBlockContent .input-group > .form-control {
    border-top-right-radius: var(--bs-border-radius);
    border-bottom-right-radius: var(--bs-border-radius);
}

/* Icône au focus : l’icône du champ prend la couleur d’accent et fait un léger rebond
   (zoom 1 → 1,18 → 1). L’animation rejoue à chaque nouveau focus, la règle :has() cessant de
   s’appliquer à la perte du focus. Cible le <svg> rendu par Lucide ET l’<i> d’avant rendu (le svg
   ne porte plus `data-lucide`). Couleur : celle du bouton « Se connecter » sur une page
   personnalisée, l’accent sinon. */
.login-split__carte .input-group-text > svg,
.login-split__carte .input-group-text > i {
    transition: color .15s ease-in-out;
}

.login-split__carte .input-group:has(> .form-control:focus) .input-group-text > svg,
.login-split__carte .input-group:has(> .form-control:focus) .input-group-text > i {
    color: var(--tg-login-btn-fond, var(--tg-login-accent, #ff6136));
    animation: tg-login-icone-rebond .3s ease-out;
}

@keyframes tg-login-icone-rebond {
    0% {
        transform: scale(1);
    }

    45% {
        transform: scale(1.18);
    }

    100% {
        transform: scale(1);
    }
}

@media (prefers-reduced-motion: reduce) {
    .login-split__carte .input-group:has(> .form-control:focus) .input-group-text > svg,
    .login-split__carte .input-group:has(> .form-control:focus) .input-group-text > i {
        animation: none;
    }
}

/* 🛑 Passage en mode « mot de passe oublié » SANS rechargement : `LoginGenerique.js` retire le
   lien (`$("#loginBlockFooter a").remove()`) mais laisse la case « Se souvenir de moi », qui se
   retrouve seule au-dessus du bouton « Réinitialiser mon mot de passe » — où elle n'a aucun sens
   (et n'est de toute façon pas branchée). La ligne disparaît donc dès qu'elle n'a plus son lien.
   Réglé ici, et non en modifiant le JS, qui est partagé avec les autres pages de connexion. */
.login-split__ligne-options:not(:has(> a)) {
    display: none;
}

/* Ligne d'options du pied de carte. La case « Se souvenir de moi » etant commentee (non cablee),
   il n'y reste que « Mot de passe oublie ? » : on CENTRE au lieu de repartir aux extremites. */
.login-split__ligne-options {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 1rem;
    flex-wrap: wrap;
    font-size: .775rem;
}

.login-split__ligne-options .form-check-label {
    color: var(--bs-body-color, #212529);
}

.login-split__lien {
    color: var(--tg-login-lien);
    font-weight: 500;
    text-decoration: none;
}

.login-split__lien:hover,
.login-split__lien:focus-visible {
    text-decoration: underline;
}

/* -----------------------------------------------------------------------------
   Boutons
   ----------------------------------------------------------------------------- */

/* Action principale. `background-color` est redéclaré EN PLUS des variables
   `--bs-btn-*` : le socle porte un vestige `#loginBlockFooter .btn { background-color }`
   (spécificité 1,1,0) qui écraserait la couleur calculée depuis `--bs-btn-bg`.
   Couleurs choisies par l’abonné (option « page de connexion personnalisée ») : la vue
   pose `--tg-login-btn-fond` / `--tg-login-btn-texte` en style en ligne sur le bouton
   (valeurs #rrggbb validées par BoutonConnexionHelper). Sans elles, les replis ci-dessous
   rendent exactement les couleurs du thème. */
#loginBlockFooter .login-split__btn-principal,
.login-split__carte .login-split__btn-principal {
    --bs-btn-bg: var(--tg-login-btn-fond, var(--bs-primary));
    --bs-btn-border-color: var(--tg-login-btn-fond, var(--bs-primary));
    --bs-btn-hover-bg: var(--tg-login-marine-sombre);
    --bs-btn-hover-border-color: var(--tg-login-marine-sombre);
    --bs-btn-hover-color: var(--tg-login-btn-texte, #fff);
    --bs-btn-active-color: var(--tg-login-btn-texte, #fff);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: .5rem;
    padding-top: .6rem;
    padding-bottom: .6rem;
    background-color: var(--tg-login-btn-fond, var(--bs-primary));
    border-color: var(--tg-login-btn-fond, var(--bs-primary));
    color: var(--tg-login-btn-texte, var(--bs-btn-color));
    font-weight: 600;
}

.login-split__btn-principal > i,
.login-split__btn-principal > svg {
    width: 18px;
    height: 18px;
    fill: none;
}

/* Séparateur « ou » : le trait est porté par les pseudo-éléments, pas par un markup dédié. */
.login-split__separateur {
    display: flex;
    align-items: center;
    gap: .75rem;
    margin: .25rem 0;
    font-size: .8125rem;
    color: var(--bs-secondary-color, #6c757d);
}

.login-split__separateur::before,
.login-split__separateur::after {
    content: "";
    flex: 1 1 auto;
    height: 1px;
    background-color: var(--bs-border-color, #e7eaf0);
}

/* 🛑 Le handler « Mot de passe oublié ? » de `LoginGenerique.js` fait
   `$("#loginBlockFooter a").remove()` : le bouton SSO (un `<a>`) part, mais pas le
   séparateur. Devenu dernier enfant de `.right`, il serait un « ou » orphelin sous le
   bouton de réinitialisation -> on le masque. Réglé ici, et non en retouchant le JS,
   pour ne rien changer au comportement de la page de connexion en production. */
#loginBlockFooter .right > .login-split__separateur:last-child {
    display: none;
}

/* Action SECONDAIRE : contour orange sur fond blanc (et non plus l'aplat orange).
   ⚠️ Le texte est un orange ASSOMBRI : `--bs-main` pur sur blanc plafonne à ~3:1,
   insuffisant pour du corps de texte en WCAG AA. La bordure, elle, reste le ton de
   charte (un élément non textuel se contente de 3:1). */
#loginBlockFooter .login-split__btn-sso,
.login-split__carte .login-split__btn-sso {
    --bs-btn-bg: #fff;
    --bs-btn-border-color: var(--bs-main);
    --bs-btn-hover-bg: var(--bs-main);
    --bs-btn-hover-border-color: var(--bs-main);
    --bs-btn-hover-color: #fff;
    background-color: #fff;
    border: 1px solid var(--bs-main);
    color: var(--bs-main, #ff6136);
    padding-top: .6rem;
    padding-bottom: .6rem;
    font-weight: 600;
}

#loginBlockFooter .login-split__btn-sso:hover,
#loginBlockFooter .login-split__btn-sso:focus-visible,
.login-split__carte .login-split__btn-sso:hover,
.login-split__carte .login-split__btn-sso:focus-visible {
    background-color: var(--bs-main);
    border-color: var(--bs-main);
    color: #fff;
}

/* Bouton SSO AFFICHÉ mais INACTIF : poste local ou serveur de test sur lequel le fournisseur n’est pas activé (décision
   du 30/09/2026 : les adresses de retour du BO du SSO ne portent plus que la production). Il n’a pas l’identifiant
   #boutonConnexionOIDC, donc aucune action. Pas de `.disabled` Bootstrap : il couperait les événements de pointeur, donc
   l’info-bulle qui explique pourquoi. Le survol ne doit pas l’allumer : on reprend ses couleurs de repos. */
#loginBlockFooter .login-split__btn--inactif,
.login-split__carte .login-split__btn--inactif {
    opacity: .65;
    cursor: not-allowed;
}

#loginBlockFooter .login-split__btn-sso.login-split__btn--inactif:hover,
#loginBlockFooter .login-split__btn-sso.login-split__btn--inactif:focus-visible,
.login-split__carte .login-split__btn-sso.login-split__btn--inactif:hover,
.login-split__carte .login-split__btn-sso.login-split__btn--inactif:focus-visible {
    background-color: #fff;
    border-color: var(--bs-main);
    color: var(--bs-main, #ff6136);
}

#loginBlockFooter .login-split__btn-principal.login-split__btn--inactif:hover,
.login-split__carte .login-split__btn-principal.login-split__btn--inactif:hover {
    background-color: var(--tg-login-btn-fond, var(--bs-primary));
    border-color: var(--tg-login-btn-fond, var(--bs-primary));
    color: var(--tg-login-btn-texte, var(--bs-btn-color));
}

/* -----------------------------------------------------------------------------
   Mention de sécurité + pied de carte
   ----------------------------------------------------------------------------- */
.login-split__mention-securite {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .4rem;
    margin: 1.25rem 0 0;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.login-split__mention-securite > i,
.login-split__mention-securite > svg {
    width: 14px;
    height: 14px;
    flex: 0 0 auto;
    fill: none;
}

.login-split__pied {
    margin-top: 1.25rem;
    padding-top: 1rem;
    border-top: 1px solid var(--bs-border-color, #e7eaf0);
    text-align: center;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.login-split__pied-version a,
.login-split__pied-liens a {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
}

.login-split__pied-version a:hover,
.login-split__pied-version a:focus-visible,
.login-split__pied-liens a:hover,
.login-split__pied-liens a:focus-visible {
    color: var(--tg-login-lien);
    text-decoration: underline;
}

.login-split__pied-version {
    margin-top: .35rem;
    margin-bottom: .35rem;
}

/* -----------------------------------------------------------------------------
   Pied de page — bandeau blanc portant le logo Septeo
   -----------------------------------------------------------------------------
   Rendu par le layout (`_LoginGeneriqueLayout`), donc commun aux 5 vues du parcours de
   connexion. Il vit SOUS la grille deux colonnes : le body passe en colonne flex et la
   grille prend la hauteur restante — sinon un `min-height: 100vh` sur la grille PLUS la
   hauteur du pied feraient defiler la page dans le vide. */
body.login-page:has(.login-split) {
    display: flex !important;
    flex-direction: column;
    /* Les utilitaires BS du <body> (`align-items-center`, `justify-content-center`) centreraient
       les deux blocs et retreciraient la grille : on les neutralise pour cette mise en page. */
    align-items: stretch !important;
    justify-content: flex-start !important;
    min-height: 100vh;
}

body.login-page:has(.login-split) .login-split {
    flex: 1 1 auto;
    min-height: 0;
}

.login-pied {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    padding-bottom: 10px;
    background-color: #fff;
}

/* Le pied empile le logo puis la ligne de liens. */
.login-pied {
    flex-direction: column;
    text-align: center;
}

.login-pied__liens {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: 1.25rem;
    font-size: .75rem;
    color: var(--bs-secondary-color, #6c757d);
}

.login-pied__liens a {
    color: var(--bs-secondary-color, #6c757d);
    text-decoration: none;
}

.login-pied__liens a:hover,
.login-pied__liens a:focus-visible {
    color: var(--tg-login-lien);
    text-decoration: underline;
}

.login-pied__logo {
    display: block;
    /* Format horizontal (viewBox 1164x264) : on borne la hauteur, la largeur suit. */
    height: 4rem;
    width: auto;
}

/* -----------------------------------------------------------------------------
   Notifications TgNotify sur le layout du login
   -----------------------------------------------------------------------------
   Le markup de `_Notifications.cshtml` ne porte VOLONTAIREMENT pas de `bottom-0` /
   `top-0` : la position est pilotée par le CSS applicatif (`socle/shell.css` pour les
   toasts, `teogest-fonctionnel.css` pour les barres), afin de dégager la barre d'action
   fixe `#foot` et le rail. Or `_LoginGeneriqueLayout` ne charge NI l'un NI l'autre : sans
   les règles ci-dessous, le conteneur reste à sa position verticale statique (toast collé
   en haut à droite au lieu du bas). Le login n'ayant ni `#foot` ni rail, on colle au bord.
   Les 5 vues servies par ce layout chargent toutes ce fichier. */
#tgToastContainer.toast-container {
    bottom: 0;
}

#tgBandeauContainer {
    top: 0;
    left: 0;
    right: 0;
    z-index: 1090;
}

/* -----------------------------------------------------------------------------
   Responsive — sous 820px : une seule colonne, fond marine sur toute la page
   -----------------------------------------------------------------------------
   Le panneau de marque n'est PAS masqué : il se réduit au seul logo et se retrouve
   empilé au-dessus de la carte. Un seul markup sert les deux formats (le logo n'est
   pas dupliqué dans la colonne de droite), ce qui garantit qu'il ne peut pas
   diverger entre desktop et mobile. */
@media (max-width: 820px) {
    .login-split {
        grid-template-columns: 1fr;
        /* `min-height: auto` : deux lignes qui valent chacune 100vh donneraient une page
           deux fois trop haute (défilement dans le vide sous la carte). */
        min-height: auto;
    }

    .login-split__marque {
        justify-content: center;
        padding: 2.25rem 1.25rem .5rem;
        /* Fond porté par la page entière (règle ci-dessous) : le panneau devient transparent
           pour ne pas superposer deux dégradés au raccord avec la carte. */
        background: none;
    }

    /* Les halos décoratifs restent portés par la page, pas par ce bloc réduit. */
    .login-split__marque::before,
    .login-split__marque::after {
        display: none;
    }

    .login-split__marque-contenu {
        max-width: none;
        text-align: center;
    }

    .login-split__brand {
        font-size: clamp(1.8rem, 8vw, 2.3rem);
    }

    /* Baseline et arguments : hors sujet sur un écran étroit, où seule la connexion compte. */
    .login-split__baseline,
    .login-split__arguments,
    .login-split__test-intro,
    .login-split__test-sous-titre,
    .login-split__test-conclusion {
        display: none;
    }

    /* Serveur de test : seul le titre de l’avertissement reste visible sur écran étroit. */
    .login-split__test {
        margin-top: 1rem;
    }

    /* Le fond marine passe sur la page entière : les deux colonnes empilées sont
       transparentes pour le laisser voir. */
    body.login-page:has(.login-split) {
        background-color: var(--bs-primary, #2e3862);
        background-image: linear-gradient(160deg, var(--bs-primary, #2e3862), color-mix(in srgb, var(--bs-primary, #2e3862) 62%, #000));
    }

    .login-split__formulaire {
        background-color: transparent;
        padding: 1rem 1.25rem 2.5rem;
    }
}

@media (max-width: 480px) {
    .login-split__carte .card-body {
        padding: 1.5rem 1.25rem .5rem;
    }

    .login-split__carte .card-footer {
        padding: 0 1.25rem 1.5rem;
    }
}

/* -----------------------------------------------------------------------------
   Colonne GAUCHE — variante CADRE (contenu propre à un abonné)
   -----------------------------------------------------------------------------
   Option « page de connexion personnalisée » active : le contenu de l’abonné est
   rendu dans une iframe sandboxée, sans script (`_LoginSplitMarque.cshtml`). Le
   panneau garde son dégradé et ses halos ; le cadre, transparent, les laisse voir
   et couvre toute la surface du panneau (le retrait intérieur passe DANS le cadre,
   à la charge de la feuille de l’abonné). Un contenu plus haut que la colonne
   défile dans le cadre au lieu de repousser le formulaire.
   Section placée en FIN de fichier : elle doit l’emporter sur le retrait que la
   règle responsive `.login-split__marque` (même spécificité) pose sous 820 px.
   ----------------------------------------------------------------------------- */
.login-split__marque--cadre {
    padding: 0;
}

/* Au-dessus des halos (pseudo-éléments du panneau, eux-mêmes inertes). */
.login-split__cadre {
    position: absolute;
    inset: 0;
    z-index: 1;
    display: block;
    width: 100%;
    height: 100%;
    border: 0;
    background: transparent;
}

/* Pastille « Environnement de test » : rendue HORS du cadre et au-dessus de lui,
   pour que le contenu de l’abonné ne puisse pas la masquer. Blanche à texte
   marine : lisible sur le fond sombre du panneau comme sur un fond clair choisi
   par l’abonné. `pointer-events: none` : purement informative, elle ne doit pas
   intercepter un clic destiné à un lien du cadre qu’elle recouvrirait. */
.login-split__bandeau-test {
    position: absolute;
    top: 1rem;
    left: 50%;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    gap: .4rem;
    margin: 0;
    padding: .35rem .85rem;
    transform: translateX(-50%);
    border-radius: 50rem;
    background-color: #fff;
    box-shadow: 0 .25rem .75rem rgb(0 0 0 / 25%);
    color: var(--bs-primary, #2e3862);
    font-size: .8125rem;
    font-weight: 600;
    line-height: 1.3;
    white-space: nowrap;
    pointer-events: none;
}

/* Cibler `> i` ET `> svg`, comme pour la puce des arguments : `lucide-init.js`
   retire l’attribut `data-lucide` du `svg` rendu. */
.login-split__bandeau-test > i,
.login-split__bandeau-test > svg {
    flex: 0 0 auto;
    width: 14px;
    height: 14px;
    fill: none;
    stroke-width: 2.5;
}

/* Sous 820 px : le panneau est empilé au-dessus de la carte et n’a plus de hauteur
   imposée par la grille. Le cadre repasse dans le flux avec une hauteur fixe
   (c’est elle qui donne sa hauteur au panneau) et la pastille se place au-dessus
   de lui, dans le flux elle aussi. */
@media (max-width: 820px) {
    .login-split__marque--cadre {
        flex-direction: column;
        align-items: stretch;
        padding: 0;
    }

    .login-split__cadre {
        position: static;
        height: 10rem;
    }

    .login-split__bandeau-test {
        position: static;
        align-self: center;
        margin: 1rem 0 0;
        transform: none;
        white-space: normal;
    }
}