/* ============================================================================ pf-saas-2026.css — Surcouche PREMIUM du split-screen de connexion PulsiForms ---------------------------------------------------------------------------- OBJECTIF : hisser l'écran de connexion (déjà un split-screen SaaS injecté par modules/pf-auth.js › showLoginModal) au niveau de référence 2026 (Stripe / Linear / Vercel), SANS TOUCHER une seule ligne d'authentification. CONTRAT DE STABILITÉ (non négociable) : • ZÉRO modification de pf-auth.js — ce fichier est purement ADDITIF. • Aucun id / name / handler / endpoint / variable JS n'est touché. • Aucun `display:none` / `opacity:0` / `visibility:hidden` sur un élément d'auth. En particulier #pf-google-btn DOIT rester visible (verrou e2e tests/e2e/auth-gate.spec.js › AGE-09). • Le honeypot #pf-hp-field reste invisible (ses styles inline priment) et est explicitement exclu des règles cosmétiques ci-dessous. CASCADE : le CSS interne du login (SHARED_STYLES) est injecté dans document.head AU RUNTIME, donc APRÈS ce . Pour surcharger proprement, toutes les règles sont scopées sous #pf-auth-overlay (spécificité ID) : l'ID l'emporte toujours sur les sélecteurs de classe de SHARED_STYLES. COULEURS : ADN de marque PulsiForms = VIOLET (#6D5DFC). Le brief proposait un bleu #2563EB qui contredit la marque et la contrainte « ne pas modifier les couleurs principales » → on conserve le violet. Le bleu n'est utilisé nulle part ici. ============================================================================ */ /* -------------------------------------------------------------------------- 0. Jetons locaux (n'écrasent AUCUNE variable globale existante : préfixe --pf2- réservé à cette surcouche) -------------------------------------------------------------------------- */ #pf-auth-overlay.pf-split-layout { --pf2-brand: #6D5DFC; /* violet de marque */ --pf2-brand-l: #8275FF; /* violet clair (hover / halo) */ --pf2-brand-d: #5A4AE0; /* violet profond (dégradé bouton) */ --pf2-indigo: #4F46E5; /* indigo premium (accent subtil) */ --pf2-ink: #050510; /* fond le plus profond */ --pf2-panel: #0B0B14; /* surface panneau gauche */ --pf2-field: #141420; /* fond des champs */ --pf2-line: rgba(255,255,255,.08); --pf2-txt: #F5F5F7; --pf2-txt-2: rgba(245,245,247,.66); --pf2-ring: rgba(109,93,252,.55); } /* -------------------------------------------------------------------------- 1. Fond cinématographique (profondeur discrète, jamais flashy) -------------------------------------------------------------------------- */ #pf-auth-overlay.pf-split-layout { background: radial-gradient(1100px 620px at 78% -8%, rgba(109,93,252,.20), transparent 60%), radial-gradient(900px 560px at 100% 108%, rgba(79,70,229,.16), transparent 58%), linear-gradient(180deg, var(--pf2-ink) 0%, #070712 55%, var(--pf2-ink) 100%); } /* Panneau gauche (formulaire) : surface premium + liseré lumineux */ #pf-auth-overlay .pf-auth-side { background: linear-gradient(180deg, rgba(109,93,252,.05), transparent 240px), linear-gradient(180deg, var(--pf2-panel), #08080f 100%); border-right: 1px solid var(--pf2-line); padding: 40px 52px; } /* Liseré vertical brillant à la jointure des deux panneaux */ #pf-auth-overlay .pf-auth-side::after { content: ""; position: absolute; top: 0; right: -1px; bottom: 0; width: 1px; background: linear-gradient(180deg, transparent, var(--pf2-ring), transparent); opacity: .6; pointer-events: none; } /* Panneau droit (vitrine) : halo de marque + grain + vignette cinématique */ #pf-auth-overlay .pf-hero-side { background: radial-gradient(circle at 26% 18%, rgba(109,93,252,.28), transparent 42%), radial-gradient(circle at 82% 84%, rgba(79,70,229,.20), transparent 46%), radial-gradient(circle at top right, #2a0b4a, #09090b 72%); } #pf-auth-overlay .pf-hero-side::before { opacity: .28; } /* trame de points plus subtile */ #pf-auth-overlay .pf-hero-side::after { content: ""; position: absolute; inset: 0; background: radial-gradient(120% 120% at 50% 50%, transparent 58%, rgba(0,0,0,.55) 100%); pointer-events: none; } /* -------------------------------------------------------------------------- 2. Carte / typographie du formulaire -------------------------------------------------------------------------- */ #pf-auth-overlay .pf-card { max-width: 408px; } #pf-auth-overlay .pf-brand-name { font-weight: 700; letter-spacing: -0.01em; background: linear-gradient(90deg, var(--pf2-txt), var(--pf2-brand-l)); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; color: var(--pf2-brand-l); } #pf-auth-overlay #pf-auth-title { font-size: 27px; font-weight: 700; letter-spacing: -0.03em; color: var(--pf2-txt); } #pf-auth-overlay #pf-auth-sub { color: var(--pf2-txt-2); font-size: 14px; } #pf-auth-overlay .pf-card label { font-size: 12px; font-weight: 600; letter-spacing: .01em; color: #c8c8d4; text-transform: none; } /* -------------------------------------------------------------------------- 3. Champs de saisie (texte visibles uniquement — honeypot & cases exclus) -------------------------------------------------------------------------- */ #pf-auth-overlay .pf-card input:not([type="checkbox"]):not(#pf-hp-field) { background: var(--pf2-field); border: 1px solid rgba(255,255,255,.10); border-radius: 11px; padding: 12px 14px; color: var(--pf2-txt); font-size: 14px; transition: border-color .18s ease, box-shadow .18s ease, background-color .18s ease; } #pf-auth-overlay .pf-card input:not([type="checkbox"]):not(#pf-hp-field)::placeholder { color: rgba(245,245,247,.34); } #pf-auth-overlay .pf-card input:not([type="checkbox"]):not(#pf-hp-field):hover { border-color: rgba(255,255,255,.18); } #pf-auth-overlay .pf-card input:not([type="checkbox"]):not(#pf-hp-field):focus { outline: none; border-color: var(--pf2-brand); background: #16161f; box-shadow: 0 0 0 3px rgba(109,93,252,.20); } /* -------------------------------------------------------------------------- 4. Boutons -------------------------------------------------------------------------- */ #pf-auth-overlay .pf-card .btn-main { border-radius: 11px; padding: 13px; font-size: 15px; font-weight: 650; letter-spacing: .005em; background: linear-gradient(135deg, var(--pf2-brand-d) 0%, var(--pf2-brand) 55%, var(--pf2-indigo) 100%); box-shadow: 0 10px 26px -10px rgba(109,93,252,.65), inset 0 1px 0 rgba(255,255,255,.14); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } #pf-auth-overlay .pf-card .btn-main:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(1.05); box-shadow: 0 16px 34px -10px rgba(109,93,252,.75), inset 0 1px 0 rgba(255,255,255,.18); } #pf-auth-overlay .pf-card .btn-main:active:not(:disabled) { transform: translateY(0); } /* Bouton Google : cosmétique uniquement — JAMAIS masqué (verrou AGE-09) */ #pf-auth-overlay #pf-google-btn { border-radius: 11px; box-shadow: 0 2px 10px rgba(0,0,0,.28); transition: transform .18s ease, box-shadow .18s ease, filter .18s ease; } #pf-auth-overlay #pf-google-btn:hover:not(:disabled) { transform: translateY(-1px); filter: brightness(.98); box-shadow: 0 8px 20px rgba(0,0,0,.34); } #pf-auth-overlay .pf-switch a, #pf-auth-overlay #pf-forgot-link { transition: color .18s ease; } /* -------------------------------------------------------------------------- 5. Vitrine — carrousel (verre premium, halo, pastilles) -------------------------------------------------------------------------- */ #pf-auth-overlay .pf-slide-glass { background: linear-gradient(145deg, rgba(255,255,255,.07) 0%, rgba(255,255,255,.015) 100%); border: 1px solid rgba(255,255,255,.12); border-radius: 22px; box-shadow: 0 40px 80px -24px rgba(0,0,0,.6), inset 0 1px 0 rgba(255,255,255,.10), 0 0 0 1px rgba(109,93,252,.06); } #pf-auth-overlay .pf-slide-glass::before { background: linear-gradient(90deg, transparent, var(--pf2-brand-l), transparent); opacity: .55; } #pf-auth-overlay .pf-glass-icon { filter: drop-shadow(0 0 30px rgba(109,93,252,.35)); } #pf-auth-overlay .pf-slide h3 { letter-spacing: -0.035em; } #pf-auth-overlay .pf-dot.active { background: var(--pf2-brand); } /* -------------------------------------------------------------------------- 6. Accessibilité (WCAG AA) — anneau de focus visible et cohérent -------------------------------------------------------------------------- */ #pf-auth-overlay :focus-visible { outline: 2px solid var(--pf2-brand); outline-offset: 2px; border-radius: 6px; } /* Les champs ont déjà leur halo :focus — on évite le double contour */ #pf-auth-overlay .pf-card input:focus-visible { outline: none; } /* -------------------------------------------------------------------------- 7. Mouvement réduit — respecte prefers-reduced-motion (accessibilité + perf) -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #pf-auth-overlay .pf-glass-icon { animation: none; } #pf-auth-overlay .pf-slide { transition: opacity .2s ease; } #pf-auth-overlay .pf-card .btn-main:hover:not(:disabled), #pf-auth-overlay #pf-google-btn:hover:not(:disabled) { transform: none; } } /* -------------------------------------------------------------------------- 8. Responsive — raffinements (sans contredire les points de rupture de SHARED_STYLES : ≤900px masque déjà la vitrine ; ≤380px resserre) -------------------------------------------------------------------------- */ @media (max-width: 1280px) { #pf-auth-overlay .pf-auth-side { padding: 36px 40px; } } @media (max-width: 900px) { /* Ambiance premium quand la vitrine est masquée : halo de marque plein cadre */ #pf-auth-overlay .pf-auth-side { background: radial-gradient(120% 80% at 50% -10%, rgba(109,93,252,.16), transparent 60%), linear-gradient(180deg, var(--pf2-panel), #08080f 100%); border-right: none; padding: 44px 26px; } #pf-auth-overlay .pf-auth-side::after { display: none; } /* liseré inutile en 1 colonne */ } @media (max-width: 380px) { #pf-auth-overlay .pf-auth-side { padding: 30px 18px; } #pf-auth-overlay #pf-auth-title { font-size: 24px; } }