/* Conteneur principal */
.social_wall_container {
    padding: 0;
    position: relative;
    --carousel-base-aspect: 1.25;
    --carousel-item-width: 100%;
    --carousel-items-desktop: 1;
    --carousel-items-laptop: 1;
    --carousel-items-tablet: 1;
    --carousel-items-mobile: 1;
    --current-carousel-items: 1;
    --carousel-vertical-space: 0px;
}

.social_wall_container .social_wall_wrapper {
    width: 100%;
}

.social_wall_container.social_wall_mode_list .social_wall_wrapper {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
    grid-gap: 30px;
    grid-auto-flow: dense;
}

/* Chaque 6e élément prend plus de place */
.social_wall_container.social_wall_mode_list .social_wall_item:nth-child(6n+1) {
    grid-column-end: span 2;
    grid-row-end: span 2;
    align-content: center;
    align-items: center;
}

.social_wall_container.social_wall_mode_carousel {
    overflow: hidden;
    --current-carousel-items: var(--carousel-items-desktop, 1);
    --carousel-item-width: calc(100% / var(--current-carousel-items, 1));
    padding-top: var(--carousel-vertical-space, 0px);
    padding-bottom: var(--carousel-vertical-space, 0px);
}

body[data-elementor-device-mode='laptop'] .social_wall_container.social_wall_mode_carousel {
    --current-carousel-items: var(--carousel-items-laptop, var(--carousel-items-desktop, 1));
}

body[data-elementor-device-mode='tablet'] .social_wall_container.social_wall_mode_carousel {
    --current-carousel-items: var(--carousel-items-tablet, var(--carousel-items-laptop, var(--carousel-items-desktop, 1)));
}

body[data-elementor-device-mode='mobile'] .social_wall_container.social_wall_mode_carousel {
    --current-carousel-items: var(--carousel-items-mobile, var(--carousel-items-tablet, var(--carousel-items-laptop, var(--carousel-items-desktop, 1))));
}

/* Style de chaque élément */
.social_wall_container .social_wall_item {
    padding-bottom: calc(var(--carousel-item-width, 100%) * var(--carousel-base-aspect, 1.25));
    position: relative;
    overflow: hidden;
    border-radius: 15px;
}

.social_wall_container.social_wall_mode_carousel .social_wall_item {
    height: auto;
    padding-bottom: calc(var(--carousel-item-width, 100%) * var(--carousel-base-aspect, 1.25));
}

.social_wall_item.is-hidden {
    display: none !important;
}

/* Positionnement de l'image et de l'overlay */
.social_wall_container .social_wall_item img,
.social_wall_item_overlay {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    margin: auto;
}

.social_wall_container .social_wall_item img {
    object-fit: cover;
}

/* Overlay au survol */
.social_wall_item .social_wall_item_overlay {
    background: var(--overlay-background-color, var(--e-global-color-eac0328));
    z-index: 1;
    color: var(--overlay-text-color, var(--e-global-color-8b7710f));
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: row;
    column-gap: 10px;
    transition: .2s ease-in-out;
    opacity: 0;
    font-family: var(--e-global-typography-text-font-family), Sans-serif;
    font-size: 14px;
    font-weight: var(--e-global-typography-accent-font-weight);
}

/* Style des likes et des commentaires */
.social_wall_item_likes,
.social_wall_item_comments {
    display: flex;
    align-items: center;
    color: inherit;
    /* Utilise la couleur définie dans l'overlay */
}

/* Style des icônes SVG */
.social_wall_item_likes svg,
.social_wall_item_comments svg {
    width: 16px;
    height: auto;
    margin-right: 5px;
    fill: currentColor;
    /* Assure que la couleur du SVG suit la propriété 'color' */
}

/* Effet au survol pour afficher l'overlay */
body[data-elementor-device-mode='desktop'] .social_wall_item:hover .social_wall_item_overlay,
body[data-elementor-device-mode='laptop'] .social_wall_item:hover .social_wall_item_overlay {
    opacity: 1;
}

/* Ajustements pour les différents modes d'appareil */
body[data-elementor-device-mode='laptop'] .social_wall_container.social_wall_mode_list {
    grid-gap: 15px;
}

body[data-elementor-device-mode='mobile'] .social_wall_container.social_wall_mode_list .social_wall_wrapper {
    display: block;
}

body[data-elementor-device-mode='mobile'] .social_wall_container.social_wall_mode_list .social_wall_item {
    padding-bottom: inherit;
    display: inline-block;
    height: 56vw;
    width: calc(50% - 14px);
    margin: 5px 7px;
}

/* body[data-elementor-device-mode='mobile'] .social_wall_container .social_wall_item:nth-child(5n) {
    height: 118vw;
    width: calc(100% - 14px);
} */