.swiper {
    width: 100%;
    height: 100%;
}

.swiper-slide {
    text-align: center;
    background: #fff;
    display: flex;
    justify-content: center;
    align-items: center;
    vertical-align: middle;
}

.swiper-slide-img {
    display: block!important;
    width: 100%!important;
    height: 100%!important;
    object-fit: cover!important;
}

/*
 * Le lien fancybox qui enveloppe l'image est un élément en ligne : il n'a pas de
 * hauteur à laquelle le `height: 100%` de l'image puisse se référer. L'image
 * gardait donc ses proportions naturelles, et `object-fit: cover` ne servait à
 * rien — d'où la photo centrée dans un cadre gris dès que le cadre est plus haut
 * qu'elle.
 */
.ts-immo-swiper .swiper-slide > a {
    display: block;
    width: 100%;
    height: 100%;
}

.swiper-pagination-bullet-active {
    background:  #B60039!important;
}

/*
 * Swiper 14 dessine ses flèches en SVG et non plus en `:after` : c'est la variable
 * qui les colore. Et le `:after` doit rester vide : un Swiper plus ancien chargé
 * par un autre plugin (dg-divi-carousel, sur les sites Divi) y remet sa propre
 * flèche, d'où deux flèches par bouton.
 */
.ts-immo-swiper {
    --swiper-navigation-color: #fff;
}

.ts-immo-swiper .swiper-button-next:after, .ts-immo-swiper .swiper-button-prev:after {
    content: none;
}

/*
 * L'icône est un <svg width="11" height="20"> sans CSS de taille propre à
 * Swiper 14 (elle ne dimensionne que la rotation, pas la taille). En tant
 * qu'élément remplacé et enfant flex de `.swiper-button-next/-prev`
 * (display:flex), son minimum automatique se résout à 0 dans Chrome — et
 * `flex-shrink: 1` la réduit donc à 0×0 même si le bouton a largement la
 * place (60px de large pour 11px d'icône). Résultat : plus aucune flèche
 * visible, seul le fond translucide du bouton reste (office-44007.notaires.fr).
 */
.ts-immo-swiper .swiper-navigation-icon {
    width: 11px !important;
    height: 20px !important;
    min-width: 11px !important;
    min-height: 20px !important;
}

.ts-immo-swiper .swiper-pagination-bullet{
    background: #B60039!important;
}

.ts-immo-swiper .swiper-button-next, .ts-immo-swiper .swiper-button-prev {
    background-color: #b600396b;
    padding: 30px 30px;
    background-image: none;
}
.ts-immo-swiper .swiper-button-next:hover, .ts-immo-swiper .swiper-button-prev:hover {
    background-color: #B60039;
}

.ts-immo-swiper .swiper-slide {
    background: #f0efee!important;
}

/*
 * Le slider a une hauteur fixe (550 px par défaut, posée en style inline). Sur un
 * téléphone de 360 px de large, c'est un cadre en portrait où une photo paysage ne
 * tient qu'en bandeau. En dessous de la tablette, le cadre prend donc les
 * proportions d'une photo — c'est ce que fait déjà l'extension Divi, dont le
 * slider n'impose aucune hauteur. `!important` pour passer devant le style inline.
 */
@media (max-width: 767px) {
    .ts-immo-swiper {
        height: auto !important;
        aspect-ratio: 4 / 3;
    }

    /* 30 px de marge autour de chaque flèche couvraient les deux tiers de la photo. */
    .ts-immo-swiper .swiper-button-next, .ts-immo-swiper .swiper-button-prev {
        padding: 12px;
    }
}

@media (min-width: 369px) and (max-width: 1040px) {
    #installation {
        padding-top: 0;
    }
}