/* Texte du prix en overlay : lisibilité garantie par text-shadow (Houzez positionne bottom-left via .item-price-wrap) */
.item-wrap-programme .item-price-wrap .item-price {
    text-shadow: 0 1px 3px rgba(0,0,0,0.6);
}

/* Badge top-left positionnement */
.item-wrap-programme .programme-card-labels {
    position: absolute !important;
    top: 0 !important;
    z-index: 3;
}

/* === Programme Cards : taille image uniforme (TOUTES les cards) ===
   L'inline style PHP fixe `.listing-image-wrap { height: <img_h>px }`. On force
   ensuite TOUS les containers intermédiaires (incl. slick si Houzez l'instrumente)
   à hériter de cette hauteur via `height: 100%` + `display: block`. Le ratio est
   verrouillé peu importe le ratio source de l'image (object-fit: cover crop).
   <a> est inline par défaut → display:block obligatoire pour `height: 100%`. */
.item-wrap-programme .listing-image-wrap {
    width: 100% !important;
    overflow: hidden !important;
    display: block !important;
    position: relative;
    /* Hauteur par défaut (anti-FOUC). Le contrôle Elementor `image_height`
     * (responsive desktop/tablet/mobile) override via ses selectors. */
    height: 220px;
}
.item-wrap-programme .listing-image-wrap .listing-thumb,
.item-wrap-programme .listing-image-wrap .listing-featured-thumb {
    width: 100% !important;
    height: 100% !important;
    display: block !important;
    overflow: hidden;
    position: relative;
}
.item-wrap-programme .listing-image-wrap img,
.item-wrap-programme .listing-image-wrap .programme-card-img,
.item-wrap-programme .listing-image-wrap .img-fluid {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center center !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
}

/* Slick : Houzez peut re-wrapper en gallery (.hz-item-gallery-js). On force
   les HAUTEURS pour propager `.listing-image-wrap`, MAIS on laisse Slick
   gérer les WIDTHs inline sur .slick-track / .slick-slide (sinon les slides
   se superposent à left:0 et la navigation casse — seul le 1er chargement
   est visible). */
.item-wrap-programme .listing-image-wrap .listing-gallery-wrap,
.item-wrap-programme .listing-image-wrap .houzez-listing-carousel,
.item-wrap-programme .listing-image-wrap .slick-list {
    width: 100% !important;
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
    display: block !important;
}
.item-wrap-programme .listing-image-wrap .slick-track,
.item-wrap-programme .listing-image-wrap .slick-slide,
.item-wrap-programme .listing-image-wrap .slick-slide > div,
.item-wrap-programme .listing-image-wrap .slide-img,
.item-wrap-programme .listing-image-wrap .slide-img > a {
    height: 100% !important;
    min-height: 0 !important;
    max-height: none !important;
}
.item-wrap-programme .listing-image-wrap .slick-slide img,
.item-wrap-programme .listing-image-wrap .slide-img img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
    max-width: none !important;
    max-height: none !important;
}

/* === Bouton "Voir le programme" : responsive smartphone ===
   Sur desktop, le bouton flotte à droite de "PROGRAMME NEUF" via le CSS
   Houzez natif (.btn-item position absolue / float right selon variante).
   Sur smartphone (< 576px), il manque de place et chevauche le texte. On
   force un layout stacké full-width pour éviter l'overflow.

   `position: static` neutralise le `position:absolute` Houzez potentiel,
   `width:100%` + `text-align:center` rend le bouton lisible et tappable
   (recommandation accessibilité tactile : ≥ 44×44px). */
@media (max-width: 575.98px) {
    .item-wrap-programme .programme-card-btn,
    .item-wrap-programme .item-body .btn-item.programme-card-btn {
        position: static !important;
        /* `flex` au lieu de `block` pour centrer verticalement le texte
         * (un padding/line-height asymétrique hérité de Houzez sinon
         * fait apparaître le label collé en haut/bas). */
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        width: 100% !important;
        max-width: 100% !important;
        min-height: 44px !important; /* zone tactile accessibilité */
        margin: 12px 0 4px !important;
        text-align: center !important;
        line-height: 1.2 !important; /* neutralise un line-height Houzez excessif */
        right: auto !important;
        bottom: auto !important;
        float: none !important;
        white-space: normal !important; /* autorise le wrap si texte long */
    }
    .item-wrap-programme .item-amenities li.h-type {
        margin-bottom: 0 !important;
    }
}

/* Sécurité supplémentaire sur les très petits écrans (< 360px) :
   réduit le padding du bouton pour qu'il reste dans la card. */
@media (max-width: 359.98px) {
    .item-wrap-programme .programme-card-btn {
        padding-left: 8px !important;
        padding-right: 8px !important;
        font-size: 12px !important;
    }
}

/* Resserrage icône ↔ texte dans les amenities (override Bootstrap me-2) */
.stg-programme-lots-cards .item-amenities li i,
.stg-programme-lots-cards .item-amenities li img,
.stg-programme-lots-cards .item-amenities li .me-2 {
    margin-right: 4px !important;
}

.stg-programme-lots-cards .item-amenities {
    gap: 4px 10px !important;
}

/* === Cards STG : taille image uniforme (TOUS les widgets cards STG) ===
   Force un ratio fixe (4/3) sur les images de cards, peu importe le ratio
   source. Sans ça, les images aux ratios différents se rendent à différentes
   hauteurs (ex: 4:3 vs 16:9), créant des cards de tailles inégales.

   Widgets concernés :
     - STG Property Cards V1     → .elementor-widget-stg_houzez_property_cards_v1
     - Programme Lots Cards      → .stg-programme-lots-cards (+ widget conteneur)
     - Programme Cards           → .item-wrap-programme (cf. règles plus haut)

   Le DOM Houzez est :
     .listing-image-wrap > .listing-thumb > a.listing-featured-thumb > img
   On applique aspect-ratio sur le <a> (parent direct de <img>) car c'est lui
   qui doit avoir une hauteur explicite pour que l'img la remplisse via
   width/height 100% + object-fit:cover.

   IMPORTANT : <a> est inline par défaut → display:block requis. */
