/** * Vauban Onboarding — Couche de refonte UI (charte sobre, neutre, moderne). * * @version 1.0.0 (2026-05-29) * * Objectif : donner au formulaire d'onboarding v1 un rendu professionnel, * neutre et moderne, en pleine largeur (~1240px). Cette feuille est chargee * APRES le bundle `style.css` et le brand, et fournit l'integralite du chassis * du formulaire (tokens slate/ink coherents avec la charte Vauban : pas de * bleu/orange vif, pas de fond anime, pas de verre depoli). * * Portee : scopee sous `.vauban-onboarding-wrapper` / `#vauban-onboarding-container` * (et `#vauban-standalone-wrap` pour l'ecran disclaimer). Aucune regle globale. * * NOTE : le bloc glassmorphism inline historique de `bootstrap.php` a ete RETIRE * le 2026-05-30. Les neutralisations ci-dessous (fond uni, masquage des orbes) * sont conservees comme filet de securite : un cache de page (LiteSpeed) peut * servir transitoirement l'ancien HTML/JS injectant `#vauban-page-orbs` apres la * mise a jour, jusqu'a purge. */ /* ============================================================================= * 1. Tokens (palette neutre slate/ink, scopes au formulaire + au disclaimer) * ========================================================================== */ .vauban-onboarding-wrapper, #vauban-standalone-wrap { /* Tokens aliasés sur la couche canonique --vt-* (00-semantic-tokens.css). Repli = valeur claire historique → mode CLAIR strictement inchangé ; mode SOMBRE activé automatiquement sous [data-theme="dark"] / auto-OS. */ --vo-bg: var(--vt-bg-page, #F4F5F7); --vo-surface: var(--vt-surface-1, #FFFFFF); --vo-surface-muted: var(--vt-inset, #F9FAFB); /* Surface de SECTION (un cran au-dessus de la carte d'étape) : donne du relief aux sous-blocs en mode sombre (ils se détachent de la carte parente). En clair, --vt-surface-2 n'existe pas → repli blanc = comportement inchangé. */ --vo-section: var(--vt-surface-2, #FFFFFF); --vo-border: var(--vt-border, #E4E7EC); --vo-border-strong: var(--vt-border-strong, #D0D5DD); --vo-ink: var(--vt-text, #101828); --vo-text: var(--vt-text-soft, #344054); --vo-muted: var(--vt-muted, #667085); --vo-faint: var(--vt-muted, #98A2B3); /* Placeholder (texte-exemple des champs) : volontairement PLUS atténué que --vo-faint pour ne jamais être confondu avec une valeur saisie. En sombre, --vt-muted-strong (#64748B) reste nettement en retrait du texte réel (--vo-ink ≈ blanc). En clair, repli #98A2B3 = rendu historique inchangé. */ --vo-placeholder: var(--vt-muted-strong, #98A2B3); --vo-accent: var(--vt-primary, #4F46E5); /* accent unique — indigo de marque (charte vitrine) */ --vo-accent-hover: var(--vt-primary-strong, #4338CA); --vo-accent-soft: var(--vt-primary-bg, #EEF0FE); /* tertiaire indigo très clair (fonds d'état actif) */ --vo-accent-border: var(--vt-primary, #C7CBF8); --vo-success: var(--vt-success, #2F8F5C); --vo-success-soft: var(--vt-success-bg, #E9F5EE); --vo-danger: var(--vt-danger, #C8443D); --vo-danger-soft: var(--vt-danger-bg, #FBECEA); --vo-amber: var(--vt-warning, #B7791F); --vo-radius: 10px; --vo-radius-lg: 14px; --vo-ring: var(--vt-focus-ring, 0 0 0 4px rgba(47, 95, 208, 0.15)); --vo-shadow-sm: var(--vt-shadow-sm, 0 1px 2px rgba(16, 24, 40, 0.05)); --vo-shadow-card: var(--vt-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 4px 16px rgba(16, 24, 40, 0.05)); /* Pancartes : surface PLEINE et sobre en clair (plus de dégradé lavande, qui « bombait » la carte). En sombre, --vt-onb-card-grad reprend le dégradé navy nécessaire au relief (défini dans les blocs sombres plus bas). */ --vo-card-grad: var(--vt-onb-card-grad, var(--vt-surface-1, #FFFFFF)); /* Ombre de contour DISCRÈTE en clair (léger décollement, sans effet 3D marqué — l'ancienne 0 8px 22px faisait trop ressortir la carte). En sombre, --vt-onb-card-shadow restitue l'ombre + liseré clair (décollement du fond sombre). Le token PARTAGÉ --vt-card-shadow reste inchangé (4 espaces). */ --vo-card-shadow: var(--vt-onb-card-shadow, 0 1px 2px rgba(16, 24, 40, 0.04), 0 2px 6px -3px rgba(16, 24, 40, 0.06)); /* Champs — ombre fine + léger halo bicolore « dégradé IA » (indigo gauche / violet droite). */ --vo-field-shadow: var(--vt-field-halo, 0 1px 2px rgba(16, 24, 40, 0.06), -3px 4px 10px -6px rgba(79, 70, 229, 0.20), 3px 4px 10px -6px rgba(124, 58, 237, 0.20)); --vo-field-shadow-hover: 0 1px 2px rgba(16, 24, 40, 0.07), -4px 6px 13px -6px rgba(79, 70, 229, 0.28), 4px 6px 13px -6px rgba(124, 58, 237, 0.28); --vo-field-shadow-focus: var(--vt-onb-focus-glow, 0 1px 2px rgba(16, 24, 40, 0.08), -5px 7px 17px -6px rgba(79, 70, 229, 0.38), 5px 7px 17px -6px rgba(124, 58, 237, 0.38)); --vo-font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; } /* ============================================================================= * 1ter. Bloc d'info réutilisable « .vbn-infocard » — langage visuel du tunnel. * -------------------------------------------------------------------------- * Convention partagée (toutes les étapes) : un bloc où l'on INFORME le * propriétaire (réassurance, « ce que la conciergerie prend en charge », bon à * savoir) se distingue d'un bloc de SAISIE (neutre / blanc) par un code couleur * LÉGER — fond doux (--vo-surface-muted), liseré gauche indigo (--vo-accent-border) * et AUCUNE ombre (aplati). Tokens --vo-* uniquement → mode sombre automatique. * Le contraste neutre (je saisis) ↔ liseré (on m'informe) porte tout le langage. * ========================================================================== */ #vauban-onboarding-container .vbn-infocard { position: relative; margin: 0 0 16px; padding: 18px 20px; background: var(--vo-surface-muted); border: 1px solid var(--vo-border); border-left: 3px solid var(--vo-accent-border); border-radius: var(--vo-radius); box-shadow: none; } #vauban-onboarding-container .vbn-infocard > :last-child { margin-bottom: 0; } /* ============================================================================= * 1bis. Palette SOMBRE propre à l'onboarding (scopée sur la page via :has). * -------------------------------------------------------------------------- * Surcharge la couche canonique --vt-* UNIQUEMENT sur la page du tunnel : palette * plus claire, étagée et teintée indigo → meilleure élévation des cartes/blocs * (ils se détachent du fond) + touche « IA ». N'affecte NI le mode clair NI les * autres espaces. Posée sur pour couvrir aussi les éléments relocalisés * hors du wrapper (barre d'action, modales, portails infobulle/sélecteur). * Bloc « dark explicite » + copie « auto (OS) » à garder STRICTEMENT identiques. * ========================================================================== */ [data-theme="dark"] body:has(#vauban-onboarding-container) { /* --- Échelle d'élévation ÉLARGIE (relief « marqué mais sobre ») ----------- Le fond plonge plus bas et les surfaces remontent franchement : chaque niveau se détache nettement du précédent (page < creux < carte < section < surélevé). Écarts ~10-12 points de clarté entre marches → plus de « tout au même fond ». */ --vt-bg-page: #0E1428; /* fond : indigo-nuit profond (référence basse) */ --vt-inset: #18213C; /* zones en creux (inputs, hovers) */ --vt-surface-1: #232F52; /* carte d'étape : nettement plus claire que le fond */ --vt-surface-2: #2C3A63; /* sections / pancartes internes : encore au-dessus */ --vt-elevated: #38477059; /* surélevé (modales, menus) */ --vt-border: #41507C; /* bordures franches, lisibles sur fond sombre */ --vt-border-strong: #56689B; /* contour accentué (cartes en relief) */ --vt-text: #F1F4FB; /* blanc cassé */ --vt-text-soft: #D8DFF0; --vt-muted: #B8C2DA; /* secondaire : relevé pour lisibilité (≈ 6.2–7.4:1 sur les surfaces) */ --vt-primary: #8E97FF; /* indigo un peu plus clair/punchy en sombre */ --vt-primary-strong: #6D78F0; --vt-primary-bg: rgba(124, 108, 248, 0.20); --vt-primary-action: #5058D9; /* fond bouton CTA : plus sombre que --vt-primary → WCAG AA blanc (5.5:1) */ /* --- Surfaces & ombres de l'onboarding (relief réel) --------------------- Les ombres NOIRES sont invisibles sur fond sombre : on combine une ombre portée sombre (profondeur) AVEC un liseré clair interne en haut (inset) qui simule la lumière rasante → la carte « décolle » visiblement du fond. Un halo indigo très discret ajoute la touche « IA » sobre. */ --vt-onb-card-grad: linear-gradient(180deg, #2C3A63 0%, #263354 100%); --vt-onb-elev: #38477059; --vt-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 26px -12px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(120, 132, 220, 0.05); /* Ombre onboarding des cartes en sombre : reprend le relief partagé (les cartes doivent décoller du fond sombre — contrairement au clair, volontairement plat). */ --vt-onb-card-shadow: var(--vt-card-shadow); --vt-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.55); --vt-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -16px rgba(0, 0, 0, 0.72); --vt-shadow-pop: 0 22px 48px -14px rgba(0, 0, 0, 0.78); /* Champs : léger renfoncement (creux) + halo indigo discret au focus. */ --vt-field-halo: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 6px -3px rgba(0, 0, 0, 0.45); --vt-onb-focus-glow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(142, 151, 255, 0.40); --vt-focus-ring: 0 0 0 3px rgba(142, 151, 255, 0.40); /* Remappage de --color-white pour les éléments à background hardcodé blanc (vauban-card, vauban-details, vauban-nested-box, deepclean-maint-card…). */ --color-white: var(--vt-surface-1); } @media (prefers-color-scheme: dark) { [data-theme="auto"] body:has(#vauban-onboarding-container) { --vt-bg-page: #0E1428; --vt-inset: #18213C; --vt-surface-1: #232F52; --vt-surface-2: #2C3A63; --vt-elevated: #38477059; --vt-border: #41507C; --vt-border-strong: #56689B; --vt-text: #F1F4FB; --vt-text-soft: #D8DFF0; --vt-muted: #B8C2DA; /* secondaire : relevé pour lisibilité (≈ 6.2–7.4:1 sur les surfaces) */ --vt-primary: #8E97FF; --vt-primary-strong: #6D78F0; --vt-primary-bg: rgba(124, 108, 248, 0.20); --vt-primary-action: #5058D9; /* fond bouton CTA : plus sombre que --vt-primary → WCAG AA blanc (5.5:1) */ --vt-onb-card-grad: linear-gradient(180deg, #2C3A63 0%, #263354 100%); --vt-onb-elev: #38477059; --vt-card-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 10px 26px -12px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(120, 132, 220, 0.05); /* Ombre onboarding des cartes en sombre : reprend le relief partagé. */ --vt-onb-card-shadow: var(--vt-card-shadow); --vt-shadow-sm: 0 1px 0 rgba(255, 255, 255, 0.04) inset, 0 4px 12px -6px rgba(0, 0, 0, 0.55); --vt-shadow: 0 1px 0 rgba(255, 255, 255, 0.05) inset, 0 18px 40px -16px rgba(0, 0, 0, 0.72); --vt-shadow-pop: 0 22px 48px -14px rgba(0, 0, 0, 0.78); --vt-field-halo: 0 1px 0 rgba(255, 255, 255, 0.03) inset, 0 2px 6px -3px rgba(0, 0, 0, 0.45); --vt-onb-focus-glow: 0 1px 2px rgba(0, 0, 0, 0.35), 0 0 0 3px rgba(142, 151, 255, 0.40); --vt-focus-ring: 0 0 0 3px rgba(142, 151, 255, 0.40); --color-white: var(--vt-surface-1); } } /* ============================================================================= * 1ter. Disclaimer TOUJOURS en thème clair (même sous [data-theme="dark"]/auto). * -------------------------------------------------------------------------- * On NEUTRALISE les surcharges --vt-* sur le seul scope de l'écran d'intro : * `initial` rend le token « invalide » → chaque var(--vt-X, ) consommé * par vauban-animations.css / disclaimer-rgpd.css retombe sur son fallback clair. * Le fond de page + éléments Elementor sont neutralisés par le bloc 1quater. * Inerte en clair (les --vt-* n'y sont pas définis). * Résultat : carte d'intro et page parente identiques en clair comme en sombre. * ========================================================================== */ .vauban-disclaimer-screen, .vauban-consent-nudge { --vt-onb-page-grad: initial; --vt-bg-page: initial; --vt-inset: initial; --vt-surface-1: initial; --vt-surface-2: initial; --vt-elevated: initial; --vt-border: initial; --vt-border-strong: initial; --vt-text: initial; --vt-text-soft: initial; --vt-muted: initial; --vt-primary: initial; --vt-primary-strong: initial; --vt-primary-bg: initial; --vt-primary-action: initial; --vt-onb-card-grad: initial; --vt-onb-elev: initial; --vt-card-shadow: initial; --vt-onb-card-shadow: initial; --vt-shadow-sm: initial; --vt-shadow: initial; --vt-shadow-pop: initial; --vt-field-halo: initial; --vt-onb-focus-glow: initial; --vt-focus-ring: initial; --color-white: #FFFFFF; } /* ============================================================================= * 1quater. Page disclaimer — fond clair forcé en mode sombre. * -------------------------------------------------------------------------- * Le bloc 1bis a été réduit à #vauban-onboarding-container uniquement : il ne * touche plus .vauban-disclaimer-screen. Mais les tokens --vt-* globaux * (00-semantic-tokens.css, posés sur [data-theme="dark"]) restent hérités. * On neutralise le fond de toute la page et des éléments Elementor parent * pour que le visiteur voie une page claire (couleur du site, non sombre). * Couvre dark explicite + auto OS. * ========================================================================== */ [data-theme="dark"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])), [data-theme="dark"] body:has(#vauban-disclaimer-screen:not([style*="display: none"])) { background-color: var(--ast-global-color-5, #F2F0FE) !important; color-scheme: light; } [data-theme="dark"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .elementor-section, [data-theme="dark"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .elementor-container, [data-theme="dark"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .e-con, [data-theme="dark"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .e-con-boxed, [data-theme="dark"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .elementor-element { background-color: transparent !important; } @media (prefers-color-scheme: dark) { [data-theme="auto"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])), [data-theme="auto"] body:has(#vauban-disclaimer-screen:not([style*="display: none"])) { background-color: var(--ast-global-color-5, #F2F0FE) !important; color-scheme: light; } [data-theme="auto"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .elementor-section, [data-theme="auto"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .elementor-container, [data-theme="auto"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .e-con, [data-theme="auto"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .e-con-boxed, [data-theme="auto"] body:has(.vauban-disclaimer-screen:not([style*="display: none"])) .elementor-element { background-color: transparent !important; } } /* ============================================================================= * 2. Fond neutre + filet de securite anti-cache (orbes/glassmorphism legacy) * -------------------------------------------------------------------------- * `body` n'herite pas des tokens ci-dessus : on utilise des valeurs litterales. * Le bloc inline qui dessinait le fond anime a ete retire de bootstrap.php ; ces * regles restent pour absorber un eventuel cache de page servant l'ancien JS. * ========================================================================== */ body:has(#vauban-onboarding-container), body:has(.vauban-disclaimer-screen) { /* Fond uni ET aligné sur le site : Astra applique --ast-global-color-5 au conteneur de contenu (.ast-separate-container). On reprend exactement cette variable (repli #F2F0FE) pour que la page formulaire ait le MÊME fond que le reste du site, au lieu d'un gris (#F4F5F7) qui tranchait. */ background: var(--vt-onb-page-grad, var(--ast-global-color-5, #F2F0FE)) !important; } /* Page formulaire integree dans une page WordPress : on masque le pied de page du theme. Le tunnel d'onboarding se suffit a lui-meme ; le footer du site rallongeait la page et rompait le fond uni. L'en-tete du site reste, lui, conserve (bande de protection --vauban-header-offset). Couvre Astra (.site-footer / #colophon) et un footer construit avec Elementor. */ body:has(#vauban-onboarding-container) .site-footer, body:has(#vauban-onboarding-container) #colophon, body:has(#vauban-onboarding-container) [data-elementor-type="footer"], body:has(.vauban-disclaimer-screen) .site-footer, body:has(.vauban-disclaimer-screen) #colophon, body:has(.vauban-disclaimer-screen) [data-elementor-type="footer"] { display: none !important; } #vauban-page-orbs { display: none !important; } /* Le conteneur ne doit plus etre centre verticalement ni decale (pas de header). */ #vauban-onboarding-container { margin-top: 0 !important; min-height: 0 !important; display: block !important; } /* Pendant l'écran d'intro (disclaimer encore visible), le conteneur du formulaire ne doit PAS occuper l'espace. Sans cela : le serveur pose style="display:none" sur le conteneur, mais la règle ci-dessus (display:block !important) l'écrase, et vauban-disclaimer.js se contente de le rendre invisible (opacity/visibility) → ~1300px de VIDE apparaissent sous la carte d'intro. On le sort donc du flux tant que le disclaimer n'est pas masqué. Au clic « Commencer », vauban-disclaimer.js pose style="display: none" sur #vauban-disclaimer-screen : la règle cesse alors de matcher et le formulaire reprend son display:block normal. */ body:has(#vauban-disclaimer-screen:not([style*="display: none"])) #vauban-onboarding-container { display: none !important; } .vauban-onboarding-wrapper { background: transparent; } /* ============================================================================= * 3. Layout 2 colonnes (desktop) — sidebar elargie, contenu pleine largeur * ========================================================================== */ @media (min-width: 769px) { #vauban-onboarding-container .vauban-onboarding-layout { align-items: flex-start !important; gap: 28px !important; } #vauban-onboarding-container .vauban-sidebar-nav { /* Menu plus étroit que le formulaire (~33% / ~67%) : le menu n'a pas besoin de la moitié, et le formulaire gagne en largeur lisible. */ flex: 0.5 1 0 !important; width: auto !important; min-width: 0 !important; position: sticky !important; top: 24px !important; align-self: flex-start !important; /* Scroll interne quand le contenu (étapes + widget + boutons dev/reset) dépasse la hauteur de l'écran : sinon le bas reste inatteignable. */ max-height: calc(100vh - 48px) !important; overflow-y: auto !important; overflow-x: hidden !important; /* Scrollbar sobre */ scrollbar-width: thin; scrollbar-color: var(--vo-border-strong) transparent; } #vauban-onboarding-container .vauban-sidebar-nav::-webkit-scrollbar { width: 8px; } #vauban-onboarding-container .vauban-sidebar-nav::-webkit-scrollbar-thumb { background: var(--vo-border-strong); border-radius: 999px; } #vauban-onboarding-container .vauban-sidebar-nav::-webkit-scrollbar-track { background: transparent; } } /* ============================================================================= * 3-bis. Intégration page WordPress : en-tête sticky + pleine largeur + fond * * La refonte v2 avait été pensée pour une page d'onboarding SANS en-tête de * thème (conteneur collé en haut, `margin-top: 0`). Sur une page WordPress * normale qui porte l'en-tête — désormais sticky — le haut du formulaire et la * sidebar sticky passaient SOUS l'en-tête. On réserve une bande de protection * (variable `--vauban-header-offset`, ajustable). Sans effet en mode embed. * * Note : la « pleine largeur » N'est PAS forcée en CSS (un full-bleed * `margin-inline: calc(50% - 50vw)` décalait la mise en page). Pour élargir, * passer la page en « Pleine largeur / Stretched » dans les réglages Astra. * ========================================================================== */ .vauban-onboarding-wrapper.vauban-embed-mode { --vauban-header-offset: 0px; --vauban-sticky-header-offset: 0px; } .vauban-onboarding-wrapper:not(.vauban-embed-mode) { --vauban-header-offset: 140px; --vauban-sticky-header-offset: 140px; } @media (max-width: 921px) { .vauban-onboarding-wrapper:not(.vauban-embed-mode) { /* 769-921 px (tablette) : l'en-tête Astra est neutralisé en flux (position:relative, cf. section 99, portée >=769px) — il occupe déjà sa place dans le flux, aucun contenu à compenser (0). Le cas TÉLÉPHONE (<=768px), où l'en-tête redevient `position:fixed` et recouvre le haut, est traité par le bloc @media max-width:768px ci-dessous. */ --vauban-header-offset: 0px; --vauban-sticky-header-offset: calc( var(--vbm-header-height, 72px) + var(--wp-admin--admin-bar--height, 0px) ); } } /* Téléphone (<=768px) : la neutralisation `position:relative` du header Astra (section 99) est scopée >=769px — SOUS 769px l'en-tête Astra reste donc `position:fixed` (~70 px, z-index 9999) et RECOUVRE le haut du tunnel. Mesuré le 2026-08-03 (iPhone 390x844) : le hero d'étape passait sous lui. On réserve sa hauteur réelle pour le conteneur de formulaire (repli 72 px ; --vbm-header-height n'est pas chargé sur /formulaire/). L'écran d'intro a sa propre règle plus bas. */ @media (max-width: 768px) { .vauban-onboarding-wrapper:not(.vauban-embed-mode) { --vauban-header-offset: calc( var(--vbm-header-height, 72px) + var(--wp-admin--admin-bar--height, 0px) ); } } /* Bande de protection sous l'en-tête : conteneur d'étapes + écran d'intro. + gouttières latérales modérées : la page du formulaire est forcée en layout Astra « pleine largeur » (filtre vauban_onboarding_force_fullwidth_layout) ; sans cette petite réserve, le contenu collerait aux bords de l'écran. */ #vauban-onboarding-container:not(.vauban-embed-mode) { padding-top: var(--vauban-header-offset, 96px) !important; padding-left: clamp(12px, 2.5vw, 32px) !important; padding-right: clamp(12px, 2.5vw, 32px) !important; } .vauban-disclaimer-screen { /* >=769px : header Astra neutralisé en flux (position:relative, section 99) → une simple respiration suffit. Le cas téléphone (<=768px) est traité par le bloc responsive dédié (réservation de la hauteur du header fixe). */ padding-top: clamp(28px, 4vw, 56px); background: var(--vt-onb-page-grad, var(--ast-global-color-5, #F2F0FE)); } /* Filet anti-cache : une ancienne version du JS peut avoir relocalisé la barre dans avant que le disclaimer soit fermé. Elle reste alors invisible. */ body:has(#vauban-disclaimer-screen:not([style*="display: none"])) > .vauban-form-actions, .vauban-form-actions.vauban-form-actions--disclaimer-hidden { display: none !important; } /* Navigation interne entre étapes : l'étape ciblée ne se place plus sous l'en-tête. */ #vauban-onboarding-container .vauban-step-content { scroll-margin-top: calc(var(--vauban-sticky-header-offset, var(--vauban-header-offset, 96px)) + 8px); } @media (min-width: 769px) { /* La sidebar sticky s'arrête elle aussi sous l'en-tête. */ #vauban-onboarding-container .vauban-sidebar-nav { top: calc(var(--vauban-sticky-header-offset, var(--vauban-header-offset, 96px)) + 12px) !important; max-height: calc(100vh - var(--vauban-sticky-header-offset, var(--vauban-header-offset, 96px)) - 24px) !important; } } /* ============================================================================= * 4. Carte de contenu d'etape * ========================================================================== */ #vauban-onboarding-container .vauban-step-content, #vauban-onboarding-container .vauban-onboarding-form-area { background: var(--vo-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius-lg) !important; box-shadow: var(--vo-shadow-card) !important; margin: 0 !important; padding: 32px 36px !important; } /* Sections internes : transparentes pour eviter les cartes imbriquees. */ #vauban-onboarding-container .vauban-step-content .vauban-form-section { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; border-radius: 0 !important; padding: 0 !important; margin: 0 0 24px !important; } @media (max-width: 768px) { #vauban-onboarding-container .vauban-onboarding-layout { gap: 20px !important; } #vauban-onboarding-container .vauban-sidebar-nav { margin-bottom: 0 !important; } #vauban-onboarding-container .vauban-step-content, #vauban-onboarding-container .vauban-onboarding-form-area { padding: 22px 18px !important; border-radius: 12px !important; } } /* ============================================================================= * 5. En-tete d'etape * ========================================================================== */ #vauban-onboarding-container .vauban-step-header { margin: 0 0 24px !important; padding: 0 0 18px !important; border-bottom: 1px solid var(--vo-border) !important; text-align: left !important; } #vauban-onboarding-container .vauban-step-header h2 { font-family: var(--vo-font); font-size: 26px !important; font-weight: 650 !important; line-height: 1.2 !important; letter-spacing: -0.01em !important; color: var(--vo-ink) !important; text-transform: none !important; text-align: left !important; margin: 0 !important; } #vauban-onboarding-container .vauban-step-description, #vauban-onboarding-container .vauban-step-header p { color: var(--vo-muted) !important; font-size: 15px !important; margin: 8px 0 0 !important; line-height: 1.55 !important; } /* ============================================================================= * 6. Sections sequentielles [data-vbn-section] + titres de section * -------------------------------------------------------------------------- * Revelation progressive (chantier 2026-05-30) : a l'interieur d'un conteneur * opt-in `[data-vbn-progressive]`, les sections en attente (`pending`) sont * masquees ; elles se revelent au fur et a mesure que les precedentes sont * completees. Le masquage est conditionne a `.vo-js` (pose par le moteur JS) * pour garantir un repli sur "tout visible" si le JS est absent. * ========================================================================== */ #vauban-onboarding-container [data-vbn-section] { margin: 0 0 30px !important; padding: 0 !important; background: transparent !important; border: 0 !important; box-shadow: none !important; filter: none !important; pointer-events: auto !important; } #vauban-onboarding-container [data-vbn-section]:last-child { margin-bottom: 0 !important; } /* Bloc « Historique commercial » remonté en tête de l'étape 1 — hors cascade de * révélation progressive (toujours visible), mais aligné sur le rythme vertical * des sections. */ #vauban-onboarding-container .vauban-history-block { margin: 0 0 30px; } /* Sections en attente : masquees uniquement en mode progressif (JS actif). */ #vauban-onboarding-container.vo-js [data-vbn-progressive] [data-vbn-section][data-vbn-state="pending"] { display: none !important; } /* Animation douce a la revelation. Generique : s'applique aux sections du moteur progressif ET a tout bloc revele par le "reveal-animator" (autres etapes). */ #vauban-onboarding-container .vo-reveal { animation: vo-section-in 0.42s cubic-bezier(0.22, 0.61, 0.36, 1) both; } @keyframes vo-section-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } } @media (prefers-reduced-motion: reduce) { #vauban-onboarding-container .vo-reveal { animation: none; } } /* Etape 2 - revelation progressive sur-mesure (B6, 2026-05-31). Les sections "consommables" et "logistique" restent masquees tant que l'utilisateur n'a pas engage la section precedente (step2-progressive.js fait passer data-vbn-step2 de "pending" a "revealed"). Masquage actif UNIQUEMENT quand le JS a pose .vo-step2-js sur la racine -> sans JS, tout reste visible. */ #vauban-onboarding-container .vo-step2-js [data-vbn-step2="pending"] { display: none; } #vauban-onboarding-container .vbn-section-title { font-family: var(--vo-font); font-size: 16px; font-weight: 600; color: var(--vo-ink); margin: 0 0 16px; padding: 0 0 10px; border-bottom: 1px solid var(--vo-border); letter-spacing: -0.005em; line-height: 1.35; } /* ============================================================================= * 7. Groupes de champs, labels, aides * ========================================================================== */ #vauban-onboarding-container .vauban-form-group { margin-bottom: 20px; } #vauban-onboarding-container .vauban-form-group > label { display: block; font-family: var(--vo-font); font-size: 13.5px; font-weight: 600; color: var(--vo-text); margin-bottom: 7px; line-height: 1.4; } #vauban-onboarding-container .required { color: var(--vo-danger); font-weight: 600; } #vauban-onboarding-container .vauban-address-hint, #vauban-onboarding-container .field-help, #vauban-onboarding-container .vauban-form-group small { display: block; color: var(--vo-muted); font-size: 12.5px; margin-top: 6px; line-height: 1.5; } #vauban-onboarding-container .vauban-help-tip { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 15px; height: 15px; border-radius: 50%; background: var(--vo-accent-soft); color: var(--vo-muted); border: 1px solid var(--vo-border-strong); font-size: 10px; font-weight: 700; line-height: 1; cursor: pointer; vertical-align: middle; margin-left: 2px; transition: color 0.12s ease, border-color 0.12s ease; } #vauban-onboarding-container .vauban-help-tip:hover, #vauban-onboarding-container .vauban-help-tip:focus { color: var(--vo-ink); border-color: var(--vo-faint); outline: none; } /* Bulle d'aide : rendue dans un élément unique attaché au wrapper de page * (#vauban-standalone-wrap / .vauban-onboarding-wrapper) par onboarding-help-tip.js * et positionnée en `position: fixed`. Volontairement hors de #vauban-onboarding-container * pour échapper aux contextes d'empilement (z-index des cartes/simulateur) et aux * `overflow: hidden`, tout en restant dans le scope des tokens --vo-*. */ .vauban-onboarding-wrapper .vauban-help-tip-bubble, #vauban-standalone-wrap .vauban-help-tip-bubble { position: fixed; z-index: 2147483647; max-width: 260px; padding: 9px 12px; background: var(--vo-ink); color: var(--vo-surface); border-radius: var(--vo-radius); font-family: inherit; font-size: 12px; font-weight: 500; line-height: 1.45; text-align: left; white-space: normal; box-shadow: 0 6px 24px rgba(16, 24, 40, 0.28); opacity: 0; visibility: hidden; pointer-events: none; transform: translateY(-4px); transition: opacity 0.14s ease, transform 0.14s ease; } .vauban-onboarding-wrapper .vauban-help-tip-bubble.is-visible, #vauban-standalone-wrap .vauban-help-tip-bubble.is-visible { opacity: 1; visibility: visible; transform: translateY(0); } /* ============================================================================= * 8. Champs (input / select / textarea) * -------------------------------------------------------------------------- * `background-color` (et non `background`) pour ne pas effacer la fleche SVG * du select definie dans le bundle de base. * ========================================================================== */ #vauban-onboarding-container .vauban-form-group input[type="text"], #vauban-onboarding-container .vauban-form-group input[type="email"], #vauban-onboarding-container .vauban-form-group input[type="tel"], #vauban-onboarding-container .vauban-form-group input[type="number"], #vauban-onboarding-container .vauban-form-group input[type="url"], #vauban-onboarding-container .vauban-form-group input[type="date"], #vauban-onboarding-container .vauban-form-group input[type="time"], #vauban-onboarding-container .vauban-form-group input[type="password"], #vauban-onboarding-container .vauban-form-group select, #vauban-onboarding-container .vauban-form-group textarea { width: 100%; padding: 11px 14px !important; background-color: var(--vo-surface); border: 1px solid var(--vo-border-strong) !important; border-radius: var(--vo-radius) !important; font-family: var(--vo-font); font-size: 14.5px !important; line-height: 1.5; color: var(--vo-ink); box-shadow: var(--vo-field-shadow); transition: border-color 0.15s ease, box-shadow 0.15s ease, transform 0.15s ease; box-sizing: border-box; } #vauban-onboarding-container .vauban-form-group select { height: 46px !important; -webkit-appearance: none; appearance: none; cursor: pointer; } #vauban-onboarding-container .vauban-form-group textarea { min-height: 110px; resize: vertical; } #vauban-onboarding-container .vauban-form-group input::placeholder, #vauban-onboarding-container .vauban-form-group textarea::placeholder { color: var(--vo-placeholder); opacity: 1; } /* Filet de sécurité — TOUT placeholder du tunnel (y compris les champs hors .vauban-form-group des étapes 2/4/7) reste franchement atténué, pour ne jamais passer pour une valeur déjà saisie en mode sombre. */ #vauban-onboarding-container input::placeholder, #vauban-onboarding-container textarea::placeholder { color: var(--vo-placeholder); opacity: 1; } #vauban-onboarding-container .vauban-form-group input:hover, #vauban-onboarding-container .vauban-form-group select:hover, #vauban-onboarding-container .vauban-form-group textarea:hover { box-shadow: var(--vo-field-shadow-hover); } #vauban-onboarding-container .vauban-form-group input:focus, #vauban-onboarding-container .vauban-form-group select:focus, #vauban-onboarding-container .vauban-form-group textarea:focus { outline: none; border-color: var(--vo-accent) !important; transform: translateY(-1px); box-shadow: var(--vo-field-shadow-focus) !important; } /* Accessibilité : pas de soulèvement si l'utilisateur réduit les animations. */ @media (prefers-reduced-motion: reduce) { #vauban-onboarding-container .vauban-form-group input:focus, #vauban-onboarding-container .vauban-form-group select:focus, #vauban-onboarding-container .vauban-form-group textarea:focus { transform: none; } } #vauban-onboarding-container .vauban-form-group input.error, #vauban-onboarding-container .vauban-form-group select.error, #vauban-onboarding-container .vauban-form-group input[aria-invalid="true"] { border-color: var(--vo-danger) !important; } /* Radios / cases (alignement sobre). */ #vauban-onboarding-container .vauban-radio-inline { background: var(--vo-surface); border: 1px solid var(--vo-border-strong); border-radius: var(--vo-radius); } #vauban-onboarding-container .vauban-radio-inline:hover { background: var(--vo-surface-muted); border-color: var(--vo-faint); } #vauban-onboarding-container input[type="radio"], #vauban-onboarding-container input[type="checkbox"] { accent-color: var(--vo-accent); } /* ============================================================================= * 9. Boutons * ========================================================================== */ #vauban-onboarding-container .vauban-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 12px 22px; border: 1px solid transparent; border-radius: var(--vo-radius) !important; font-family: var(--vo-font); font-size: 14.5px; font-weight: 600; line-height: 1.2; cursor: pointer; text-decoration: none; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease; } #vauban-onboarding-container .vauban-btn-primary { background: var(--vo-accent) !important; color: #FFFFFF !important; box-shadow: var(--vo-shadow-sm); } #vauban-onboarding-container .vauban-btn-primary:hover { background: var(--vo-accent-hover) !important; color: #FFFFFF !important; transform: translateY(-1px); box-shadow: 0 4px 14px rgba(16, 24, 40, 0.16) !important; } #vauban-onboarding-container .vauban-btn-secondary { background: var(--vo-surface) !important; color: var(--vo-text) !important; border: 1px solid var(--vo-border-strong) !important; } #vauban-onboarding-container .vauban-btn-secondary:hover { background: var(--vo-surface-muted) !important; color: var(--vo-ink) !important; border-color: var(--vo-faint) !important; } #vauban-onboarding-container .vauban-btn-minimal:hover { background: var(--vo-surface-muted) !important; color: var(--vo-ink) !important; transform: none; } #vauban-onboarding-container .vauban-btn-primary:disabled, #vauban-onboarding-container .vauban-btn-primary.vbn-next-locked { opacity: 0.42; cursor: not-allowed; transform: none !important; box-shadow: none !important; } #vauban-onboarding-container .vauban-btn-primary:focus-visible, #vauban-onboarding-container .vauban-btn-secondary:focus-visible { outline: none; box-shadow: var(--vo-ring) !important; } /* ============================================================================= * 10. Barre d'actions (navigation entre etapes) * ========================================================================== */ #vauban-onboarding-container .vauban-form-actions { display: flex; justify-content: flex-end; align-items: center; gap: 12px; margin-top: 32px; padding-top: 22px; border-top: 1px solid var(--vo-border); } #vauban-onboarding-container .vauban-form-actions--two, #vauban-onboarding-container .vauban-form-actions.has-back { justify-content: space-between; } /* Bandeau de navigation eventuel (override du glassmorphism inline). */ #vauban-onboarding-container .vauban-navigation-buttons { background: transparent !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 0 !important; box-shadow: none !important; padding: 0 !important; } /* ============================================================================= * 11. Sidebar de navigation — refonte style IA (2026-06-01) * ========================================================================== */ /* Carte — fond légèrement teinté indigo, ombre plus marquée */ @media (min-width: 769px) { #vauban-onboarding-container .vauban-sidebar-card { display: flex !important; flex-direction: column !important; gap: 4px; padding: 16px 14px !important; background: var(--vt-sidebar-bg, linear-gradient(160deg, #fafbff 0%, #f5f7ff 100%)) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid rgba(79, 70, 229, 0.12) !important; border-radius: var(--vo-radius-lg) !important; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.07), 0 1px 3px rgba(16, 24, 40, 0.06) !important; overflow: visible !important; } #vauban-onboarding-container .vauban-sidebar-steps, #vauban-onboarding-container #vauban-steps-list { display: flex !important; flex-direction: column !important; gap: 2px !important; overflow: visible !important; max-height: none !important; padding: 4px 0 !important; } } /* Header */ #vauban-onboarding-container .vauban-sidebar-header { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 0 2px 14px !important; margin-bottom: 8px; background: transparent !important; background-image: none !important; border: 0 !important; border-bottom: 1px solid rgba(79, 70, 229, 0.1) !important; border-radius: 0 !important; position: relative; } #vauban-onboarding-container .vauban-sidebar-header__icon { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 10px; background: var(--vt-primary-bg, linear-gradient(135deg, #EEF0FE 0%, #E5E7FF 100%)) !important; color: var(--vo-accent) !important; flex-shrink: 0; box-shadow: 0 1px 3px rgba(79, 70, 229, 0.12); } #vauban-onboarding-container .vauban-sidebar-header__icon svg { width: 16px; height: 16px; } #vauban-onboarding-container .vauban-sidebar-header__text { display: flex; flex-direction: column; min-width: 0; } #vauban-onboarding-container .vauban-sidebar-header__step { font-size: 10px; font-weight: 700; color: var(--vo-accent); text-transform: uppercase; letter-spacing: 0.07em; opacity: 0.75; } #vauban-onboarding-container .vauban-sidebar-header__title { font-size: 13px; font-weight: 700; color: var(--vo-ink); line-height: 1.3; } /* Barre de progression — gradient indigo */ #vauban-onboarding-container .vauban-sidebar-header__bar { position: static !important; flex: 1 1 100%; height: 4px; border-radius: 999px; background: var(--vt-primary-bg, rgba(79, 70, 229, 0.1)) !important; overflow: hidden; margin-top: 8px; } #vauban-onboarding-container .vauban-sidebar-header__fill { height: 100%; background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 100%) !important; border-radius: 999px; transition: width 0.5s cubic-bezier(0.4, 0, 0.2, 1); box-shadow: 0 0 6px rgba(79, 70, 229, 0.4); } /* Description courte de l'étape courante */ #vauban-onboarding-container .vauban-sidebar-header__desc { flex: 1 1 100%; margin: 5px 0 0; font-size: 10px; line-height: 1.4; color: var(--vo-muted); font-style: italic; } /* Étape — base */ #vauban-onboarding-container .vauban-sb-step { display: flex; align-items: center; gap: 10px; padding: 8px 10px !important; border-radius: 8px; text-decoration: none; color: var(--vo-muted); border: 0; border-left: 3px solid transparent; transition: background-color 0.18s ease, color 0.18s ease, border-color 0.18s ease; position: relative; } /* Dot — base (toutes les étapes) */ #vauban-onboarding-container .vauban-sb-step__dot { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; flex-shrink: 0; border-radius: 50%; border: 1.5px solid var(--vo-border-strong); background: var(--vo-surface); color: var(--vo-faint); font-size: 11px; font-weight: 600; } #vauban-onboarding-container .vauban-sb-step__n { font-size: 11px; font-weight: 600; } #vauban-onboarding-container .vauban-sb-step__txt { font-size: 12.5px; font-weight: 500; line-height: 1.25; white-space: normal; } /* ---- État actif (is-current) ---- */ #vauban-onboarding-container .vauban-sb-step.is-current { background: var(--vt-primary-bg, rgba(79, 70, 229, 0.06)) !important; border-left-color: var(--vo-accent) !important; color: var(--vo-ink); } #vauban-onboarding-container .vauban-sb-step.is-current .vauban-sb-step__txt { font-weight: 700 !important; color: var(--vo-accent) !important; } /* Dot actif : style radio-button — anneau indigo, fond blanc, pastille centrale */ #vauban-onboarding-container .vauban-sb-step.is-current .vauban-sb-step__dot { background: var(--vt-surface-1, #fff) !important; border: 2px solid var(--vo-accent) !important; color: var(--vo-accent) !important; box-shadow: 0 0 0 3px rgba(79, 70, 229, 0.12) !important; } /* Pulse : pastille intérieure indigo animée (8px centrée dans l'anneau) */ #vauban-onboarding-container .vauban-sb-step.is-current .vauban-sb-step__pulse { display: block !important; width: 8px !important; height: 8px !important; border-radius: 50% !important; background: var(--vo-accent) !important; flex-shrink: 0; animation: vbn-dot-pulse 2s ease-in-out infinite; } @keyframes vbn-dot-pulse { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(0.65); opacity: 0.6; } } /* ---- État complété (is-done) ---- */ #vauban-onboarding-container .vauban-sb-step.is-done { color: var(--vo-text); } #vauban-onboarding-container .vauban-sb-step.is-done .vauban-sb-step__dot { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important; border-color: transparent !important; color: #fff !important; box-shadow: 0 1px 4px rgba(79, 70, 229, 0.2) !important; } #vauban-onboarding-container .vauban-sb-step.is-done .vauban-sb-step__txt { color: var(--vo-text) !important; } #vauban-onboarding-container .vauban-sb-step.is-done .vauban-sb-step__dot svg { width: 11px; height: 11px; } /* ---- État accessible non commencé (is-open) ---- */ #vauban-onboarding-container .vauban-sb-step.is-open .vauban-sb-step__dot { background: var(--vo-surface) !important; border-color: var(--vo-border-strong) !important; color: var(--vo-muted) !important; } #vauban-onboarding-container .vauban-sb-step.is-open .vauban-sb-step__txt { color: var(--vo-text) !important; } /* ---- Connecteurs verticaux (entre pastilles) ---- */ #vauban-onboarding-container .vauban-sb-step.is-done:not(:last-child)::after { background: rgba(79, 70, 229, 0.25) !important; } /* ---- Chargement ---- */ #vauban-onboarding-container .vauban-sb-step.is-loading .vauban-sb-step__dot { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important; border-color: transparent !important; box-shadow: 0 0 0 4px rgba(79, 70, 229, 0.18) !important; } /* ---- Cliquable / hover ---- */ #vauban-onboarding-container .vauban-sb-step.vauban-step-nav-clickable { cursor: pointer; } #vauban-onboarding-container .vauban-sb-step.vauban-step-nav-clickable:hover:not(.is-current) { background: var(--vt-primary-bg, rgba(79, 70, 229, 0.04)); color: var(--vo-ink); } /* ---- Verrouillé ---- */ #vauban-onboarding-container .vauban-sb-step.is-locked { opacity: 0.45; cursor: default; } /* ---- Pied de carte ---- */ #vauban-onboarding-container .vauban-sidebar-foot { display: flex; align-items: center; gap: 7px; margin-top: 10px; padding: 10px 8px 2px; border-top: 1px solid rgba(79, 70, 229, 0.08); color: var(--vo-muted); font-size: 11.5px; line-height: 1.4; } #vauban-onboarding-container .vauban-sidebar-foot svg { flex-shrink: 0; color: var(--vo-faint); } /* ---- Boutons dev / reset / home ---- */ #vauban-onboarding-container .vauban-sidebar-dev, #vauban-onboarding-container .vauban-sidebar-reset, #vauban-onboarding-container .vauban-sidebar-home { margin-top: 10px; } #vauban-onboarding-container .vauban-sidebar-home-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; background: var(--vo-surface); border: 1px solid var(--vo-border); border-radius: 8px; color: var(--vo-muted); font-size: 12px; font-weight: 600; text-decoration: none; transition: background-color 0.15s ease, color 0.15s ease; box-sizing: border-box; } #vauban-onboarding-container .vauban-sidebar-home-btn:hover { background: var(--vo-surface-muted); color: var(--vo-ink); text-decoration: none; } #vauban-onboarding-container .vauban-sidebar-dev-label { display: flex; align-items: center; gap: 5px; font-size: 10px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--vo-faint); margin-bottom: 6px; } #vauban-onboarding-container .vauban-sidebar-dev-btn, #vauban-onboarding-container .vauban-sidebar-reset-btn { width: 100%; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 10px; background: var(--vo-surface); border: 1px solid var(--vo-border-strong); border-radius: 8px; color: var(--vo-muted); font-size: 12px; font-weight: 600; cursor: pointer; transition: background-color 0.15s ease, color 0.15s ease; } #vauban-onboarding-container .vauban-sidebar-dev-btn:hover, #vauban-onboarding-container .vauban-sidebar-reset-btn:hover { background: var(--vo-surface-muted); color: var(--vo-ink); } /* ============================================================================= * 12. Carte pedagogique d'etape (neutralisation du gradient orange inline) * ========================================================================== */ #vauban-onboarding-container .vauban-step-info-card { background: var(--vo-surface) !important; background-image: none !important; border: 1px solid var(--vo-border) !important; border-left: 3px solid var(--vo-accent) !important; border-radius: var(--vo-radius-lg) !important; box-shadow: var(--vo-shadow-sm) !important; color: var(--vo-text) !important; } /* ============================================================================= * 13. Ecran disclaimer (carte solide, recouvre le glassmorphism inline) * ========================================================================== */ #vauban-standalone-wrap .vauban-disclaimer-content { background: var(--vo-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; border: 1px solid var(--vo-border) !important; box-shadow: var(--vo-shadow-card) !important; } #vauban-standalone-wrap .vauban-disclaimer-footer { background: var(--vo-surface) !important; backdrop-filter: none !important; -webkit-backdrop-filter: none !important; } /* ============================================================================= * 14. Harmonisation des couleurs legacy -> accent unique + neutres * -------------------------------------------------------------------------- * Le formulaire historique mélange plusieurs hues (bleu de marque #1E40AF, * orange #F97316, verts #10B981/#34D399, multiples gris). On harmonise vers * UN accent (#2F5FD0) + une échelle slate, en 3 couches : * (a) re-mapping des variables de design du socle (`--color-*`) — couvre tout * ce qui passe par var() ; * (b) override des classes du bundle qui codent les couleurs en dur ; * (c) mappings d'inline styles fréquents [style*=...] (sans !important). * Les inline styles AVEC !important (ex. visual-progress.php) ne sont PAS * surchargeables ici et relèvent d'une édition PHP (consignée au backlog). * ========================================================================== */ /* (a) Re-mapping des tokens de design du socle (01-base-forms.css :root). */ #vauban-onboarding-container, #vauban-standalone-wrap { --color-primary: var(--vo-accent); --color-primary-hover: var(--vo-accent-hover); --color-secondary: var(--vo-accent); /* l'orange secondaire devient l'accent */ --color-info: var(--vo-accent); --color-info-bg: var(--vo-accent-soft); --color-info-dark: var(--vo-accent-hover); --color-success: var(--vo-success); --color-success-bg: var(--vo-success-soft); --color-success-dark: var(--vo-success); --color-warning: var(--vo-amber); --color-warning-bg: var(--vt-warning-bg, #FBF7EC); --color-warning-dark: var(--vo-amber); --color-error: var(--vo-danger); --color-error-bg: var(--vo-danger-soft); --color-text-main: var(--vo-ink); --color-text-light: var(--vo-muted); --color-border: var(--vo-border); --color-bg-light: var(--vo-surface-muted); } /* (b) Classes du bundle codées en dur. */ #vauban-onboarding-container .vauban-contact-option { border-color: var(--vo-accent) !important; color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-contact-option:hover { background: var(--vo-accent-soft) !important; box-shadow: 0 8px 20px rgba(47, 95, 208, 0.12) !important; } #vauban-onboarding-container .vauban-contact-option__desc { color: var(--vo-muted) !important; } #vauban-onboarding-container .vauban-contact-modal__title { color: var(--vo-ink) !important; } #vauban-onboarding-container .vauban-contact-modal__close:hover { color: var(--vo-accent) !important; } #vauban-onboarding-container .tooltip-icon { background: var(--vo-accent) !important; } #vauban-onboarding-container .tooltip-icon:hover { background: var(--vo-accent-hover) !important; } #vauban-onboarding-container .vauban-radio-inline input[type="radio"] { accent-color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-radio-inline input[type="radio"]:checked + .radio-label { color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-select-menu__title { background: var(--vo-accent) !important; background-image: none !important; } #vauban-onboarding-container .vauban-select-menu__item:hover, #vauban-onboarding-container .vauban-select-menu__item:focus { background: var(--vo-accent-soft) !important; } #vauban-onboarding-container .vauban-select-menu__item--selected { background: var(--vo-accent-soft) !important; color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-progress-fill { background: var(--vo-accent) !important; background-image: none !important; } #vauban-onboarding-container .vauban-step-indicator.active .step-number { background: var(--vo-accent) !important; color: #FFFFFF !important; } #vauban-onboarding-container .vauban-message.success { background: var(--vo-success-soft) !important; color: var(--vo-success) !important; border-color: var(--vo-success) !important; } #vauban-onboarding-container .vauban-message.error { background: var(--vo-danger-soft) !important; color: var(--vo-danger) !important; border-color: var(--vo-danger) !important; } /* (c) Inline styles fréquents (sans !important) -> accent / neutres. */ /* Bleus de marque pleins (fonds) */ #vauban-onboarding-container [style*="background: #1E40AF"], #vauban-onboarding-container [style*="background:#1E40AF"], #vauban-onboarding-container [style*="background-color: #1E40AF"], #vauban-onboarding-container [style*="background: #1E3A8A"], #vauban-onboarding-container [style*="background:#1E3A8A"], #vauban-onboarding-container [style*="background: #2563EB"], #vauban-onboarding-container [style*="background: #1D4ED8"] { background-color: var(--vo-accent) !important; background-image: none !important; } /* Gradients bleus -> accent plein */ #vauban-onboarding-container [style*="linear-gradient(135deg, #1E40AF"], #vauban-onboarding-container [style*="linear-gradient(135deg,#1E40AF"], #vauban-onboarding-container [style*="linear-gradient(135deg, #2563EB"], #vauban-onboarding-container [style*="linear-gradient(135deg, #1E3A8A"], #vauban-onboarding-container [style*="linear-gradient(90deg, #1E40AF"] { background-image: linear-gradient(135deg, var(--vo-accent), var(--vo-accent-hover)) !important; } /* Bleus très clairs (fonds info) -> accent-soft */ #vauban-onboarding-container [style*="background: #EFF6FF"], #vauban-onboarding-container [style*="background:#EFF6FF"], #vauban-onboarding-container [style*="background: #DBEAFE"], #vauban-onboarding-container [style*="background: #F0F9FF"], #vauban-onboarding-container [style*="background: #E0F2FE"], #vauban-onboarding-container [style*="background: #BFDBFE"] { background-color: var(--vo-accent-soft) !important; } /* Bordures bleues -> accent-border */ #vauban-onboarding-container [style*="border-color: #3B82F6"], #vauban-onboarding-container [style*="border-color: #BAE6FD"], #vauban-onboarding-container [style*="border-color: #93C5FD"], #vauban-onboarding-container [style*="border-color: #BFDBFE"], #vauban-onboarding-container [style*="border-left: 4px solid #1E40AF"], #vauban-onboarding-container [style*="border: 2px solid #3B82F6"], #vauban-onboarding-container [style*="border: 1.5px solid #3B82F6"] { border-color: var(--vo-accent) !important; } /* Texte bleu foncé -> ink / accent */ #vauban-onboarding-container [style*="color: #1E40AF"], #vauban-onboarding-container [style*="color:#1E40AF"], #vauban-onboarding-container [style*="color: #1E3A8A"], #vauban-onboarding-container [style*="color: #1D4ED8"] { color: var(--vo-accent) !important; } /* Orange / ambre décoratif -> accent (fonds) et neutre (textes) */ #vauban-onboarding-container [style*="background: #F97316"], #vauban-onboarding-container [style*="background: #FFF7ED"], #vauban-onboarding-container [style*="background: #FFEDD5"], #vauban-onboarding-container [style*="linear-gradient(135deg, #FFF7ED"], #vauban-onboarding-container [style*="linear-gradient(135deg, #F97316"] { background-color: var(--vo-accent-soft) !important; background-image: none !important; } #vauban-onboarding-container [style*="border-left: 4px solid #F97316"], #vauban-onboarding-container [style*="border-color: #F97316"] { border-color: var(--vo-accent) !important; } #vauban-onboarding-container [style*="color: #F97316"], #vauban-onboarding-container [style*="color: #9A3412"], #vauban-onboarding-container [style*="color: #92400E"], #vauban-onboarding-container [style*="color: #78350F"], #vauban-onboarding-container [style*="color: #B45309"], #vauban-onboarding-container [style*="color: #D97706"] { color: var(--vo-text) !important; } /* Verts -> success sobre */ #vauban-onboarding-container [style*="background: #10B981"], #vauban-onboarding-container [style*="background: #059669"], #vauban-onboarding-container [style*="linear-gradient(135deg, #10B981"] { background-color: var(--vo-success) !important; background-image: none !important; } #vauban-onboarding-container [style*="background: #ECFDF5"], #vauban-onboarding-container [style*="background: #F0FDF4"], #vauban-onboarding-container [style*="background: #D1FAE5"] { background-color: var(--vo-success-soft) !important; } #vauban-onboarding-container [style*="color: #059669"], #vauban-onboarding-container [style*="color: #15803D"], #vauban-onboarding-container [style*="color: #166534"], #vauban-onboarding-container [style*="color: #065F46"] { color: var(--vo-success) !important; } /* Rouges -> error sobre */ #vauban-onboarding-container [style*="background: #DC2626"], #vauban-onboarding-container [style*="background: #EF4444"], #vauban-onboarding-container [style*="background: #F87171"] { background-color: var(--vo-danger) !important; } #vauban-onboarding-container [style*="background: #FEE2E2"], #vauban-onboarding-container [style*="background: #FEF2F2"], #vauban-onboarding-container [style*="background: #FEF3F2"], #vauban-onboarding-container [style*="background: #FBECEA"] { background-color: var(--vo-danger-soft) !important; } #vauban-onboarding-container [style*="color: #DC2626"], #vauban-onboarding-container [style*="color: #EF4444"], #vauban-onboarding-container [style*="color: #991B1B"] { color: var(--vo-danger) !important; } /* ============================================================================= * 15. Mini-carte d'adresse (Leaflet) — protections rendu + marqueur visible * -------------------------------------------------------------------------- * Le socle applique `.vauban-step-content * { max-width: 100% }` + box-sizing * global, ce qui peut contraindre les tuiles et le marqueur Leaflet. On lève * ces contraintes dans la carte et on rend le pin « votre bien est ici » bien * visible (taille + ombre portée). Le marqueur est un divIcon SVG (pas de PNG). * ========================================================================== */ #vauban-onboarding-container .vban-map img, #vauban-onboarding-container .vban-map .leaflet-tile, #vauban-onboarding-container .vban-map .leaflet-marker-icon, #vauban-onboarding-container .vban-map .vban-map__pin, #vauban-onboarding-container .vban-map .vban-map__pin svg { max-width: none !important; box-sizing: content-box !important; } #vauban-onboarding-container .vban-map .leaflet-pane, #vauban-onboarding-container .vban-map .leaflet-marker-pane { overflow: visible !important; } /* Pin "votre bien est ici" : ombre portée pour qu'il ressorte sur les tuiles. Taille native 26x36 conservée (cohérente avec iconSize/iconAnchor du JS). */ #vauban-onboarding-container .vban-map__pin { filter: drop-shadow(0 3px 4px rgba(16, 24, 40, 0.35)); } #vauban-onboarding-container .vban-map__pin svg { display: block; } /* ============================================================================= * 16. Panneau « Détails complémentaires » (ex-Mode expert + Qualification) * -------------------------------------------------------------------------- * Un seul panneau dépliable sobre `.vo-details` regroupant les sous-groupes * `.vo-group` (Logement & couchages / Voisinage / État / Historique). * ========================================================================== */ #vauban-onboarding-container .vo-details { background: var(--vo-surface); border: 1px solid var(--vo-border); border-radius: var(--vo-radius-lg); box-shadow: var(--vo-shadow-sm); overflow: hidden; margin: 4px 0 0; } #vauban-onboarding-container .vo-details__summary { display: flex; align-items: center; gap: 14px; padding: 16px 20px; cursor: pointer; list-style: none; user-select: none; transition: background-color 0.15s ease; } #vauban-onboarding-container .vo-details__summary::-webkit-details-marker { display: none; } #vauban-onboarding-container .vo-details__summary:hover { background: var(--vo-surface-muted); } #vauban-onboarding-container .vo-details__text { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; } #vauban-onboarding-container .vo-details__title { font-size: 15px; font-weight: 600; color: var(--vo-ink); } #vauban-onboarding-container .vo-details__hint { font-size: 12.5px; color: var(--vo-muted); line-height: 1.45; } #vauban-onboarding-container .vo-details__badge { flex-shrink: 0; font-size: 11px; font-weight: 600; color: var(--vo-accent); background: var(--vo-accent-soft); border: 1px solid var(--vo-accent-border); border-radius: 999px; padding: 3px 10px; text-transform: uppercase; letter-spacing: 0.03em; } /* Variante statique : le bloc « Détails du logement & qualification » est * désormais obligatoire, donc toujours déplié (plus de
repliable). * On neutralise l'affordance de clic de l'en-tête et on distingue le badge. */ #vauban-onboarding-container .vo-details__summary--static { cursor: default; } #vauban-onboarding-container .vo-details__summary--static:hover { background: transparent; } #vauban-onboarding-container .vo-details__badge--required { color: var(--vo-ink); } #vauban-onboarding-container .vo-details__chevron { flex-shrink: 0; display: inline-flex; color: var(--vo-muted); transition: transform 0.25s ease; } #vauban-onboarding-container .vo-details[open] .vo-details__chevron { transform: rotate(180deg); } #vauban-onboarding-container .vo-details__body { padding: 4px 20px 20px; border-top: 1px solid var(--vo-border); } #vauban-onboarding-container .vo-details__intro { margin: 16px 0 20px; padding: 12px 14px; background: var(--vo-accent-soft); border-left: 3px solid var(--vo-accent); border-radius: 8px; font-size: 13px; line-height: 1.55; color: var(--vo-text); } #vauban-onboarding-container .vo-details__intro strong { color: var(--vo-ink); font-weight: 600; } /* Sous-groupes */ #vauban-onboarding-container .vo-group { border: 0; margin: 0 0 22px; padding: 18px 0 0; border-top: 1px solid var(--vo-border); min-width: 0; } #vauban-onboarding-container .vo-group:first-of-type { border-top: 0; padding-top: 0; } #vauban-onboarding-container .vo-group__legend { padding: 0; margin: 0 0 14px; font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--vo-accent); } #vauban-onboarding-container .vo-group__subhint { margin: 0 0 16px; font-size: 12.5px; line-height: 1.55; color: var(--vo-muted); } #vauban-onboarding-container .vo-group__subhint--lead { padding: 12px 14px; background: var(--vo-surface-muted); border-radius: 8px; color: var(--vo-text); } /* Grille interne 12 colonnes, cohérente avec la carte propriété. */ #vauban-onboarding-container .vo-group .vauban-form-row { display: grid; grid-template-columns: repeat(12, 1fr); gap: 14px 16px; margin-bottom: 0; /* Étirement des cellules : chaque colonne occupe toute la hauteur de la * rangée pour que les champs voisins (ex. « Canapés-lits » et « Toutes les * chambres ont-elles une fenêtre ? ») restent alignés même quand un label * comporte une description sur une seconde ligne. */ align-items: stretch; } #vauban-onboarding-container .vo-group .vauban-form-row + .vauban-form-row { margin-top: 16px; } #vauban-onboarding-container .vo-group .vauban-col-3 { grid-column: span 3; } #vauban-onboarding-container .vo-group .vauban-col-6 { grid-column: span 6; } #vauban-onboarding-container .vo-group .vauban-col-12 { grid-column: span 12; } /* Colonne en flex pour que le champ (input/select) se cale en bas de la * cellule : les libellés de hauteurs différentes n'entraînent plus de * désalignement vertical des champs sur une même rangée. */ #vauban-onboarding-container .vo-group .vauban-form-group { margin-bottom: 0; display: flex; flex-direction: column; } #vauban-onboarding-container .vo-group .vauban-form-group > label { flex: 1 0 auto; } #vauban-onboarding-container .vo-group label small { display: block; font-weight: 400; font-size: 11.5px; color: var(--vo-muted); margin-top: 2px; } @media (max-width: 720px) { #vauban-onboarding-container .vo-group .vauban-col-3, #vauban-onboarding-container .vo-group .vauban-col-6, #vauban-onboarding-container .vo-group .vauban-col-12 { grid-column: 1 / -1; } } /* Notes d'avertissement sobres (remplace l'aplat ambre criard). */ #vauban-onboarding-container .vauban-field-warn { display: block; margin-top: 8px; padding: 8px 10px; background: var(--vo-surface-muted); border-left: 3px solid var(--vo-amber); border-radius: 6px; font-size: 12px; line-height: 1.5; color: var(--vo-text); } #vauban-onboarding-container .vauban-field-warn[hidden] { display: none; } /* ============================================================================= * 17. Étape « Accès autonome » (step-4) — re-skin sobre, CSS ONLY * -------------------------------------------------------------------------- * Nettoyage visuel uniquement : cartes cohérentes, accent unique, couleurs * apaisées, espacement. AUCUNE modif du markup, des id/name ni du JS de la * cascade de choix — le flux du parcours d'accès autonome reste intact. * (Les couleurs inline de cette étape sont sans !important → surchargeables.) * ========================================================================== */ /* --- Sections de la cascade : cartes sobres et homogènes ------------------ */ #vauban-onboarding-container .vauban-form-section { /* Surface de section : un cran au-dessus de la carte d'étape → relief net en sombre (en clair, repli blanc = inchangé). Ombre de carte (visible en sombre grâce au liseré inset). */ background: var(--vo-section); border: 1px solid var(--vo-border); border-radius: var(--vo-radius-lg); box-shadow: var(--vo-card-shadow); padding: 22px 24px; margin: 0 0 16px; } #vauban-onboarding-container .vauban-form-section-sub { background: var(--vo-surface-muted); border: 1px solid var(--vo-border); border-radius: var(--vo-radius); padding: 16px 18px; margin-top: 14px; } #vauban-onboarding-container .vauban-form-section > h3, #vauban-onboarding-container .vauban-form-section > h4 { font-size: 16px; font-weight: 600; color: var(--vo-ink); margin: 0 0 14px; letter-spacing: -0.005em; } /* Intitulé de question */ #vauban-onboarding-container .vauban-label-question { display: block; font-size: 14px; font-weight: 600; color: var(--vo-ink); margin: 0 0 10px; line-height: 1.45; } /* --- Cartes de choix (section 0 : kit / déjà équipé / manuel / différé) ---- */ #vauban-onboarding-container .vauban-access-card input[type="radio"], #vauban-onboarding-container .vauban-access-card--featured input[type="radio"] { accent-color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-access-card:has(input[type="radio"]:checked), #vauban-onboarding-container .vauban-access-card--featured:has(input[type="radio"]:checked) { border-color: var(--vo-accent) !important; background: var(--vo-accent-soft) !important; } #vauban-onboarding-container .vauban-access-card--featured { border-color: var(--vo-accent-border) !important; } #vauban-onboarding-container .vauban-access-card-badge { background: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-access-card-title { color: var(--vo-ink) !important; } #vauban-onboarding-container .vauban-access-card-sub, #vauban-onboarding-container .vauban-access-intro { color: var(--vo-muted) !important; } /* Blocs détail révélés (Kit / manuel / différé / déjà équipé) */ #vauban-onboarding-container .vauban-access-detail { background: var(--vo-surface-muted) !important; border: 1px solid var(--vo-border) !important; border-left: 3px solid var(--vo-accent) !important; } /* --- Cartes radio (sections 2 & 3 : accès extérieur, diagnostic porte) ----- */ #vauban-onboarding-container .radio-card input[type="radio"] { accent-color: var(--vo-accent) !important; } #vauban-onboarding-container .radio-card:has(input[type="radio"]:checked) { border-color: var(--vo-accent) !important; background: var(--vo-accent-soft) !important; } /* --- Encadrés d'information : sobres, accent unique ------------------------ */ #vauban-onboarding-container .vauban-info-box { background: var(--vo-accent-soft) !important; border: 1px solid var(--vo-accent-border) !important; border-left: 3px solid var(--vo-accent) !important; border-radius: var(--vo-radius) !important; } #vauban-onboarding-container .vauban-info-box p { color: var(--vo-text) !important; } /* L'intro pédagogique réutilise .vauban-info-box comme grand conteneur : on le neutralise en carte blanche (pas de teinte accent sur tout le bloc). */ #vauban-onboarding-container #pedagogie-nuki-content > .vauban-info-box { background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-left: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius-lg) !important; } /* --- Intro pédagogique : boîtes internes colorées -> sobres --------------- */ #vauban-onboarding-container #pedagogie-nuki-content [style*="linear-gradient(135deg, #EFF6FF"] { background: var(--vo-accent-soft) !important; background-image: none !important; border-color: var(--vo-accent-border) !important; } #vauban-onboarding-container #pedagogie-nuki-content [style*="border-left: 4px solid #1E40AF"], #vauban-onboarding-container #pedagogie-nuki-content [style*="border-left: 4px solid #10B981"], #vauban-onboarding-container #pedagogie-nuki-content [style*="border-left: 4px solid #F59E0B"] { border-left-color: var(--vo-accent) !important; } #vauban-onboarding-container #pedagogie-nuki-content [style*="background: #EFF6FF"] { background-color: var(--vo-accent-soft) !important; } /* --- Bloc cadeau dynamique : apaisé (fini l'ambre + sticker rouge) -------- */ #vauban-onboarding-container #dynamic-gift-block [style*="linear-gradient(135deg, #FFFBEB"] { background: var(--vo-accent-soft) !important; background-image: none !important; border-color: var(--vo-accent-border) !important; box-shadow: var(--vo-shadow-sm) !important; } #vauban-onboarding-container #dynamic-gift-block [style*="background: #EF4444"] { background-color: var(--vo-accent) !important; box-shadow: none !important; } #vauban-onboarding-container #dynamic-gift-block [style*="border: 2px solid #F59E0B"] { border-color: var(--vo-accent-border) !important; } /* --- Bloc d'erreur / blocage technique : danger sobre --------------------- */ #vauban-onboarding-container .vauban-error-box { background: var(--vo-danger-soft) !important; border: 1px solid color-mix(in srgb, var(--vo-danger) 30%, transparent) !important; border-left: 3px solid var(--vo-danger) !important; border-radius: var(--vo-radius) !important; } /* --- Bloc installation / pastilles ---------------------------------------- */ #vauban-onboarding-container .vauban-installation-block { background: var(--vo-surface-muted) !important; border: 1px solid var(--vo-border) !important; border-left: 3px solid var(--vo-accent) !important; border-radius: var(--vo-radius) !important; } #vauban-onboarding-container .vauban-installation-pill, #vauban-onboarding-container .promo-row [style*="background: #10B981"], #vauban-onboarding-container .promo-row [style*="background:#10B981"] { background-color: var(--vo-accent-soft) !important; color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-installation-option { border-radius: var(--vo-radius) !important; } /* --- Champs note + inputs spécifiques step-4 ------------------------------ */ #vauban-onboarding-container .vauban-note-field { margin-top: 10px; } #vauban-onboarding-container .vauban-input { width: 100%; padding: 11px 14px !important; background-color: var(--vo-surface) !important; border: 1px solid var(--vo-border-strong) !important; border-radius: var(--vo-radius) !important; font-family: var(--vo-font); font-size: 14.5px !important; color: var(--vo-ink) !important; box-sizing: border-box; } #vauban-onboarding-container .vauban-input:focus { outline: none; border-color: var(--vo-accent) !important; box-shadow: var(--vo-ring) !important; } /* ============================================================================= * 18. Étapes Deep Clean (5), Documents (7), Récap (9) — re-skin sobre, CSS ONLY * -------------------------------------------------------------------------- * Cartes homogènes, accordéons/onglets/badges/zones d'upload sobres, espacement. * Les couleurs legacy sont déjà harmonisées par la §14 ; ici = structure/calme. * Aucune modif de markup/JS/flux. * ========================================================================== */ /* --- Cartes génériques (Deep Clean & autres) ----------------------------- */ #vauban-onboarding-container .vauban-card { background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius-lg) !important; box-shadow: var(--vo-shadow-sm) !important; padding: 22px 24px !important; margin: 0 0 18px !important; } /* Deep Clean : prix mis en avant, sobre */ #vauban-onboarding-container .vauban-price-big { color: var(--vo-ink) !important; } /* Onglets Deep Clean */ #vauban-onboarding-container .vauban-tab-btn { background: transparent !important; background-image: none !important; border: 1px solid var(--vo-border) !important; color: var(--vo-muted) !important; border-radius: var(--vo-radius) !important; font-weight: 600 !important; } #vauban-onboarding-container .vauban-tab-btn.active, #vauban-onboarding-container .vauban-tab-btn[aria-selected="true"] { background: var(--vo-accent-soft) !important; border-color: var(--vo-accent) !important; color: var(--vo-accent) !important; } /* Accordéons sobres (Deep Clean + cadre légal step-7) */ #vauban-onboarding-container .vauban-details, #vauban-onboarding-container .vauban-legal-accordion { background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius) !important; margin: 0 0 12px !important; overflow: hidden; } #vauban-onboarding-container .vauban-summary, #vauban-onboarding-container .vauban-legal-summary { cursor: pointer; list-style: none; color: var(--vo-ink) !important; font-weight: 600; } #vauban-onboarding-container .vauban-summary::-webkit-details-marker, #vauban-onboarding-container .vauban-legal-summary::-webkit-details-marker { display: none; } #vauban-onboarding-container .vauban-tariff-sources { color: var(--vo-muted) !important; } /* --- Documents (step-7) --------------------------------------------------- */ #vauban-onboarding-container .vauban-info-section, #vauban-onboarding-container .vauban-docs-section, #vauban-onboarding-container .vauban-doc-card { background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius-lg) !important; box-shadow: var(--vo-shadow-sm) !important; } /* La section « Documents administratifs » n'avait AUCUN padding : titre, compteur et checklist venaient buter contre la bordure de la carte (« bordure collée »). Même respiration intérieure que les cartes de document ci-dessous. */ #vauban-onboarding-container .vauban-docs-section { padding: 16px 18px !important; } #vauban-onboarding-container .vauban-doc-card { padding: 16px 18px !important; margin: 0 0 12px !important; border-left: 3px solid var(--vo-border-strong) !important; } /* Badges de documents : sobres, sémantique par teinte douce. */ #vauban-onboarding-container .vauban-doc-badge { border-radius: 999px !important; font-size: 11px !important; font-weight: 600 !important; padding: 2px 10px !important; background: var(--vo-surface-muted) !important; color: var(--vo-muted) !important; border: 1px solid var(--vo-border) !important; text-transform: none !important; letter-spacing: 0 !important; } #vauban-onboarding-container .vauban-doc-card-required { border-left-color: var(--vo-accent) !important; } #vauban-onboarding-container .vauban-doc-card-required .vauban-doc-badge { background: var(--vo-accent-soft) !important; color: var(--vo-accent) !important; border-color: var(--vo-accent-border) !important; } /* Zone d'upload : pointillé neutre, hover accent. */ #vauban-onboarding-container .upload-zone, #vauban-onboarding-container .vauban-upload-zone { background: var(--vo-surface-muted) !important; border: 1.5px dashed var(--vo-border-strong) !important; border-radius: var(--vo-radius) !important; transition: border-color 0.15s ease, background-color 0.15s ease; } #vauban-onboarding-container .upload-zone:hover, #vauban-onboarding-container .vauban-upload-zone:hover { border-color: var(--vo-accent) !important; background: var(--vo-accent-soft) !important; } #vauban-onboarding-container .vauban-upload-icon { color: var(--vo-accent) !important; } /* Note de sécurité documents : sobre (fini le bloc coloré répété). */ #vauban-onboarding-container .vauban-doc-security-note { background: var(--vo-surface-muted) !important; border: 1px solid var(--vo-border) !important; border-left: 3px solid var(--vo-accent) !important; border-radius: var(--vo-radius) !important; } /* Bloc coordonnées bancaires */ #vauban-onboarding-container .vauban-bank-card-fields { background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius) !important; } /* --- Engagements (étape finale step-8) ----------------------------------- */ /* Le socle (step-2-extensions.css) stylait ce bloc en blanc sur fond bleu foncé. Ici on repasse le châssis en surface claire : il FAUT donc forcer tous les textes du corps en sombre, sinon ils restent blancs (invisibles). */ #vauban-onboarding-container .vauban-engagements { background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-radius: var(--vo-radius-lg) !important; box-shadow: var(--vo-shadow-sm) !important; padding: 22px 24px !important; } #vauban-onboarding-container .vauban-engagements-title { color: var(--vo-ink) !important; } #vauban-onboarding-container .vauban-engagements-intro { color: var(--vo-muted) !important; } #vauban-onboarding-container .vauban-engagement { background: var(--vo-accent-soft) !important; border: 1px solid var(--vo-border) !important; } #vauban-onboarding-container .vauban-engagement-num { background: var(--vo-accent) !important; color: #fff !important; border: 1px solid var(--vo-accent) !important; } #vauban-onboarding-container .vauban-engagement-body h4 { color: var(--vo-ink) !important; } #vauban-onboarding-container .vauban-engagement-body p { color: var(--vo-text) !important; } #vauban-onboarding-container .vauban-engagements-checks { border-top: 1px solid var(--vo-border) !important; } #vauban-onboarding-container .vauban-engagement-check { color: var(--vo-text) !important; border-radius: var(--vo-radius) !important; } /* ============================================================================= * ALLEGEMENTS DE DENSITE PAR ETAPE (2026-05-30) — sections 19 a 24 * ----------------------------------------------------------------------------- * Bloc 100% additif et REVERSIBLE (supprimer les sections ci-dessous restaure * l'etat anterieur). Issu d'un audit multi-agents + revue adversariale. * Regles purement presentationnelles : aucun texte, name=/id=, classe ciblee * par le JS, data-*, nonce ou logique n'est touche. AUCUNE regle ne vise * l'etape Acces (step-4), volontairement hors perimetre. * ========================================================================== */ /* ----- 19. Etape 1 (Votre Bien) — densite verticale -------------------------- */ #vauban-onboarding-container .vauban-step-content[data-step="1"] [data-vbn-section] { margin-bottom: 22px !important; } #vauban-onboarding-container .vauban-step-content[data-step="1"] .vauban-form-group { margin-bottom: 16px; } /* Accordeon « Affiner mon estimation » : air interne resserre (4 fieldsets). */ #vauban-onboarding-container .vo-details__body .vo-group { margin-bottom: 16px; padding-top: 14px; } /* Le 1er groupe garde son padding-haut nul (coherence avec :first-of-type). */ #vauban-onboarding-container .vo-details__body .vo-group:first-of-type { padding-top: 0; } #vauban-onboarding-container .vo-details__intro { margin: 12px 0 16px; } /* Carte « Caracteristiques du bien » : bandeau navy -> surface claire sobre. */ #vauban-onboarding-container .vauban-property-card { box-shadow: var(--vo-shadow-sm) !important; border-color: var(--vo-border) !important; } #vauban-onboarding-container .vauban-property-card__header { background: var(--vo-surface-muted) !important; background-image: none !important; border-bottom: 1px solid var(--vo-border) !important; } #vauban-onboarding-container .vauban-property-card__title { color: var(--vo-ink) !important; } #vauban-onboarding-container .vauban-property-card__subtitle { color: var(--vo-muted) !important; } /* Simulateur de revenus : reduire le vide au-dessus du bloc. */ #vauban-onboarding-container #vauban-revenue-simulator { margin-top: 16px !important; } /* ----- 20. Etape 2 (Prerequis & Equipements) — densite ----------------------- */ #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-step-header { margin-bottom: 14px !important; } /* Carte d'intro statistiques : padding + marge basse resserres. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] [style*="margin-bottom: 35px"] { padding: 16px 18px !important; margin-bottom: 20px !important; } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vbn-section-title { margin-bottom: 10px !important; padding-bottom: 8px !important; } #vauban-onboarding-container .vauban-step-content[data-step="2"] [data-vbn-section] { margin-bottom: 20px !important; } /* Grille des groupes (inventaire / consommables) : colonnes auto-ajustees. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px !important; } /* Chaque groupe = panneau sobre, fond legerement teinte pour separer du formulaire. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category { background: var(--vo-surface-muted) !important; border: 1px solid var(--vo-border) !important; border-radius: 12px !important; padding: 16px !important; box-shadow: none !important; } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category:hover { box-shadow: none !important; border-color: var(--vo-border) !important; } /* Cases d'un groupe : tuiles selectionnables disposees en grille fluide. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] .category-items { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 8px; } /* Tuile : surface blanche, bord neutre, retour visuel au survol et a la selection. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item { display: flex; align-items: center; gap: 10px; margin: 0 !important; padding: 11px 13px !important; background: var(--vo-surface) !important; border: 1px solid var(--vo-border) !important; border-radius: 10px !important; transition: border-color 0.15s ease, background-color 0.15s ease, box-shadow 0.15s ease; } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item:hover { border-color: var(--vo-accent-border) !important; background: var(--vo-surface) !important; box-shadow: var(--vo-shadow-sm) !important; } /* Etat coche : bord accent + fond bleu tres clair, sans surcharge bruyante. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item:has(input[type="checkbox"]:checked) { border-color: var(--vo-accent) !important; background: var(--vo-accent-soft) !important; } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item input[type="checkbox"] { width: 18px; height: 18px; flex-shrink: 0; accent-color: var(--vo-accent); cursor: pointer; } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item span { font-size: 13.5px; line-height: 1.4; color: var(--vo-ink); } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item:has(input[type="checkbox"]:checked) span { color: var(--vo-accent); font-weight: 600; } #vauban-onboarding-container .vauban-step-content[data-step="2"] .vauban-category .checkbox-item span em { display: block; margin-top: 2px; font-size: 11px; font-style: normal; color: var(--vo-muted); } /* Bloc logistique : rapproche le bloc borde de son titre, padding allege. */ #vauban-onboarding-container .vauban-step-content[data-step="2"] [data-vbn-key="logistique"] .vauban-logistique-block { margin-top: 8px !important; padding: 14px 16px !important; } /* ----- 21. Etape 4 (Deep Clean & Maintenance, step-5) — densite -------------- */ #vauban-onboarding-container .vauban-deepclean-step .vauban-details-content ul li, #vauban-onboarding-container .vauban-deepclean-step .vauban-tab-content ul li, #vauban-onboarding-container .vauban-deepclean-step .vauban-tariff-sources ul li { line-height: 1.5 !important; } #vauban-onboarding-container .vauban-deepclean-step .vauban-card { padding: 18px 20px !important; margin-bottom: 14px !important; } #vauban-onboarding-container .vauban-deepclean-step .vauban-pricing-body { padding: 20px !important; } /* Prix geant 56px -> 44px (valeur dynamique #deep-clean-price inchangee). */ #vauban-onboarding-container .vauban-deepclean-step .vauban-price-big { font-size: 44px !important; } /* Volet Maintenance : 4 cartes resserrees. */ #vauban-onboarding-container .vauban-deepclean-step .vauban-tab-content[data-tab="maintenance"] > div > div { padding: 12px 14px !important; } /* ----- 22. Etape 5 (Infos & Documents, step-7) — densite --------------------- */ #vauban-onboarding-container .vauban-doc-card { padding: 13px 16px !important; margin: 0 0 10px !important; } #vauban-onboarding-container .vauban-doc-card-header { margin-bottom: 10px; } #vauban-onboarding-container .vauban-doc-nav { margin-top: 12px; } /* Accordeons « Pourquoi ce document ? » (deja fermes) : rendus discrets. */ #vauban-onboarding-container .vauban-doc-info-summary { font-size: 12.5px; color: var(--vo-muted); cursor: pointer; } #vauban-onboarding-container .vauban-doc-info-body { padding-top: 8px; font-size: 13px; line-height: 1.5; color: var(--vo-text); } #vauban-onboarding-container .vauban-doc-info-body p { margin: 0 0 8px; } #vauban-onboarding-container .vauban-doc-info-body p:last-child { margin-bottom: 0; } /* Note de securite « Aucun engagement avant signature » : compactee. */ #vauban-onboarding-container .vauban-doc-security-note { padding: 12px 14px !important; } #vauban-onboarding-container .vauban-doc-security-lead { font-size: 13px; font-weight: 600; color: var(--vo-ink); margin: 0 0 4px; } #vauban-onboarding-container .vauban-doc-security-text { font-size: 12.5px; line-height: 1.5; color: var(--vo-muted); margin: 0; } /* Section 1 « Informations personnelles » : bloc + en-tete resserres. */ #vauban-onboarding-container .vauban-info-section { padding: 18px 20px !important; margin-bottom: 16px !important; } #vauban-onboarding-container .vauban-info-section-header { margin-bottom: 16px; } #vauban-onboarding-container .vauban-info-section-sub { font-size: 12.5px; line-height: 1.5; color: var(--vo-muted); } /* Accordeon RGPD bancaire (deja ferme) : rendu secondaire. */ #vauban-onboarding-container .vauban-bank-card-rgpd > summary { font-size: 12.5px; color: var(--vo-muted); cursor: pointer; } #vauban-onboarding-container .vauban-bank-card-rgpd ul { margin: 8px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--vo-text); } #vauban-onboarding-container .vauban-bank-card-rgpd li { margin-bottom: 5px; } /* Zones d'upload (9 occurrences) : padding et icone resserres. */ #vauban-onboarding-container .vauban-upload-zone { padding: 16px 14px !important; } #vauban-onboarding-container .vauban-upload-icon { width: 26px; height: 26px; } #vauban-onboarding-container .vauban-upload-label { font-size: 13.5px; margin: 6px 0 2px; } #vauban-onboarding-container .vauban-upload-hint { font-size: 12px; color: var(--vo-muted); } /* ----- 23. Disclaimer (ecran d'accueil) — densite --------------------------- */ #vauban-standalone-wrap .vauban-disclaimer-body { gap: 12px 18px !important; } #vauban-standalone-wrap .vauban-disclaimer-section { margin-bottom: 12px !important; } #vauban-standalone-wrap .vauban-disclaimer-section p { line-height: 1.45 !important; } #vauban-standalone-wrap .vauban-disclaimer-meta { margin: 10px 0 !important; font-size: 12.5px !important; line-height: 1.45 !important; } #vauban-standalone-wrap .vauban-disclaimer-divider { margin: 14px 0 !important; } #vauban-standalone-wrap .vauban-disclaimer-consents { margin: 12px 0 !important; } /* Grille RGPD (visible une fois depliee) : items et interligne resserres. */ #vauban-standalone-wrap .vauban-disclaimer-rgpd-grid { gap: 10px 16px !important; } #vauban-standalone-wrap .vauban-disclaimer-rgpd-item span { line-height: 1.45 !important; } #vauban-standalone-wrap .vauban-disclaimer-rgpd-links { margin-top: 12px !important; } /* ----- 24. Etape 6 (Recapitulatif & Contrat, step-8) — densite -------------- */ /* Apercu contrat floute : marge basse resserree (rapproche des engagements). */ #vauban-onboarding-container .vauban-step-content[data-step="6"] > div[style*="margin-bottom: 24px"] { margin-bottom: 14px !important; } /* Engagements : padding/marges/interlignes resserres (complete le re-skin §18). */ #vauban-onboarding-container .vauban-engagements { padding: 18px 20px !important; } #vauban-onboarding-container .vauban-engagements-intro { margin: 6px 0 16px !important; line-height: 1.5 !important; } #vauban-onboarding-container .vauban-engagement { margin-bottom: 10px !important; } #vauban-onboarding-container .vauban-engagement-body p { line-height: 1.45 !important; margin: 4px 0 0 !important; } /* ============================================================================= * 25. ACCEPTATION CGU/CGV (etape finale) — depliant
+ case obligatoire * ----------------------------------------------------------------------------- * Composant additif scope #vauban-onboarding-container. Couleurs 100% par * tokens --vo-* : mode sombre automatique, aucune couleur en dur, aucun patch * dark dedie. Le contenu du document (.vauban-cgv-content) herite des tokens, * donc reste lisible en clair comme en sombre sans CSS specifique. * ========================================================================== */ #vauban-onboarding-container .vauban-cgv { margin-top: 18px; } #vauban-onboarding-container .vauban-cgv-accordion { border: 1px solid var(--vo-border); border-radius: var(--vo-radius); background: var(--vo-surface); overflow: hidden; } #vauban-onboarding-container .vauban-cgv-summary { display: flex; align-items: center; gap: 10px; padding: 14px 16px; cursor: pointer; font-weight: 600; color: var(--vo-ink); list-style: none; user-select: none; } #vauban-onboarding-container .vauban-cgv-summary::-webkit-details-marker { display: none; } #vauban-onboarding-container .vauban-cgv-summary:hover { background: var(--vo-surface-muted); } #vauban-onboarding-container .vauban-cgv-summary:focus-visible { outline: 2px solid var(--vo-ring); outline-offset: -2px; } #vauban-onboarding-container .vauban-cgv-summary-icon { display: inline-flex; flex: 0 0 auto; color: var(--vo-muted); } #vauban-onboarding-container .vauban-cgv-summary-icon svg { width: 18px; height: 18px; } #vauban-onboarding-container .vauban-cgv-summary-label { flex: 1 1 auto; } #vauban-onboarding-container .vauban-cgv-summary-chevron { flex: 0 0 auto; color: var(--vo-muted); transition: transform 0.2s ease; } #vauban-onboarding-container .vauban-cgv-accordion[open] .vauban-cgv-summary-chevron { transform: rotate(180deg); } #vauban-onboarding-container .vauban-cgv-body { padding: 4px 16px 16px; border-top: 1px solid var(--vo-border); } #vauban-onboarding-container .vauban-cgv-content { max-height: 280px; overflow-y: auto; padding: 12px 14px; border: 1px solid var(--vo-border); border-radius: var(--vo-radius); background: var(--vo-surface-muted); color: var(--vo-text); font-size: 13px; line-height: 1.6; } #vauban-onboarding-container .vauban-cgv-content h3 { margin: 0 0 4px; font-size: 15px; color: var(--vo-ink); } #vauban-onboarding-container .vauban-cgv-content h4 { margin: 14px 0 4px; font-size: 13px; color: var(--vo-ink); } #vauban-onboarding-container .vauban-cgv-content p { margin: 0 0 10px; } #vauban-onboarding-container .vauban-cgv-content em { font-style: normal; font-size: 11px; color: var(--vo-muted); } #vauban-onboarding-container .vauban-cgv-content strong { color: var(--vo-ink); } #vauban-onboarding-container .vauban-cgv-iframe { width: 100%; height: 320px; border: 1px solid var(--vo-border); border-radius: var(--vo-radius); background: var(--vo-surface); } #vauban-onboarding-container .vauban-cgv-openlink { margin: 8px 0 0; font-size: 12px; } #vauban-onboarding-container .vauban-cgv-openlink a { color: var(--vo-accent); } #vauban-onboarding-container .vauban-cgv-check { display: flex; align-items: flex-start; gap: 10px; margin-top: 14px; padding: 12px 14px; border: 1px solid var(--vo-border); border-radius: var(--vo-radius); background: var(--vo-surface); color: var(--vo-text); cursor: pointer; line-height: 1.45; } #vauban-onboarding-container .vauban-cgv-check:hover { border-color: var(--vo-border-strong); } #vauban-onboarding-container .vauban-cgv-check input[type="checkbox"] { flex: 0 0 auto; margin-top: 2px; accent-color: var(--vo-accent); } /* ============================================================================= * 26. Finitions charte graphique — effets, jeux d'ombre et de lumiere * -------------------------------------------------------------------------- * Enrichit la sidebar et les boutons avec les effets visuels de la charte * vitrine : degrade indigo->violet, ombres colorees, halos actifs, reflets * de lumiere, transitions premium. * Regles additives — viennent apres tout le reste et ont la priorite. * ========================================================================== */ /* --- Sidebar : ombre coloree + bord teinté indigo ------------------------- */ @media (min-width: 769px) { #vauban-onboarding-container .vauban-sidebar-card { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04), 0 6px 28px rgba(79, 70, 229, 0.10) !important; border-color: rgba(199, 203, 248, 0.75) !important; } } /* Icone d'etape : degrade marque indigo->violet + ombre coloree */ #vauban-onboarding-container .vauban-sidebar-header__icon { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important; color: #FFFFFF !important; box-shadow: 0 2px 8px rgba(79, 70, 229, 0.32) !important; } /* Barre de progression : degrade marque */ #vauban-onboarding-container .vauban-sidebar-header__fill { background: linear-gradient(90deg, #4F46E5 0%, #7C3AED 100%) !important; } /* Hover etapes navigables : teinte accent discrete */ #vauban-onboarding-container .vauban-sb-step.vauban-step-nav-clickable:hover { background: var(--vt-primary-bg, rgba(79, 70, 229, 0.05)) !important; } /* --- Bouton primaire : degrade marque + reflet de lumiere + ombre coloree - */ #vauban-onboarding-container .vauban-btn-primary { background: linear-gradient(135deg, #4F46E5 0%, #7C3AED 100%) !important; border: 0 !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(79, 70, 229, 0.24), 0 4px 14px rgba(79, 70, 229, 0.18) !important; position: relative; overflow: hidden; } #vauban-onboarding-container .vauban-btn-primary:hover { background: linear-gradient(135deg, #4338CA 0%, #6D28D9 100%) !important; transform: translateY(-2px) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 6px 22px rgba(79, 70, 229, 0.38), 0 2px 8px rgba(79, 70, 229, 0.22) !important; color: #FFFFFF !important; } #vauban-onboarding-container .vauban-btn-primary:active { transform: translateY(0) !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.10), 0 1px 4px rgba(79, 70, 229, 0.28) !important; } #vauban-onboarding-container .vauban-btn-primary { transition: background 0.2s ease, box-shadow 0.25s ease, transform 0.15s ease, opacity 0.25s ease, filter 0.25s ease; } /* Bouton « Suivant » verrouillé : nettement grisé (désaturé) pour se distinguer de l'état actif coloré — l'utilisateur voit d'un coup d'œil qu'il reste des champs à compléter. */ #vauban-onboarding-container .vauban-btn-primary:disabled, #vauban-onboarding-container .vauban-btn-primary.vbn-next-locked { opacity: 0.55 !important; cursor: not-allowed; transform: none !important; box-shadow: none !important; background: linear-gradient(135deg, #9CA3AF 0%, #6B7280 100%) !important; filter: grayscale(1) !important; } /* Passage verrouillé -> prêt : brève pulsation d'attention (jouée une fois via la classe .vbn-next-ready posée par step1-progress.js). */ @keyframes vbn-next-ready-pulse { 0% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(79, 70, 229, 0.24), 0 4px 14px rgba(79, 70, 229, 0.18); } 40% { transform: scale(1.04); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.18), 0 8px 26px rgba(79, 70, 229, 0.45), 0 3px 10px rgba(79, 70, 229, 0.28); } 100% { transform: scale(1); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 1px 3px rgba(79, 70, 229, 0.24), 0 4px 14px rgba(79, 70, 229, 0.18); } } #vauban-onboarding-container .vauban-btn-primary.vbn-next-ready { animation: vbn-next-ready-pulse 0.6s ease-out 1; } @media (prefers-reduced-motion: reduce) { #vauban-onboarding-container .vauban-btn-primary.vbn-next-ready { animation: none; } } #vauban-onboarding-container .vauban-btn-primary:focus-visible { outline: none !important; box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.14), 0 0 0 3px rgba(79, 70, 229, 0.38) !important; } /* --- Bouton secondaire : hover teinté accent ------------------------------- */ #vauban-onboarding-container .vauban-btn-secondary { box-shadow: 0 1px 2px rgba(16, 24, 40, 0.05) !important; transition: background-color 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.12s ease, color 0.15s ease !important; } #vauban-onboarding-container .vauban-btn-secondary:hover { background: var(--vo-accent-soft) !important; border-color: var(--vo-accent-border) !important; color: var(--vo-accent) !important; transform: translateY(-1px) !important; box-shadow: 0 2px 10px rgba(16, 24, 40, 0.08) !important; } #vauban-onboarding-container .vauban-btn-secondary:active { transform: translateY(0) !important; box-shadow: none !important; } /* Accessibilite : supprime le lift pour prefers-reduced-motion */ @media (prefers-reduced-motion: reduce) { #vauban-onboarding-container .vauban-btn-primary, #vauban-onboarding-container .vauban-btn-secondary { transition: background-color 0.15s ease, border-color 0.15s ease !important; } #vauban-onboarding-container .vauban-btn-primary:hover, #vauban-onboarding-container .vauban-btn-secondary:hover, #vauban-onboarding-container .vauban-btn-primary:active, #vauban-onboarding-container .vauban-btn-secondary:active { transform: none !important; } } /* ============================================================================= * 27. Sélecteur « riche » ouvert — jonction parfaite avec la barre-question * -------------------------------------------------------------------------- * Le socle `01-base-forms.css` impose le `border-radius` des