/**
 * CSS pour le template 47 - Affichage en grille 3 colonnes
 * Styles pour maintenir la compatibilité avec le shortcode [hektor_resultats_maquette]
 */

/* === GRILLE GLOBALE - SANS Z-INDEX POUR ÉVITER LES CONFLITS === */
/* La grille doit rester dans le flux normal sans interférer avec les dropdown */

/* === GRILLE 3 COLONNES POUR TEMPLATE 47 === */
.hektor-resultats-grid .hektor-template-47-direct {
    padding-bottom: 0;
    /* SUPPRESSION du padding-bottom */
    border: none;
    background: #FFFFFF;
    overflow: hidden;
    transition: all 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: none;
    /* SUPPRESSION DES Z-INDEX PROBLÉMATIQUES */
    /* Laisser le template 47 dans le flux normal sans créer de nouveau contexte de stacking */
}

/* === ROLLOVER SUPPRIMÉ - Pas de décalage ni d'ombre === */
/* L'effet de rollover se limite maintenant au signe "+" et à la transparence */

/* === ANCIENS STYLES POUR COMPATIBILITÉ === */
.hektor-resultats-grid .hektor-template-wrapper {
    padding-bottom: 0;
    /* SUPPRESSION du padding-bottom */
    border: none;
    background: #FFFFFF;
    overflow: hidden;
    transition: all 0.3s ease;
    height: auto;
    display: flex;
    flex-direction: column;
    box-shadow: none;
}

/* === STRUCTURE DU TEMPLATE 47 DIRECT === */
.hektor-template-47-direct {
    display: flex;
    flex-direction: column;
    height: 100%;
    /* PAS DE POSITION RELATIVE pour éviter les nouveaux contextes de stacking */
}

/* === STRUCTURE DU TEMPLATE 47 (COMPATIBILITÉ) === */
.hektor-template-wrapper .hektor-template-47-content {
    display: flex;
    flex-direction: column;
    height: 100%;
    position: relative;
}

/* Container d'image avec aspect-ratio strict et position relative pour le rollover */
.hektor-template-47-direct .hektor-template-47-image-container,
.hektor-template-wrapper .hektor-template-47-image-container {
    aspect-ratio: 4 / 3;
    overflow: hidden;
    width: 100%;
    flex-shrink: 0;
    background: #f5f5f5;
    /* Fond de secours si image pas chargée */
    position: relative;
    /* NÉCESSAIRE pour le pseudo-élément ::after du rollover */
}

/* Images avec dimensionnement simple pour remplir le container */
.hektor-template-47-direct .hektor-template-47-image-container img,
.hektor-template-wrapper .hektor-template-47-image-container img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    /* Force l'image à couvrir tout le container en gardant les proportions */
    object-position: center;
    /* Centre l'image dans le container */
    transition: filter 0.3s ease;
    display: block;
    cursor: pointer;
    /* Curseur pointer pour indiquer que c'est cliquable */
}

/* S'assurer que les images lightbox sont cliquables */
.hektor-template-47-direct .hektor-lightbox-trigger,
.hektor-template-wrapper .hektor-lightbox-trigger {
    cursor: pointer !important;
    position: relative;
    /* SUPPRESSION du z-index pour éviter les conflits avec les panneaux */
}

/* Effet rollover - signe + blanc sur transparence */
.hektor-template-47-direct .hektor-template-47-image-container::after,
.hektor-template-wrapper .hektor-template-47-image-container::after {
    content: '+';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.1);
    /* Transparence plus forte pour faire ressortir le + blanc */
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 100px;
    /* Signe + très grand à 100px */
    font-weight: 100;
    /* Le plus fin possible */
    color: white;
    /* Signe + en blanc pur */
    opacity: 0;
    transition: opacity 0.3s ease;
    pointer-events: none;
    /* Ne pas interférer avec les clics du lien */
    z-index: 1;
    /* Juste au-dessus de l'image, sans créer de contexte */
}

.hektor-type-bien-link {
    text-transform: uppercase !important;
}

