/* ==========================================================================
   ANIMATIONS AU SCROLL & MICRO-INTERACTIONS
   Thème Applicateur Child — iwegov2
   ========================================================================== */

/* Respect des préférences utilisateur (accessibilité) */
@media (prefers-reduced-motion: reduce) {
  [class*="animate-"] {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
  }
}

/* Désactiver les animations dans l'éditeur Gutenberg */
.editor-styles-wrapper [class*="animate-"] {
  opacity: 1 !important;
  transform: none !important;
  transition: none !important;
}

/* ==========================================================================
   ANIMATIONS AU SCROLL
   ========================================================================== */

/* Base commune — état initial (invisible) */
[class*="animate-"] {
  opacity: 0;
  transition: opacity 0.7s ease-out, transform 0.7s ease-out;
  will-change: opacity, transform;
}

/* État visible (déclenché par IntersectionObserver) */
[class*="animate-"].is-visible {
  opacity: 1;
  transform: none;
}

/* --- Variantes d'animation --- */

/* Apparition du bas vers le haut */
.animate-fade-up {
  transform: translateY(40px);
}

/* Apparition du haut vers le bas */
.animate-fade-down {
  transform: translateY(-40px);
}

/* Glissement depuis la gauche */
.animate-slide-left {
  transform: translateX(-60px);
}

/* Glissement depuis la droite */
.animate-slide-right {
  transform: translateX(60px);
}

/* Zoom entrant (petit → normal) */
.animate-zoom-in {
  transform: scale(0.85);
}

/* Zoom sortant (grand → normal) */
.animate-zoom-out {
  transform: scale(1.15);
}

/* Fondu simple (opacity seule) */
.animate-fade-in {
  transform: none;
}

/* --- Délais pour effet stagger sur les grilles --- */
.animate-delay-1 { transition-delay: 0.1s; }
.animate-delay-2 { transition-delay: 0.2s; }
.animate-delay-3 { transition-delay: 0.3s; }
.animate-delay-4 { transition-delay: 0.4s; }
.animate-delay-5 { transition-delay: 0.5s; }


/* ==========================================================================
   MICRO-INTERACTIONS — BOUTONS
   ========================================================================== */

.wp-block-button__link,
a.btn,
.btn,
.btn-filtre-cas {
  transition: background-color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.wp-block-button__link:hover,
a.btn:hover,
.btn:hover {
  transform: translateY(-2px) scale(1.02);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.15);
}

.wp-block-button__link:active,
a.btn:active,
.btn:active {
  transform: translateY(0) scale(0.98);
}


/* ==========================================================================
   MICRO-INTERACTIONS — CARDS / VIGNETTES
   ========================================================================== */

.vignette-article,
.vignette-realisation,
.vignette-dossier,
.vignette-video,
.element-item,
.card {
  transition: transform 0.35s ease, box-shadow 0.35s ease;
}

.vignette-article:hover,
.vignette-realisation:hover,
.vignette-dossier:hover,
.vignette-video:hover,
.element-item:hover,
.card:hover {
  transform: translateY(-6px);
  box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
}


/* ==========================================================================
   MICRO-INTERACTIONS — IMAGES DANS CONTAINERS
   ========================================================================== */

.vignette-article .post-thumbnail,
.vignette-realisation .post-thumbnail,
.vignette-video .post-thumbnail,
.element-item .post-thumbnail,
.latest-post-right {
  overflow: hidden;
}

.vignette-article img,
.vignette-realisation img,
.vignette-video img,
.element-item .post-thumbnail img,
.latest-post-right img {
  transition: transform 0.5s ease;
}

.vignette-article:hover img,
.vignette-realisation:hover img,
.vignette-video:hover img,
.element-item:hover .post-thumbnail img,
.latest-post:hover .latest-post-right img {
  transform: scale(1.05);
}


/* ==========================================================================
   MICRO-INTERACTIONS — NAVIGATION
   ========================================================================== */

/* Transition douce sur la couleur des liens du menu */
.main-menu > li > a {
  transition: color 0.3s ease;
}


/* ==========================================================================
   MICRO-INTERACTIONS — ICÔNES / PICTOS
   ========================================================================== */

.bloc-picto .picto-icon,
.bloc-picto-prestation .picto-icon {
  transition: transform 0.3s ease;
}

