/**
 * performance-overrides.css
 * CSS d'overrides de performance pour mister-anderson.ai
 * Chargé via le MU plugin en footer pour ne pas bloquer le rendu.
 *
 * Objectif Lighthouse : corriger animations non-composited (height)
 * et stabiliser le rendu hero Swiper.
 */

/* =========================================================
   1. FIX SWIPER AUTO-HEIGHT — transition height → transform only
   Lighthouse signale "Avoid non-composited animations" sur height.
   L'autoheight Swiper utilise une transition sur 'height' qui force
   des reflows/layout. On la remplace par will-change + transform.
   ========================================================= */

/* Supprime 'height' de la transition autoheight */
.swiper-autoheight .swiper-wrapper {
    transition-property: transform !important;
    will-change: transform;
}

/* Swiper Creative mode : même fix */
.swiper-creative .swiper-slide {
    transition-property: transform, opacity !important;
    will-change: transform, opacity;
}

/* Wrapper global : force GPU layer */
.gs-swiper .swiper-wrapper {
    will-change: transform;
    transform: translate3d(0, 0, 0);
}

/* =========================================================
   2. FIX AOS (Animate On Scroll) — utiliser transform/opacity uniquement
   AOS peut animer des propriétés non-composited. Override défensif.
   ========================================================= */
[data-aos] {
    will-change: transform, opacity;
}

/* =========================================================
   3. STABILISATION HERO / COVER LCP
   Éviter layout shift pendant le chargement de l'image hero.
   min-height défini pour réserver l'espace dès le parsing CSS.
   ========================================================= */
.wp-block-cover.has-custom-content-position {
    contain: layout;
}

/* =========================================================
   4. OPTIMISATION IMAGES LAZY (éviter CLS sur images sans dimensions)
   ========================================================= */
img[loading="lazy"],
img[loading="eager"] {
    height: auto;
}