/* Effets d'apparition — CS Haut-Plateau Actifs uniquement quand porte la classe .cshp-anim (posée très tôt par functions.php si JavaScript est disponible, hors éditeur Elementor et hors « réduire les animations »). Sans elle, tout est visible. Les éléments reçoivent .cshp-reveal (+ variante) par assets/js/apparitions.js, puis .is-in à l'entrée à l'écran. Une fois l'animation jouée, le script retire ces classes : les effets de survol reprennent la main. */ .cshp-anim .cshp-reveal { opacity: 0; transform: translate3d(0, 28px, 0); transition: opacity .75s cubic-bezier(.2, .7, .2, 1), transform .75s cubic-bezier(.2, .7, .2, 1), clip-path .9s cubic-bezier(.2, .7, .2, 1), filter .75s ease; transition-delay: var(--cshp-delay, 0ms); will-change: opacity, transform; } /* Variantes */ .cshp-anim .cshp-reveal--left { transform: translate3d(-44px, 0, 0); } .cshp-anim .cshp-reveal--right { transform: translate3d(44px, 0, 0); } .cshp-anim .cshp-reveal--zoom { transform: scale(.93); } .cshp-anim .cshp-reveal--card { transform: translate3d(0, 40px, 0) scale(.97); } .cshp-anim .cshp-reveal--soft { transform: translate3d(0, 16px, 0); filter: blur(6px); } /* Titres : le texte monte en se dévoilant derrière un masque */ .cshp-anim .cshp-reveal--title { transform: translate3d(0, 38px, 0); clip-path: inset(0 0 100% 0); } /* État final (commun) */ .cshp-anim .cshp-reveal.is-in { opacity: 1; transform: none; filter: none; clip-path: inset(-20% -5% -25% -5%); } /* Bannière : la photo se pose doucement (léger dézoom) au chargement */ .cshp-anim .cshp-hero__media img { transform: scale(1.09); transition: transform 1.8s cubic-bezier(.2, .7, .2, 1); } .cshp-anim .cshp-hero.is-in .cshp-hero__media img { transform: none; } /* Bande arc-en-ciel de la bannière : se déroule de gauche à droite */ .cshp-anim .cshp-hero .cshp-rainbow { transform: scaleX(0); transform-origin: left center; transition: transform 1.1s cubic-bezier(.2, .7, .2, 1) .5s; } .cshp-anim .cshp-hero.is-in .cshp-rainbow { transform: none; } @media print { .cshp-anim .cshp-reveal { opacity: 1 !important; transform: none !important; clip-path: none !important; filter: none !important; } }