/* =========================================================
   Scroll Image — dc26-base
   Crossfade géré en CSS pur via .is-scrolled sur l'ancêtre sticky-header
   (voir view.js). Hors sticky-header, view.js bascule .is-scrolled sur
   l'élément lui-même au scroll — même règle CSS s'applique.
   ========================================================= */

.dc26-scroll-image__wrap {
    display: grid;
}

.dc26-scroll-image__link {
    display: contents;
}

.dc26-scroll-image__default,
.dc26-scroll-image__on-scroll {
    grid-area: 1 / 1;
    display: block;
    max-width: 100%;
    /* !important nécessaire : WooCommerce force `.woocommerce img { height: auto }`
       (plus spécifique que .dc26-scroll-image__default seul) sur toutes les pages
       shop/produit — sans ça un SVG sans dimensions intrinsèques s'effondre à 0×0. */
    height: var(--si-max-height, 40px) !important;
    width: auto;
    transition: opacity 200ms ease, height 200ms ease;
}

/* État initial (en haut de page / pas encore scrollé) */
.dc26-scroll-image__default   { opacity: 1; }
.dc26-scroll-image__on-scroll { opacity: 0; }

/* Crossfade au scroll — ancêtre sticky-header (is-scrolled sur le wrapper header) */
.is-style-sticky-header.is-scrolled .dc26-scroll-image__default,
/* Crossfade au scroll — bloc standalone (is-scrolled sur le bloc lui-même, cf. view.js) */
.dc26-scroll-image.is-scrolled .dc26-scroll-image__default {
    opacity: 0;
}

.is-style-sticky-header.is-scrolled .dc26-scroll-image__on-scroll,
.dc26-scroll-image.is-scrolled .dc26-scroll-image__on-scroll {
    opacity: 1;
}

/* Hauteur après scroll (champ « Hauteur après scroll ») — retombe sur la hauteur de départ si vide */
.is-style-sticky-header.is-scrolled .dc26-scroll-image__default,
.is-style-sticky-header.is-scrolled .dc26-scroll-image__on-scroll,
.dc26-scroll-image.is-scrolled .dc26-scroll-image__default,
.dc26-scroll-image.is-scrolled .dc26-scroll-image__on-scroll {
    height: var(--si-max-height-scrolled, var(--si-max-height, 40px)) !important;
}

@media (max-width: 768px) {
    .dc26-scroll-image__default,
    .dc26-scroll-image__on-scroll {
        height: 50px !important;
    }

    /* Mobile plafonné à 50px, mais une hauteur après scroll plus petite est respectée */
    .is-style-sticky-header.is-scrolled .dc26-scroll-image__default,
    .is-style-sticky-header.is-scrolled .dc26-scroll-image__on-scroll,
    .dc26-scroll-image.is-scrolled .dc26-scroll-image__default,
    .dc26-scroll-image.is-scrolled .dc26-scroll-image__on-scroll {
        height: min(50px, var(--si-max-height-scrolled, 50px)) !important;
    }
}