/* ==========================================================================
   Animations des modules flexibles - apparition au scroll
   --------------------------------------------------------------------------
   Fichier autonome, volontairement NON compile par Pinegrow.
   Ne pas fusionner dans scss/style.scss : il est enqueue a la main depuis
   inc/custom.php, hors des blocs "Pinegrow generated".

   L'etat masque est conditionne a html.js-anim, pose par
   assets/js/animations-modules.js : si le JS ne tourne pas, le contenu
   reste visible tel quel.

   Intensite : sobre / corporate.

   PRINCIPE : le JS ne fait qu'ajouter .is-anim-in a l'element observe.
   Tout le rendu est ici. Deux familles seulement :
     - l'element porte .is-anim-in et se revele lui-meme
     - un conteneur porte .is-anim-in et ses enfants se revelent en cascade

   bloc-chiffres est volontairement FIGE avec des valeurs litterales : son
   compteur chiffre est pilote separement par assets/js/custom.js, retarder
   son apparition desynchroniserait les deux. Ne pas le brancher sur les
   variables communes.
   ========================================================================== */

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

    /* Frise chronologique : rythme volontairement plus lent que le reste.
       On arrive sur la zone en scrollant, l'effet doit avoir le temps
       d'etre vu plutot que d'etre deja termine. */
    --anim-duree-jalon: 700ms;
    --anim-duree-ligne: 1800ms;
}


/* ==========================================================================
   1. Image + Texte  /  Texte + Image
   Les deux colonnes arrivent depuis des cotes opposes en desktop,
   en simple fade vertical en mobile (les colonnes y sont empilees).
   ========================================================================== */

.js-anim .image-texte .row > .col-lg-6,
.js-anim .texte-image .row > .col-lg-6 {
    /* Direction par defaut (mobile) : vertical */
    --anim-x: 0px;
    --anim-y: var(--anim-decalage);

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

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

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

    /* texte-image : la 1ere colonne du DOM est l'image mais passe a droite
       (order-lg-2), la 2e est le texte et passe a gauche (order-lg-1) */
    .js-anim .texte-image .row > .col-lg-6:nth-child(1) {
        --anim-x: var(--anim-decalage);
        --anim-y: 0px;
    }

    .js-anim .texte-image .row > .col-lg-6:nth-child(2) {
        --anim-x: calc(-1 * var(--anim-decalage));
        --anim-y: 0px;
    }
}

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

/* Le bloc de texte suit l'image d'un cheveu */
.js-anim .image-texte.is-anim-in .row > .col-lg-6:nth-child(2),
.js-anim .texte-image.is-anim-in .row > .col-lg-6:nth-child(2) {
    transition-delay: var(--anim-depart);
}


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

/* L'intro et la liste portent chacune leur propre .is-anim-in : la cascade
   des cartes ne demarre donc qu'une fois la liste reellement a l'ecran,
   independamment du titre situe plus haut. */
.js-anim .bloc-card .bloc-intro,
.js-anim .bloc-card .liste-blocs .row > .col-lg-6 {
    opacity: 0;
    transform: translate3d(0, var(--anim-decalage), 0);
    transition: opacity var(--anim-duree) var(--anim-easing),
                transform var(--anim-duree) var(--anim-easing);
}

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

.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6:nth-child(1) { transition-delay: calc(0 * var(--anim-stagger)); }
.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6:nth-child(2) { transition-delay: calc(1 * var(--anim-stagger)); }
.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6:nth-child(3) { transition-delay: calc(2 * var(--anim-stagger)); }
.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6:nth-child(4) { transition-delay: calc(3 * var(--anim-stagger)); }
.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6:nth-child(5) { transition-delay: calc(4 * var(--anim-stagger)); }
/* Au-dela de 6 cartes on plafonne le retard pour ne pas faire attendre */
.js-anim .bloc-card .liste-blocs.is-anim-in .row > .col-lg-6:nth-child(n+6) { transition-delay: calc(5 * var(--anim-stagger)); }


/* ==========================================================================
   3. Bloc Chiffres - FIGE, voir l'avertissement en tete de fichier.
   Valeurs litterales volontaires : ne pas brancher sur les variables
   communes, le compteur de assets/js/custom.js est cale sur ce timing.
   ========================================================================== */

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

