.liste-evenements-grid
{
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
}
.liste-evenements-grid > a
{
    flex: 0 1 calc(25% - 15px);
    display: flex;
    flex-direction: column;
    height: 385px;
    background-size: cover;
    background-position: center center;
    position: relative;
    color: #fff !important;
    transition: all .3s;
    min-width: 280px;
}


/* EVENT SMALL */
.liste-evenements-grid > a.evenement-limite,
.liste-evenements-swiper .swiper-slide.evenement-limite
{
    height: 200px;
}
.liste-evenements-grid > a.evenement-limite h3,
.liste-evenements-swiper .swiper-slide.evenement-limite h3
{
    font-size: var(--e-global-typography-5a8d07b-font-size) !important;
}
.liste-evenements-grid > a.evenement-limite .evenement-item-link img,
.liste-evenements-swiper .swiper-slide.evenement-limite .evenement-item-link img
{
    display: none;
}
.liste-evenements-grid > a.evenement-limite .evenement-item-link:before,
.liste-evenements-swiper .swiper-slide.evenement-limite .evenement-item-link:before
{
    width: 60px;
    height: 60px;
}


.liste-evenements-swiper
{
    padding-right: 100px;
}
.liste-evenements-swiper a.swiper-slide
{
    display: flex;
    flex-direction: column;
    height: 385px;
    background-size: cover;
    background-position: center center;
    position: relative;
    color: #fff !important;
    transition: all .3s;
}

.liste-evenements-grid > a p,
.liste-evenements-swiper a p
{
    display: none;
}

.liste-evenements-grid > a:hover,
.liste-evenements-swiper a.swiper-slide:hover
{
    color: var(--e-global-color-accent) !important;
}
.liste-evenements-grid > a:hover h5,
.liste-evenements-swiper a.swiper-slide:hover h5
{
    background-color: var(--e-global-color-primary) !important;
}
.liste-evenements-grid > a:hover p,
.liste-evenements-swiper a.swiper-slide:hover p
{
    display: block;
}
.liste-evenements-grid > a:hover:before,
.liste-evenements-swiper a.swiper-slide:hover:before
{
    opacity: 1;
    background-color: #eff4f9;
}
.liste-evenements-grid > a:hover .evenement-item-text img,
.liste-evenements-swiper a.swiper-slide:hover .evenement-item-text img
{
    height: 0;
    opacity: 0;
}
.liste-evenements-grid > a:hover .evenement-item-current-label,
.liste-evenements-swiper a.swiper-slide:hover .evenement-item-current-label
{
    background-color: var(--e-global-color-primary);
    color: #fff;
}



.liste-evenements-grid .evenement-item .evenement-item-top,
.liste-evenements-grid .evenement-item .evenement-item-bottom,
.liste-evenements-swiper .evenement-item-top,
.liste-evenements-swiper .evenement-item-bottom
{
    position: relative;
    z-index: 9;
}
.liste-evenements-grid a:before, 
.liste-evenements-swiper a.swiper-slide:before
{
    content: "";
    position: absolute;
    inset: 0;
    background-color: var(--overlay-color, transparent);
    opacity: 0.5;
    z-index: 1;
    pointer-events: none;

    transition: all .3s;
}

.liste-evenements-grid .evenement-item-current-label,
.liste-evenements-swiper .evenement-item-current-label
{
    position: absolute; 
    top: -26px;
    background-color: var(--e-global-color-secondary);
    width: 100%;
    padding: 5px;
}
.liste-evenements-grid .evenement-item-top,
.liste-evenements-swiper .evenement-item-top
{
    padding: 15px;
    display: flex;
    gap: 5px;
}
.liste-evenements-grid .evenement-item-date,
.liste-evenements-swiper .evenement-item-date
{
    display: flex;
    align-items: center;
    flex-direction: column;
    gap: 3px;
    border-right: 1px solid;
    padding-right: 10px;
}
.liste-evenements-grid .evenement-item-date .evenement-item-date-day,
.liste-evenements-swiper .evenement-item-date .evenement-item-date-day
{
    font-size: var(--e-global-typography-secondary-font-size); 
}
.liste-evenements-grid .evenement-item-date .evenement-item-date-day,
.liste-evenements-swiper .evenement-item-date .evenement-item-date-day
{
    font-size: var(--e-global-typography-secondary-font-size); 
}
.liste-evenements-grid .evenement-item-date .evenement-item-date-month,
.liste-evenements-swiper .evenement-item-date .evenement-item-date-month
{ 
    text-transform: uppercase;
    font-size: var(--e-global-typography-fca9fd1-font-size);
}




.liste-evenements-grid .evenement-item-place,
.liste-evenements-swiper .evenement-item-place
{
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding-left: 10px;
}