.bloc-picto:hover .picto-icon,
.bloc-picto-prestation:hover .picto-icon {
  transform: rotate(5deg) scale(1.1);
}


/* ==========================================================================
   MICRO-INTERACTIONS — LIENS SOCIAUX
   ========================================================================== */

.icone-social {
  transition: transform 0.3s ease;
}

.icone-social:hover {
  transform: scale(1.15);
}


/* ==========================================================================
   MICRO-INTERACTIONS — ACCORDÉON
   ========================================================================== */

.accordeon-toggle {
  transition: background-color 0.3s ease;
}

.accordeon-content {
  transition: max-height 0.4s ease-out, opacity 0.3s ease-out;
}


/* ==========================================================================
   MICRO-INTERACTIONS — APPLICATEURS / LISTING
   ========================================================================== */

.vignette-applicateur {
  transition: transform 0.35s ease, box-shadow 0.35s ease, border-color 0.3s ease;
}

.vignette-applicateur:hover {
  transform: translateY(-4px);
  box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   MICRO-INTERACTIONS — BREADCRUMBS
   ========================================================================== */

.breadcrumb a {
  transition: color 0.25s ease;
}


/* ==========================================================================
   MICRO-INTERACTIONS — FILTRES / CATÉGORIES
   ========================================================================== */

.btn-filtre-cas {
  cursor: pointer;
  transition: background-color 0.3s ease, color 0.3s ease, transform 0.2s ease, box-shadow 0.3s ease;
}

.btn-filtre-cas:hover {
  transform: translateY(-2px);
  box-shadow: 0 3px 10px rgba(0, 0, 0, 0.1);
}

.btn-filtre-cas.is-checked,
.btn-filtre-cas.filtre-default {
  transition: background-color 0.3s ease, color 0.3s ease;
}


/* ==========================================================================
   MICRO-INTERACTIONS — BLOC TÉLÉPHONE
   ========================================================================== */

.bloc-telephone__btn {
  transition: background-color 0.3s ease, transform 0.25s ease, box-shadow 0.3s ease;
}

.bloc-telephone__btn:hover {
  transform: scale(1.05);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
}


/* ==========================================================================
   MICRO-INTERACTIONS — BLOC ELDO / MACARON
   ========================================================================== */

.macaron-eldo {
  transition: transform 0.3s ease;
}

.macaron-eldo:hover {
  transform: scale(1.08);
}


/* ==========================================================================
   MICRO-INTERACTIONS — FORMULAIRES
   ========================================================================== */

input[type="text"],
input[type="email"],
input[type="tel"],
input[type="url"],
textarea,
select {
  transition: border-color 0.3s ease, box-shadow 0.3s ease;
}

input[type="text"]:focus,
input[type="email"]:focus,
input[type="tel"]:focus,
input[type="url"]:focus,
textarea:focus,
select:focus {
  box-shadow: 0 0 0 3px rgba(var(--couleur-principale-rgb, 0, 123, 255), 0.15);
}


/* ==========================================================================
   MICRO-INTERACTIONS — FOOTER
   ========================================================================== */

footer a {
  transition: color 0.25s ease, opacity 0.25s ease;
}

footer a:hover {
  opacity: 0.8;
}

.footer-mobile .hamburger {
  transition: transform 0.3s ease;
}

.footer-mobile .hamburger:active {
  transform: scale(0.9);
}


/* ==========================================================================
   MICRO-INTERACTIONS — HEADER LOGO
   ========================================================================== */

.menu-logo img {
  transition: transform 0.3s ease;
}

.menu-logo:hover img {
  transform: scale(1.03);
}


/* ==========================================================================
   MICRO-INTERACTIONS — LATEST POST (BLOG)
   ========================================================================== */

.latest-post {
  transition: box-shadow 0.35s ease;
}

.latest-post:hover {
  box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
}


/* ==========================================================================
   MICRO-INTERACTIONS — SOUS-MENUS
   ========================================================================== */

header .main-menu ul.sub-menu {
  transition: opacity 0.25s ease;
}

header .main-menu ul.sub-menu a {
  transition: color 0.2s ease, padding-left 0.2s ease;
}

header .main-menu ul.sub-menu a:hover {
  padding-left: 5px;
}