/**
 * Oguey Slider Sync — styles minimaux
 *
 * Ces styles s'ajoutent au design Elementor natif sans le modifier.
 */

/* Transitions douces lors du changement de texte */
.oguey-slider-wrap .elementor-widget-heading .elementor-heading-title,
.oguey-slider-wrap .elementor-widget-button .elementor-button-text {
    transition: opacity 200ms ease;
}

/* Wrapper neutre — n'altère pas le layout Elementor */
.oguey-slider-wrap {
    width: 100%;
    position: relative;
}

/* ============================================
   Background slideshow — transition rapide
   On override la durée par défaut Elementor (qui peut être 1.2s ou plus)
   pour avoir un crossfade quasi-instantané au clic du carousel.
   ============================================ */

.oguey-slider-wrap .elementor-background-slideshow__slide__image {
    transition: opacity 250ms ease !important;
}

/* ============================================
   Force la taille des vignettes (panneau gauche bleu) à 408x527
   Important : ratio 408:527 préservé via aspect-ratio + object-fit
   pour que toutes les vignettes aient la même dimension visible.
   ============================================ */

.oguey-slider-wrap .elementor-widget-nested-carousel .elementor-widget-image {
    width: 100%;
    max-width: 408px;
    margin-left: auto;
    margin-right: auto;
}

.oguey-slider-wrap .elementor-widget-nested-carousel .elementor-widget-image img,
.oguey-slider-wrap .elementor-widget-nested-carousel .elementor-widget-image .attachment-oguey_slider_thumb {
    width: 100% !important;
    aspect-ratio: 408 / 527;
    object-fit: cover;
    object-position: center;
    display: block;
    max-width: 408px;
}

/* Sur grands écrans, on impose la taille exacte du Figma */
@media (min-width: 992px) {
    .oguey-slider-wrap .elementor-widget-nested-carousel .elementor-widget-image img {
        width: 408px !important;
        height: 527px !important;
        max-width: none;
    }
}

/* Notice mode démo (visible uniquement aux admins connectés) */
.oguey-slider-demo-notice {
    text-align: center;
    padding: 6px 12px;
    background: rgba(0, 0, 0, 0.7);
    color: #fff;
    font-size: 12px;
    font-family: system-ui, sans-serif;
    margin: 0;
}
.oguey-slider-demo-notice a {
    color: #ffd54a;
    text-decoration: underline;
}