.liste-evenements-grid .evenement-item-bottom,
.liste-evenements-swiper .evenement-item-bottom
{
    padding: 0 15px;
    flex: 1;
}
.liste-evenements-grid .evenement-item-bottom .evenement-item-text,
.liste-evenements-swiper .evenement-item-bottom .evenement-item-text
{
    height: 100%;
    display: flex;
    flex-direction: column;

    padding: 15px 0;
    border-top: 1px solid;
}
.liste-evenements-grid .evenement-item-bottom .evenement-item-text h5,
.liste-evenements-swiper .evenement-item-bottom .evenement-item-text h5
{
    font-size: var(--e-global-typography-ee2cb79-font-size);
    background-color: var(--e-global-color-secondary);
    color: var(--e-global-color-f2fa4b3);
    padding: 4px 6px;
    align-self: flex-start;
    margin-bottom: 10px;
    border-radius: 2px;
}
.liste-evenements-grid .evenement-item-bottom .evenement-item-text h3,
.liste-evenements-swiper .evenement-item-bottom .evenement-item-text h3
{
    font-size: var(--e-global-typography-b30f2d9-font-size);
}
.liste-evenements-grid .evenement-item-bottom .evenement-item-text p,
.liste-evenements-swiper .evenement-item-bottom .evenement-item-text p
{
    font-size: var(--e-global-typography-text-font-size);
    padding-top: 10px;
}
.liste-evenements-grid .evenement-item-bottom .evenement-item-text img,
.liste-evenements-swiper .evenement-item-bottom .evenement-item-text img
{
    height: 150px;
    object-fit: cover;
    object-position: bottom left;
    margin-left: -15px;
    margin-bottom: -16px;
    min-width: calc(100% + 30px);
    margin-top: auto;
    opacity: 1;
    transition: all .3s;
}


.evenement-item-link
{
    position: absolute;
    bottom: 0;
    right: 0;
    height: 100px;
    width: 100px;
}
.evenement-item-link:before
{
    content: "";
    position: absolute;
    bottom: -1px;
    right: -1px;
    width: 110px;
    height: 110px; 
    background: #ffffff;
    z-index: 9;
    clip-path: polygon(100% 0, 100% 100%, 0% 100%);
    transition: all .3s;
}
.evenement-item-link .evenement-item-link-plus, .evenement-item-link .evenement-item-link-icon
{
    position: absolute;
    transition: all .3s;
}
.evenement-item-link .evenement-item-link-plus
{
    bottom: 10px;
    left: 45px;
    z-index: 99;
    width: 24px;
}
.evenement-item-link .evenement-item-link-icon
{
    top: 42px;
    right: 10px;
    z-index: 99;
    rotate: 90deg;
    width: 34px;
}
.evenement-item:hover .evenement-item-link:before,
.liste-evenements-swiper .swiper-slide:hover .evenement-item-link:before
{
    width: 120px;
    height: 120px;
}
.evenement-item:hover .evenement-item-link img,
.liste-evenements-swiper .swiper-slide:hover .evenement-item-link img
{
    transform: scale(1.05);
}


.swiper.liste-evenements-swiper {
  overflow: hidden;
}




.liste-evenements-swiper .swiper-wrapper
{
    padding: 30px 0;
}
.liste-evenements-swiper .swiper-navigation 
{
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 10;
    height: 100%;
    background-color: var(--e-global-color-primary);
    box-shadow: -4px 0px 10px -5px #000;
    width: 80px;
}
.liste-evenements-swiper .swiper-button-prev,
.liste-evenements-swiper .swiper-button-next {
  position: static !important; /* override les styles par défaut Swiper */
  width: 40px;
  height: 40px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.liste-evenements-swiper .swiper-button-next:after,
.liste-evenements-swiper .swiper-button-prev:after
{
    font-size: 26px;
}




@media screen and (max-width: 1140px)
{
    .liste-evenements-grid > a
    {
        flex: 1 1 calc(33.3% - 23px);
        display: flex;
        flex-direction: column;
        height: 385px;
        background-size: cover;
        background-position: center center;
        position: relative;
        color: #fff !important;
        transition: all .3s;
    }
    
}

@media screen and (max-width: 600px)
{
    .liste-evenements-swiper
    {
        padding-right: 50px;
    }
    .liste-evenements-swiper .swiper.liste-evenements-swiper
    {
        overflow: visible !important;
    }
    .liste-evenements-swiper .swiper-navigation
    {
        display: none !important;
        /*
        width: 100%;
        height: 40px;
        bottom: -30px;
        transform: none;
        top: unset;
        left: 0;
        right: unset;
        box-shadow: unset; */
    }
    .swiper-button-prev, .swiper-button-next
    {
        /* position: inherit !important; */
    }
}