/* Animated Image Box CSS */

.essb-image-box-wrapper {
    display: block;
}

.essb-image-box-link {
    text-decoration: none;
    display: block;
}

.essb-image-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease, border-radius 0.3s ease; /* Ajout de la transition border-radius */
}

.essb-image-box {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    overflow: hidden;
    transition: all 0.3s ease;
}

/* Pseudo-élément pour l'animation de fond au hover - sur la boîte mais part de l'icône */
.essb-image-box::after {
    content: '';
    position: absolute;
    bottom: 20px; /* Même position que l'icône */
    left: 20px; /* Même position que l'icône */
    width: 50px; /* Taille de départ proche de l'icône */
    height: 50px;
    border-radius: 50%; /* Cercle */
    transform: scale(0);
    transition: transform 0.6s ease;
    z-index: 0;
    pointer-events: none;
}

/* Au hover, le cercle s'agrandit massivement */
.essb-image-box:hover::after {
    transform: scale(30); /* S'agrandit énormément pour couvrir toute la boîte */
}

/* Enlever l'ancien pseudo-élément de l'icône */
.essb-box-icon::before {
    display: none;
}

/* Contenu */
.essb-box-content {
    position: relative;
    z-index: 1;
    text-align: center;
    width: 100%;
    transition: all 0.3s ease;
}

/* Image */
.essb-box-image {
    display: inline-block;
    max-width: 100%;
}

.essb-box-image img {
    display: block;
    width: 100%;
    height: auto;
}

/* Title */
.essb-box-title {
    margin: 0;
    transition: color 0.3s ease;
}

/* Icon en bas à gauche */
.essb-box-icon {
    position: absolute;
    bottom: 20px;
    left: 20px;
    z-index: 2;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s ease;
}

.essb-box-icon i,
.essb-box-icon svg {
    display: block;
    line-height: 1;
}

.essb-box-icon svg path {
    fill: currentColor !important;
}

.essb-box-icon svg {
    fill: currentColor !important;
}

/* Au hover, l'icône peut légèrement bouger (optionnel) */
.essb-image-box:hover .essb-box-icon {
    transform: scale(1.1);
}