/* ==========================================
   SECTION
========================================== */

#actu-scroll .carousel-item .separator {display:none!important;
}


.actu-plus {display:none; }

.carousel-section {
    width: 100%;
    max-width: 100%;

    padding: 60px 0;

    overflow: hidden;

    position: relative;
}


/* ==========================================
   HEADER
========================================== */

.carousel-header {
    width: 100%;

    padding: 0 60px 20px;

    box-sizing: border-box;

    display: flex;
    justify-content: flex-end;
    align-items: center;
}

.carousel-header h2 {
	font-family: 'metropolislight'!IMPORTANT;
  font-size: 3em !important;
  line-height: 47px !important;
  text-transform: uppercase !important;
  padding: 20px;
    padding-top: 20px;
    padding-bottom: 20px;
  padding-top: 0px;
  color: #000;

}

.date-categorie {
    display: flex !important;
    align-items: center;
    gap: 10px;
    flex-wrap: nowrap !important;
    white-space: nowrap !important;
}

.date-categorie .actu-date,
.date-categorie i {
    display: inline-block !important;
    white-space: nowrap !important;
    flex-shrink: 0;
}

/* ==========================================
   NAVIGATION
========================================== */
https://placehold.co/800x500
.carousel-navigation {
    display: flex;
    gap: 10px;
}

.carousel-btn {
    width: 46px;
    height: 46px;

    border: 0;
    border-radius: 50%;

    background: #E11837;
    color: #fff;

    cursor: pointer;

    font-size: 20px;

    display: flex;
    align-items: center;
    justify-content: center;

    transition:
        transform .3s ease,
        opacity .3s ease;
		margin:5px;
}

.carousel-btn:hover {
    transform: scale(1.08);
}


/* ==========================================
   CONTAINER
========================================== */

.carousel-container {

    width: 100%;

    overflow-x: auto;
    overflow-y: hidden;

    scroll-behavior: smooth;

    scroll-snap-type: x mandatory;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;

    /*
       IMPORTANT POUR TOUCHPAD
       ET SMARTPHONE
    */

    touch-action: pan-x;

    cursor: grab;
}

.carousel-container:active {
    cursor: grabbing;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   TRACK
========================================== */

.carousel-track {

    display: flex;

    gap: 20px;

    width: max-content;

    padding-left: 40px;
    padding-right: 40px;

    box-sizing: border-box;
}


/* ==========================================
   BLOCS
========================================== */

.carousel-item {

    width: 28vw;
    min-width: 28vw;

    height: 450px;

    padding: 35px;

    box-sizing: border-box;

 

    border-radius: 20px;

    scroll-snap-align: start;

    opacity: 1;

    transform: scale(1);

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        opacity .4s ease,
        transform .4s ease,
        box-shadow .4s ease;
}


/* ==========================================
   BLOCS PARTIELS
========================================== */

.carousel-item.is-partial {

    opacity: .4;

    transform: scale(.96);

}


/* ==========================================
   CONTENU
========================================== */

.carousel-item span {

    display: block;

    margin-bottom: 20px;

    font-size: 14px;

    font-weight: 700;

    opacity: .5;
}

.carousel-item h3 {

    margin: 0 0 15px;

    font-size: 28px;

    line-height: 1.1;
}

.carousel-item p {

    margin: 0;

    line-height: 1.6;
}


/* ==========================================
   FONDU GAUCHE + DROITE
========================================== */

.carousel-container {

    position: relative;
}


/*
   On utilise la section pour créer
   les zones de fondu.
*/

.carousel-section::before,
.carousel-section::after {

    content: "";

    position: absolute;

    top: 110px;
    bottom: 0;

    width: 90px;

    z-index: 10;

    pointer-events: none;

}


/* GAUCHE */

.carousel-section::before {

    left: 0;

    background:
        linear-gradient(
            to right,
            rgba(255,255,255,1),
            rgba(255,255,255,0)
        );
}


/* DROITE */

.carousel-section::after {

    right: 0;

    background:
        linear-gradient(
            to left,
            rgba(255,255,255,1),
            rgba(255,255,255,0)
        );
}


/* ==========================================
   TABLETTE
========================================== */

@media (max-width: 1000px) {

    .carousel-item {

        width: 40vw;
        min-width: 40vw;

    }

}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .carousel-section {

        padding: 40px 0;

    }

    .carousel-header {

        padding-left: 20px;
        padding-right: 20px;

    }

    .carousel-track {

        padding-left: 20px;
        padding-right: 20px;

    }

    .carousel-item {

        width: 78vw;
        min-width: 78vw;

        height: 320px;

        padding: 25px;

    }

    .carousel-section::before,
    .carousel-section::after {

        width: 45px;

    }

}



