/* ============================================================
 * STG Widgets — styles communs (gallery V5, contact, lots, etc.)
 * Généralisés avec un sélecteur d'attribut sur les modales
 * (pour cibler tous les programmes, pas un ID spécifique).
 * ============================================================ */

/* === Formulaire viewer galerie programme neuf === */
.stg-v5-form-panel .agent-name span {
    color: #403935;
    font-size: 15px;
    font-weight: 400;
}
.stg-v5-form-panel .agent-block-text .agent-link {
    color: #403935 !important;
    font-size: 15px !important;
    font-weight: 600 !important;
}

/* === 1. Textes et placeholders dans les champs === */
.stg-v5-form .form-control {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #403935 !important;
}
.stg-v5-form .form-control::placeholder {
    font-size: 15px !important;
    font-weight: 400 !important;
    color: #403935 !important;
}
.stg-v5-form .form-control::-moz-placeholder {
    color: #403935 !important;
}

/* === 2. Bordure du champ actif === */
.stg-v5-form .form-control:focus {
    border-color: #5D514B !important;
    outline: none !important;
    box-shadow: none !important;
}

/* === 3. Texte RGPD === */
.stg-v5-form .gdpr-text,
.stg-v5-form .gdpr-text a {
    font-size: 14px !important;
    font-weight: 500 !important;
    color: #403935 !important;
}

/* === 4. Bouton Envoyer === */
.stg-v5-form .btn-send {
    font-size: 15px !important;
    font-weight: 500 !important;
    background-color: #403935 !important;
    border-color: #403935 !important;
    color: #ffffff !important;
    transition: all 0.3s ease;
}
.stg-v5-form .btn-send:hover {
    background-color: #ffffff !important;
    border-color: #403935 !important;
    color: #403935 !important;
}

/* === 5. Bouton Appeler === */
.stg-v5-form .btn-call {
    font-size: 15px !important;
    font-weight: 500 !important;
    background-color: #ffffff !important;
    border-color: #403935 !important;
    color: #403935 !important;
    transition: all 0.3s ease;
}
.stg-v5-form .btn-call:hover {
    background-color: #403935 !important;
    border-color: #403935 !important;
    color: #ffffff !important;
}

/* === Textarea & select === */
.stg-v5-form textarea.form-control {
    color: #403935 !important;
}
.stg-v5-form select.form-control,
.stg-v5-form select.form-control option {
    color: #403935 !important;
}

/* === Galerie === */
.stg-v5-gallery {
    background-color: #ffffff !important;
}

/* Navigation (flèches) : transparence #403935 → plein au survol */
.stg-v5-gallery .stg-v5-nav {
    background-color: rgba(64, 57, 53, 0.5) !important;
}
.stg-v5-gallery .stg-v5-nav:hover {
    background-color: rgba(64, 57, 53, 1) !important;
}

/* === Modale gallery V5 (TOUS les programmes — sélecteur d'attribut) === */
[id^="stg-prog-gallery-v5-modal-"] {
    --bs-modal-border-radius: 0 !important;
    --bs-modal-inner-border-radius: 0 !important;
}

@media (max-width: 767.98px) {
    /* La modale prend toute la hauteur dispo et scroll */
    [id^="stg-prog-gallery-v5-modal-"] .modal-dialog {
        margin: 0 !important;
        max-width: 100% !important;
        height: 100% !important;
    }
    [id^="stg-prog-gallery-v5-modal-"] .modal-content {
        height: 100% !important;
        overflow-y: auto !important;
        border-radius: 0 !important;
    }
    [id^="stg-prog-gallery-v5-modal-"] .modal-body {
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        flex: 1 1 auto !important;
        padding-bottom: 30px !important;
    }
}

@media (max-width: 767.98px) {
    .hs-gallery-v5-grid {
        height: 330px !important;
    }
}

/* === Mobile property contact (sticky bar) === */
@media (max-width: 1024px) {
    .mobile-property-contact .agent-name {
        font-size: 15px !important;
        font-weight: 400 !important;
    }

    .mobile-property-contact .btn-secondary,
    .mobile-property-contact .btn-secondary-outlined {
        width: 50px !important;
        height: 50px !important;
        min-width: 50px !important;
        padding: 0 !important;
        display: inline-flex !important;
        align-items: center !important;
        justify-content: center !important;
        flex-shrink: 0 !important;
        line-height: 1 !important;
    }
    .mobile-property-contact .btn-secondary i,
    .mobile-property-contact .btn-secondary-outlined i {
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        top: 0 !important;
        line-height: 1 !important;
        font-size: 18px !important;
        display: block !important;
    }
}

/* === Lot ↔ programme link widget === */
.item-footer .item-date {
    color: #5D514B !important;
}
.stg-lot-prog-meta .stg-lot-prog-meta-item span {
    font-size: 16px !important;
}

/* === Lightbox property mobile : centrage image + bouton close en overlay ===
   `position: sticky` ne marche PAS dans `.modal-content` Bootstrap (.modal-content
   n'est pas le scrolling ancestor — c'est .modal qui scroll). On positionne donc
   le bouton X en `position: fixed` au-dessus de l'image, et on centre l'image
   verticalement via flexbox sur .modal-body. */
