/*
 * Slider d'accueil (vanilla) — remplace camera.css / le plugin jQuery « camera ».
 * Crossfade par opacité, contrôles injectés en JS (home-slider.js).
 * Styles desktop ici ; le polish mobile (coins arrondis, ombre) est dans
 * home-mobile.css (scopé body.home + <=767px).
 */
.vslider {
    position: relative;
    width: 100%;
}

.vslider__viewport {
    position: relative;
    width: 100%;
    aspect-ratio: 19 / 10;          /* hauteur proche de l'ancien slider camera */
    overflow: hidden;
    background: #1c1814;            /* fond sobre pendant le chargement de la 1re image */
}

.vslider__slide {
    position: absolute;
    inset: 0;
    opacity: 0;
    transition: opacity var(--vslider-trans, 1500ms) ease-in-out;
    pointer-events: none;
}

.vslider__slide.is-active {
    opacity: 1;
    pointer-events: auto;
}

.vslider__slide > a {
    display: block;
    width: 100%;
    height: 100%;
}

/* width/height 100% sur TOUTE image de slide (y compris celle imbriquée dans un
   <a> pour les slides avec lien) : sans dimensions, object-fit:cover n'a aucun
   effet et l'image s'affiche à sa taille naturelle (bande de fond à droite). */
.vslider__slide img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;             /* uniformise des sources de ratios différents */
}

/* Flèches précédent / suivant (injectées en JS) */
.vslider__nav {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 44px;
    height: 44px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(28, 24, 20, .42);
    color: #fff;
    font-size: 26px;
    line-height: 1;
    cursor: pointer;
    transition: background .2s ease;
}

.vslider__nav:hover,
.vslider__nav:focus-visible {
    background: rgba(28, 24, 20, .68);
}

.vslider__nav--prev { left: 14px; }
.vslider__nav--next { right: 14px; }

/* Pastilles (injectées en JS) */
.vslider__dots {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 14px;
    z-index: 3;
    display: flex;
    justify-content: center;
    gap: 8px;
}

.vslider__dot {
    width: 10px;
    height: 10px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: rgba(255, 255, 255, .55);
    cursor: pointer;
    transition: transform .2s ease, background .2s ease;
}

.vslider__dot:hover {
    background: rgba(255, 255, 255, .85);
}

.vslider__dot.is-active {
    background: #fff;
    transform: scale(1.3);
}

@media (prefers-reduced-motion: reduce) {
    .vslider__slide {
        transition: none;
    }
}