.carousel-track {
    display: flex;
    gap: 20px;
    width: max-content;

    padding-left: 40px;
    padding-right: 40px;

    box-sizing: border-box;
}

/* Empêche le navigateur de casser
   l'animation lors du passage 10 → 1 */
.carousel-container {
    scroll-behavior: smooth;
    overflow-x: auto;
    overflow-y: hidden;

    scroll-snap-type: x mandatory;

    touch-action: pan-x;

    -webkit-overflow-scrolling: touch;

    scrollbar-width: none;
}

.carousel-container::-webkit-scrollbar {
    display: none;
}


/* ==========================================
   IMAGE
========================================== */

.carousel-image {

    width: 100%;
    height: 200px;

    display: block;

    object-fit: cover;

    border-radius: 12px;

    margin-bottom: 25px;

}


/* ==========================================
   CONTENU
========================================== */

.carousel-content {

    display: flex;

    flex-direction: column;

}


/* ==========================================
   DATE
========================================== */

.carousel-content time {

    display: block;

    margin-bottom: 10px;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;

    color: #ffffff;

    opacity: .75;

}


/* ==========================================
   TITRE H2
========================================== */

.carousel-content h2 {

    margin: 0 0 12px;

    font-size: 24px;

    line-height: 1.15;

    color: #ffffff;

}


/* ==========================================
   PARAGRAPHE
========================================== */

.carousel-content p {

    margin: 0;

    font-size: 15px;

    line-height: 1.5;

    color: #ffffff;

}


/* ==========================================
   BLOC
========================================== */

.carousel-item {

    overflow: hidden;



    color: #ffffff;

}


/* ==========================================
   IMAGE SUR MOBILE
========================================== */

@media (max-width: 700px) {

    .carousel-image {

        height: 160px;

    }

    .carousel-content h2 {

        font-size: 22px;

    }

}


.carousel-item {
    width: 28vw;
    min-width: 28vw;

    height: 600px;

    padding: 0;

    box-sizing: border-box;

    border: 2px solid #E11837;
    color: #000;

    border-radius: 20px;

    overflow: hidden;

    scroll-snap-align: start;

    opacity: 1;

    transform: scale(1);

    cursor: pointer;

    user-select: none;

    -webkit-tap-highlight-color: transparent;

    transition:
        opacity .4s ease,
        transform .4s ease,
        box-shadow .4s ease;
}


/* ==========================================
   IMAGE SANS PADDING
========================================== */

.carousel-image {
    width: 100%;
    height: 300px;

    display: block;

    object-fit: cover;

    margin: 0;

    padding: 0;

    border-radius: 0;
}


/* ==========================================
   CONTENU AVEC PADDING
========================================== */

.carousel-content {
    padding: 25px 30px 30px;

    box-sizing: border-box;

    display: flex;
    flex-direction: column;
}


/* ==========================================
   DATE
========================================== */

.carousel-content time {
    display: block;

    margin-bottom: 10px;

    font-size: 12px;

    line-height: 1.2;

    font-weight: 600;

    color: #000;

    opacity: .75;
}


/* ==========================================
   TITRE
========================================== */

.carousel-content h2 {
    margin: 0 0 12px;

    font-size: 24px;

    line-height: 1.15;

    color: #000;
}


/* ==========================================
   PARAGRAPHE
========================================== */

.carousel-content p {
    margin: 0;

    font-size: 15px;

    line-height: 1.5;

    color: #000;
}


/* ==========================================
   BLOCS PARTIELS
========================================== */

.carousel-item.is-partial {
    opacity: .4;

    transform: scale(.96);
}


/* ==========================================
   MOBILE
========================================== */

@media (max-width: 700px) {

    .carousel-content {
        padding: 20px 25px 25px;
    }

    .carousel-image {
        height: 160px;
    }

    .carousel-content h2 {
        font-size: 22px;
    }

}