/* =========================================================== Helpers d'animation réutilisables — révélations au scroll (GSAP / ScrollTrigger). Piloté par attributs data-anim*. =========================================================== */ /* Masque les éléments animables avant leur révélation pour éviter tout flash de contenu (FOUC). La classe .js-anim est posée sur dès le parsing du par scroll-animations.js, puis retirée si GSAP est absent (les éléments redeviennent alors visibles). */ html.js-anim [data-anim], html.js-anim [data-anim-stagger] > * { opacity: 0; } /* Respect de prefers-reduced-motion : aucun masquage, tout reste visible. */ @media (prefers-reduced-motion: reduce) { html.js-anim [data-anim], html.js-anim [data-anim-stagger] > * { opacity: 1 !important; } } /* ----------------------------------------------------------- Wipe avant/après piloté par le scroll (data-anim-wipe) Révélation par masque (clip-path) au fil du scroll, SANS pin : la page défile en continu (aucune rupture), l'image "après" se dévoile pendant que la section traverse le viewport. Pas de scale. ----------------------------------------------------------- */ .anim-wipe { position: relative; width: 90%; max-width: 1150px; /* garde tout le medley visible sans hauteur excessive */ margin-inline: auto; border-radius: 24px; overflow: hidden; } .anim-wipe-before img { display: block; width: 100%; height: auto; /* l'image "avant" définit la hauteur (ratio naturel, pas de recadrage) */ } .anim-wipe-after { position: absolute; inset: 0; } .anim-wipe-after img { display: block; width: 100%; height: 100%; object-fit: cover; /* même ratio que "avant" -> aucun recadrage */ } /* Anti-FOUC : avant l'init JS, l'image "après" est entièrement masquée. */ html.js-anim .anim-wipe-after { clip-path: inset(0 100% 0 0); } /* Variante plein écran + pin (data-anim-wipe="pin") : panneau plein viewport, image ENTIÈRE (contain, aucun recadrage) centrée sur fond sombre. */ .anim-wipe[data-anim-wipe="pin"] { width: 100vw; max-width: none; margin-left: calc(50% - 50vw); margin-right: calc(50% - 50vw); height: calc(100vh - var(--anim-header-offset, 0px)); /* sous le header (hauteur posée en JS) */ border-radius: 0; background: var(--white-color); /* = fond de la page : les bandes se fondent */ } .anim-wipe[data-anim-wipe="pin"] .anim-wipe-before, .anim-wipe[data-anim-wipe="pin"] .anim-wipe-after { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; } /* Image entière, dimensionnée (et non object-fit sur la boîte) pour que le border-radius s'applique au visuel lui-même. */ .anim-wipe[data-anim-wipe="pin"] .anim-wipe-before img, .anim-wipe[data-anim-wipe="pin"] .anim-wipe-after img { width: auto; height: auto; max-width: 100%; max-height: calc(100% - 64px); /* marge verticale (~32px haut/bas) */ border-radius: 16px; } /* Reduced motion : pas d'animation ; on empile les deux images (toutes visibles). */ @media (prefers-reduced-motion: reduce) { html.js-anim .anim-wipe-after { position: relative; clip-path: none; } html.js-anim .anim-wipe-after img { height: auto; } html.js-anim .anim-wipe[data-anim-wipe="pin"] { height: auto; } html.js-anim .anim-wipe[data-anim-wipe="pin"] .anim-wipe-before, html.js-anim .anim-wipe[data-anim-wipe="pin"] .anim-wipe-after { position: relative; display: block; } html.js-anim .anim-wipe[data-anim-wipe="pin"] .anim-wipe-before img, html.js-anim .anim-wipe[data-anim-wipe="pin"] .anim-wipe-after img { max-width: 100%; max-height: none; width: 100%; height: auto; } }