/**
 * Styles pour le widget 2IMG
 * Plugin: 2IMG - Widget Deux Images
 */

/* Container principal */
.twoimg-container {
    display: flex;
    width: 100%;
    position: relative;
    min-height: 200px; /* Hauteur minimale par défaut */
}

/* Assurer que le border-radius du conteneur masque les débordements */
.twoimg-container[style*="border-radius"] {
    overflow: hidden;
}

/* Éviter les débordements des images quand le conteneur a un border-radius */
.twoimg-container[style*="border-radius"] .twoimg-image {
    overflow: hidden;
}

.twoimg-container[style*="border-radius"] .twoimg-image img {
    border-radius: 0; /* Supprimer le border-radius des images si le conteneur en a un */
}

/* Disposition horizontale (par défaut) */
.twoimg-container.horizontal {
    flex-direction: row;
    align-items: stretch;
}

/* Disposition verticale */
.twoimg-container.vertical {
    flex-direction: column;
    align-items: stretch;
}

/* Disposition image unique */
.twoimg-container.single-image {
    justify-content: center;
    align-items: center;
}

.twoimg-container.single-image .twoimg-image {
    flex: 0 0 auto;
    width: 100%;
    max-width: 100%;
}

.twoimg-container.single-image.ratio-single .twoimg-image {
    flex: 1 1 100%;
}

/* Images */
.twoimg-image {
    position: relative;
    overflow: hidden;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 150px; /* Hauteur minimale par défaut */
}

.twoimg-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center center;
    display: block;
}

/* Quand le conteneur a une hauteur définie, s'assurer que les images la respectent */
.twoimg-container[style*="height"] .twoimg-image {
    height: 100%;
    flex: 1;
}

.twoimg-container[style*="height"] .twoimg-image img {
    height: 100%;
    width: 100%;
    object-fit: cover;
    object-position: center;
}

/* Amélioration pour éviter le crop - utiliser contain si nécessaire */
.twoimg-container[style*="height"].fit-contain .twoimg-image img {
    object-fit: contain;
}

/* Forcer la hauteur du conteneur à être respectée */
.twoimg-container[style*="height"] {
    overflow: hidden;
}

.twoimg-image a {
    display: block;
    width: 100%;
    height: 100%;
}

/* Ratios pour disposition horizontale */
.twoimg-container.horizontal.ratio-50_50 .twoimg-image {
    flex: 1 1 50%;
}

.twoimg-container.horizontal.ratio-60_40 .twoimg-image-1 {
    flex: 1 1 60%;
}
.twoimg-container.horizontal.ratio-60_40 .twoimg-image-2 {
    flex: 1 1 40%;
}

.twoimg-container.horizontal.ratio-40_60 .twoimg-image-1 {
    flex: 1 1 40%;
}
.twoimg-container.horizontal.ratio-40_60 .twoimg-image-2 {
    flex: 1 1 60%;
}

.twoimg-container.horizontal.ratio-70_30 .twoimg-image-1 {
    flex: 1 1 70%;
}
.twoimg-container.horizontal.ratio-70_30 .twoimg-image-2 {
    flex: 1 1 30%;
}

.twoimg-container.horizontal.ratio-30_70 .twoimg-image-1 {
    flex: 1 1 30%;
}
.twoimg-container.horizontal.ratio-30_70 .twoimg-image-2 {
    flex: 1 1 70%;
}

/* Ratios pour disposition verticale */
.twoimg-container.vertical.ratio-50_50 .twoimg-image {
    flex: 1 1 50%;
}

.twoimg-container.vertical.ratio-60_40 .twoimg-image-1 {
    flex: 1 1 60%;
}
.twoimg-container.vertical.ratio-60_40 .twoimg-image-2 {
    flex: 1 1 40%;
}

.twoimg-container.vertical.ratio-40_60 .twoimg-image-1 {
    flex: 1 1 40%;
}
.twoimg-container.vertical.ratio-40_60 .twoimg-image-2 {
    flex: 1 1 60%;
}

.twoimg-container.vertical.ratio-70_30 .twoimg-image-1 {
    flex: 1 1 70%;
}
.twoimg-container.vertical.ratio-70_30 .twoimg-image-2 {
    flex: 1 1 30%;
}

