/* Animations des modules flexibles. Masquage actif seulement si html.js-anim
   (pose par assets/js/animations-modules.js). Regles de base en proprietes
   longues : le raccourci "transition" remet transition-delay a 0 et casse la
   cascade de la section 6.c. */

:root {
    --anim-duree: 650ms;
    --anim-decalage: 20px;
    --anim-easing: cubic-bezier(0.22, 0.61, 0.36, 1);
    --anim-stagger: 110ms;

    /* Frise : plus lent, pour avoir le temps de voir l'effet. */
    --anim-duree-jalon: 700ms;
    --anim-duree-ligne: 1800ms;
}


/* ==========================================================================
   1. Texte + Image - colonnes depuis des cotes opposes.
   DOM : texte puis image. La classe ACF flex-row / flex-row-reverse inverse
   l'ordre visuel. Mobile : vertical.
   ========================================================================== */

.js-anim .texte-image .row > .col-lg-6 {
    --anim-x: 0px;
    --anim-y: var(--anim-decalage);

    opacity: 0;
    transform: translate3d(var(--anim-x), var(--anim-y), 0);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duree);
    transition-timing-function: var(--anim-easing);
}

@media (min-width: 768px) {
    /* depuis la gauche */
    .js-anim .texte-image .row.flex-row > .col-lg-6:nth-child(1),
    .js-anim .texte-image .row.flex-row-reverse > .col-lg-6:nth-child(2) {
        --anim-x: calc(-1 * var(--anim-decalage));
        --anim-y: 0px;
    }

    /* depuis la droite */
    .js-anim .texte-image .row.flex-row > .col-lg-6:nth-child(2),
    .js-anim .texte-image .row.flex-row-reverse > .col-lg-6:nth-child(1) {
        --anim-x: var(--anim-decalage);
        --anim-y: 0px;
    }
}

.js-anim .texte-image .row.is-anim-in > .col-lg-6 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   2. Bloc Card - cartes en cascade
   ========================================================================== */

.js-anim .bloc-card .liste-blocs .row > .col-lg-6 {
    opacity: 0;
    transform: translate3d(0, var(--anim-decalage), 0);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duree);
    transition-timing-function: var(--anim-easing);
}

.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   3. Bloc Chiffres - FIGE. Valeurs litterales : le compteur de
   assets/js/custom.js est cale sur ce timing, ne pas brancher sur les
   variables communes.
   ========================================================================== */

.js-anim .bloc-chiffres .row > .col-lg-3 {
    opacity: 0;
    transform: translate3d(0, 20px, 0);
    transition-property: opacity, transform;
    transition-duration: 500ms;
    transition-timing-function: var(--anim-easing);
}

.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(1) { transition-delay: 0ms; }
.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(2) { transition-delay: 80ms; }
.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(3) { transition-delay: 160ms; }
.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(n+4) { transition-delay: 240ms; }


/* ==========================================================================
   4. Bloc Timeline - chaque element est observe separement
   ========================================================================== */

/* 4.a Ligne verticale, trace progressif. "linear" volontaire : un ease-out
   tracerait la moitie de la ligne en 150 ms et paraitrait instantane. */
.js-anim .bloc-timeline .content-timeline::before {
    transform: translateX(-50%) scaleY(0);
    transform-origin: top center;
    transition: transform var(--anim-duree-ligne) linear;
}

.js-anim .bloc-timeline .content-timeline.is-anim-in::before {
    transform: translateX(-50%) scaleY(1);
}

/* 4.b Jalons : chacun depuis son cote (les impairs sont a gauche) */
.js-anim .bloc-timeline .bloc-para-timeline {
    --anim-x: 0px;
    --anim-y: var(--anim-decalage);

    opacity: 0;
    transform: translate3d(var(--anim-x), var(--anim-y), 0);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duree-jalon);
    transition-timing-function: var(--anim-easing);
}

@media (min-width: 768px) {
    .js-anim .bloc-timeline .bloc-para-timeline:nth-child(odd) {
        --anim-x: calc(-1 * var(--anim-decalage));
        --anim-y: 0px;
    }

    .js-anim .bloc-timeline .bloc-para-timeline:nth-child(even) {
        --anim-x: var(--anim-decalage);
        --anim-y: 0px;
    }
}