@media (max-width: 767.98px) {
    /* IMPORTANT : `.property-lightbox` est juste un WRAPPER non-positionné.
       Le z-index doit s'appliquer sur `.modal` (#houzez-listing-lightbox)
       qui est l'élément `position: fixed` par défaut Bootstrap.
       2147483646 = max int 32-bit moins 1 → bat tout. */
    body #houzez-listing-lightbox,
    body #houzez-listing-lightbox.modal,
    body #houzez-listing-lightbox.show,
    body .property-lightbox .modal,
    body .property-lightbox .modal.fade,
    body .property-lightbox .modal.show {
        z-index: 2147483646 !important;
    }
    /* Bootstrap ajoute .modal-backdrop dynamiquement à <body>. On bump aussi
       son z-index pour qu'il masque le header sticky du site. */
    body .modal-backdrop,
    body .modal-backdrop.show,
    body .modal-backdrop.fade.show {
        z-index: 2147483645 !important;
    }

    .property-lightbox .modal-dialog {
        margin: 0 !important;
        max-width: 100vw !important;
        min-height: 100vh;
    }
    .property-lightbox .modal-content {
        min-height: 100vh;
        border-radius: 0 !important;
        position: relative;
    }

    /* Masque le logo + outils du header sur mobile, on ne garde que le bouton X */
    .property-lightbox .modal-header .d-flex.flex-fill,
    .property-lightbox .modal-header .lightbox-logo,
    .property-lightbox .modal-header .lightbox-tools {
        display: none !important;
    }
    /* Header en overlay fixed sur le viewport, transparent.
       `position: fixed` + z-index max → au-dessus de TOUT (modal + site header). */
    body #houzez-listing-lightbox .modal-header,
    body .property-lightbox .modal-header,
    body .property-lightbox.show .modal-header,
    body .modal.property-lightbox .modal-header {
        position: fixed !important;
        top: 12px !important;
        right: 12px !important;
        left: auto !important;
        bottom: auto !important;
        padding: 0 !important;
        background: transparent !important;
        border: none !important;
        z-index: 2147483647 !important;  /* max int 32-bit → au-dessus de TOUT */
        width: auto !important;
        height: auto !important;
        display: block !important;
        box-sizing: content-box !important;
    }
    /* Bouton X : pastille ronde contrastée. Sélecteur surchargé pour battre
       toute règle child-theme avec spécificité standard + !important. */
    body #houzez-listing-lightbox .modal-header .btn-close,
    body .property-lightbox .modal-header .btn-close,
    body .property-lightbox.show .modal-header .btn-close,
    body .modal.property-lightbox .modal-header .btn-close {
        position: relative !important;
        background-color: rgba(0, 0, 0, 0.75) !important;
        background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23ffffff'%3e%3cpath d='M.293.293a1 1 0 0 1 1.414 0L8 6.586 14.293.293a1 1 0 1 1 1.414 1.414L9.414 8l6.293 6.293a1 1 0 0 1-1.414 1.414L8 9.414l-6.293 6.293a1 1 0 0 1-1.414-1.414L6.586 8 .293 1.707a1 1 0 0 1 0-1.414z'/%3e%3c/svg%3e") !important;
        background-position: center center !important;
        background-size: 14px 14px !important;
        background-repeat: no-repeat !important;
        width: 44px !important;
        min-width: 44px !important;
        height: 44px !important;
        min-height: 44px !important;
        max-width: 44px !important;
        max-height: 44px !important;
        border-radius: 50% !important;
        border: 0 !important;
        opacity: 1 !important;
        margin: 0 !important;
        padding: 0 !important;
        box-shadow: 0 2px 8px rgba(0,0,0,0.4) !important;
        box-sizing: border-box !important;
        cursor: pointer;
    }
    body .property-lightbox .modal-header .btn-close:hover,
    body .property-lightbox.show .modal-header .btn-close:hover {
        background-color: rgba(0, 0, 0, 0.9) !important;
        opacity: 1 !important;
    }

    /* Modal body : centre l'image dans le viewport */
    .property-lightbox .modal-body {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        min-height: 100vh;
        padding: 60px 10px 20px !important; /* 60px top → marge pour le X */
        overflow-y: auto;
    }
    .property-lightbox .lightbox-gallery-wrap,
    .property-lightbox .lightbox-gallery,
    .property-lightbox .lightbox-slider {
        width: 100% !important;
    }
    .property-lightbox .lightbox-slider .slick-slide > div,
    .property-lightbox .lightbox-slider [role="listitem"] {
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
    }
    .property-lightbox .lightbox-slider img.img-fluid {
        max-height: 75vh !important;
        max-width: 100% !important;
        width: auto !important;
        height: auto !important;
        margin: 0 auto !important;
        display: block !important;
    }
    /* Cache le bouton btn-expand (l'utilisateur est déjà dans la lightbox) */
    .property-lightbox .lightbox-gallery-wrap .btn-expand {
        display: none !important;
    }

    /* Flèches navigation Slick : visibles + contrastées sur l'image */
    .property-lightbox .lightbox-slider .slick-prev,
    .property-lightbox .lightbox-slider .slick-next {
        z-index: 50 !important;
        width: 44px !important;
        height: 44px !important;
        background-color: rgba(0, 0, 0, 0.55) !important;
        border-radius: 50% !important;
        opacity: 1 !important;
        display: flex !important;
        align-items: center;
        justify-content: center;
    }
    .property-lightbox .lightbox-slider .slick-prev { left: 8px !important; }
    .property-lightbox .lightbox-slider .slick-next { right: 8px !important; }
    .property-lightbox .lightbox-slider .slick-prev::before,
    .property-lightbox .lightbox-slider .slick-next::before {
        color: #ffffff !important;
        opacity: 1 !important;
        font-size: 22px !important;
        line-height: 1 !important;
    }
}

