/* ==========================================================================
   Animations & Effets – Optimisé
   ========================================================================== */

/* Base d'animation */
.animate,
.animateChilds .wp-block-column,
.wp-block-query .wp-block-post {
  opacity: 0;
  transform: none;                 /* état neutre quand non taggé from* */
  transition: opacity .3s ease-in-out, transform .3s ease-in-out;
  will-change: opacity, transform;
}

/* Directions d'entrée (état initial) */
.fromBottom,
.animateChilds.fromBottom .wp-block-column { transform: translateY(100px); }

.fromLeft,
.animateChilds.fromLeft .wp-block-column   { transform: translateX(-100px); }

.fromRight,
.animateChilds.fromRight .wp-block-column  { transform: translateX(100px); }

/* État "activé" – remet tout à plat */
.animate.active,
.animateChilds.active,
.animateChilds.active .wp-block-column,
.wp-block-query.active .wp-block-post {
  opacity: 1;
  transform: none;
}

/* --------------------------------------------------------------------------
   Stagger (délais) – deux options : par nth-child OU par classes utilitaires
   -------------------------------------------------------------------------- */

/* 1) Stagger auto via nth-child (utile quand tu n'ajoutes pas de classes) */
.animateChilds .wp-block-column:nth-child(1),
.wp-block-query .wp-block-post:nth-child(1) { transition-delay: .2s; }

.animateChilds .wp-block-column:nth-child(2),
.wp-block-query .wp-block-post:nth-child(2) { transition-delay: .4s; }

.animateChilds .wp-block-column:nth-child(3),
.wp-block-query .wp-block-post:nth-child(3) { transition-delay: .6s; }

.animateChilds .wp-block-column:nth-child(4),
.wp-block-query .wp-block-post:nth-child(4) { transition-delay: .8s; }

.animateChilds .wp-block-column:nth-child(5),
.wp-block-query .wp-block-post:nth-child(5) { transition-delay: 1s; }

/* 2) Utilitaires explicites (quand tu contrôles le markup) */
.animate.delay-1 { transition-delay: .2s; }
.animate.delay-2 { transition-delay: .4s; }
.animate.delay-3 { transition-delay: .6s; }
.animate.delay-4 { transition-delay: .8s; }
.animate.delay-5 { transition-delay: 1s; }

/* Variante avec variable (optionnelle) : .animate[style="--stagger-i:3"] */
.animate { transition-delay: calc(var(--stagger-i, 0) * .2s); }

/* --------------------------------------------------------------------------
   Effets hover génériques
   -------------------------------------------------------------------------- */

.logos a img,
.wp-block-button__link { transition: transform .35s ease-in-out; }

.logos a:hover img,
.wp-block-button__link:hover { transform: scale(1.05); }

/* --------------------------------------------------------------------------
   MegaMenu (Getwid) – apparition douce et non cliquable quand masqué
   -------------------------------------------------------------------------- */

.gw-mm-item .gw-mm-item__dropdown-wrapper {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .3s ease-in-out, visibility .3s step-end;
}

.gw-mm-item:hover .gw-mm-item__dropdown-wrapper {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transition: opacity .3s ease-in-out, visibility 0s step-start; /* visible tout de suite */
}

/* --------------------------------------------------------------------------
   Masques décoratifs (front only)
   -------------------------------------------------------------------------- */

body:not(.wp-admin) .activite {
  -webkit-mask-image: url(../img/mask_arrow.svg);
          mask-image: url(../img/mask_arrow.svg);
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-position: right;
          mask-position: right;
  -webkit-mask-size: cover;
          mask-size: cover;
}

/* --------------------------------------------------------------------------
   Flip cards
   -------------------------------------------------------------------------- */

.flip-box-vertical { perspective: 1000px; }
.flip-box-vertical.wp-block-column.is-vertically-aligned-center { align-self: auto !important; }

.flip-box-inner {
  position: relative;
  transform-style: preserve-3d;
  transition: transform .8s ease;
}

.flip-box-vertical:hover .flip-box-inner { transform: rotateY(180deg); }

.flip-box-front,
.flip-box-back {
  position: absolute;
  width: 100%;
  min-height: 220px;
  backface-visibility: hidden;
  margin-top: 0;
}

.flip-box-vertical .flip-box-back { transform: rotateY(180deg); }

/* --------------------------------------------------------------------------
   Mobile
   -------------------------------------------------------------------------- */

@media (max-width: 650px) {
  body:not(.wp-admin) .activite {
    -webkit-mask-image: url(../img/mask_arrow_mobile.svg);
            mask-image: url(../img/mask_arrow_mobile.svg);
    -webkit-mask-position: center;
            mask-position: center;
    padding-bottom: 80px !important;
  }
}

/* --------------------------------------------------------------------------
   Accessibilité – respecte le préférences de mouvement réduit
   -------------------------------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .animate,
  .animateChilds .wp-block-column,
  .wp-block-query .wp-block-post,
  .flip-box-inner,
  .gw-mm-item .gw-mm-item__dropdown-wrapper,
  .wp-block-button__link,
  .logos a img {
    transition: none !important;
    transform: none !important;
  }
}