/**
 * CSS pour montage 3 images - Template 111
 * Layout Bootstrap : 1 grande image (col-md-8) + 2 petites images empilées (col-md-4)
 * Usage avec les tags HEKTOR : {{hektor_bien_images_html[0]}}, {{hektor_bien_images_html[1]}}, {{hektor_bien_images_html[2]}}
 * Compatible avec les classes Bootstrap col-md-8 et col-md-4
 */

/* ===== CONTAINER PRINCIPAL BOOTSTRAP ===== */
.hektor-3images-container {
    /* Layout flexbox pour garantir l'affichage côte à côte */
    display: flex;
    flex-wrap: wrap;
    width: 100%;
    margin: 0;
    padding: 0;
    gap: 35px;
    /* Espacement augmenté à 35px pour plus d'aération */
}

/* ===== STYLES POUR LES VRAIES CLASSES WPBAKERY/VC ===== */
/* Style pour la colonne vc_col-sm-8 contenant la grande image */
.hektor-3images-container .vc_col-sm-8,
.hektor-3images-container .col-md-8,
.hektor-3images-main-column {
    flex: 0 0 calc(66.666667% - 17.5px);
    max-width: calc(66.666667% - 17.5px);
    padding: 0;
}

/* Style pour la colonne vc_col-sm-4 contenant les petites images */
.hektor-3images-container .vc_col-sm-4,
.hektor-3images-container .col-md-4,
.hektor-3images-secondary-column {
    flex: 0 0 calc(33.333333% - 17.5px);
    max-width: calc(33.333333% - 17.5px);
    padding: 0;
}

/* Supprime les styles par défaut des colonnes WPBakery pour un alignement parfait */
.hektor-3images-container .wpb_column.vc_column_container {
    margin-bottom: 0 !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* ===== GRANDE IMAGE - STYLE ===== */
.hektor-main-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: 520px;
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: block;
}

/* L'image est masquée, seul le lien est étiré */
.hektor-main-image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hektor-main-image img {
    opacity: 0;
    /* Image masquée mais toujours présente pour le lien */
    width: 100%;
    height: 100%;
    object-fit: fill;
    /* Force l'image à remplir l'espace, même si ça déforme ses proportions */
    display: block;
    /* Assure que l'image prend toute la largeur disponible */
}

/* Effet grisé au survol de la grande image */
.hektor-main-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.hektor-main-image:hover::before {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Liens dans la grande image */
.hektor-main-image a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    /* Changé de 'absolute' à 'relative' pour que le lien contienne l'image correctement */
    z-index: 3;
    /* Gardé pour les effets de survol ou autres éléments superposés */
    text-decoration: none;
    cursor: pointer;
}

/* ===== PETITES IMAGES - CONTAINER ===== */
.hektor-secondary-images {
    display: flex;
    flex-direction: column;
    height: 520px;
    /* Ajustée pour correspondre à la hauteur de la grande image */
    /* Même hauteur que la grande image */
    gap: 35px;
    /* Espacement entre les 2 petites images - augmenté à 35px */
}

/* ===== PETITES IMAGES - STYLE INDIVIDUEL ===== */
.hektor-small-image {
    position: relative;
    overflow: hidden;
    width: 100%;
    height: calc(50% - 17.5px);
    background-color: #f5f5f5;
    background-repeat: no-repeat;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* L'image est masquée, seul le lien est étiré */
.hektor-small-image a {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 2;
}

.hektor-small-image img {
    opacity: 0;
    width: 100%;
    height: 100%;
}

/* Effet grisé au survol des petites images */
.hektor-small-image::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background-color: rgba(0, 0, 0, 0);
    z-index: 1;
    transition: background-color 0.3s ease;
    pointer-events: none;
}

.hektor-small-image:hover::before {
    background-color: rgba(0, 0, 0, 0.3);
}

/* Liens dans les petites images */
.hektor-small-image a {
    display: block;
    width: 100%;
    height: 100%;
    position: relative;
    z-index: 3;
    text-decoration: none;
    cursor: pointer;
}

/* Masque les blocs de petites images si elles n'existent pas (le tag hektor n'a rien retourné) */
.hektor-small-image:not(:has(img)) {
    display: none;
}