.stg-programme-lots-cards .item-listing-wrap .listing-image-wrap,
.stg-programme-lots-cards .item-listing-wrap .listing-thumb,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .listing-image-wrap,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .listing-thumb,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .listing-image-wrap,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .listing-thumb {
    display: block !important;
    width: 100% !important;
    overflow: hidden;
}

.stg-programme-lots-cards .item-listing-wrap .listing-featured-thumb,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .listing-featured-thumb,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .listing-featured-thumb {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden;
    position: relative;
}

.stg-programme-lots-cards .item-listing-wrap .listing-featured-thumb img,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .listing-featured-thumb img,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .listing-featured-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* Slider Houzez slick : si le widget utilise gallery au lieu d'une seule
   image, on applique aussi le ratio sur le carousel. */
.stg-programme-lots-cards .item-listing-wrap .houzez-listing-carousel,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .houzez-listing-carousel,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .houzez-listing-carousel {
    display: block !important;
    width: 100% !important;
    aspect-ratio: 4 / 3 !important;
    overflow: hidden;
    position: relative;
}

/* slick-list = viewport (1 slide visible) → width 100% OK
   slick-track = strip horizontale (N slides) → Slick set inline width
   slick-slide = chaque slide → Slick set inline width (1/N)
   Forcer width:100% sur track/slide casse la navigation : tous les slides
   s'empilent à left:0 → seul le 1er est jamais visible. On garde height
   pour propager la hauteur de la carte, mais on laisse Slick gérer la
   largeur. */
.stg-programme-lots-cards .item-listing-wrap .houzez-listing-carousel .slick-list,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .houzez-listing-carousel .slick-list,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .houzez-listing-carousel .slick-list {
    width: 100% !important;
    height: 100% !important;
}
.stg-programme-lots-cards .item-listing-wrap .houzez-listing-carousel .slick-track,
.stg-programme-lots-cards .item-listing-wrap .houzez-listing-carousel .slick-slide,
.stg-programme-lots-cards .item-listing-wrap .houzez-listing-carousel .slide-img,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .houzez-listing-carousel .slick-track,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .houzez-listing-carousel .slick-slide,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .houzez-listing-carousel .slide-img,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .houzez-listing-carousel .slick-track,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .houzez-listing-carousel .slick-slide,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .houzez-listing-carousel .slide-img {
    height: 100% !important;
}

.stg-programme-lots-cards .item-listing-wrap .houzez-listing-carousel img,
.elementor-widget-stg_houzez_property_cards_v1 .item-listing-wrap .houzez-listing-carousel img,
.elementor-widget-stg_programme_lots_cards .item-listing-wrap .houzez-listing-carousel img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    object-position: center !important;
    display: block !important;
}

/* === Programme Cards : HOMOGÉNÉISATION DES HAUTEURS DE CARDS ===
   La grille Bootstrap (.row > .col) étire chaque col à la hauteur de la
   plus haute. Mais à l'intérieur du col, `.item-listing-wrap` est un block
   simple → sa hauteur = hauteur du CONTENU, pas du col. Du coup les `h-100`
   sur ses enfants n'ont rien à quoi se raccrocher et les cards apparaissent
   inégales (image plus haute = card plus haute, agent footer pas aligné).

   Fix : on transforme `.col` en flex column et on étire `.item-listing-wrap`
   à 100% de sa hauteur. La structure interne (déjà en flex-column h-100)
   prend alors le relais. */
.listing-view.grid-view > .col {
    display: flex !important;
    flex-direction: column !important;
}
.listing-view.grid-view > .col > .item-wrap-programme,
.listing-view.grid-view > .col > .item-listing-wrap {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
}
.listing-view.grid-view > .col .item-wrap-programme > .item-wrap {
    height: 100% !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
.listing-view.grid-view > .col .item-wrap-programme > .item-wrap > .d-flex.flex-column {
    flex: 1 1 auto !important;
}

/* Le footer agent (avatar + date) doit toujours être collé en bas, peu
   importe la longueur du titre/adresse au-dessus. `item-body.flex-grow-1`
   est censé pousser le footer, mais sans la chaîne flex ci-dessus il ne
   peut pas grandir. Avec la chaîne en place, flex-grow:1 fonctionne. */
.item-wrap-programme .item-body {
    display: flex !important;
    flex-direction: column !important;
}
.item-wrap-programme .item-body > .programme-card-btn,
.item-wrap-programme .item-body > .btn-item {
    margin-top: auto !important;
}

/* === Image : ratio d'aspect uniforme (16/9) ===
   Le contrôle Elementor `image_height` pose `height: Xpx` inline via
   selectors, mais quand la source image n'a pas ce ratio, Slick (galerie
   Houzez) peut réajuster la hauteur du wrap au runtime → cards inégales.
   On force un aspect-ratio CSS qui prime sur la height calculée par JS et
   sur la height par défaut (220px). 16/9 cadre mieux les rendus 3D que 4/3. */
.item-wrap-programme .listing-image-wrap {
    aspect-ratio: 16 / 9 !important;
    height: auto !important;        /* aspect-ratio remplace height */
    min-height: 0 !important;
    max-height: none !important;
}