.elementor-2765 .elementor-element.elementor-element-ae36918{--display:flex;--flex-direction:column;--container-widget-width:100%;--container-widget-height:initial;--container-widget-flex-grow:0;--container-widget-align-self:initial;--flex-wrap-mobile:wrap;}.elementor-2765 .elementor-element.elementor-element-046c791{--display:flex;--min-height:250px;--flex-direction:row;--container-widget-width:initial;--container-widget-height:100%;--container-widget-flex-grow:1;--container-widget-align-self:stretch;--flex-wrap-mobile:wrap;}.elementor-2765 .elementor-element.elementor-element-046c791:not(.elementor-motion-effects-element-type-background), .elementor-2765 .elementor-element.elementor-element-046c791 > .elementor-motion-effects-container > .elementor-motion-effects-layer{background-image:url("https://xone.fr/wp-content/uploads/19406.jpg");background-size:cover;}.elementor-2765 .elementor-element.elementor-element-44532f6{--display:flex;}/* Start custom CSS for html, class: .elementor-element-3efe523 *//* =======================================
   1. MISE EN PAGE DE LA GRILLE AVEC FLEXBOX
   Assure l'affichage en colonnes flexibles
   ======================================= */
.events-month-grid {
    display: flex;
    flex-wrap: wrap; /* Permet aux vignettes de passer à la ligne */
    gap: 30px; /* Espace entre les vignettes */
    margin-bottom: 50px; 
    width: 100%;
}

/* =======================================
   2. STYLISATION DU BLOC ÉVÉNEMENT (LA VIGNETTE)
   Définit la taille de chaque vignette pour afficher 3 par ligne.
   ======================================= */
.event-vignette {
    /* Calcule la largeur pour 3 colonnes moins l'espace (30px de gap) */
    width: calc(33.33% - 20px); 
    
    display: flex; 
    flex-direction: column; 
    border: 1px solid #e0e0e0;
    padding: 15px;
    border-radius: 12px;
    box-shadow: 0 4px 10px rgba(0,0,0,0.08);
    background-color: #ffffff;
    transition: transform 0.2s;
}

.event-vignette:hover {
    transform: translateY(-3px);
}

/* =======================================
   3. TAILLE ET CENTRAGE DE L'IMAGE
   ======================================= */
.event-image-container {
    height: 150px; 
    overflow: hidden; 
    margin-bottom: 15px;
    border-radius: 10px;
    
    /* Centrage Flexbox pour l'image */
    display: flex; 
    justify-content: center;
    align-items: center;
    background-color: #f8f8f8; 
}

/* 4. IMAGE ELLE-MÊME (affichage en entier) */
.event-image-vignette {
    object-fit: contain; 
    width: 100%; 
    height: 100%;
    margin: 0; 
    border-radius: 10px;
}

/* =======================================
   5. ADAPTATION MOBILE (Afficher 1 colonne)
   ======================================= */
@media (max-width: 768px) {
    .event-vignette {
        width: 100%; /* La vignette prend toute la largeur sur mobile */
    }
}/* End custom CSS */