/* === Lightbox zoom & pan ===
   Clic sur `.btn-expand` toggle `.stg-is-zoomed` sur `.lightbox-gallery-wrap`.
   En mode zoom : image à scale(2.5), `transform-origin` mis à jour par JS
   selon la position de la souris → effet pan natif. */
.property-lightbox .lightbox-gallery-wrap .lightbox-slider {
    cursor: zoom-in;
}
.property-lightbox .lightbox-gallery-wrap.stg-is-zoomed .lightbox-slider {
    cursor: zoom-out;
    overflow: hidden;
}
/* En mode zoom : on switch object-fit contain → cover et l'image remplit
   100% du container pour que scale + transform-origin pannent correctement. */
.property-lightbox .lightbox-gallery-wrap.stg-is-zoomed .slick-slide img.img-fluid,
.property-lightbox .lightbox-gallery-wrap.stg-is-zoomed .slick-slide img {
    width: 100% !important;
    height: 100% !important;
    max-width: 100% !important;
    max-height: 100% !important;
    object-fit: cover !important;
    transition: transform 0.08s ease-out;
    will-change: transform;
}
/* Indicateur visuel : icône expand rotated 180° en mode zoom (= "click to exit") */
.property-lightbox .lightbox-gallery-wrap.stg-is-zoomed .btn-expand i {
    transform: rotate(180deg);
    transition: transform 0.15s ease;
}
.property-lightbox .lightbox-gallery-wrap .btn-expand i {
    transition: transform 0.15s ease;
}

/* === Lightbox slider : taille uniforme des images ===
   Houzez Slick utilise `adaptiveHeight: true` qui ajuste la hauteur du slider
   à chaque slide → images aux ratios différents affichent à des hauteurs
   différentes. On force un ratio fixe (16/10) sur le container slick-list et
   on contraint les images via object-fit: contain (préserve le contenu — pas
   de crop pour les rendus 3D / vues drone qui sont importants en immobilier). */
.property-lightbox .lightbox-slider {
    width: 100% !important;
}
.property-lightbox .lightbox-slider .slick-list {
    aspect-ratio: 16 / 10 !important;
    height: auto !important;
    max-height: 70vh !important;
    overflow: hidden;
}
.property-lightbox .lightbox-slider .slick-track {
    height: 100% !important;
}
.property-lightbox .lightbox-slider .slick-slide,
.property-lightbox .lightbox-slider .slick-slide > div,
.property-lightbox .lightbox-slider [role="listitem"] {
    height: 100% !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
}
.property-lightbox .lightbox-slider img.img-fluid,
.property-lightbox .lightbox-slider .slick-slide img {
    max-width: 100% !important;
    max-height: 100% !important;
    width: auto !important;
    height: auto !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 auto !important;
}

/* === Compteur d'image lightbox (X / N) ===
   Pastille centrée sous l'image, contrastée pour rester lisible sur n'importe
   quelle image. */
.property-lightbox .stg-lightbox-counter {
    display: block;
    text-align: center;
    margin: 12px auto 0;
    padding: 6px 14px;
    background-color: rgba(0, 0, 0, 0.6);
    color: #ffffff;
    font-size: 13px;
    font-weight: 500;
    letter-spacing: 0.5px;
    border-radius: 16px;
    width: fit-content;
    line-height: 1;
    pointer-events: none;
    user-select: none;
}

@media (max-width: 767.98px) {
    .property-lightbox .stg-lightbox-counter {
        margin-top: 10px;
        font-size: 12px;
        padding: 5px 12px;
    }
}

/* ============================================================
 * STG — Cacher les amenities à valeur 0 sur toutes les cards
 * ============================================================
 * Houzez templates (item-features-vN, item-amenities-N) testent
 * uniquement `$value != ''` → "0" passe et affiche « 0 chambres »,
 * « 0 SDB », « 0 m² ». La classe `.stg-amenity-zero` est ajoutée
 * en JS (cf. stg-widgets.js / inline assets) sur les <li> dont
 * la `.hz-figure` vaut 0 ; le CSS les masque.
 */
.item-amenities li.stg-amenity-zero,
.item-features li.stg-amenity-zero { display: none !important; }

/* Lightbox Houzez (modal quickview + lightbox programme) : on hide le
 * wrapper .col (Bootstrap row) — fallback .property-overview-data ul si
 * pas de col, et property-overview-item en dernier recours. */
.property-overview-data .col.stg-amenity-zero,
.property-overview-data ul.stg-amenity-zero,
.property-overview-data .property-overview-item.stg-amenity-zero {
    display: none !important;
}

