/** * Vauban Onboarding — Expérience de chargement entre étapes. * * Overlay affiché au niveau pendant la transition d'étape (Suivant / * Retour). Remplace l'ancien spinner + fausse barre 10 s par une expérience * contextuelle : illustration au trait qui se dessine, message lié à l'étape * rejointe, barre à jalons réelle, conseils rotatifs. * * Thème : l'overlay étant rendu hors des wrappers scopés (.vauban-dashboard- * wrapper, .vpc-app), il ne peut pas consommer les tokens --v-* / --vt-*. Les * couleurs sont donc centralisées dans un bloc de tokens LOCAUX --vobl-* * (source unique) + override sombre automatique (prefers-color-scheme) et * explicite (html[data-theme]). Aucune couleur thématisée hors de ce bloc. * * @package VaubanOnboarding */ /* -------------------------------------------------------------------------- */ /* Tokens locaux (source unique des couleurs de l'overlay) */ /* -------------------------------------------------------------------------- */ #vauban-loading-overlay { --vobl-backdrop: rgba(15, 23, 42, 0.55); --vobl-card: #ffffff; --vobl-ink: #0f172a; --vobl-muted: #6b7280; --vobl-accent: #4f46e5; --vobl-track: #e5e7eb; --vobl-shadow: rgba(15, 23, 42, 0.28); } /* Mode sombre — OS / thème « auto » résolu en CSS. */ @media (prefers-color-scheme: dark) { html[data-theme="auto"] #vauban-loading-overlay, html:not([data-theme]) #vauban-loading-overlay { --vobl-backdrop: rgba(2, 6, 23, 0.68); --vobl-card: #1e293b; --vobl-ink: #f1f5f9; --vobl-muted: #94a3b8; --vobl-accent: #818cf8; --vobl-track: #334155; --vobl-shadow: rgba(0, 0, 0, 0.5); } } /* Mode sombre — choix utilisateur explicite (rendu serveur data-theme). */ html[data-theme="dark"] #vauban-loading-overlay { --vobl-backdrop: rgba(2, 6, 23, 0.68); --vobl-card: #1e293b; --vobl-ink: #f1f5f9; --vobl-muted: #94a3b8; --vobl-accent: #818cf8; --vobl-track: #334155; --vobl-shadow: rgba(0, 0, 0, 0.5); } /* -------------------------------------------------------------------------- */ /* Overlay plein écran */ /* -------------------------------------------------------------------------- */ #vauban-loading-overlay { display: none; position: fixed; inset: 0; z-index: 999999; background: var(--vobl-backdrop); /* blur réduit de 18px à 8px : l'effet « fond flouté » est conservé, mais le * coût de rendu est ~5× inférieur (le rayon carré est la variable dominante). */ backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); align-items: center; justify-content: center; flex-direction: column; pointer-events: all; touch-action: none; user-select: none; color-scheme: light dark; animation: vobl-fade-in 0.4s ease-out; } #vauban-loading-overlay.active { display: flex; } /* -------------------------------------------------------------------------- */ /* Carte centrale */ /* -------------------------------------------------------------------------- */ .vauban-loader-card { background: var(--vobl-card); border-radius: 20px; padding: 40px 44px 32px; max-width: 460px; width: 90%; text-align: center; box-shadow: 0 25px 60px var(--vobl-shadow); animation: vobl-card-pop 0.5s 0.12s cubic-bezier(0.16, 1, 0.3, 1) both; } /* -------------------------------------------------------------------------- */ /* Illustration au trait (noir & blanc, se « dessine » à l'ouverture) */ /* -------------------------------------------------------------------------- */ .vauban-loader-illus { display: flex; align-items: center; justify-content: center; width: 72px; height: 72px; margin: 0 auto 18px; color: var(--vobl-ink); animation: vobl-breathe 2.8s ease-in-out infinite; } .vauban-loader-illus svg { width: 100%; height: 100%; display: block; } .vauban-loader-illus svg [data-draw] { fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 480; stroke-dashoffset: 480; animation: vobl-draw 1.5s ease forwards; } /* -------------------------------------------------------------------------- */ /* Textes contextuels */ /* -------------------------------------------------------------------------- */ .vauban-loader-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 20px; font-weight: 700; color: var(--vobl-ink); margin: 0 0 8px; } .vauban-loader-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--vobl-muted); line-height: 1.6; margin: 0; } /* -------------------------------------------------------------------------- */ /* Barre à jalons (progression réelle dans le parcours) */ /* -------------------------------------------------------------------------- */ .vauban-loader-steplabel { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 12px; font-weight: 600; letter-spacing: 0.02em; text-transform: uppercase; color: var(--vobl-muted); margin: 22px 0 10px; } .vauban-loader-milestones { display: flex; align-items: center; justify-content: center; gap: 0; list-style: none; margin: 0; padding: 0; } .vauban-loader-milestone { width: 9px; height: 9px; border-radius: 50%; background: var(--vobl-track); transition: transform 0.3s ease, background-color 0.3s ease; flex: 0 0 auto; } /* Connecteur entre jalons. */ .vauban-loader-milestone + .vauban-loader-milestone { margin-left: 22px; position: relative; } .vauban-loader-milestone + .vauban-loader-milestone::before { content: ""; position: absolute; top: 50%; right: 100%; width: 22px; height: 2px; transform: translateY(-50%); background: var(--vobl-track); } .vauban-loader-milestone.is-done { background: var(--vobl-accent); } .vauban-loader-milestone.is-done + .vauban-loader-milestone.is-done::before, .vauban-loader-milestone.is-done + .vauban-loader-milestone.is-current::before { background: var(--vobl-accent); } .vauban-loader-milestone.is-current { background: var(--vobl-accent); transform: scale(1.5); box-shadow: 0 0 0 4px color-mix(in srgb, var(--vobl-accent) 22%, transparent); } /* -------------------------------------------------------------------------- */ /* Conseils rotatifs */ /* -------------------------------------------------------------------------- */ .vauban-loader-tip { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-style: italic; color: var(--vobl-muted); line-height: 1.5; margin: 24px auto 0; min-height: 2.6em; max-width: 340px; transition: opacity 0.4s ease; } .vauban-loader-tip.is-fading { opacity: 0; } /* -------------------------------------------------------------------------- */ /* Barre d'activité indéterminée (honnête : ne simule pas une durée) */ /* -------------------------------------------------------------------------- */ .vauban-loader-activity { position: relative; height: 3px; margin-top: 22px; border-radius: 3px; background: var(--vobl-track); overflow: hidden; } .vauban-loader-activity::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 3px; background: var(--vobl-accent); /* translateX remplace l'animation sur `left` : left déclenche un reflow * à chaque frame, translateX est résolu sur le compositor thread (GPU seul). */ animation: vobl-activity 1.15s ease-in-out infinite; will-change: transform; } /* -------------------------------------------------------------------------- */ /* Keyframes */ /* -------------------------------------------------------------------------- */ @keyframes vobl-fade-in { from { opacity: 0; } to { opacity: 1; } } @keyframes vobl-card-pop { from { opacity: 0; transform: scale(0.9) translateY(24px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes vobl-draw { to { stroke-dashoffset: 0; } } @keyframes vobl-breathe { 0%, 100% { transform: translateY(0); } 50% { transform: translateY(-4px); } } @keyframes vobl-activity { 0% { transform: translateX(-100%); } 100% { transform: translateX(350%); } } /* -------------------------------------------------------------------------- */ /* Accessibilité — respect de prefers-reduced-motion */ /* -------------------------------------------------------------------------- */ @media (prefers-reduced-motion: reduce) { #vauban-loading-overlay, .vauban-loader-card, .vauban-loader-illus, .vauban-loader-illus svg [data-draw], .vauban-loader-activity::before { animation-duration: 0.001ms; animation-iteration-count: 1; } .vauban-loader-illus svg [data-draw] { stroke-dashoffset: 0; } } /* ========================================================================== */ /* Overlay de finalisation (soumission finale dossier onboarding) */ /* Non-fermable, non-scrollable, fond progressivement assombri. */ /* ========================================================================== */ /* Tokens locaux — séparés du loader inter-étapes. */ #vauban-final-submit-overlay { --vfso-bg-start: rgba(15, 23, 42, 0.05); --vfso-bg-end: rgba(15, 23, 42, 0.92); --vfso-card: #ffffff; --vfso-ink: #0f172a; --vfso-muted: #475569; --vfso-accent: #4f46e5; --vfso-track: #e5e7eb; --vfso-warn-bg: #fefce8; --vfso-warn-ink: #713f12; --vfso-shadow: rgba(15, 23, 42, 0.35); } @media (prefers-color-scheme: dark) { html[data-theme="auto"] #vauban-final-submit-overlay, html:not([data-theme]) #vauban-final-submit-overlay { --vfso-bg-end: rgba(2, 6, 23, 0.96); --vfso-card: #1e293b; --vfso-ink: #f1f5f9; --vfso-muted: #94a3b8; --vfso-accent: #818cf8; --vfso-track: #334155; --vfso-warn-bg: #1c1a08; --vfso-warn-ink: #fde68a; --vfso-shadow: rgba(0, 0, 0, 0.6); } } html[data-theme="dark"] #vauban-final-submit-overlay { --vfso-bg-end: rgba(2, 6, 23, 0.96); --vfso-card: #1e293b; --vfso-ink: #f1f5f9; --vfso-muted: #94a3b8; --vfso-accent: #818cf8; --vfso-track: #334155; --vfso-warn-bg: #1c1a08; --vfso-warn-ink: #fde68a; --vfso-shadow: rgba(0, 0, 0, 0.6); } /* Overlay plein écran — fond assombri progressivement via transition. */ #vauban-final-submit-overlay { display: none; position: fixed; inset: 0; z-index: 1000000; background: var(--vfso-bg-start); align-items: center; justify-content: center; pointer-events: all; touch-action: none; user-select: none; overflow: hidden; transition: background 2.4s ease-out; color-scheme: light dark; } #vauban-final-submit-overlay.is-active { display: flex; background: var(--vfso-bg-end); } /* Carte centrale. */ .vfso-card { background: var(--vfso-card); border-radius: 20px; padding: 44px 48px 36px; max-width: 480px; width: 90%; text-align: center; box-shadow: 0 30px 70px var(--vfso-shadow); animation: vfso-card-pop 0.5s 0.1s cubic-bezier(0.16, 1, 0.3, 1) both; } /* Icône spinner circulaire. */ .vfso-icon { width: 64px; height: 64px; margin: 0 auto 22px; color: var(--vfso-accent); } .vfso-icon svg { width: 100%; height: 100%; display: block; } .vfso-ring { stroke-dasharray: 188.5; /* 2π × 30 */ stroke-dashoffset: 188.5; transform-origin: 32px 32px; animation: vfso-spin-fill 2s ease-out forwards, vfso-rotate 1.8s 2s linear infinite; } /* Titre. */ .vfso-title { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 20px; font-weight: 700; color: var(--vfso-ink); margin: 0 0 10px; line-height: 1.3; } /* Texte descriptif. */ .vfso-text { font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 14px; color: var(--vfso-muted); line-height: 1.6; margin: 0 0 24px; } /* Barre d'activité indéterminée. */ .vfso-activity { position: relative; height: 3px; border-radius: 3px; background: var(--vfso-track); overflow: hidden; margin-bottom: 24px; } .vfso-activity::before { content: ""; position: absolute; top: 0; left: 0; width: 40%; height: 100%; border-radius: 3px; background: var(--vfso-accent); animation: vobl-activity 1.15s ease-in-out infinite; will-change: transform; } /* Avertissement "Ne fermez pas". */ .vfso-warning { display: inline-flex; align-items: center; gap: 6px; font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif; font-size: 13px; font-weight: 600; color: var(--vfso-warn-ink); background: var(--vfso-warn-bg); border-radius: 8px; padding: 8px 14px; margin: 0; } .vfso-warning svg { width: 15px; height: 15px; flex-shrink: 0; } /* Keyframes. */ @keyframes vfso-card-pop { from { opacity: 0; transform: scale(0.9) translateY(20px); } to { opacity: 1; transform: scale(1) translateY(0); } } @keyframes vfso-spin-fill { from { stroke-dashoffset: 188.5; } to { stroke-dashoffset: 0; } } @keyframes vfso-rotate { from { transform: rotate(0deg); } to { transform: rotate(360deg); } } /* Reduced-motion : supprime les animations, garde la lisibilité. */ @media (prefers-reduced-motion: reduce) { #vauban-final-submit-overlay { transition: none; } #vauban-final-submit-overlay.is-active { background: var(--vfso-bg-end); } .vfso-card { animation: none; } .vfso-ring { animation: none; stroke-dashoffset: 0; } .vfso-activity::before { animation-duration: 0.001ms; } }