/* ╔══════════════════════════════════════════════════════════════════════╗ ║ CCVM — PACK « EN MOUVEMENT » (preview, additif, CSP-safe) ║ ║ ║ ║ Greffe de motion par-dessus le design existant. N'altère AUCUNE ║ ║ classe/structure : tout est scopé sous `.mplus` (posé sur par ║ ║ js/motion-plus.js → progressive enhancement). Si JS off ou ║ ║ prefers-reduced-motion → rendu identique à l'original. ║ ║ Réutilise les tokens du design system (--ease, --primary, etc.). ║ ╚══════════════════════════════════════════════════════════════════════╝ */ /* ── 5) Transitions de page natives (cross-document) ───────────────────── Fondu doux entre les pages du site dans les navigateurs qui supportent l'API. Zéro JS, CSP-safe. N'agit que si toutes les pages chargent ce CSS. */ @view-transition { navigation: auto; } @media (prefers-reduced-motion: no-preference){ /* ── 2) Parallax du hero ─────────────────────────────────────────────── La photo de fond est sur-dimensionnée (scale 1.12) pour qu'on puisse la translater sans exposer les bords. --mplus-parallax est piloté au scroll par motion-plus.js (transform uniquement → accéléré GPU). */ .mplus .hero-bg-img{ transform:scale(1.12) translate3d(0, var(--mplus-parallax,0px), 0); transition:none; will-change:transform; } /* ── 3) Tilt 3D des vignettes disciplines ────────────────────────────── La carte s'incline vers le curseur. Les variables sont posées au pointermove ; au repos elles valent 0deg → carte à plat. La classe .mplus-tilt n'est présente que pendant le survol, pour ne jamais interférer avec l'animation reveal d'entrée. */ .mplus .disc-card{ transition:transform .3s var(--ease), box-shadow var(--dur) var(--ease); transform-style:preserve-3d; } .mplus .disc-card.mplus-tilt{ transform:perspective(820px) rotateX(var(--mplus-rx,0deg)) rotateY(var(--mplus-ry,0deg)) scale(1.012); } /* Léger relief : l'overlay et la flèche remontent dans la profondeur. */ .mplus .disc-card.mplus-tilt .disc-overlay{ transform:translateZ(26px); } .mplus .disc-card.mplus-tilt .disc-arrow{ transform:translateZ(40px); } /* ── 4) Signature « empreintes de pattes » dans la bande stats ───────── Une traînée de pattes qui « marche » en diagonale derrière les chiffres et s'imprime en cascade quand la bande devient visible. */ .mplus-paws{ position:absolute;inset:0;z-index:1;pointer-events:none;overflow:hidden; } .mplus-paws span{ position:absolute; font-size:clamp(1.4rem,2.6vw,2.2rem); color:var(--primary); opacity:0; transform:translateY(14px) rotate(var(--rot,0deg)) scale(.6); transition:opacity .5s var(--ease), transform .5s var(--ease-spring); transition-delay:var(--d,0ms); -webkit-user-select:none;user-select:none; filter:saturate(.9); } .stats-band.mplus-on .mplus-paws span{ opacity:.12; transform:translateY(0) rotate(var(--rot,0deg)) scale(1); } /* ── 1) Compteurs : pas de style requis (le texte est animé en JS) ──── */ }