/* ============================================================================= login-split.css — maquette de connexion en DEUX COLONNES (vue Login_test) ----------------------------------------------------------------------------- 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` : la page de connexion actuelle (`Views/Account/Login.cshtml`) n'est pas impactée. ============================================================================= */ .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 `` : 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; } /* 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: 32rem; } .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; } .login-split__arguments li { display: flex; align-items: center; gap: 1rem; font-size: 1rem; } /* 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; display: inline-flex; align-items: center; justify-content: center; width: 2rem; height: 2rem; border-radius: .5rem; background-color: rgb(var(--bs-info-rgb, 112 150 255) / 22%); color: var(--tg-login-accent); } /* 🛑 Cibler `> i` ET `> svg`, jamais `[data-lucide]` : `lucide-init.js` retire l'attribut du `