.js-anim .bloc-timeline .bloc-para-timeline.is-anim-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 4.c Pastille de date, juste apres son jalon. On anime le span : .bloc-date
   porte des bordures decoratives qu'un scale deformerait. */
.js-anim .bloc-timeline .bloc-date span {
    opacity: 0;
    transform: scale(0.9);
    transform-origin: center;
    transition: opacity 450ms var(--anim-easing) 250ms,
                transform 450ms var(--anim-easing) 250ms;
}

.js-anim .bloc-timeline .bloc-para-timeline.is-anim-in .bloc-date span {
    opacity: 1;
    transform: scale(1);
}


/* ==========================================================================
   5. Revelation simple (fondu montant) - l'element porte lui-meme .is-anim-in
   ========================================================================== */

.js-anim .bloc-carousel .container,
.js-anim .bloc-temoignage .carousel,
.js-anim .bloc-faq .content-card,
.js-anim .bloc-liste .bloc-paragraphe-intro,
.js-anim .bloc-liste .row.shadow,
.js-anim .bloc-cta-1 .col-lg-7 {
    opacity: 0;
    transform: translate3d(0, var(--anim-decalage), 0);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duree);
    transition-timing-function: var(--anim-easing);
}

.js-anim .bloc-carousel .container.is-anim-in,
.js-anim .bloc-temoignage .carousel.is-anim-in,
.js-anim .bloc-faq .content-card.is-anim-in,
.js-anim .bloc-liste .bloc-paragraphe-intro.is-anim-in,
.js-anim .bloc-liste .row.shadow.is-anim-in,
.js-anim .bloc-cta-1 .col-lg-7.is-anim-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   6. Cascades en grille - le conteneur porte .is-anim-in.
   [class*="col-lg-"] couvre les largeurs variables (bloc-texte-multicolonnes).
   ========================================================================== */

.js-anim :is(
    .bloc-texte-multicolonnes, .bloc-videos, .bloc-cta-3,
    .bloc-mea-1, .bloc-mea-5, .bloc-mea-6
) .row > [class*="col-lg-"],
.js-anim .texte-modele-4 .liste-blocs .row > [class*="col-lg-"],
.js-anim .bloc-texte-lire-la-suite .row > .bloc-para {
    opacity: 0;
    transform: translate3d(0, var(--anim-decalage), 0);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duree);
    transition-timing-function: var(--anim-easing);
}

.js-anim :is(
    .bloc-texte-multicolonnes, .bloc-videos, .bloc-cta-3,
    .bloc-mea-1, .bloc-mea-5, .bloc-mea-6
) .row.is-anim-in > [class*="col-lg-"],
.js-anim .texte-modele-4 .liste-blocs .row.is-anim-in > [class*="col-lg-"],
.js-anim .bloc-texte-lire-la-suite .row.is-anim-in > .bloc-para {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}

/* 6.b Galerie : opacite seule, Masonry positionne les items via transform. */
.js-anim .bloc-galerie .masonry-grid > .grid-item {
    opacity: 0;
    transition-property: opacity;
    transition-duration: var(--anim-duree);
    transition-timing-function: var(--anim-easing);
}

.js-anim .bloc-galerie .masonry-grid.is-anim-in > .grid-item {
    opacity: 1;
}

/* 6.c Decalage de cascade, ecrit une seule fois pour tous les conteneurs. */
.js-anim .row.is-anim-in > :nth-child(1),
.js-anim .liste-blocs.is-anim-in .row > :nth-child(1),
.js-anim .masonry-grid.is-anim-in > :nth-child(1) { transition-delay: calc(0 * var(--anim-stagger)); }

.js-anim .row.is-anim-in > :nth-child(2),
.js-anim .liste-blocs.is-anim-in .row > :nth-child(2),
.js-anim .masonry-grid.is-anim-in > :nth-child(2) { transition-delay: calc(1 * var(--anim-stagger)); }

.js-anim .row.is-anim-in > :nth-child(3),
.js-anim .liste-blocs.is-anim-in .row > :nth-child(3),
.js-anim .masonry-grid.is-anim-in > :nth-child(3) { transition-delay: calc(2 * var(--anim-stagger)); }

.js-anim .row.is-anim-in > :nth-child(4),
.js-anim .liste-blocs.is-anim-in .row > :nth-child(4),
.js-anim .masonry-grid.is-anim-in > :nth-child(4) { transition-delay: calc(3 * var(--anim-stagger)); }