.js-anim .bloc-chiffres.is-anim-in .bloc-intro,
.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: 120ms; }
.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(2) { transition-delay: 200ms; }
.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(3) { transition-delay: 280ms; }
.js-anim .bloc-chiffres.is-anim-in .row > .col-lg-3:nth-child(n+4) { transition-delay: 360ms; }


/* ==========================================================================
   4. Bloc Timeline
   Chaque element est observe separement : la frise se construit
   progressivement pendant que l'on descend.
   ========================================================================== */

/* 4.a Intro */
.js-anim .bloc-timeline .bloc-intro {
    opacity: 0;
    transform: translate3d(0, var(--anim-decalage), 0);
    transition: opacity var(--anim-duree) var(--anim-easing),
                transform var(--anim-duree) var(--anim-easing);
}

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

/* 4.b Trace progressif de la ligne verticale centrale.
   Le :before porte deja translateX(-50%), on le conserve et on ajoute scaleY.

   Easing volontairement "linear" : var(--anim-easing) est un ease-out marque,
   qui tracait plus de la moitie de la ligne dans les 150 premieres ms - le
   trace paraissait instantane meme sur une seconde. Une vitesse constante se
   lit comme un vrai trace qui se deroule. */
.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.c Chaque jalon arrive 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: opacity var(--anim-duree-jalon) var(--anim-easing),
                transform var(--anim-duree-jalon) 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.d La pastille de date se pose juste apres son jalon : c'est le point
   d'accroche du regard, et cela etale l'effet sur ~1,2s par jalon.
   On anime le span et non .bloc-date, qui 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. Modules restants - revelation simple (fade + montee)
   L'element porte lui-meme .is-anim-in.
   ========================================================================== */

.js-anim :is(
    .texte-2-cols, .texte-3-cols, .texte-4-cols, .texte-modele-4,
    .bloc-texte-lire-la-suite, .bloc-faq, .bloc-temoignage, .bloc-galerie,
    .bloc-carousel, .bloc-videos,
    .bloc-mea-1, .bloc-mea-2, .bloc-mea-4, .bloc-mea-5, .bloc-mea-6
) .bloc-intro,
.js-anim .texte-only .container,
.js-anim .bloc-liste .bloc-paragraphe-intro,
.js-anim .bloc-liste .row.shadow,
.js-anim .bloc-cta-1 .col-lg-7,
.js-anim .bloc-faq .content-card,
.js-anim .bloc-temoignage .carousel {
    opacity: 0;
    transform: translate3d(0, var(--anim-decalage), 0);
    transition: opacity var(--anim-duree) var(--anim-easing),
                transform var(--anim-duree) var(--anim-easing);
}

.js-anim :is(
    .texte-2-cols, .texte-3-cols, .texte-4-cols, .texte-modele-4,
    .bloc-texte-lire-la-suite, .bloc-faq, .bloc-temoignage, .bloc-galerie,
    .bloc-carousel, .bloc-videos,
    .bloc-mea-1, .bloc-mea-2, .bloc-mea-4, .bloc-mea-5, .bloc-mea-6
) .bloc-intro.is-anim-in,
.js-anim .texte-only .container.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,
.js-anim .bloc-faq .content-card.is-anim-in,
.js-anim .bloc-temoignage .carousel.is-anim-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   6. Modules restants - cascades en grille
   Le conteneur porte .is-anim-in, ses colonnes se decalent.
   [class*="col-lg-"] couvre col-lg-6 / col-lg-4 / col-lg-3 selon le module.
   ========================================================================== */

.js-anim :is(
    .texte-2-cols, .texte-3-cols, .texte-4-cols,
    .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: opacity var(--anim-duree) var(--anim-easing),
                transform var(--anim-duree) var(--anim-easing);
}

