/**
 * Arssans Ambiance — styles front (slider d'ambiances sous la fiche produit)
 *
 * Phase 4c : Swiper.js v11 — 1 slide visible pleine largeur, navigation prev/next
 * + pagination en points stylés dans la charte Arssans (or sépia). Le bundle
 * Swiper (views/css/vendor/swiper-bundle.min.css) fournit les styles de base
 * du slider ; on ne fait ici que surcharger les éléments visuels (couleurs,
 * tailles, ombres) pour rester cohérent avec le thème.
 *
 * Hypothèses :
 *  - aspect-ratio CSS supporté (Safari 15+, Chrome 88+, Firefox 89+) — OK en 2026
 *  - Le ratio par défaut est 3/2 (à rendre configurable en Phase 6)
 */

/* === Bloc principal ===
 * Le titre et le sous-titre utilisent les classes .arssans-situation__title /
 * .arssans-situation__sub du thème (déjà stylées dans theme-arssans/custom.css)
 * pour reprendre exactement l'apparence du placeholder d'origine. */
.arssans-ambiance-block {
    margin: 32px 0;
    width: 100%;
}

/* Le thème met margin-bottom:16px sur __sub ; en variante slider on réduit
 * de moitié pour rapprocher le titre de l'image. */
.arssans-situation--slider .arssans-situation__sub {
    margin-bottom: 8px;
}

/* === Wrapper Swiper ===
 * Pas de hauteur forcée — autoHeight côté JS adapte la hauteur à chaque slide
 * (= hauteur naturelle de l'image d'ambiance). Pas de background ni d'ombre
 * ici : on les place sur le slide lui-même pour qu'ils épousent l'image
 * sans bandes blanches haut/bas. */
.arssans-ambiance-swiper {
    width: 100%;
    position: relative;
}

/* === Une slide individuelle ===
 * Par défaut : pas d'aspect-ratio, le slide colle à la hauteur naturelle
 * de l'image. Si la config admin force un ratio (« 3:2 », « 16:9 »…), le
 * template ajoute data-aspect-ratio sur le slide et --arssans-ratio sur
 * le wrapper Swiper — on l'applique alors comme aspect-ratio CSS. */
.arssans-ambiance-slide {
    position: relative;
    width: 100%;
    background: #fff;
    border-radius: 4px;
    overflow: hidden;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
}

.arssans-ambiance-slide[data-aspect-ratio] {
    aspect-ratio: var(--arssans-ratio);
}

.arssans-ambiance-bg {
    width: 100%;
    height: auto;            /* le slide prend la hauteur de l'image (mode auto) */
    display: block;
}

/* Quand un ratio est forcé, l'image doit s'adapter à la box du slide
 * sans déformer (contain) plutôt que de pousser la hauteur. */
.arssans-ambiance-slide[data-aspect-ratio] .arssans-ambiance-bg {
    height: 100%;
    object-fit: contain;
}

/* === Overlay = visuel produit incrusté ===
 * Position/dimension/rotation/box-shadow/border-radius viennent du style
 * inline généré par le template (valeurs en % spécifiques à chaque zone).
 * Dynamiques par slide. Phase 4e : box-shadow et border-radius pilotés
 * par les réglages BO (intensité, angle, distance, flou, rayon). */
.arssans-ambiance-overlay {
    position: absolute;
    height: auto;            /* préserve le ratio natif du visuel produit */
    transition: opacity 0.3s ease;
}

/* === Composite servi par le contrôleur (scène aplatie) ===
 * Une seule image par slide = la pièce entière avec l'œuvre déjà incrustée.
 * On laisse le clic droit fonctionner : « Enregistrer l'image » renvoie le
 * composite lui-même (scène aplatie protégée) — la vraie protection vient du
 * composite basse-résolution + du .htaccess, pas d'un blocage du menu. */
.arssans-ambiance-composite {
    width: 100%;
    height: auto;
    display: block;
}

/* === Navigation prev/next dans la charte Arssans === */
.arssans-ambiance-swiper .swiper-button-prev,
.arssans-ambiance-swiper .swiper-button-next {
    color: #1c1a17;
    background: rgba(255, 255, 255, 0.85);
    border: 1px solid #d4af37;
    border-radius: 50%;
    width: 40px;
    height: 40px;
    transition: background-color 0.2s ease, border-color 0.2s ease;
}

.arssans-ambiance-swiper .swiper-button-prev:hover,
.arssans-ambiance-swiper .swiper-button-next:hover {
    background: #d4af37;
    border-color: #b8902a;
}

.arssans-ambiance-swiper .swiper-button-prev::after,
.arssans-ambiance-swiper .swiper-button-next::after {
    font-size: 16px;
    font-weight: 700;
}

/* === Pagination en points or ===
 * Sortie du bloc image : position static + margin-top → la rangée de bullets
 * est sous le swiper, sans recouvrir l'image. */
.arssans-ambiance-swiper .swiper-pagination {
    position: static;
    margin-top: 14px;
    text-align: center;
}

.arssans-ambiance-swiper .swiper-pagination-bullet {
    width: 11px;
    height: 11px;
    background: #1c1a17;
    opacity: 0.4;
    transition: opacity 0.2s ease, background-color 0.2s ease;
}

.arssans-ambiance-swiper .swiper-pagination-bullet-active {
    background: #d4af37;
    opacity: 1;
}

/* === Responsive : flèches plus petites sur mobile === */
@media (max-width: 640px) {
    .arssans-ambiance-swiper .swiper-button-prev,
    .arssans-ambiance-swiper .swiper-button-next {
        width: 32px;
        height: 32px;
    }
    .arssans-ambiance-swiper .swiper-button-prev::after,
    .arssans-ambiance-swiper .swiper-button-next::after {
        font-size: 13px;
    }
}