.js-anim .row.is-anim-in > :nth-child(5),
.js-anim .liste-blocs.is-anim-in .row > :nth-child(5),
.js-anim .masonry-grid.is-anim-in > :nth-child(5) { transition-delay: calc(4 * var(--anim-stagger)); }

.js-anim .row.is-anim-in > :nth-child(n+6),
.js-anim .liste-blocs.is-anim-in .row > :nth-child(n+6),
.js-anim .masonry-grid.is-anim-in > :nth-child(n+6) { transition-delay: calc(5 * var(--anim-stagger)); }

/* bloc-chiffres est observe au niveau section : sa .row n'a jamais .is-anim-in. */


/* ==========================================================================
   7. Paires laterales - lateral en desktop, vertical en mobile
   ========================================================================== */

.js-anim .bloc-cta-2 .row > [class*="col-lg-"],
.js-anim .bloc-mea-2 .content-bloc-mea.row > [class*="col-md-"],
.js-anim .bloc-mea-3 .row > .col-lg-6,
.js-anim .bloc-mea-4 .liste-bloc-mea-blog .row > .col-lg-6 {
    --anim-x: 0px;
    --anim-y: var(--anim-decalage);

    opacity: 0;
    transform: translate3d(var(--anim-x), var(--anim-y), 0);
    transition-property: opacity, transform;
    transition-duration: var(--anim-duree);
    transition-timing-function: var(--anim-easing);
}

@media (min-width: 768px) {
    /* depuis la gauche (cta-2 : 2e colonne du DOM, order-lg-1) */
    .js-anim .bloc-cta-2 .row > [class*="col-lg-"]:nth-child(2),
    .js-anim .bloc-mea-2 .content-bloc-mea.row > [class*="col-md-"]:nth-child(1),
    .js-anim .bloc-mea-3 .row > .col-lg-6:nth-child(1),
    .js-anim .bloc-mea-4 .liste-bloc-mea-blog .row > .col-lg-6:nth-child(1) {
        --anim-x: calc(-1 * var(--anim-decalage));
        --anim-y: 0px;
    }

    /* depuis la droite (cta-2 : 1ere colonne du DOM, order-lg-2) */
    .js-anim .bloc-cta-2 .row > [class*="col-lg-"]:nth-child(1),
    .js-anim .bloc-mea-2 .content-bloc-mea.row > [class*="col-md-"]:nth-child(2),
    .js-anim .bloc-mea-3 .row > .col-lg-6:nth-child(2),
    .js-anim .bloc-mea-4 .liste-bloc-mea-blog .row > .col-lg-6:nth-child(2) {
        --anim-x: var(--anim-decalage);
        --anim-y: 0px;
    }
}

