/* 
Theme Name: Hello Elementor Child
Theme URI: https://github.com/elementor/hello-theme-child/
Description: Hello Elementor Child is a child theme of Hello Elementor, created by Elementor team
Author: Elementor Team
Author URI: https://elementor.com/
Template: hello-elementor
Version: 2.0.0
Text Domain: hello-elementor-child
License: GNU General Public License v3 or later.
License URI: https://www.gnu.org/licenses/gpl-3.0.html
Tags: flexible-header, custom-colors, custom-menu, custom-logo, editor-style, featured-images, rtl-language-support, threaded-comments, translation-ready
*/

/* Add your custom styles here */

/* Remove the line height for every icon on the whole website. */
.elementor-icon-wrapper {
   line-height: 0;
}

/* Icon qui clignote */
.c-kicker__icon {
  animation: blink 2s ease-in-out infinite;
  }
  
  @keyframes blink {
  50% { opacity: 0; }
  }
  
  @media (prefers-reduced-motion: reduce) {
  .c-kicker__icon { animation: none; }
}

/* ============================================================
   SWAP VISUEL CENTRAL AU HOVER DES CARDS
   ============================================================ */

/* 1 — Conteneur central : contexte de positionnement */
.axm-media-stack{
  position: relative;
  align-self: stretch;        /* épouse la hauteur de la ligne flex */
  aspect-ratio: 3 / 2;        /* filet de sécurité : ne s'applique QUE si
                                 la hauteur reste auto (mobile en colonne) */
  min-height: 20rem;          /* garde-fou anti-collapse */
  overflow: hidden;
  padding: calc(0px);         /* neutralise le padding des base classes V4 */
}

/* 2 — Les visuels empilés
      Le sélecteur couvre les deux markups possibles :
      .axm-media sur l'<img> elle-même, ou sur un wrapper. */
.axm-media-stack .axm-media,
.axm-media-stack .axm-media img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;          /* couvre toute la zone, sans déformation */
  object-position: center;
  display: block;
}

/* 3 — Transitions + état masqué (sur le calque, pas sur l'img interne) */
.axm-media-stack .axm-media{
  opacity: 0;
  transform: scale(1.03);
  transition:
    opacity   450ms cubic-bezier(.4, 0, .2, 1),
    transform 700ms cubic-bezier(.4, 0, .2, 1);
  pointer-events: none;
  will-change: auto;
}

/* Si .axm-media est un wrapper, l'img interne ne doit pas hériter du scale */
.axm-media-stack .axm-media img{
  transform: none;
  opacity: 1;
}

/* 4 — État de repos : même spécificité que la règle qui masque */
.axm-media-stack .axm-media--default{
  opacity: 1;
  transform: scale(1);
}

/* 5 — Le swap */
@media (hover: hover) and (pointer: fine){
  .axm-section:has(.axm-card:hover) .axm-media-stack .axm-media--default{
    opacity: 0;
  }

  .axm-section:has(.axm-card--01:hover) .axm-media--01,
  .axm-section:has(.axm-card--02:hover) .axm-media--02,
  .axm-section:has(.axm-card--03:hover) .axm-media--03,
  .axm-section:has(.axm-card--04:hover) .axm-media--04{
    opacity: 1;
    transform: scale(1);
  }
}

/* 6 — Accessibilité */
@media (prefers-reduced-motion: reduce){
  .axm-media-stack .axm-media{
    transition-duration: 1ms;
    transform: none;
  }
}