/* ============================================================
 * STG — Style unifié des boutons d'action sur les cards
 * (Appeler / E-mail / WhatsApp / etc.)
 * ============================================================
 * Houzez par défaut utilise `.btn-primary-outlined` (transparent
 * + texte coloré). On override avec un style filled brun STG cohérent
 * avec les boutons "VOIR LE PROGRAMME" des cards lot programme neuf.
 * Charte STG :
 *   Normal : fond #403935 + texte #FFF + bordure #403935
 *   Hover  : fond #FFF   + texte #403935 + bordure #403935 (inverse)
 */
.item-btns-cew .btn-primary-outlined.btn-item,
.btn-item.btn-primary-outlined {
    background-color: #403935 !important;
    color: #FFFFFF !important;
    border: 1px solid #403935 !important;
    transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}
.item-btns-cew .btn-primary-outlined.btn-item:hover,
.item-btns-cew .btn-primary-outlined.btn-item:focus,
.btn-item.btn-primary-outlined:hover,
.btn-item.btn-primary-outlined:focus {
    background-color: #FFFFFF !important;
    color: #403935 !important;
    border-color: #403935 !important;
}
.item-btns-cew .btn-primary-outlined.btn-item i,
.btn-item.btn-primary-outlined i { color: inherit; }

/* Boutons "tools" sur l'image (preview / compare / favorites) :
   pastilles flottantes — fond blanc semi-transparent pour rester visibles
   sur n'importe quelle photo, hover inverse en brun charte #403935. */
