/* CSS pour contrôler cadre et image indépendamment */
.logosite {
    --image-rotation: 0deg;   /* Angle de l'image à l'intérieur */
    transform: rotate(var(--image-rotation)) !important;
    /* Cadre losange par défaut (45°) */
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important;
}

/* Classes pour différentes orientations du CADRE */
.logosite.cadre-carre { 
    clip-path: polygon(0% 0%, 100% 0%, 100% 100%, 0% 100%) !important; 
}
.logosite.cadre-losange { 
    clip-path: polygon(50% 0%, 100% 50%, 50% 100%, 0% 50%) !important; 
}
.logosite.cadre-losange-plat { 
    clip-path: polygon(25% 0%, 75% 0%, 100% 50%, 75% 100%, 25% 100%, 0% 50%) !important; 
}

/* Classes pour différentes orientations de l'IMAGE */
.logosite.image-0 { --image-rotation: 0deg; }
.logosite.image-15 { --image-rotation: 15deg; }
.logosite.image-30 { --image-rotation: 30deg; }
.logosite.image-45 { --image-rotation: 45deg; }
.logosite.image-60 { --image-rotation: 60deg; }
.logosite.image-90 { --image-rotation: 90deg; }
.logosite.image-moins15 { --image-rotation: -15deg; }
.logosite.image-moins30 { --image-rotation: -30deg; }
.logosite.image-moins45 { --image-rotation: -45deg; }

/* Les media queries héritent maintenant du système de classes */

/* CSS pour la mosaïque d'images */
.container-with-mosaic {
    display: flex;
    align-items: stretch;
    gap: 30px;
    margin-bottom: 30px;
    min-height: 400px;
}

.text-content {
    flex: 1;
    min-width: 0;
    padding-right: 20px;
}

.photo-mosaic {
    flex: 0 0 35%;
    max-width: 35%;
    display: flex;
    flex-direction: column;
    gap: 12px;
    min-height: 300px;
    max-height: 500px;
    height: auto;
    border-radius: 12px;
    overflow: hidden;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.1);
    padding: 12px;
    align-content: stretch;
}

.mosaic-item {
    position: relative;
    overflow: hidden;
    border-radius: 8px;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
    flex: 1;
    min-height: 120px;
    max-height: 180px;
}

.mosaic-item:hover {
    transform: scale(1.05);
    box-shadow: 0 8px 25px rgba(0, 0, 0, 0.2);
    z-index: 10;
}



.mosaic-item:hover img {
    transform: scale(1.1);
}

/* Différentes tailles pour créer un effet dynamique en colonne */
.mosaic-item.large {
    flex: 1.5;
    max-height: 220px;
}

.mosaic-item.tall {
    flex: 1.3;
    max-height: 200px;
}

.mosaic-item.wide {
    flex: 1.2;
    max-height: 190px;
}

/* Adaptation mobile */
@media (max-width: 992px) {
    .container-with-mosaic {
        flex-direction: column;
        gap: 20px;
    }
    
    .photo-mosaic {
        flex: 1;
        max-width: 100%;
        min-height: 200px;
        max-height: 300px;
        gap: 10px;
        padding: 10px;
    }
    
    .mosaic-item {
        min-height: 80px;
        max-height: 120px;*/
    }
    
    .mosaic-item.large {
        flex: 1.3;
        max-height: 140px;
    }
    
    .mosaic-item.tall {
        flex: 1.2;
        max-height: 130px;
    }
    
    .mosaic-item.wide {
        flex: 1.1;
        max-height: 125px;
    }
    
    .text-content {
        padding-right: 10px;
    }
}

/* Amélioration pour une adaptation optimale de l'espace en colonne */
.photo-mosaic.fill-space {
    height: 100%;
    max-height: none;
    justify-content: space-between;
}

.photo-mosaic.aspect-ratio {
    height: auto;
    max-height: none;
    justify-content: flex-start;
}

/* Assurer que tous les éléments occupent leur espace */
.mosaic-item {
    display: flex;
    align-items: center;
    justify-content: center;
}

.mosaic-item img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform 0.3s ease;
    border-radius: 8px;
} 

@media (max-width: 767px) {
    .photo-mosaic {
        min-height: 200px;
        max-height: 300px;
        gap: 8px;
        padding: 8px;
    }
    
    .mosaic-item {
        min-height: 60px;
        max-height: 100px;
    }
    
    .mosaic-item.large {
        flex: 1.2;
        max-height: 115px;
    }
    
    .mosaic-item.tall {
        flex: 1.1;
        max-height: 110px;
    }
    
    .mosaic-item.wide {
        flex: 1.05;
        max-height: 105px;
    }
    
    .text-content {
        padding-right: 5px;
    }
}