.js-anim .bloc-cta-2 .row.is-anim-in > [class*="col-lg-"],
.js-anim .bloc-mea-2 .content-bloc-mea.row.is-anim-in > [class*="col-md-"],
.js-anim .bloc-mea-3 .row.is-anim-in > .col-lg-6,
.js-anim .bloc-mea-4 .liste-bloc-mea-blog .row.is-anim-in > .col-lg-6 {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   8. Micro-interactions au survol - CSS seul, actif meme sans js-anim
   ========================================================================== */

.bloc-card .content-bloc,
.texte-modele-4 .content-bloc,
.bloc-mea-1 .the-bloc-mea-1,
.bloc-mea-2 .content-bloc-mea,
.bloc-mea-5 .content-bloc-mea-5,
.bloc-mea-6 .content-bloc-mea-5 {
    transition: transform 250ms var(--anim-easing),
                box-shadow 250ms var(--anim-easing);
}

.bloc-card .liste-blocs .row > .col-lg-6:hover .content-bloc,
.texte-modele-4 .liste-blocs .row > [class*="col-lg-"]:hover .content-bloc,
.bloc-mea-1 .row > [class*="col-lg-"]:hover .the-bloc-mea-1,
.bloc-mea-2 .content-bloc-mea:hover,
.bloc-mea-5 .row > [class*="col-lg-"]:hover .content-bloc-mea-5,
.bloc-mea-6 .row > [class*="col-lg-"]:hover .content-bloc-mea-5 {
    transform: translateY(-4px);
    box-shadow: 0 12px 28px rgba(0, 37, 57, 0.18);
}

.bloc-card .more a svg {
    transition: transform 250ms var(--anim-easing);
}

.bloc-card .liste-blocs .row > .col-lg-6:hover .more a svg {
    transform: translate(3px, -3px);
}

.bloc-timeline .bloc-image img {
    transition: transform 400ms var(--anim-easing);
}

.bloc-timeline .bloc-para-timeline:hover .bloc-image img {
    transform: scale(1.04);
}

/* Galerie : pas de scale, un zoom demanderait overflow:hidden (risque de
   rognage). Un eclaircissement suffit a signaler la zone cliquable. */
.bloc-galerie .grid-item img {
    transition: filter 250ms var(--anim-easing);
}

.bloc-galerie .grid-item:hover img {
    filter: brightness(1.08);
}


/* ==========================================================================
   9. Accessibilite - respect de "reduire les animations" du systeme
   Obligation RGAA / WCAG 2.3.3.

   Ceinture de securite : le JS sort deja avant de poser js-anim quand le
   reglage est actif. On n'enumere que les elements reellement animes - un
   "transform: none" applique largement casserait les transforms legitimes
   du theme (owl carousel, Masonry...).
   ========================================================================== */

@media (prefers-reduced-motion: reduce) {
    .js-anim .texte-image .row > .col-lg-6,
    .js-anim .bloc-card .liste-blocs .row > .col-lg-6,
    .js-anim .bloc-chiffres .row > .col-lg-3,
    .js-anim .bloc-timeline .bloc-para-timeline,
    .js-anim .bloc-timeline .bloc-date span,
    .js-anim .bloc-carousel .container,
    .js-anim .bloc-temoignage .carousel,
    .js-anim .bloc-faq .content-card,
    .js-anim .bloc-liste .bloc-paragraphe-intro,
    .js-anim .bloc-liste .row.shadow,
    .js-anim .bloc-cta-1 .col-lg-7,
    .js-anim :is(
        .bloc-texte-multicolonnes, .bloc-videos, .bloc-cta-3,
        .bloc-mea-1, .bloc-mea-5, .bloc-mea-6
    ) .row > [class*="col-lg-"],
    .js-anim .texte-modele-4 .liste-blocs .row > [class*="col-lg-"],
    .js-anim .bloc-texte-lire-la-suite .row > .bloc-para,
    .js-anim .bloc-galerie .masonry-grid > .grid-item,
    .js-anim .bloc-cta-2 .row > [class*="col-lg-"],
    .js-anim .bloc-mea-2 .content-bloc-mea.row > [class*="col-md-"],
    .js-anim .bloc-mea-3 .row > .col-lg-6,
    .js-anim .bloc-mea-4 .liste-bloc-mea-blog .row > .col-lg-6 {
        opacity: 1 !important;
        transform: none !important;
        transition: none !important;
        transition-delay: 0s !important;
    }

    .js-anim .bloc-timeline .content-timeline::before {
        transform: translateX(-50%) scaleY(1) !important;
        transition: none !important;
    }

    .bloc-card .content-bloc,
    .bloc-card .more a svg,
    .bloc-timeline .bloc-image img,
    .texte-modele-4 .content-bloc,
    .bloc-mea-1 .the-bloc-mea-1,
    .bloc-mea-2 .content-bloc-mea,
    .bloc-mea-5 .content-bloc-mea-5,
    .bloc-mea-6 .content-bloc-mea-5,
    .bloc-galerie .grid-item img {
        transition: none !important;
    }

    .bloc-card .liste-blocs .row > .col-lg-6:hover .content-bloc,
    .bloc-card .liste-blocs .row > .col-lg-6:hover .more a svg,
    .bloc-timeline .bloc-para-timeline:hover .bloc-image img,
    .texte-modele-4 .liste-blocs .row > [class*="col-lg-"]:hover .content-bloc,
    .bloc-mea-1 .row > [class*="col-lg-"]:hover .the-bloc-mea-1,
    .bloc-mea-2 .content-bloc-mea:hover,
    .bloc-mea-5 .row > [class*="col-lg-"]:hover .content-bloc-mea-5,
    .bloc-mea-6 .row > [class*="col-lg-"]:hover .content-bloc-mea-5 {
        transform: none !important;
    }
}