a.hektor-type-bien-link {

    text-decoration: none !important;
    text-transform: uppercase !important;
    font-size: 1.2rem;
    font-weight: 600;
    color: rgb(30, 41, 59);
    margin-bottom: 2px;
    line-height: 1.2;
}

a.hektor-type-bien-link:hover {
    text-decoration: none !important;
    color: #b3b3b3 !important;
}

.hektor-template-47-direct .hektor-template-47-image-container:hover::after,
.hektor-template-wrapper .hektor-template-47-image-container:hover::after {
    opacity: 1;
}

.hektor-template-47-direct .hektor-template-47-image-container:hover img,
.hektor-template-wrapper .hektor-template-47-image-container:hover img {
    /* Effet très léger sur l'image pour faire ressortir le signe + */
    filter: brightness(0.8);
}

/* Lien sur l'image - RESTAURER les liens vers annonce-detail SANS z-index */
.hektor-template-47-direct .hektor-template-47-image-container a,
.hektor-template-47-direct .hektor-annonce-detail-link,
.hektor-template-wrapper .hektor-template-47-image-container a,
.hektor-template-wrapper .hektor-annonce-detail-link {
    display: block;
    width: 100%;
    height: 100%;
    text-decoration: none;
    color: inherit;
    position: absolute;
    top: 0;
    left: 0;
    /* SUPPRESSION du z-index pour éviter les conflits avec les panneaux */
    cursor: pointer !important;
}

.hektor-template-47-direct .hektor-template-47-image-container a:hover,
.hektor-template-47-direct .hektor-annonce-detail-link:hover,
.hektor-template-wrapper .hektor-template-47-image-container a:hover,
.hektor-template-wrapper .hektor-annonce-detail-link:hover {
    text-decoration: none;
}

/* Contenu textuel */
.hektor-template-wrapper .hektor-template-47-info {
    flex: 1;
    padding: 0;
    /* SUPPRESSION du padding pour alignement strict */
    display: flex;
    flex-direction: column;
    min-height: 80px;
    /* Hauteur minimale pour uniformité */
}

/* Ligne 1 : Type de bien et pièces */
.hektor-template-wrapper .hektor-template-47-line1 {
    font-size: 12px;
    font-weight: 600;
    color: #6b7280;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: 8px;
    line-height: 1.2;
    flex-shrink: 0;
}

/* Ligne 2 : Ville, CP, surface, prix */
.hektor-template-wrapper .hektor-template-47-line2 {
    font-size: 14px;
    color: #374151;
    line-height: 1.4;
    margin-bottom: 12px;
    flex-grow: 1;
}

/* Prix en gras */
.hektor-template-wrapper .hektor-template-47-line2 strong {
    font-weight: 700;
    color: #1f2937;
}

/* Ligne 3 (si ajoutée) */
.hektor-template-wrapper .hektor-template-47-line3 {
    font-size: 13px;
    color: #6b7280;
    line-height: 1.3;
    margin-top: auto;
    /* Pousse vers le bas */
    flex-shrink: 0;
}