/* ===== STYLES POUR LES IMAGES MANQUANTES ===== */
.hektor-no-image {
    width: 100%;
    height: 100%;
    background: linear-gradient(135deg, #f5f7fa 0%, #c3cfe2 100%);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #666;
    font-size: 14px;
}

.hektor-no-image::before {
    content: "📷";
    font-size: 24px;
    margin-right: 8px;
}

/* ===== RESPONSIVE WPBAKERY/VC ===== */
/* Tablette et mobile - équivalent sm breakpoint WPBakery */
@media (max-width: 991.98px) {
    .hektor-3images-container {
        flex-direction: column;
        gap: 35px;
        /* Maintient l'espacement de 35px sur mobile */
    }

    .hektor-3images-container .vc_col-sm-8,
    .hektor-3images-container .vc_col-sm-4,
    .hektor-3images-container .col-md-8,
    .hektor-3images-container .col-md-4,
    .hektor-3images-main-column,
    .hektor-3images-secondary-column {
        flex: 0 0 100%;
        max-width: 100%;
        margin-bottom: 15px;
    }

    .hektor-secondary-images {
        flex-direction: row;
        height: 200px;
        gap: 35px;
        /* Espacement de 35px entre les petites images sur mobile */
    }

    .hektor-small-image {
        width: calc(50% - 17.5px);
        /* Ajusté pour le gap de 35px */
        height: 100%;
    }

    .hektor-main-image {
        height: 380px;
        /* Hauteur augmentée proportionnellement */
        margin-bottom: 15px;
    }
}

/* Mobile - équivalent xs breakpoint WPBakery */
@media (max-width: 575.98px) {
    .hektor-main-image {
        height: 320px;
        /* Hauteur augmentée proportionnellement */
    }

    .hektor-secondary-images {
        flex-direction: column;
        height: 300px;
        gap: 28px;
        /* Espacement légèrement réduit à 28px sur très petit écran */
    }

    .hektor-small-image {
        width: 100%;
        height: calc(50% - 14px);
        /* Ajusté pour le gap de 28px sur mobile */
    }
}

/* ===== ALIGNEMENT PARFAIT AVEC LES BLOCS WPBAKERY DU DESSOUS ===== */
/* Force l'alignement vertical parfait avec les autres rows WPBakery */
.hektor-3images-container.row {
    margin-left: 0 !important;
    margin-right: 0 !important;
    margin-bottom: 0 !important;
}

/* Alignement spécifique pour être au même niveau que les blocs "En bref" */
.hektor-3images-container+.row,
.hektor-3images-container+.wpb_row {
    margin-top: 0;
}

/* Supprime les marges par défaut de WPBakery qui peuvent interférer */
.hektor-3images-container.wpb_row {
    margin-bottom: 0 !important;
}

.hektor-3images-container .vc_column-inner {
    padding: 0 !important;
}

.hektor-image-container {
    width: 100%;
}

/* ===== BADGE DE NOMBRE D'IMAGES ===== */
.hektor-3images-container .hektor-image-count {
    position: absolute;
    bottom: 12px;
    right: 12px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 6px 10px;
    border-radius: 20px;
    font-size: 12px;
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 4px;
    z-index: 10;
    backdrop-filter: blur(2px);
    transition: all 0.2s ease;
}

.hektor-3images-container .hektor-image-count:hover {
    background: rgba(0, 0, 0, 0.8);
    transform: scale(1.05);
}

.hektor-3images-container .hektor-image-count svg {
    flex-shrink: 0;
    opacity: 0.9;
}


/* ===== STYLES RESPONSIVE POUR LE TEMPLATE 3 IMAGES HEKTOR ===== */
/* Masquer les petites images sur mobile pour le template [templatera id="111"] */
@media (max-width: 768px) {
    .hektor-secondary-images {
        display: none !important;
    }

    /* Ajuster la largeur de l'image principale sur mobile */
    .hektor-3images-container .vc_col-sm-8 {
        width: 100% !important;
        flex: 0 0 100% !important;
        max-width: 100% !important;
    }
}