/* ========================================================================== MSL Événementiels — Couche d'animation assets/css/motion.css -------------------------------------------------------------------------- Additif : ne modifie aucune règle existante de site.css. Tout est conditionné à la classe .msl-anim posée sur par motion.js. Sans JavaScript, aucun élément n'est masqué : le site reste intégralement lisible et indexable. Seules les propriétés `opacity` et `transform` sont animées (composition GPU, aucun recalcul de mise en page). ========================================================================== */ :root{ --msl-ease:cubic-bezier(.16,1,.3,1); --msl-dur:.72s; } /* -------------------------------------------------------------------------- 1. Révélation au défilement -------------------------------------------------------------------------- */ html.msl-anim [data-msl]{ opacity:0; transform:translate3d(0,var(--msl-y,16px),0); transition: opacity var(--msl-dur) var(--msl-ease) var(--msl-d,0ms), transform var(--msl-dur) var(--msl-ease) var(--msl-d,0ms); } html.msl-anim [data-msl].msl-in{ opacity:1; transform:none; } /* Titres : amplitude légèrement supérieure */ html.msl-anim h1[data-msl], html.msl-anim h2[data-msl], html.msl-anim .heading[data-msl]{--msl-y:22px} /* -------------------------------------------------------------------------- 2. Entrée du hero (au chargement, sans attendre le défilement) -------------------------------------------------------------------------- */ html.msl-anim [data-msl="hero"]{ opacity:0; transform:translate3d(0,26px,0); transition: opacity .9s var(--msl-ease) var(--msl-d,0ms), transform .9s var(--msl-ease) var(--msl-d,0ms); } html.msl-anim [data-msl="hero"].msl-in{opacity:1;transform:none} /* Carrousel du hero : lent travelling avant sur la photo active (« Ken Burns »). ATTENTION — ne jamais poser de règle sur `.hero > *` : le carrousel injecté par main.js (.hero-slides, .hero-shade, .hero-dots) est en position absolue, et toute surcharge de `position` le fait disparaître du fond. On ne touche donc qu'aux slides eux-mêmes, et uniquement via `transform`. */ html.msl-anim .hero-slide.active .hero-slide-image{ animation:msl-kenburns 7.5s ease-out both; } @keyframes msl-kenburns{ from{transform:scale(1)} to {transform:scale(1.055)} } /* -------------------------------------------------------------------------- 3. En-tête : compact et translucide au défilement, escamotable -------------------------------------------------------------------------- */ .header{ transition: background-color .45s var(--msl-ease), box-shadow .45s var(--msl-ease), transform .45s var(--msl-ease); } .header .nav{transition:height .45s var(--msl-ease)} html.msl-anim .header.msl-fixed{ position:fixed; background-color:rgba(16,13,32,.86); -webkit-backdrop-filter:saturate(140%) blur(14px); backdrop-filter:saturate(140%) blur(14px); box-shadow:0 1px 0 rgba(255,255,255,.09),0 14px 34px -24px rgba(0,0,0,.8); } html.msl-anim .header.msl-fixed .nav{height:68px} html.msl-anim .header.msl-fixed .logo img{max-height:38px} html.msl-anim .header.msl-up{transform:translateY(-104%)} /* Sécurité : jamais masqué quand le menu mobile est ouvert */ html.msl-anim .header:has(.links.open){transform:none !important} /* -------------------------------------------------------------------------- 4. Navigation : soulignement progressif -------------------------------------------------------------------------- */ .links a{position:relative} .links a::after{ content:""; position:absolute; left:0; bottom:-7px; height:2px; width:0; border-radius:2px; background:linear-gradient(90deg,var(--pink),var(--purple)); transition:width .42s var(--msl-ease); } .links a:hover::after, .links a.active::after{width:100%} @media(max-width:900px){.links a::after{display:none}} /* -------------------------------------------------------------------------- 5. Cartes : élévation et zoom d'image maîtrisés -------------------------------------------------------------------------- */ .card{transition:transform .5s var(--msl-ease),box-shadow .5s var(--msl-ease)} .card img{transition:transform .8s var(--msl-ease)} @media(hover:hover){ .card:hover{transform:translateY(-6px);box-shadow:0 26px 48px -26px rgba(29,24,58,.5)} .card:hover img{transform:scale(1.045)} } /* -------------------------------------------------------------------------- 6. Boutons : dégradé qui glisse au survol -------------------------------------------------------------------------- */ .btn{ background-size:190% 100%; background-position:0 0; transition:transform .35s var(--msl-ease),box-shadow .35s var(--msl-ease),background-position .6s var(--msl-ease); } @media(hover:hover){ .btn:hover{background-position:100% 0} } .btn:focus-visible, .links a:focus-visible, .card:focus-visible{outline:2px solid var(--pink);outline-offset:3px;border-radius:6px} /* -------------------------------------------------------------------------- 7. Compteurs (chiffres clés) -------------------------------------------------------------------------- */ [data-msl-count]{font-variant-numeric:tabular-nums} /* -------------------------------------------------------------------------- 8. FAQ : ouverture en fondu -------------------------------------------------------------------------- */ html.msl-anim .faq-list details[open] > *:not(summary), html.msl-anim .sound-faq-list details[open] > *:not(summary){ animation:msl-open .42s var(--msl-ease) both; } @keyframes msl-open{ from{opacity:0;transform:translate3d(0,-6px,0)} to {opacity:1;transform:none} } .faq-list details, .sound-faq-list details{transition:border-color .35s var(--msl-ease),box-shadow .35s var(--msl-ease)} .faq-list details[open], .sound-faq-list details[open]{box-shadow:0 14px 34px -26px rgba(29,24,58,.55)} /* -------------------------------------------------------------------------- 9. Accessibilité — respect strict des préférences système -------------------------------------------------------------------------- */ @media (prefers-reduced-motion:reduce){ html.msl-anim [data-msl], html.msl-anim [data-msl="hero"]{opacity:1 !important;transform:none !important;transition:none !important} html.msl-anim .hero-slide.active .hero-slide-image{animation:none} html.msl-anim .header.msl-up{transform:none} .header,.header .nav,.card,.card img,.btn,.links a::after{transition:none} html.msl-anim .faq-list details[open] > *:not(summary), html.msl-anim .sound-faq-list details[open] > *:not(summary){animation:none} }