/* === PLACEHOLDER POUR IMAGE MANQUANTE === */
.hektor-template-wrapper .hektor-no-image {
    width: 100%;
    height: 200px;
    /* Même hauteur que le container d'image */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    background: linear-gradient(135deg, #f3f4f6 0%, #e5e7eb 100%);
    color: #9ca3af;
    font-size: 14px;
    font-weight: 500;
    text-align: center;
    position: relative;
    overflow: hidden;
    gap: 8px;
}

.hektor-template-wrapper .hektor-no-image::before {
    content: '📷';
    font-size: 24px;
    display: block;
    opacity: 0.5;
}

.hektor-template-wrapper .hektor-no-image svg {
    opacity: 0.5;
}

.hektor-template-wrapper .hektor-no-image span {
    font-size: 12px;
    font-weight: 500;
}

/* === BADGES ET COMPTEURS === */
/* Badge type d'offre en haut à gauche */
.hektor-template-47-direct .hektor-property-badge,
.hektor-template-wrapper .hektor-property-badge {
    position: absolute;
    top: 12px;
    left: 12px;
    padding: 4px 12px;
    font-size: 12px;
    font-weight: 500;
    text-transform: uppercase;
    color: white;
    background: #007bff;
    border-radius: 4px;
    z-index: 10;
    /* Au-dessus de l'image et du rollover */
}

.hektor-template-wrapper .hektor-badge-vente {
    background: #dc3545;
}

.hektor-template-wrapper .hektor-badge-location {
    background: #007bff;
}

.hektor-template-wrapper .hektor-badge-programmeneuf {
    background: #28a745;
}

.hektor-template-wrapper .hektor-badge-locationvacances {
    background: #fd7e14;
}

/* Compteur d'images en bas à droite */
.hektor-template-47-direct .hektor-image-count,
.hektor-template-wrapper .hektor-image-count {
    position: absolute;
    bottom: 8px;
    right: 8px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    font-size: 12px;
    border-radius: 4px;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    /* Au-dessus de l'image et du rollover */
}

/* === RESPONSIVE === */
@media (max-width: 768px) {
    .hektor-resultats-grid {
        grid-template-columns: 1fr !important;
        gap: 20px;
    }

    .hektor-template-wrapper .hektor-template-47-image-container {
        height: 160px;
    }

    .hektor-template-wrapper .hektor-template-47-info {
        padding: 0;
        /* SUPPRESSION du padding pour alignement strict mobile aussi */
        min-height: 70px;
    }



    .hektor-template-wrapper .hektor-template-47-line1 {
        font-size: 11px;
        margin-bottom: 6px;
    }

    .hektor-template-wrapper .hektor-template-47-line2 {
        font-size: 13px;
        margin-bottom: 8px;
    }
}

@media (max-width: 1024px) and (min-width: 769px) {
    .hektor-resultats-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    .hektor-template-wrapper .hektor-template-47-image-container {
        height: 170px;
    }
}

/* === COMPATIBILITÉ AVEC LES STYLES EXISTANTS === */
/* S'assurer que les styles du template ne sont pas surchargés */
.hektor-template-wrapper * {
    box-sizing: border-box;
}

/* Réinitialiser les marges des éléments imbriqués */
.hektor-template-wrapper p,
.hektor-template-wrapper div,
.hektor-template-wrapper span {
    margin: 0;
    padding: 0;
}

/* === FALLBACK STYLING === */
/* Si le template n'est pas correctement formaté */
.hektor-template-wrapper .hektor-template-fallback {
    width: 100%;
    height: 100%;
}

/* === LIENS GÉNÉRIQUES DANS LE TEMPLATE === */
.hektor-template-wrapper a {
    color: inherit;
    text-decoration: none;
}

.hektor-template-wrapper a:hover {
    text-decoration: none;
    color: inherit;
}

/* Lien sur le type de bien */
.hektor-template-wrapper .hektor-type-bien-link,
.hektor-template-47-direct .hektor-type-bien-link {
    color: inherit;
    text-decoration: none;
    cursor: pointer;
}

.hektor-template-wrapper .hektor-type-bien-link:hover,
.hektor-template-47-direct .hektor-type-bien-link:hover {
    text-decoration: underline;
    color: inherit;
}

/* === CORRECTION POUR LES TEMPLATES TEMPLATERA === */
/* Éviter les conflits avec WPBakery/Templatera */
.hektor-template-wrapper .vc_row,
.hektor-template-wrapper .vc_column-inner,
.hektor-template-wrapper .wpb_column {
    margin: 0 !important;
    padding: 0 !important;
}

.hektor-template-wrapper .wpb_wrapper {
    padding: 0 !important;
}

/* RÈGLE BRUTALE MAIS EFFICACE pour éliminer TOUTES les marges VC */
.vc_column-inner {
    padding: 0px !important;
    margin: 0px !important;
}

/* Suppression des marges de la div container spécifique */
.vc_row.wpb_row.vc_row-fluid.wpex-relative.vc-has-max-width.vc-max-width-80.wpex-vc_row-mx-auto {
    margin-left: 0 !important;
    margin-right: 0 !important;
}

/* S'assurer que les cards n'ont pas de margin, uniquement gap */
.hektor-resultats-grid .hektor-template-47-direct,
.hektor-resultats-grid .hektor-template-wrapper {
    margin: 0 !important;
}

/* SUPPRESSION COMPLÈTE DE TOUS LES PADDINGS INTERNES POUR ALIGNEMENT STRICT */
.hektor-template-47-direct,
.hektor-template-wrapper,
.hektor-template-47-direct>*,
.hektor-template-wrapper>*,
.hektor-template-47-direct .hektor-template-47-content,
.hektor-template-wrapper .hektor-template-47-content {
    padding: 0 !important;
    margin: 0 !important;
}

/* === EXCEPTION IMPORTANTE : NE PAS AFFECTER LA PAGE DE DÉTAIL === */
/* Les éléments de la page annonce-detail doivent garder leur comportement normal */
.hektor-3images-container,
.hektor-3images-container *,
.hektor-main-image,
.hektor-main-image *,
.hektor-secondary-images,
.hektor-secondary-images *,
.hektor-small-image,
.hektor-small-image *,
/* === PROTECTION SPÉCIFIQUE POUR LA PAGE DE DÉTAIL === */
/* Protection seulement pour les containers qui sont dans le contexte template 47 */
.hektor-template-47-direct .hektor-image-container,
.hektor-template-wrapper .hektor-image-container {
    /* Annuler les styles template 47 sur les containers de lightbox page détail */
    aspect-ratio: unset !important;
    overflow: visible !important;
    position: static !important;
    background: transparent !important;
}

/* Mais préserver les propriétés essentielles pour la lightbox */
.hektor-3images-container .hektor-image-container,
.hektor-main-image .hektor-image-container,
.hektor-small-image .hektor-image-container {
    cursor: pointer !important;
    position: relative !important;
}

.hektor-3images-container .hektor-image-container img,
.hektor-main-image .hektor-image-container img,
.hektor-small-image .hektor-image-container img {
    cursor: pointer !important;
    display: block !important;
}

/* === SÉPARATEURS ET FORMATAGE === */
.hektor-template-wrapper .hektor-separator {
    margin: 0 4px;
    color: #6b7280;
}

.hektor-template-wrapper .hektor-price-value {
    font-weight: 700;
    color: #1f2937;
}

/* === RESPONSIVE - MAINTIEN DU FORMAT 2/3 - 1/3 === */
/* Tablette */
@media (max-width: 768px) {
    .hektor-template-wrapper .hektor-template-47-image-container {
        height: 180px;
        /* Légèrement plus petit sur tablette */
    }

    .hektor-template-wrapper .hektor-template-47-image-container img,
    .hektor-template-wrapper img {
        height: 180px !important;
        object-fit: cover !important;
    }
}

/* Mobile */
@media (max-width: 480px) {
    .hektor-template-wrapper .hektor-template-47-image-container {
        height: 160px;
        /* Plus compact sur mobile mais garde le ratio */
    }

    .hektor-template-wrapper .hektor-template-47-image-container img,
    .hektor-template-wrapper img {
        height: 160px !important;
        object-fit: cover !important;
    }
}


.hektor-template-47-info {
    margin-top: 10px !important;
    margin-bottom: 20px !important;
}

/* === CORRECTION SPÉCIFIQUE POUR LA LIGHTBOX PAGE DÉTAIL === */
/* S'assurer que les éléments de lightbox sur annonce-detail fonctionnent */
.hektor-3images-container .hektor-lightbox-trigger,
.hektor-3images-container .hektor-image-container,
.hektor-main-image a,
.hektor-small-image a {
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: auto !important;
    position: relative !important;
}

/* Forcer la visibilité des liens transparents */
.hektor-main-image a,
.hektor-small-image a {
    display: block !important;
    width: 100% !important;
    height: 100% !important;
}