/* ============================================================ PREMIUM — Couche additionnelle chargée en dernier. Active uniquement quand a la classe `.motion-ready` (posée en head sync AVANT le CSS, retirée si le module Motion ESM échoue via onerror → fallback legacy). ============================================================ */ /* --- Neutralise les animations CSS legacy pour que Motion pilote l'entrée en scène sans « snap-back » jarring (hero fade CSS s'exécute en 1s, Motion charge plus tard). Règle `.is-visible` explicite : une fois que Motion a fini d'animer, `cleanupReveal()` efface les styles inline et pose `.is-visible` — on doit alors forcer l'état final ici, sinon la règle de neutralisation ci-dessus ré-écrase avec opacity:0. */ html.motion-ready .hero-animate { animation: none !important; opacity: 0; transform: translateY(40px); } html.motion-ready .hero-animate.is-visible { opacity: 1; transform: none; } html.motion-ready .anim-fade-up, html.motion-ready .anim-fade-in, html.motion-ready .anim-scale-in, html.motion-ready .anim-slide-left, html.motion-ready .anim-slide-right { transition: none !important; } /* Stagger legacy via transition-delay — désactivé car Motion gère */ html.motion-ready .anim-stagger > * { transition-delay: 0ms !important; } /* --- Hero visual (shield) : Motion prend la main, on coupe les keyframes CSS pour éviter le combat avec les transforms Motion. Motion pilote : float, glow pulse, orbit spin, label floats + tilt. --- */ html.motion-ready .shield-3d__body, html.motion-ready .shield-3d__glow, html.motion-ready .shield-3d__orbit, html.motion-ready .shield-3d__orbit--1 .shield-3d__particle, html.motion-ready .shield-3d__orbit--2 .shield-3d__particle, html.motion-ready .shield-3d__orbit--3 .shield-3d__particle, html.motion-ready .shield-3d__label { animation: none !important; } /* Spotlight radial qui suit le curseur (intensifie l'effet premium) */ html.motion-ready .hero__visual { --spot-x: 50%; --spot-y: 50%; } html.motion-ready .hero__visual::before { content: ''; position: absolute; inset: 0; pointer-events: none; background: radial-gradient( 400px circle at var(--spot-x) var(--spot-y), rgba(var(--brand-primary-rgb), 0.12), transparent 60% ); opacity: 0; transition: opacity 0.4s ease; z-index: 1; } html.motion-ready .hero__visual.is-hovered::before { opacity: 1; } /* Glow premium : plus intense + layered */ html.motion-ready .shield-3d__glow { background: radial-gradient( circle, rgba(var(--brand-primary-rgb), 0.28) 0%, rgba(var(--brand-secondary-rgb), 0.15) 35%, transparent 70% ); filter: blur(50px); } /* Labels hover micro-interaction */ html.motion-ready .shield-3d__label { cursor: default; will-change: transform; transition: box-shadow var(--transition-base), border-color var(--transition-base); } html.motion-ready .shield-3d__label:hover { box-shadow: 0 12px 32px rgba(var(--brand-primary-rgb), 0.22); border-color: rgba(var(--brand-primary-rgb), 0.35); } /* Shield body — preserve-3d pour tilt mouse */ html.motion-ready .shield-3d__body { transform-style: preserve-3d; will-change: transform; } /* Reduced motion : tout stable, pas d'animation */ @media (prefers-reduced-motion: reduce) { html.motion-ready .shield-3d__body, html.motion-ready .shield-3d__glow, html.motion-ready .shield-3d__orbit, html.motion-ready .shield-3d__label { transform: none !important; } } /* --- Nav scroll premium : blur + ombre profonde --- */ html.motion-ready .nav.is-scrolled { backdrop-filter: blur(24px); -webkit-backdrop-filter: blur(24px); background: rgba(250, 250, 247, 0.85); box-shadow: 0 4px 24px rgba(0, 0, 0, 0.06); transition: background var(--transition-base), box-shadow var(--transition-base), backdrop-filter var(--transition-base); } /* --- Hovers premium sur cards Spécificité bumpée pour battre `.anim-fade-up.is-visible` (cf. leçon 2026-04-18 : spécificité transform hover) --- */ html.motion-ready .card { transition: transform var(--transition-base), box-shadow var(--transition-base); } html.motion-ready .card:hover, html.motion-ready .card.anim-fade-up.is-visible:hover, html.motion-ready .card.anim-scale-in.is-visible:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.12); } html.motion-ready .trust-card.anim-fade-up.is-visible:hover, html.motion-ready .trust-card.anim-scale-in.is-visible:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.12); } html.motion-ready .realisation-card.anim-fade-up.is-visible:hover, html.motion-ready .realisation-card.anim-scale-in.is-visible:hover { transform: translateY(-6px); box-shadow: 0 24px 56px rgba(0, 0, 0, 0.14); } /* --- Gradient shimmer doux sur les textes brand --- */ @keyframes gradientShimmer { 0% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } 100% { background-position: 0% 50%; } } html.motion-ready .gradient-text { background-size: 200% 200%; animation: gradientShimmer 8s ease-in-out infinite; } /* ============================================================ LIGHTBOX — injectée par js/motion-premium.js au click d'une .realisation-card. Motion anime opacity + scale du contenu, le CSS fournit le layout + backdrop blur. ============================================================ */ .lightbox { position: fixed; inset: 0; z-index: var(--z-overlay); display: none; align-items: center; justify-content: center; background: rgba(10, 10, 10, 0.78); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); padding: var(--space-lg); opacity: 0; } .lightbox.is-active { display: flex; } .lightbox__content { position: relative; max-width: 90vw; max-height: 85vh; display: flex; flex-direction: column; align-items: center; gap: var(--space-md); opacity: 0; } .lightbox__content img { max-width: 90vw; max-height: 78vh; object-fit: contain; border-radius: var(--radius-md); box-shadow: 0 24px 80px rgba(0, 0, 0, 0.5); background: #000; } .lightbox__content figcaption { color: #fff; font-family: var(--font-body); font-size: var(--fs-body); text-align: center; max-width: 80ch; text-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); } .lightbox__content figcaption:empty { display: none; } .lightbox__close { position: absolute; top: var(--space-md); right: var(--space-md); width: 48px; height: 48px; border-radius: var(--radius-full); border: none; background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 2rem; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; transition: background var(--transition-fast), transform var(--transition-fast); } .lightbox__close:hover, .lightbox__close:focus-visible { background: rgba(255, 255, 255, 0.22); transform: scale(1.05); outline: none; } /* --- Respect prefers-reduced-motion : on force l'état visible pour tous les éléments pilotés par Motion, sans animation --- */ @media (prefers-reduced-motion: reduce) { html.motion-ready .hero-animate, html.motion-ready .anim-fade-up, html.motion-ready .anim-fade-in, html.motion-ready .anim-scale-in, html.motion-ready .anim-slide-left, html.motion-ready .anim-slide-right { opacity: 1 !important; transform: none !important; animation: none !important; transition: none !important; } html.motion-ready .gradient-text { animation: none !important; } }