.js-anim :is(
    .texte-2-cols, .texte-3-cols, .texte-4-cols,
    .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 : Masonry positionne les items lui-meme via transform.
   On n'anime donc QUE l'opacite, sinon la grille se disloque. */
.js-anim .bloc-galerie .masonry-grid > .grid-item {
    opacity: 0;
    transition: opacity var(--anim-duree) var(--anim-easing);
}

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

/* 6.c Le decalage de cascade, ecrit une seule fois pour tous les conteneurs
   de cette couche. Ne touche que les conteneurs reellement observes : un
   .row sans .is-anim-in n'est jamais concerne, et un enfant sans transition
   ignore simplement le delai. */
.js-anim .row.is-anim-in > :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 .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 .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 .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 .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 .masonry-grid.is-anim-in > :nth-child(n+6) { transition-delay: calc(5 * var(--anim-stagger)); }


/* ==========================================================================
   7. Modules restants - paires laterales
   Image d'un cote, texte de l'autre. Lateral en desktop, vertical en mobile
   (les colonnes y sont empilees, un glissement lateral y serait incoherent
   et pourrait provoquer un debordement horizontal).
   ========================================================================== */

.js-anim .bloc-cta-2 .row > [class*="col-lg-"],
.js-anim .bloc-mea-2 .row.shadow > [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,
.js-anim .bloc-faq .bloc-image {
    --anim-x: 0px;
    --anim-y: var(--anim-decalage);

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

@media (min-width: 768px) {
    /* Arrivee depuis la gauche.
       cta-2 : la 2e colonne du DOM passe a gauche (order-lg-1). */
    .js-anim .bloc-cta-2 .row > [class*="col-lg-"]:nth-child(2),
    .js-anim .bloc-mea-2 .row.shadow > [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),
    .js-anim .bloc-faq .bloc-image {
        --anim-x: calc(-1 * var(--anim-decalage));
        --anim-y: 0px;
    }

    /* Arrivee depuis la droite.
       cta-2 : la 1ere colonne du DOM passe a droite (order-lg-2). */
    .js-anim .bloc-cta-2 .row > [class*="col-lg-"]:nth-child(1),
    .js-anim .bloc-mea-2 .row.shadow > [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 .row.shadow.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,
.js-anim .bloc-faq .bloc-image.is-anim-in {
    opacity: 1;
    transform: translate3d(0, 0, 0);
}


/* ==========================================================================
   8. Micro-interactions au survol - 100% CSS, aucun JS
   Actives meme sans js-anim : ce ne sont pas des apparitions.
   ========================================================================== */

.bloc-card .content-bloc,
.texte-modele-4 .content-bloc,
.bloc-mea-1 .the-bloc-mea-1,
.bloc-mea-2 .row.shadow,
.bloc-mea-5 .content-bloc-mea-5,
.bloc-mea-6 .content-bloc-mea,
.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 .row.shadow:hover,
.bloc-mea-5 .row > [class*="col-lg-"]:hover .content-bloc-mea-5,
.bloc-mea-6 .row > [class*="col-lg-"]:hover .content-bloc-mea,
.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 ici. Les items sont positionnes par Masonry et
   un zoom demanderait un overflow:hidden susceptible de rogner la vignette.
   Un simple 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 .image-texte .row > .col-lg-6,
    .js-anim .texte-image .row > .col-lg-6,
    .js-anim .bloc-card .bloc-intro,
    .js-anim .bloc-card .liste-blocs .row > .col-lg-6,
    .js-anim .bloc-chiffres .bloc-intro,
    .js-anim .bloc-chiffres .row > .col-lg-3,
    .js-anim .bloc-timeline .bloc-intro,
    .js-anim .bloc-timeline .bloc-para-timeline,
    .js-anim .bloc-timeline .bloc-date span,
    .js-anim :is(
        .texte-2-cols, .texte-3-cols, .texte-4-cols, .texte-modele-4,
        .bloc-texte-lire-la-suite, .bloc-faq, .bloc-temoignage, .bloc-galerie,
        .bloc-carousel, .bloc-videos,
        .bloc-mea-1, .bloc-mea-2, .bloc-mea-4, .bloc-mea-5, .bloc-mea-6
    ) .bloc-intro,
    .js-anim .texte-only .container,
    .js-anim .bloc-liste .bloc-paragraphe-intro,
    .js-anim .bloc-liste .row.shadow,
    .js-anim .bloc-cta-1 .col-lg-7,
    .js-anim .bloc-faq .content-card,
    .js-anim .bloc-faq .bloc-image,
    .js-anim .bloc-temoignage .carousel,
    .js-anim :is(
        .texte-2-cols, .texte-3-cols, .texte-4-cols,
        .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 .row.shadow > [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 .row.shadow,
    .bloc-mea-5 .content-bloc-mea-5,
    .bloc-mea-6 .content-bloc-mea,
    .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 .row.shadow:hover,
    .bloc-mea-5 .row > [class*="col-lg-"]:hover .content-bloc-mea-5,
    .bloc-mea-6 .row > [class*="col-lg-"]:hover .content-bloc-mea,
    .bloc-mea-6 .row > [class*="col-lg-"]:hover .content-bloc-mea-5 {
        transform: none !important;
    }
}