.twoimg-container.vertical.ratio-30_70 .twoimg-image-1 {
    flex: 1 1 30%;
}
.twoimg-container.vertical.ratio-30_70 .twoimg-image-2 {
    flex: 1 1 70%;
}

/* Effets de survol */

/* Effet Zoom */
.twoimg-container.hover-zoom .twoimg-image img:hover {
    transform: scale(1.1);
}

/* Effet Fondu */
.twoimg-container.hover-fade .twoimg-image img:hover {
    opacity: 0.8;
}

/* Effet Glissement */
.twoimg-container.hover-slide .twoimg-image {
    overflow: hidden;
}

.twoimg-container.hover-slide .twoimg-image img:hover {
    transform: translateX(10px);
}

.twoimg-container.vertical.hover-slide .twoimg-image img:hover {
    transform: translateY(10px);
}

/* Effet Rotation */
.twoimg-container.hover-rotate .twoimg-image img:hover {
    transform: rotate(2deg) scale(1.05);
}

/* Styles spécifiques selon le nombre d'images */
.twoimg-container.image-count-1 {
    justify-content: center;
}

.twoimg-container.image-count-1 .twoimg-image {
    max-width: 100%;
}

.twoimg-container.image-count-2 .twoimg-image {
    /* Styles pour deux images - utilise les ratios définis */
}

/* Amélioration de l'affichage d'une seule image */
.twoimg-image.single-image-display {
    width: 100%;
    display: flex;
    justify-content: center;
    align-items: center;
}

.twoimg-image.single-image-display img {
    width: 100%;
    height: auto;
    object-fit: cover;
}

/* Responsive Design - Règles de base uniquement */
/* Les contrôles responsive d'Elementor gèrent maintenant la disposition */

@media (max-width: 768px) {
    /* Règles de fallback uniquement si aucun contrôle responsive n'est défini */
    .twoimg-container:not([class*="elementor-md-"]):not([class*="elementor-sm-"]) {
        /* Ces règles ne s'appliquent que si l'utilisateur n'a pas défini de valeurs responsive */
    }
    
    /* Sur mobile, une seule image prend toute la largeur */
    .twoimg-container.single-image .twoimg-image {
        width: 100%;
    }
}

@media (max-width: 480px) {
    .twoimg-image {
        min-height: 150px;
    }
}

/* Amélioration de l'accessibilité */
.twoimg-image a:focus {
    outline: 2px solid #0073aa;
    outline-offset: 2px;
}

.twoimg-image a:focus img {
    opacity: 0.9;
}

/* Animation de chargement */
.twoimg-image img {
    transition: opacity 0.3s ease;
}

.twoimg-image img[src=""] {
    opacity: 0;
}

/* Styles pour l'éditeur Elementor */
.elementor-editor-active .twoimg-container {
    min-height: 200px;
}

.elementor-editor-active .twoimg-image {
    min-height: 200px;
    background-color: #f0f0f0;
    border: 1px dashed #ccc;
}

.elementor-editor-active .twoimg-image:empty::before {
    content: "Image";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    color: #999;
    font-size: 14px;
}

/* Optimisations de performance */
.twoimg-image img {
    will-change: transform;
    backface-visibility: hidden;
}

/* Support pour les images WebP */
.twoimg-image img[src$=".webp"] {
    image-rendering: -webkit-optimize-contrast;
    image-rendering: crisp-edges;
}

/* Styles pour les bordures arrondies personnalisées */
.twoimg-image.custom-radius {
    border-radius: inherit;
}

.twoimg-image.custom-radius img {
    border-radius: inherit;
}

/* Support pour les filtres CSS */
.twoimg-image.filter-grayscale img {
    filter: grayscale(100%);
}

.twoimg-image.filter-grayscale img:hover {
    filter: grayscale(0%);
}

.twoimg-image.filter-sepia img {
    filter: sepia(100%);
}

.twoimg-image.filter-sepia img:hover {
    filter: sepia(0%);
}

/* Animation de pulsation pour les liens */
.twoimg-image a:hover {
    animation: pulse 1s infinite;
}

@keyframes pulse {
    0% {
        box-shadow: 0 0 0 0 rgba(0, 115, 170, 0.4);
    }
    70% {
        box-shadow: 0 0 0 10px rgba(0, 115, 170, 0);
    }
    100% {
        box-shadow: 0 0 0 0 rgba(0, 115, 170, 0);
    }
}