/* ========================================================================= * SPIDE — Apparitions dynamiques au scroll (tout le site) * ------------------------------------------------------------------------- * - La gate `.spide-anim` est ajoutée sur EN par animations.js * → l'état caché est appliqué AVANT le 1er paint : zéro flash. * - Sans JS : pas de classe `.spide-anim` → contenu visible (no-JS safe). * - Tout est dans @media (prefers-reduced-motion: no-preference) * → les utilisateurs « réduire les animations » voient le contenu tel quel. * - La révélation = classe `.is-in` ajoutée par IntersectionObserver (une fois). * - On NE cible PAS les éléments déjà animés en JS (.sol-card, carrousel avis, * image sticky approche, marquee partenaires, slider besoin) → pas de conflit. * ========================================================================= */ @media (prefers-reduced-motion: no-preference) { :root { --spide-rv-ease: cubic-bezier(.22, 1, .36, 1); --spide-rv-dur: .7s; } /* ---- État initial commun (caché) : tous les blocs révélables ---- */ .spide-anim :is( .spide-hero__intro, .spide-hero__aside, .spide-hero__left, .spide-hero__right, .spide-besoins__head, .spide-besoins__grid > .spide-besoin-card, .spide-secteurs__media, .spide-secteurs__card, .spide-sec__list > li, .spide-sectors__cta, .spide-projets__media, .spide-projets__intro, .spide-solutions__cta, .spide-avis__head, .spide-avis__viewport, .spide-chiffres__head, .spide-chiffres__band, .spide-chiffres__row > .chiffre, .spide-valeurs__intro, .spide-valeurs__cards > .valeur-card, .spide-partners__head, /* --- page Besoin --- */ .spide-besoin-hero__left, .spide-besoin-hero__right, .spide-enjeux__header, .spide-enjeux__grid > .spide-enjeux__item, .spide-mission__header, .spide-mission__grid > .spide-mission__item, .spide-approche__header, .spide-benefices__header, .spide-benefices__grid > .spide-benefices__item, .spide-engagements__left, .spide-engagements__right, .spide-engagements__list > .spide-engagements__item, .spide-cta-band, /* --- page Secteur --- */ .spide-sec-hero__text, .spide-sec-hero__media, .spide-sol__head, .spide-sol__list > .spide-sol__row, .spide-sec-benefices__header, .spide-sec-benefices__grid > .spide-sec-benefices__item, .spide-sec-exp__col, .spide-sec-cta, /* --- footer (toutes pages) --- */ .spide-contact__intro, .spide-contact__form-wrap, .spide-foot__logo, .spide-foot__col, .spide-legal__brand, .spide-legal__network ) { opacity: 0; transition: opacity var(--spide-rv-dur) var(--spide-rv-ease), transform var(--spide-rv-dur) var(--spide-rv-ease); transition-delay: calc(var(--reveal-i, 0) * 70ms); will-change: opacity, transform; } /* ---- Variantes de mouvement (état caché) ---- */ /* Montée + fondu (blocs pleine largeur, en-têtes, bandes) */ .spide-anim :is( .spide-hero__intro, .spide-hero__aside, .spide-hero__left, .spide-besoins__head, .spide-secteurs__card, .spide-sectors__cta, .spide-projets__intro, .spide-solutions__cta, .spide-avis__head, .spide-chiffres__head, .spide-chiffres__band, .spide-valeurs__intro, .spide-partners__head, .spide-besoin-hero__left, .spide-enjeux__header, .spide-mission__header, .spide-approche__header, .spide-benefices__header, .spide-sec-hero__text, .spide-sol__head, .spide-sec-benefices__header, .spide-sec-cta, .spide-cta-band, .spide-contact__intro, .spide-legal__brand ) { transform: translate3d(0, 32px, 0); } /* Cascade : petits éléments des grilles / listes (montée courte) */ .spide-anim :is( .spide-besoins__grid > .spide-besoin-card, .spide-sec__list > li, .spide-chiffres__row > .chiffre, .spide-valeurs__cards > .valeur-card, .spide-enjeux__grid > .spide-enjeux__item, .spide-mission__grid > .spide-mission__item, .spide-benefices__grid > .spide-benefices__item, .spide-engagements__list > .spide-engagements__item, .spide-sol__list > .spide-sol__row, .spide-sec-benefices__grid > .spide-sec-benefices__item ) { transform: translate3d(0, 20px, 0); } /* Glissé depuis la gauche (colonnes de gauche) */ .spide-anim :is( .spide-engagements__left, .spide-sec-exp__col--left, .spide-contact__form-wrap ) { transform: translate3d(-36px, 0, 0); } /* Glissé depuis la droite (colonnes / médias de droite) */ .spide-anim :is( .spide-hero__right, .spide-besoin-hero__right, .spide-engagements__right, .spide-sec-hero__media, .spide-sec-exp__col--right ) { transform: translate3d(36px, 0, 0); } /* Léger zoom (médias / images) */ .spide-anim :is( .spide-secteurs__media, .spide-projets__media ) { transform: scale(1.06); } /* Fondu seul (proche d'éléments animés en JS — pas de transform) */ .spide-anim :is( .spide-avis__viewport, .spide-foot__logo, .spide-foot__col, .spide-legal__network ) { transform: none; } /* ---- État révélé (commun) ---- * !important obligatoire : les sélecteurs cachés en `.spide-anim :is(…)` montent * à une spécificité (0,3,0) (à cause des args avec combinateur `>`), donc une * règle de révélation « simple » perdrait la cascade et rien ne réapparaîtrait. */ .spide-anim .is-in { opacity: 1 !important; transform: none !important; } /* ---- Header : condensation douce au scroll ---- */ .spide-header { transition: box-shadow .3s ease, background-color .3s ease; } .spide-header.is-scrolled { box-shadow: 0 8px 28px rgba(0, 0, 0, .08); } }