/**
 * Inner Parallax Image Effect
 * 
 * La figure a overflow:hidden et l'image fait 124% de sa hauteur.
 * L'image se déplace de -12% à 0% selon --scroll-progress.
 */

/* ==========================================================================
   HOME IMAGE - Parallax sur background-image avec data-progressing
   Mouvement de 20% vers le haut au scroll via background-position
   Centré sur 50% (position de départ)
   ========================================================================== */

.home-image {
    --progressing: 0.5;
}

/* Parallax hero : le background bouge plus lentement que le scroll
   Image zoomée à 120% pour avoir de la marge de mouvement
   Le bg monte pendant qu'on scroll vers le bas */
#qodef-page-outer .home-image > .qodef-gutenberg-column-inner {
    background-size: auto 120% !important;
    background-position-x: 50% !important;
    background-position-y: calc(200% - var(--progressing, 0.5) * 200%) !important;
    will-change: background-position;
    transition: background-position 0.05s ease-out;
}

/* Conteneur de l'image */
figure.wp-block-image.inner-parallax {
    overflow: hidden;
    --scroll-progress: 0;
}

/* L'image elle-même */
figure.wp-block-image.inner-parallax img {
    height: 124% !important;
    width: 100%;
    object-fit: cover;
    object-position: center;
    transform: translateY(calc(-12% + var(--scroll-progress) * 12%));
    will-change: transform;
    transition: none;
}

/* Variante : effet plus prononcé */
figure.wp-block-image.inner-parallax.inner-parallax-strong img {
    height: 140% !important;
    transform: translateY(calc(-20% + var(--scroll-progress) * 20%));
}

/* Variante : effet subtil */
figure.wp-block-image.inner-parallax.inner-parallax-subtle img {
    height: 112% !important;
    transform: translateY(calc(-6% + var(--scroll-progress) * 6%));
}

/* Accessibilité - Désactiver si reduced motion */
@media (prefers-reduced-motion: reduce) {
    figure.wp-block-image.inner-parallax img {
        transform: none !important;
        height: 100% !important;
    }
}

/* ==========================================================================
   STYLES BLOC IMAGE - Full Width Cover
   ========================================================================== */

figure.wp-block-image.is-style-full-width-cover {
    width: 100%;
    overflow: hidden;
    position: relative;
}

/* Avec hauteur définie */
figure.wp-block-image.is-style-full-width-cover[style*="height"] img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 100% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
}

/* Sans hauteur définie */
figure.wp-block-image.is-style-full-width-cover:not([style*="height"]) img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   STYLES BLOC IMAGE - Full Width Parallax
   ========================================================================== */

figure.wp-block-image.is-style-full-width-parallax {
    width: 100%;
    overflow: hidden;
    --scroll-progress: 0;
    position: relative;
}

/* Avec hauteur définie */
figure.wp-block-image.is-style-full-width-parallax[style*="height"] img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 124% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    transform: translateY(calc(-12% + var(--scroll-progress) * 12%));
    will-change: transform;
    transition: none;
}

/* Sans hauteur définie */
figure.wp-block-image.is-style-full-width-parallax:not([style*="height"]) img {
    width: 100% !important;
    height: auto;
    object-fit: cover;
    object-position: center;
}

/* ==========================================================================
   STYLES BLOC IMAGE - Parallax Simple (sans full width)
   Width définie = height calculée automatiquement selon ratio
   ========================================================================== */

figure.wp-block-image.is-style-parallax {
    overflow: hidden;
    --scroll-progress: 0;
    position: relative;
    display: block !important;
    box-sizing: border-box;
}

/* Sans width définie : prend 100% du parent */
figure.wp-block-image.is-style-parallax:not([style*="width"]) {
    width: 100%;
}

/* Avec width définie : respecter la valeur inline */
figure.wp-block-image.is-style-parallax[style*="width"] {
    max-width: 100%;
}

/* Quand la figure a une hauteur (définie manuellement ou via JS) */
figure.wp-block-image.is-style-parallax[style*="height"] img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100% !important;
    height: 125% !important;
    max-height: none !important;
    object-fit: cover;
    object-position: center;
    transform: translateY(calc(-12.5% + var(--scroll-progress) * 12.5%));
    will-change: transform;
    transition: none;
}

/* Sans hauteur définie : comportement normal avec overflow hidden */
figure.wp-block-image.is-style-parallax:not([style*="height"]) img {
    width: 100%;
    height: auto;
    object-fit: cover;
    object-position: center;
}