.item-tools .item-tool > span,
.item-tools .item-tool > a,
.item-tools .item-tool > button {
    background-color: rgba(255, 255, 255, 0.95) !important;
    color: #403935 !important;
    border: 1px solid transparent;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.item-tools .item-tool > span:hover,
.item-tools .item-tool > a:hover,
.item-tools .item-tool > button:hover {
    background-color: #403935 !important;
    color: #FFFFFF !important;
}
.item-tools .item-tool i { color: inherit; }

/* ============================================================
 * STG — Layout du bouton SOLO VOIR L'ANNONCE/DETAILS sur les cards
 * ============================================================
 * ⚠ Cible UNIQUEMENT le bouton VOIR L'ANNONCE en pleine largeur — PAS les
 * boutons d'action Appeler/E-mail/WhatsApp qui partagent la classe `.btn-item`
 * mais sont dans `.item-btns-cew` (rangée inline).
 *
 * Sélecteur ciblé : bouton `.btn-item` direct enfant de `.item-body` OU dans
 * `.amenities-price-wrap` (template grid) OU avec classe `programme-card-btn`
 * (widgets STG custom). Exclut explicitement `.item-btns-cew > .btn-item`.
 */
.item-listing-wrap .item-body > .btn-item,
.item-listing-wrap .item-body > a.btn-item,
.item-listing-wrap .amenities-price-wrap > .btn-item,
.item-listing-wrap .programme-card-btn,
.item-wrap .item-body > .btn-item,
.item-wrap .amenities-price-wrap > .btn-item {
    box-sizing: border-box !important;
    position: static !important;
    display: flex !important;
    align-items: center;
    justify-content: center;
    width: 100% !important;
    max-width: 100% !important;
    margin: 14px 0 0 0 !important;
    padding: 10px 18px;
    text-align: center;
    line-height: 1.4;
    clear: both;
    font-weight: 600;
    letter-spacing: 0.4px;
    text-transform: uppercase;
    flex: 0 0 auto;
    align-self: stretch;
}

/* Override Houzez `.d-md-none .d-xl-flex` sur le bouton solo (toujours visible) */
.item-listing-wrap .item-body > .btn-item.d-md-none,
.item-wrap .item-body > .btn-item.d-md-none,
.item-listing-wrap .amenities-price-wrap > .btn-item.d-md-none,
.item-wrap .amenities-price-wrap > .btn-item.d-md-none {
    display: flex !important;
}

/* Conteneur Houzez `.amenities-price-wrap` (item-v5/v6 grid) : on s'assure
   que c'est bien un flex column avec ordre normal pour que le bouton
   tombe APRÈS le UL stats. */
.item-wrap .item-body .amenities-price-wrap {
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 10px !important;
    width: 100%;
    box-sizing: border-box;
}

/* UL stats : force flex-wrap explicite + items inline contenus, sans
   margin négative qui sortirait du conteneur. */
.item-listing-wrap ul.item-amenities,
.item-wrap ul.item-amenities {
    display: flex !important;
    flex-wrap: wrap !important;
    align-items: center !important;
    gap: 8px 12px !important;
    margin: 0 !important;
    padding: 0 !important;
    list-style: none !important;
    width: 100%;
    box-sizing: border-box;
}

/* Cards STG widgets custom (lot-cards, programme-cards) : bouton parfois
   `programme-card-btn` directement dans `.item-body` — uniformisation. */
.item-listing-wrap.item-wrap-programme .item-body .btn-item.programme-card-btn,
.item-listing-wrap.item-wrap-programme .item-body .programme-card-btn {
    margin: 16px 0 0 0 !important;
    width: 100% !important;
    box-sizing: border-box;
}

/* Sécurité supplémentaire pour les cards Houzez `item-v5/v6` en grid où
   .item-body peut avoir un padding interne — la card ne déborde pas. */
.item-listing-wrap .item-body,
.item-wrap .item-body {
    overflow: hidden;
    box-sizing: border-box;
}

/* ============================================================
 * STG — Bouton VOIR L'ANNONCE aligné au même niveau entre cards
 * ============================================================
 * Sur un grid de cards (results, programme similar, programme lots…), le
 * nombre de stats varie d'une card à l'autre (5 sur certains biens, 8 sur
 * d'autres). Sans cette règle, le bouton finit à des niveaux différents
 * (les cards à 5 stats ont leur bouton plus haut que celles à 8 stats).
 *
 * Stratégie :
 *  1. Les cards et leurs parents s'étirent à la hauteur du plus grand
 *     (`align-items: stretch` sur le row + `height: 100%` sur la card).
 *  2. Le bouton reçoit `margin-top: auto` → consomme tout l'espace libre
 *     au-dessus et reste collé en bas.
 *
 * Couvre les principaux templates :
 *   - Houzez item-v5 / item-v6 (grid) → `.item-body` est flex column
 *   - Houzez item-list-vN (list) → `.item-body` aussi
 *   - STG widget custom .item-wrap-programme → `.item-body` flex column
 */
.listing-view.grid-view > [class*="col"],
.row > [class*="col"] > .item-listing-wrap,
.listing-view > [class*="col"] > .item-listing-wrap {
    display: flex;
    height: 100%;
}
.item-listing-wrap {
    width: 100%;
}
.item-listing-wrap > .item-wrap,
.item-listing-wrap .item-wrap.h-100 {
    display: flex !important;
    flex-direction: column !important;
    width: 100%;
    height: 100%;
}
.item-listing-wrap .item-body {
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
}
/* Bouton SOLO VOIR L'ANNONCE — MARGES TOP/BOTTOM IDENTIQUES (16px).
   ⚠ Cible UNIQUEMENT le bouton solo, PAS les boutons inline Appeler/Email/WhatsApp.
   L'ALIGNEMENT VERTICAL entre cards d'une rangée est conservé via le mécanisme
   suivant : l'ÉLÉMENT JUSTE AVANT le bouton (typiquement la UL `.item-amenities`
   ou le conteneur `.amenities-price-wrap`) reçoit `margin-bottom: auto`. */
.item-listing-wrap .item-body > .btn-item,
.item-listing-wrap .amenities-price-wrap > .btn-item,
.item-wrap .item-body > .btn-item,
.item-wrap .amenities-price-wrap > .btn-item,
.item-listing-wrap .programme-card-btn {
    margin-top: 16px !important;
    margin-bottom: 16px !important;
}
/* L'élément SOEUR situé juste avant le bouton dans le flux flex column reçoit
   `margin-bottom: auto` → c'est ce qui pousse le bouton en bas. Sélecteurs
   ciblés pour les structures DOM typiques Houzez/STG : */
.item-listing-wrap .item-body > ul.item-amenities,
.item-listing-wrap .item-body > .amenities-price-wrap,
.item-listing-wrap .item-body > .item-features,
.item-wrap .item-body > ul.item-amenities,
.item-wrap .item-body > .amenities-price-wrap,
.item-wrap .item-body > .item-features {
    margin-bottom: auto !important;
}
/* Cas item-v6 : le UL.item-amenities est DEDANS `.amenities-price-wrap` —
   c'est ce wrapper qui doit avoir margin-bottom: auto, pas le UL. La règle
   ci-dessus suffit (cible `.amenities-price-wrap`). */

/* ============================================================
 * STG — Property Meta Data : placeholder « — » pour les champs vides
 * ============================================================
 * Le widget Houzez Property Meta Data masque totalement le bloc quand
 * la meta est vide. STG_Houzez_Meta_Data_Extender ajoute une option
 * « Afficher si valeur vide » qui rend un placeholder ; voici son style.
 * Couleur grisée + italique pour distinguer du vrai contenu.
 */
.hs-meta-widget-data.hs-meta-widget-empty {
    color: #9ca3af !important;
    font-style: italic;
    opacity: 0.85;
}

/* v1.5.110 — Unité appendée par les widgets STG Informations <X> */
.hs-meta-widget-data .stg-info-unit {
    margin-left: 2px;
    opacity: 0.75;
    font-weight: 400;
}

/* ============================================================
 * STG — Couleur unifiée des icônes de stats (charte #8B7C74)
 * ============================================================
 * Force la couleur #8B7C74 sur TOUTES les icônes affichant des stats
 * de bien (surface, terrain, pièces, chambres, SDB, SDE, WC, garage,
 * jardin, piscine) — cohérence visuelle sur :
 *   - Cards search results (item-amenities natif Houzez)
 *   - Cards STG Property Cards V1, Programme Cards, Lots Cards
 *   - Lightbox quickview + single property (property-overview-item)
 *   - Widgets Programme/Lot Financier (stg-*-fin-*)
 *   - Injection STG (stg-stat-icon, stg-svg-icon)
 *
 * Couleur défaut : `--houzez-listing-features` (déjà utilisée par certaines
 * règles STG) → fallback hex #8B7C74. Le même `var(...)` permet à un thème
 * enfant de surcharger la palette via une seule variable.
 */
:root {
    --stg-listing-icon-color: #8B7C74;
    --houzez-listing-features: #8B7C74;
}

/* Cards Houzez natives + variants Property Cards V1 / programme / lots */
.item-amenities li i,
.item-amenities li .houzez-icon,
.item-amenities li .stg-svg-icon,
.item-amenities li img,
.item-listing-wrap .item-amenities li i,
.item-listing-wrap .item-amenities li .houzez-icon,
.item-listing-wrap .item-amenities li .stg-svg-icon,
/* Lightbox + single property : property-overview-item / section-overview-v2 */
.property-overview-item i,
.property-overview-item .houzez-icon,
.property-overview-item .stg-svg-icon,
.property-overview-item img,
/* Houzez Property Meta Data widget (Layout v1-v4) */
.hs-meta-widget-icon i,
.hs-meta-widget-icon .houzez-icon,
.hs-meta-widget-icon svg,
/* Injection STG (stg-listing-stats-extra.js + class-icons.php) */
.stg-stat-icon,
.stg-stat-li i,
.stg-stat-li .houzez-icon,
.stg-stat-li .stg-svg-icon,
/* Widgets STG Programme/Lot Financier — labels icons */
.stg-prog-fin-label i,
.stg-lot-fin-label i {
    color: var(--stg-listing-icon-color, #8B7C74) !important;
    fill: var(--stg-listing-icon-color, #8B7C74);
}

/* `.stg-svg-icon` utilise `background-color: currentColor` pour la teinte
   du SVG masqué. La règle `color: ...` ci-dessus suffit (currentColor suit
   la color CSS). On force aussi `background-color` au cas où un autre CSS
   override surcharge. */
.stg-svg-icon {
    background-color: var(--stg-listing-icon-color, #8B7C74) !important;
}

/* SVG inline (Houzez Property Meta Data — Custom Icon) : fill direct */
.hs-meta-widget-icon svg path,
.hs-meta-widget-icon svg circle,
.hs-meta-widget-icon svg rect {
    fill: var(--stg-listing-icon-color, #8B7C74);
}

/* ============================================================
 * STG — Sticky bar contact mobile vs bouton cookies
 * ============================================================
 * Sur smartphone (< 992px), une barre de contact agent (Elementor sticky
 * widget ou similaire) reste fixée en bas de l'écran. Le bouton « Cookie
 * Settings » de Cookie Law Info chevauche au coin bas-gauche.
 *
 * Fix :
 *   1. La barre sticky reste COLLÉE au bas avec marge propre (0px) et z-index haut.
 *   2. Le bouton cookies est MASQUÉ sur mobile via JS « disparaît tout en bas
 *      de la page ». CSS : caché par défaut au-delà de 991px, et un script JS
 *      gère le toggle visible/masqué selon la position du scroll.
 *   3. Body padding-bottom dédié pour la hauteur de la barre uniquement.
 */
@media (max-width: 991px) {
    /* Barre sticky en bas — z-index très haut, plaquée tout en bas. */
    .elementor-section.elementor-sticky,
    .elementor-sticky--effects,
    .elementor-element.elementor-sticky,
    .stg-mobile-contact-bar,
    .stg-mobile-agent-bar,
    .hz-fixed-bottom-mobile,
    [class*="mobile-sticky"][class*="bottom"],
    [data-fixed-mobile="bottom"] {
        z-index: 9999 !important;
        bottom: 0 !important;          /* collée au bord bas */
        margin: 0 !important;          /* pas de margin parasite */
        padding: 10px 12px !important; /* marges INTERNES propres */
        box-sizing: border-box !important;
    }

    /* Bouton cookies — visible en cours de scroll, MASQUÉ tout en bas de la page.
       Le toggle de la classe `.stg-page-at-bottom` est fait en JS (stg-bottom-bar.js).
       On couvre les 2 plugins possibles :
       - CookieYes (.cky-btn-revisit-wrapper / .cky-revisit-bottom-left / [data-cky-tag="revisit-consent"])
       - Cookie Law Info historique (#cookie-law-info-again / .cli-*) */
    body.stg-page-at-bottom .cky-btn-revisit-wrapper,
    body.stg-page-at-bottom .cky-revisit-bottom-left,
    body.stg-page-at-bottom .cky-btn-revisit,
    body.stg-page-at-bottom [data-cky-tag="revisit-consent"],
    body.stg-page-at-bottom #cookie-law-info-again,
    body.stg-page-at-bottom .cli-show-settings-shortcode,
    body.stg-page-at-bottom .cli-bar-container.cli_show,
    body.stg-page-at-bottom .wt-cli-cookie-bar-container,
    body.stg-page-at-bottom .cli-modal-shown,
    body.stg-page-at-bottom .cookielawinfo-cli-revoke-btn,
    body.stg-page-at-bottom [class*="cookie-law-info-again"] {
        display: none !important;
        visibility: hidden !important;
        opacity: 0 !important;
        pointer-events: none !important;
    }

    /* Body : padding bas = hauteur de la barre sticky (~70px sur mobile). */
    body.single-property,
    body.archive,
    body.search-results,
    body[class*="property"] {
        padding-bottom: 70px;
    }
}

/* ============================================================
 * STG — Cards LIST/HALF-MAP : HAUTEUR & IMAGE HOMOGÈNES
 * ============================================================
 * Sur la page des résultats half-map, les cards ont des tailles différentes
 * selon la nature de l'image (vraie photo vs logo placeholder) et la
 * quantité de stats. Triple ceinture :
 *
 *  1. Min-height sur le `.item-listing-wrap`            → seuil minimal de la card
 *  2. Width fixe + height min sur le `.item-header`     → colonne image identique
 *  3. Aspect-ratio + object-fit sur l'image elle-même   → uniformise le rendu
 *
 * Sélecteurs LARGES : on cible toutes les variantes de wraps half-map
 * (item-wrap-v1, item-wrap-v8, item-wrap-v10, item-listing-wrap-v1/v2…).
 */
.item-listing-wrap[class*="half-map"],
.item-listing-wrap.item-listing-wrap-v1,
.item-listing-wrap.item-listing-wrap-v2,
.item-listing-wrap.item-wrap-v8,
.item-listing-wrap.item-wrap-v10,
.listing-half-map .item-listing-wrap {
    min-height: 240px !important;
}

/* Colonne image (à gauche) : width + height fixes en desktop, full-width
   au-dessous du breakpoint md. Sécurise la stabilité visuelle entre cards. */
@media (min-width: 768px) {
    .item-listing-wrap[class*="half-map"] .item-header,
    .item-listing-wrap.item-listing-wrap-v1 .item-header,
    .item-listing-wrap.item-listing-wrap-v2 .item-header,
    .item-listing-wrap.item-wrap-v8 .item-header,
    .item-listing-wrap.item-wrap-v10 .item-header,
    .listing-half-map .item-listing-wrap .item-header {
        flex: 0 0 auto !important;
        width: 280px !important;
        min-height: 220px !important;
        align-self: stretch !important;
    }
}

/* Container image : remplit le item-header */
.item-listing-wrap .listing-image-wrap,
.item-listing-wrap .listing-thumb,
.item-listing-wrap .listing-featured-thumb {
    width: 100% !important;
    height: 100% !important;
    min-height: inherit;
    overflow: hidden;
    background: #f5f5f5;
}
.item-listing-wrap .listing-thumb {
    display: block !important;
}
.item-listing-wrap .listing-featured-thumb {
    display: flex !important;
    align-items: stretch;
    justify-content: center;
}
.item-listing-wrap .listing-thumb img,
.item-listing-wrap .listing-featured-thumb img {
    width: 100% !important;
    height: 100% !important;
    object-fit: cover !important;
    display: block;
}

/* Logos placeholder (sans photo réelle) : on les détecte par src/alt
   contenant "placeholder" / "logo" / "STG", et on les passe en
   `object-fit: contain` pour ne pas les couper. Padding et fond blanc pour
   un rendu propre. */
.item-listing-wrap .listing-thumb img[src*="placeholder"],
.item-listing-wrap .listing-thumb img[src*="logo"],
.item-listing-wrap .listing-thumb img[alt*="STG"],
.item-listing-wrap .listing-thumb img[alt*="stg"],
.no-image-placeholder img {
    object-fit: contain !important;
    padding: 24px !important;
    background: #ffffff !important;
}


 * En vue LIST (image à gauche, contenu à droite), certaines cards ont peu
 * de contenu (ex Murs commerciaux : 1 seul stat 496 m²) et d'autres beaucoup
 * (Vente maison T5 : 6 stats + buttons). Sans cette règle, le contenu de la
 * petite card sticke en haut et laisse un gros vide entre les stats et la
 * rangée Appeler/E-mail/WhatsApp.
 *
 * Stratégie : on CENTRE verticalement le contenu de `.item-body` en LIST view.
 * Les cards à peu de contenu auront leur bloc texte+stats+buttons centré
 * dans la hauteur de l'image — visuellement équilibré.
 *
 * On désactive aussi le `margin-bottom: auto` hérité de la règle GRID
 * (qui ne s'applique qu'aux contextes en colonne).
 */
.item-listing-wrap.item-listing-wrap-v1,
.item-listing-wrap.item-listing-wrap-v2,
.item-listing-wrap[class*="item-wrap-v"][class*="half-map"] {
    /* List view : on n'override pas display/flex-direction du wrap natif */
}
.item-listing-wrap.item-listing-wrap-v1 .item-body,
.item-listing-wrap.item-listing-wrap-v2 .item-body,
.item-listing-wrap.item-wrap-v8 .item-body,
.item-listing-wrap.item-wrap-v10 .item-body {
    /* Centre verticalement le contenu pour les cards à peu de stats —
       harmonise l'apparence avec les cards qui débordent de stats. */
    justify-content: center !important;
}
/* Cancel le `margin-bottom: auto` du grid-rule pour les list view —
   on a déjà `justify-content: center` qui gère l'espacement. */
.item-listing-wrap.item-listing-wrap-v1 .item-body > ul.item-amenities,
.item-listing-wrap.item-listing-wrap-v1 .item-body > .amenities-price-wrap,
.item-listing-wrap.item-listing-wrap-v2 .item-body > ul.item-amenities,
.item-listing-wrap.item-listing-wrap-v2 .item-body > .amenities-price-wrap,
.item-listing-wrap.item-wrap-v8 .item-body > ul.item-amenities,
.item-listing-wrap.item-wrap-v10 .item-body > ul.item-amenities {
    margin-bottom: 0 !important;
}
/* Bouton "VOIR L'ANNONCE" en list view : marge top normale (14px) au lieu de
   16px+auto — le centering du body gère la verticalité globale. */
.item-listing-wrap.item-listing-wrap-v1 .item-body .btn-item,
.item-listing-wrap.item-listing-wrap-v2 .item-body .btn-item,
.item-listing-wrap.item-wrap-v8 .item-body .btn-item,
.item-listing-wrap.item-wrap-v10 .item-body .btn-item {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}
/* Rangée Appeler/E-mail/WhatsApp (item-btns-cew) en list view : également
   centré dans le body, avec une marge top fixe pour le séparer des stats. */
.item-listing-wrap.item-listing-wrap-v1 .item-body .item-btns-cew,
.item-listing-wrap.item-listing-wrap-v2 .item-body .item-btns-cew,
.item-listing-wrap.item-wrap-v8 .item-body .item-btns-cew,
.item-listing-wrap.item-wrap-v10 .item-body .item-btns-cew {
    margin-top: 14px !important;
    margin-bottom: 0 !important;
}

/* Responsive : sur mobile padding plus généreux + texte un poil plus petit */
@media (max-width: 575px) {
    .item-listing-wrap .item-body > .btn-item,
    .item-listing-wrap .amenities-price-wrap > .btn-item,
    .item-wrap .item-body > .btn-item,
    .item-wrap .amenities-price-wrap > .btn-item,
    .item-listing-wrap .programme-card-btn {
        padding: 12px 18px;
        font-size: 13px;
        letter-spacing: 0.3px;
    }
    /* Stats : sur mobile gap réduit pour gagner de la place */
    .item-listing-wrap ul.item-amenities,
    .item-wrap ul.item-amenities {
        gap: 6px 10px !important;
    }
}

/* ============================================================
 * STG Search Builder — habillage formulaire en page d'accueil / hero
 * ============================================================
 * Sur la page de résultats half-map, le formulaire utilise sa propre
 * mise en page (déjà stylée par Houzez). On exclut ce contexte via
 * :not(.advanced-search-half-map).
 *
 * Objectifs charte STG :
 *   - Fond blanc opaque sur l'ensemble du formulaire (lisibilité sur hero)
 *   - Coins arrondis légers + ombre douce
 *   - Champs sans bordure individuelle, séparés par des filets verticaux
 *   - Bouton "Rechercher" en brun charte #403935 (cohérent avec les boutons d'action)
 */
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) {
    background: #FFFFFF;
    border-radius: 6px;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.12);
    padding: 6px;
}
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .container {
    padding-left: 0;
    padding-right: 0;
}
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) form {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
    gap: 0;
    margin: 0;
}
/* Chaque champ remplit sa colonne avec un séparateur fin à droite */
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .form-group,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-group {
    flex: 1 1 0;
    margin: 0;
    border-right: 1px solid #e5e7eb;
    background: transparent;
    min-width: 140px;
    display: flex;
    align-items: center;
}
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .form-group:last-of-type,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-group:last-of-type {
    border-right: none;
}

/* Selectpickers + dropdowns : neutralise les bordures Houzez individuelles
 * (le wrapper porte déjà la bordure visuelle), garde un padding lisible. */
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .bootstrap-select > .dropdown-toggle,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .form-control,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-light-grey-outlined {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    color: #1f2937 !important;
    font-weight: 500;
    padding: 14px 16px !important;
    height: auto;
    min-height: 48px;
    width: 100%;
}
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .bootstrap-select > .dropdown-toggle:focus,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .form-control:focus {
    outline: none !important;
    box-shadow: none !important;
}

/* Bouton "Rechercher" — fond brun charte, prend toute la hauteur, coins arrondis
 * uniquement à droite pour s'intégrer au formulaire. */
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-search,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) button[type="submit"].btn-secondary,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .houzez-search-btn {
    flex: 0 0 auto;
    background-color: #403935 !important;
    color: #FFFFFF !important;
    border: none !important;
    border-radius: 0 4px 4px 0 !important;
    padding: 0 28px !important;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin: -6px -6px -6px 0;
    min-height: 60px;
    transition: background-color 0.2s ease, color 0.2s ease;
}
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-search:hover,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) button[type="submit"].btn-secondary:hover,
.elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .houzez-search-btn:hover {
    background-color: #FFFFFF !important;
    color: #403935 !important;
    box-shadow: inset 0 0 0 1px #403935;
}

/* Mobile : empile verticalement (perd les séparateurs verticaux, gagne en lisibilité) */
@media (max-width: 768px) {
    .elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) form {
        flex-direction: column;
        gap: 1px;
        background: #e5e7eb; /* séparateurs horizontaux visibles via background */
    }
    .elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .form-group,
    .elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-group {
        background: #FFFFFF;
        border-right: none;
        width: 100%;
    }
    .elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .btn-search,
    .elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) button[type="submit"].btn-secondary,
    .elementor-widget-stg_houzez_search_builder .advanced-search:not(.advanced-search-half-map) .houzez-search-btn {
        border-radius: 0 0 4px 4px !important;
        margin: 0;
        padding: 14px !important;
        min-height: 50px;
    }
}