/** * CCBLA — Animations scroll-reveal (ccbla-anim.css) * ───────────────────────────────────────────────────────────────────── * Ciblage par SÉLECTEURS RÉELS de la home (relevés par inspection DOM * 2026-06-02). Aucun attribut data-* requis, aucun bloc modifié. * * Anti-FOUC : le masquage initial est porté par les sélecteurs réels, * scopé sous html.ccbla-anim (classe posée par le gate AVANT le * 1er paint). Sans gate (no-JS / reduced-motion / IO absent) → aucune * règle ne s'applique → contenu 100% visible, jamais display:none. * * Le JS pose .ccbla-anim--in (reveal simple) ou .ccbla-row-in (grilles) * → la révélation est générique (1 règle), pas besoin de re-lister les * sélecteurs. * * ⚠ Si tu modifies/ajoutes un sélecteur ici, répercute-le dans * ccbla-anim.js (bloc CONFIG). Les deux fichiers doivent rester alignés. * * Réglages validés : 800ms · 50px · stagger 90ms · ease (0.16,1,0.3,1) * WCAG 2.2 : 2.3.3 (reduced-motion), 2.2.2 (one-shot), 2.3.1 (caret). * * 2026-06-02 — Ciblage sélecteurs réels (remplace la version attributs). * ───────────────────────────────────────────────────────────────────── */ :root{ --ccbla-anim-duration: 800ms; --ccbla-anim-distance: 50px; --ccbla-anim-stagger-step: 90ms; --ccbla-anim-ease: cubic-bezier(0.16, 1, 0.3, 1); /* 2026-06-02 — Motif POP (slide depuis la gauche). Réglages validés en démo : 40vw de décalage, 650ms, courbe POP. Tuning en un seul endroit. */ --ccbla-motif-shift: 40vw; --ccbla-motif-duration: 650ms; } /* ── Transition commune à toutes les cibles "reveal simple" ─────────── */ html.ccbla-anim .is-style-ccbla-bouton-1 a[href$="/agenda/"], html.ccbla-anim .is-style-ccbla-bouton-1 a[href$="/infos-pratiques/"], html.ccbla-anim .kt-adv-heading2_85f363-66, html.ccbla-anim .kt-adv-heading2_99af74-94, html.ccbla-anim .is-style-ccbla-billetterie-1 a, html.ccbla-anim .ccbla-utick-hero__content, html.ccbla-anim .kt-adv-heading2_1625a2-56, html.ccbla-anim .ccbla-block-lies__title, html.ccbla-anim .kadence-column2_a0ca33-ec a[href*="/agenda/"], html.ccbla-anim .kt-adv-heading2_f42605-8e, html.ccbla-anim .kadence-column2_566b84-e5 a[href*="/actualites/"], html.ccbla-anim .kb-dynamic-html-id-2_b3b3d2-7e, html.ccbla-anim .kb-dynamic-html-id-2_92cd0f-ec{ transition: opacity var(--ccbla-anim-duration) var(--ccbla-anim-ease), transform var(--ccbla-anim-duration) var(--ccbla-anim-ease); will-change: opacity, transform; } /* ── États initiaux par effet ──────────────────────────────────────── */ /* slide-left : entre depuis la gauche → décalé à gauche au départ */ html.ccbla-anim .is-style-ccbla-bouton-1 a[href$="/agenda/"], html.ccbla-anim .kt-adv-heading2_1625a2-56, html.ccbla-anim .ccbla-block-lies__title, html.ccbla-anim .kt-adv-heading2_f42605-8e{ opacity: 0; transform: translateX(calc(-1 * var(--ccbla-anim-distance))); } /* slide-right : entre depuis la droite */ html.ccbla-anim .is-style-ccbla-bouton-1 a[href$="/infos-pratiques/"], html.ccbla-anim .kadence-column2_a0ca33-ec a[href*="/agenda/"], html.ccbla-anim .kadence-column2_566b84-e5 a[href*="/actualites/"]{ opacity: 0; transform: translateX(var(--ccbla-anim-distance)); } /* slide-down : entre depuis le haut (Billetterie + titre dyn « Nouveau nom » H2) */ html.ccbla-anim .kt-adv-heading2_85f363-66, html.ccbla-anim .kb-dynamic-html-id-2_b3b3d2-7e{ opacity: 0; transform: translateY(calc(-1 * var(--ccbla-anim-distance))); } /* slide-up : entre depuis le bas (bouton billetterie + titre dyn « Nouveau départ! » H3) */ html.ccbla-anim .is-style-ccbla-billetterie-1 a, html.ccbla-anim .kb-dynamic-html-id-2_92cd0f-ec{ opacity: 0; transform: translateY(var(--ccbla-anim-distance)); } /* fade : tagline billetterie */ html.ccbla-anim .kt-adv-heading2_99af74-94{ opacity: 0; } /* fade-up : carte agenda mise en avant. 2026-06-02 ARBITRAGE C : on anime .ccbla-utick-hero__content EN BLOC (overflow:visible, 1 ex.) plutôt que __date/__title/__organizer en 3 slides distincts — leur ancêtre commun .ccbla-utick-hero__body est en overflow:hidden et clipperait les translates. Mouvement doux (16px). Pour revenir aux 3 effets distincts : override overflow:visible sur __body pendant l'anim (à valider, risque de débordement visuel). */ html.ccbla-anim .ccbla-utick-hero__content{ opacity: 0; transform: translateY(16px); } /* ── Révélation générique (posée par le JS) ────────────────────────── */ /* .ccbla-anim--in n'apparaît qu'au reveal → !important pour battre la spécificité des masquages (sélecteurs longs). Lève will-change. */ html.ccbla-anim .ccbla-anim--in{ opacity: 1 !important; transform: none !important; will-change: auto; } /* ── Grilles : révélation par rangée, fade-in pur (pas de translate) ── */ html.ccbla-anim .ccbla-utick-agenda__grid > li, html.ccbla-anim .ccbla-events-grid--nos-membres .ccbla-events-grid__list > li, html.ccbla-anim .ccbla-loop-agenda .ccbla-events-grid__list > li{ opacity: 0; transition: opacity var(--ccbla-anim-duration) var(--ccbla-anim-ease); will-change: opacity; } html.ccbla-anim .ccbla-row-in{ opacity: 1 !important; will-change: auto; } /* ── Titres dynamiques héros (ex-typewriter) ────────────────────────── 2026-06-02 — Le typewriter est SUPPRIMÉ (tous devices, mea culpa Nic). Les 2 titres sont désormais des cibles "reveal simple" : H2 « Nouveau nom » → slide-down (cf. bloc slide-down ci-dessus), H3 « Nouveau départ! » → slide-up (cf. bloc slide-up ci-dessus). Plus de caret, plus de keyframes, plus de bascule responsive. */ /* ── Motif POP : slide depuis la gauche + fade (cible SPÉCIALE) ──────── */ /* 2026-06-02 — motif-pop --left passe d'EXCLU à animé. Couche animée = .ccbla-motif-pop__clip, choisie car transform LIBRE : front.js pose scaleX(flip) sur le __svg (front.js L625/671) et style.css met shift+flip+translateY(-50%) AUSSI sur le __svg (L82-99) ; le clip ne porte que position+overflow (L34-43). → notre translateX du clip n'entre PAS en collision avec le flip/shift/centrage du svg ni avec le positionnement inset de la racine (portalée vers body par front.js). La classe .ccbla-motif-revealed est posée sur la RACINE par le JS ; le clip est un enfant persistant (jamais recréé) → l'observer survit au portal. État initial posé par le gate avant 1er paint (anti-FOUC). Scopé --left uniquement (le --right n'est pas touché). */ html.ccbla-anim .ccbla-motif-pop--left .ccbla-motif-pop__clip{ opacity: 0; transform: translateX(calc(-1 * var(--ccbla-motif-shift))); transition: opacity var(--ccbla-motif-duration) var(--ccbla-anim-ease), transform var(--ccbla-motif-duration) var(--ccbla-anim-ease); will-change: opacity, transform; } html.ccbla-anim .ccbla-motif-pop--left.ccbla-motif-revealed .ccbla-motif-pop__clip{ opacity: 1; transform: translateX(0); will-change: auto; } /* ═══════════════════════════════════════════════════════════════════════ COUCHE GÉNÉRIQUE ccbla-fx-* (2026-06-05) ───────────────────────────────────────────────────────────────────── Classes RÉUTILISABLES, posées à la main via Gutenberg → Avancé → Classe(s) CSS additionnelle(s). Contrairement aux sélecteurs réels ci-dessus, elles sont STABLES : pour animer une nouvelle section (copier-coller), il suffit d'ajouter la classe — AUCUNE modif JS/CSS. Le JS (ccbla-anim.js, FX_SELECTORS) observe ces classes et pose .ccbla-anim--in (révélation générique déjà définie plus haut). Mapping section Agenda : H1 → ccbla-fx-slide-left, P → ccbla-fx-slide-up. ═══════════════════════════════════════════════════════════════════════ */ html.ccbla-anim .ccbla-fx-slide-left, html.ccbla-anim .ccbla-fx-slide-right, html.ccbla-anim .ccbla-fx-slide-up, html.ccbla-anim .ccbla-fx-slide-down, html.ccbla-anim .ccbla-fx-fade{ transition: opacity var(--ccbla-anim-duration) var(--ccbla-anim-ease), transform var(--ccbla-anim-duration) var(--ccbla-anim-ease); will-change: opacity, transform; } html.ccbla-anim .ccbla-fx-slide-left {opacity:0; transform:translateX(calc(-1 * var(--ccbla-anim-distance)));} html.ccbla-anim .ccbla-fx-slide-right{opacity:0; transform:translateX(var(--ccbla-anim-distance));} html.ccbla-anim .ccbla-fx-slide-up {opacity:0; transform:translateY(var(--ccbla-anim-distance));} /* entre du bas */ html.ccbla-anim .ccbla-fx-slide-down {opacity:0; transform:translateY(calc(-1 * var(--ccbla-anim-distance)));} html.ccbla-anim .ccbla-fx-fade {opacity:0;} /* (révélation = .ccbla-anim--in, déjà définie : opacity:1 / transform:none !important) */ /* ── Motif POP : animation OPT-IN par bloc (toggle éditeur) ──────────── 2026-06-05 — Chemin INDÉPENDANT du legacy --left (home). Le toggle pose .ccbla-motif-pop--anim + data-mdir (render.php) ; le JS observe la racine et pose .ccbla-motif-revealed. Anime le __clip (transform libre, même raisonnement que --left). Direction pilotée par data-mdir. */ html.ccbla-anim .ccbla-motif-pop--anim .ccbla-motif-pop__clip{ opacity: 0; transition: opacity var(--ccbla-motif-duration) var(--ccbla-anim-ease), transform var(--ccbla-motif-duration) var(--ccbla-anim-ease); will-change: opacity, transform; } html.ccbla-anim .ccbla-motif-pop--anim[data-mdir="left"] .ccbla-motif-pop__clip{ transform: translateX(calc(-1 * var(--ccbla-motif-shift))); } html.ccbla-anim .ccbla-motif-pop--anim[data-mdir="right"] .ccbla-motif-pop__clip{ transform: translateX(var(--ccbla-motif-shift)); } html.ccbla-anim .ccbla-motif-pop--anim[data-mdir="bottom"] .ccbla-motif-pop__clip{ transform: translateY(30vh); } html.ccbla-anim .ccbla-motif-pop--anim.ccbla-motif-revealed .ccbla-motif-pop__clip{ opacity: 1; transform: none; will-change: auto; } /* ── Défense reduced-motion (defense-in-depth) ─────────────────────── */ @media (prefers-reduced-motion: reduce){ html.ccbla-anim .ccbla-fx-slide-left, html.ccbla-anim .ccbla-fx-slide-right, html.ccbla-anim .ccbla-fx-slide-up, html.ccbla-anim .ccbla-fx-slide-down, html.ccbla-anim .ccbla-fx-fade, html.ccbla-anim .ccbla-motif-pop--anim .ccbla-motif-pop__clip{ opacity: 1 !important; transform: none !important; transition: none !important; } html.ccbla-anim .is-style-ccbla-bouton-1 a, html.ccbla-anim .kt-adv-heading2_85f363-66, html.ccbla-anim .kt-adv-heading2_99af74-94, html.ccbla-anim .is-style-ccbla-billetterie-1 a, html.ccbla-anim .ccbla-utick-hero__content, html.ccbla-anim .kt-adv-heading2_1625a2-56, html.ccbla-anim .ccbla-block-lies__title, html.ccbla-anim .kadence-column2_a0ca33-ec a, html.ccbla-anim .kt-adv-heading2_f42605-8e, html.ccbla-anim .kadence-column2_566b84-e5 a, html.ccbla-anim .ccbla-utick-agenda__grid > li, html.ccbla-anim .ccbla-events-grid--nos-membres .ccbla-events-grid__list > li, html.ccbla-anim .ccbla-loop-agenda .ccbla-events-grid__list > li, html.ccbla-anim .kb-dynamic-html-id-2_b3b3d2-7e, html.ccbla-anim .kb-dynamic-html-id-2_92cd0f-ec, html.ccbla-anim .ccbla-motif-pop--left .ccbla-motif-pop__clip{ opacity: 1 !important; transform: none !important; transition: none !important; } }