/**
 * MSP LISTE — Shortcode [msp_liste]
 * Skin : grille, cartes machine / réalisation / équipement / blog / pack,
 * mode "à la une" (duo). La STRUCTURE du mode carousel (track, largeur des
 * cards, dots, flèches) vit dans carousel-base.css — ici uniquement les
 * custom properties de personnalisation et le spécifique msp.
 *
 * Hook carousel : .msp-liste.msp-carousel (posé par msp-liste.php v2+).
 * La classe nue .carousel reste réservée aux rows Divi (carousel.css, dot.css).
 *
 * Dépendances (ordre d'enqueue) : carousel-base.css → msp-liste.css.
 * Le débord à droite du duo carousel (9.0) consomme --carousel-bleed,
 * mesuré par carousel.js (DivisCarousel) v1.3.0+.
 *
 * @version 1.0.0
 */

/* =============================================================================
   VARIABLES (scopées composant)
   ============================================================================= */

.msp-liste,
.msp-liste-duo {
    --msp-liste-accent: var(--msp-red, #e40e20);
    --msp-liste-texte: var(--msp-black, #222);
    --msp-liste-gris: var(--msp-grey-base);
    --msp-liste-bordure: #E6E6E6;
    --msp-liste-fond: #F5F5F5;
    --msp-liste-gap: 0.937rem;
    --msp-liste-blog-gap: 4.125rem;
    --msp-card-padding: 0 2.5rem 0 1.875rem;
}

.msp-liste-duo:not(.msp-liste-duo--carousel){
    padding-top: 1rem;
}

/* =============================================================================
   CONTAINER — MODE GRILLE
   ============================================================================= */

.msp-liste--grid {
    display: grid;
    gap: var(--msp-liste-gap);
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.msp-liste--cols-1 {
    grid-template-columns: minmax(0, 1fr);
}

.msp-liste--cols-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
}

.msp-liste--cols-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
}

.msp-liste--cols-4 {
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

.msp-liste--cols-5 {
    grid-template-columns: repeat(5, minmax(0, 1fr));
}

.msp-liste--cols-6 {
    grid-template-columns: repeat(6, minmax(0, 1fr));
}

/* ----------------------------------------------------------------
   Modules voisins d'une liste
   ---------------------------------------------------------------- */

.et_pb_section:has(.msp-liste) .et_pb_column .et_pb_button_module_wrapper {
    display: flex;
    justify-content: center;
    text-align: center;
}

/* Titres / textes centrés au-dessus des grilles (hors mode carousel) */

.et-db:not(.single-machine, .single-equipements, .single-pack) #et-boc .et-l
.et_pb_section:has(.msp-liste):not(:has(.msp-carousel, .carousel))
.et_pb_module:not(.et_pb_code)
.et_pb_text_inner {
    display: flex;
    flex-direction: column;
    justify-content: center;
}

.et-db #et-boc .et-l
.et_pb_section:has(.msp-liste):not(:has(.msp-carousel, .carousel))
.et_pb_module:not(.et_pb_code)
.et_pb_text_inner p {
    max-width: 837px;
    text-align: center;
}

/* =============================================================================
   CONTAINER — MODE CAROUSEL (skin)
   ============================================================================= */

.msp-liste.msp-carousel {
    --carousel-gap: var(--msp-liste-gap);
    --carousel-dots-gap: 0.5rem;
    --carousel-dots-mt: 2.312rem;
    --carousel-dot-size: 12px;
    --carousel-dot-bg: #D5D5D5;
    --carousel-dot-bg-active: var(--msp-black);
    --carousel-dot-scale: 1.2;
    --carousel-arrow-color: var(--msp-liste-texte);
    --carousel-arrow-hover: var(--msp-liste-accent);
}

.msp-liste.msp-carousel .msp-card {
    height: auto;
}

/* ----------------------------------------------------------------
    Utilitaire : dots en haut à droite
    Classe : msp-liste--dots-haut
   ---------------------------------------------------------------- */

.msp-liste--dots-haut.msp-carousel {
    padding-top: 2.25rem;
}

.msp-liste--dots-haut .carousel-dots {
    position: absolute;
    top: 0;
    right: 0;
    margin: 0;
}

/* =============================================================================
   CARTE — BASE
   ============================================================================= */

.msp-liste__item {
    min-width: 0;
}

.msp-card {
    display: flex;
    flex-direction: column;
    height: 100%;
    background: #fff;
}

.msp-card__link {
    display: flex;
    flex-direction: column;
    height: 100%;
    color: inherit;
    text-decoration: none;
    z-index: 1;
}

.msp-card__image {
    position: relative;
    overflow: hidden;
}

.msp-card__image img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
    aspect-ratio: 4 / 3;
    transition: transform 0.35s ease;
}

.msp-card__link:hover .msp-card__image img {
    transform: scale(1.04);
}

.msp-card__body {
    display: flex;
    flex: 1 1 auto;
    flex-direction: column;
    padding-top: 1.687rem;
}

/* Neutralise le padding Divi sur les h3 des cartes */

.et-db #et-boc .et-l .msp-card h3.msp-card__title {
    margin: 0;
    padding: 0;
}

.msp-card__title {
    margin: 0;
}

/* CTA générique */

.msp-card__cta {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.5rem;
    min-height: 2.812rem;
    margin-top: auto;
    padding: 0 1.875rem;
    color: var(--msp-liste-texte);
    background-color: var(--light-grey);
    font-size: 1.125rem;
    font-weight: 600;
    line-height: 1.33em;
}

.msp-card__cta::after {
    content: '\35';
    color: var(--msp-liste-accent);
    font-family: 'ETmodules';
    font-size: 1.5rem;
    font-weight: 700;
}

.msp-card__link:hover .msp-card__cta {
    color: var(--msp-white);
    background-color: var(--msp-liste-accent);
}

.msp-card__link:hover .msp-card__cta::after {
    color: var(--msp-white);
}

/* =============================================================================
   LAYOUT MACHINE — titre rouge, description, filet rouge en pied
   ============================================================================= */

.msp-card--machine {
    border-bottom: 3px solid var(--msp-liste-accent);
}

.msp-card--machine .msp-card__image {
    aspect-ratio: 4 / 3;
    background: var(--msp-liste-fond);
}

.msp-card--machine .msp-card__title {
    color: var(--msp-liste-accent);
    font-size: 1.05rem;
    font-weight: 700;
    line-height: 1.3;
}

.et-db #et-boc .et-l .msp-card--machine h3.msp-card__title {
    color: var(--msp-liste-accent);
}

.msp-card--machine .msp-card__desc {
    margin: 0.4rem 0 1rem;
    color: var(--msp-liste-texte);
    font-size: 1.1rem;
    line-height: 1.45;
    font-weight: 500;
}

.msp-card--machine .msp-card__body {
    padding: 1.625rem 1.437rem 2.125rem;
}

/* ----------------------------------------------------------------
   HOVER card-standard — voile sombre + icône filigrane
   ---------------------------------------------------------------- */

.msp-card--machine {
    --msp-card-hover-fond: #1D1D1B;
    --msp-card-hover-icone: url("../images/icon-hover-msp-card.svg");
    --msp-card-hover-icone-pos: -5rem -4rem;
    --msp-card-hover-icone-taille: 130% auto;

    position: relative;
    overflow: hidden;
    transition: border-bottom-color 0.35s ease;
}

.msp-card--machine .msp-card__link::before {
    content: "";
    position: absolute;
    z-index: 1;
    inset: 0;
    opacity: 0;
    pointer-events: none;
    background-color: var(--msp-card-hover-fond);
    background-image: var(--msp-card-hover-icone);
    background-repeat: no-repeat;
    background-position: var(--msp-card-hover-icone-pos);
    background-size: var(--msp-card-hover-icone-taille);
    transition: opacity 0.35s ease;
}

.msp-liste-duo__col--une .msp-card--machine .msp-card__link::before{
    --msp-card-hover-icone-pos: -4rem -4rem;
}

.msp-card--machine .msp-card__body {
    position: relative;
    z-index: 2;
    justify-content: space-between;
}

.msp-card--machine .msp-card__title,
.msp-card--machine .msp-card__desc {
    transition:
        color 0.35s ease,
        transform 0.35s ease;
}

.msp-card--machine .msp-card__btn {
    position: absolute;
    z-index: 2;
    bottom: 1.75rem;
    left: 1.437rem;
    display: inline-block;
    visibility: hidden;
    opacity: 0;
    padding: 0.65rem 1.5rem;
    color: var(--msp-white);
    background-color: var(--msp-liste-accent);
    font-size: 0.937rem;
    font-weight: 700;
    line-height: 1.2;
    transform: translateY(10px);
    transition:
        opacity 0.3s ease,
        transform 0.3s ease,
        visibility 0s linear 0.3s;
}

@media (hover: hover) {
    .msp-card--machine:hover .msp-card__link::before {
        opacity: 1;
    }

    .et-db #et-boc .et-l
    .msp-card--machine:hover
    h3.msp-card__title {
        color: var(--msp-white);
    }

    .msp-card--machine:hover .msp-card__title,
    .msp-card--machine:hover .msp-card__desc {
        color: var(--msp-white);
        transform: translateY(-3.75rem);
    }

    .msp-card--machine:hover .msp-card__btn {
        visibility: visible;
        opacity: 1;
        transform: translateY(0);
        transition:
            opacity 0.3s ease 0.08s,
            transform 0.3s ease 0.08s,
            visibility 0s;
    }

    .msp-card--machine:hover {
        border-bottom-color: var(--msp-card-hover-fond);
    }
}

/* =============================================================================
   LAYOUT RÉALISATION — machine rouge, métier gris, titre
   ============================================================================= */

.msp-card--realisation .msp-card__image {
    aspect-ratio: 4 / 3;
}

.msp-card--realisation .msp-card__surtitre {
    margin: 0;
    padding: var(--msp-card-padding);
    color: var(--msp-liste-accent);
    font-size: 1.375rem;
    font-weight: bold;
    line-height: 1.22em;
}

.msp-card--realisation .msp-card__metier {
    margin: 0 0 0.5rem;
    padding: var(--msp-card-padding);
    color: var(--msp-liste-gris);
    font-size: 0.937rem;
}

.et-db #page-container #et-boc .et-l
.msp-card--realisation
.msp-card__title {
    display: -webkit-box;
    overflow: hidden;
    margin-bottom: 1.437rem;
    padding: var(--msp-card-padding);
    color: var(--msp-liste-texte);
    font-size: 1.25rem;
    font-weight: 500;
    line-height: 1.3em;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* =============================================================================
   LAYOUT ÉQUIPEMENT (card-compacte)
   ============================================================================= */

.msp-card--equipement {
    --msp-card-hover-fond: #1D1D1B;
}

.msp-card--equipement .msp-card__image {
    aspect-ratio: 4 / 3;
    background: var(--msp-liste-fond);
}

.msp-card--equipement .msp-card__body {
    padding: 1.55rem 1.7rem 0;
    background-color: transparent;
    transition: background-color 0.3s ease;
}

.msp-card--equipement .msp-card__title {
    color: var(--msp-liste-texte);
    font-size: 1.375rem;
    font-weight: 400;
    line-height: 1.25;
    transition: color 0.3s ease;
}

.msp-card--equipement .msp-card__title strong {
    font-weight: 700;
}

.et-db #et-boc .et-l .msp-card--equipement h3.msp-card__title {
    color: var(--msp-liste-texte);
    font-size: 1.375rem !important;
    font-weight: 500 !important;
    line-height: 1.25 !important;
}

.msp-card--equipement .msp-card__desc {
    margin: 0.4rem 0 1.25rem;
    font-size: 1.1rem;
    font-weight: 500;
    line-height: 1.45;
    transition: color 0.3s ease;
}

/* CTA */

.msp-card--equipement .msp-card__cta {
    min-height: 0;
    margin-top: auto;
    padding: 0.9rem 0 1.15rem;
    border-top: 1px solid var(--msp-liste-bordure);
    color: var(--msp-liste-texte);
    background-color: transparent;
    font-size: 0.937rem;
    font-weight: 500;
    transition: color 0.3s ease, border-color 0.3s ease;
}

.msp-card--equipement .msp-card__cta::after {
    font-size: 1.25rem;
}

/* Neutralise le hover CTA générique */

.msp-card--equipement .msp-card__link:hover .msp-card__cta {
    color: var(--msp-liste-texte);
    background-color: transparent;
}

.msp-card--equipement .msp-card__link:hover .msp-card__cta::after {
    color: var(--msp-liste-accent);
}

/* ----------------------------------------------------------------
   HOVER card-compacte
   ---------------------------------------------------------------- */

@media (hover: hover) {
    .msp-card--equipement .msp-card__link:hover .msp-card__body {
        background-color: var(--msp-card-hover-fond);
    }

    .msp-card--equipement .msp-card__link:hover .msp-card__title,
    .msp-card--equipement .msp-card__link:hover .msp-card__desc {
        color: var(--msp-white);
    }

    .et-db #et-boc .et-l
    .msp-card--equipement
    .msp-card__link:hover
    h3.msp-card__title {
        color: var(--msp-white);
    }

    .msp-card--equipement .msp-card__link:hover .msp-card__cta {
        border-top-color: rgba(255, 255, 255, 0.25);
        color: var(--msp-white);
        font-weight: 700;
    }
}

/* =============================================================================
   LAYOUT BLOG — image, titre, temps de lecture
   ============================================================================= */

.msp-liste--grid:has(.msp-card--blog) {
    gap: var(--msp-liste-blog-gap);
}

.msp-card--blog {
    background: var(--light-grey);
}

.msp-card--blog .msp-card__image {
    height: 44%;
    aspect-ratio: 16 / 10;
}

.msp-card--blog .msp-card__title {
    display: -webkit-box;
    overflow: hidden;
    color: var(--msp-liste-texte);
    font-size: 1.5rem !important;
    font-weight: 500 !important;
    line-height: 1.4;
    transition: color 0.25s ease;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 4;
}

.msp-card--blog .msp-card__title h3 {
    font-weight: 400;
}

.msp-card--blog .msp-card__link:hover .msp-card__title {
    color: var(--msp-liste-accent);
}

.msp-card--blog .msp-card__meta {
    margin: auto 0 0;
    padding-top: 1rem;
    color: #707070;
    font-size: 0.8rem;
    font-weight: 500;
    text-transform: uppercase;
}

.msp-card--blog .msp-card__body {
    height: 56%;
    padding: 2rem 1rem 1rem;
}

/* =============================================================================
   LAYOUT PACK — image assombrie, label, titre blanc, CTA
   ============================================================================= */
.et-db.single-pack #page-container #et-boc .et_pb_section:has(.msp-card--pack) .et_pb_row{
    padding-bottom: 0;
}

.msp-card--pack {
    position: relative;
    overflow: hidden;
    aspect-ratio: 3 / 4;
    background: #1D1D1B;
}

.msp-card--pack .msp-card__image {
    position: absolute;
    inset: 0;
    aspect-ratio: auto;
}

.msp-card--pack .msp-card__image::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(15, 15, 15, 0.6);
    transition: background 0.3s ease;
}

.msp-card--pack .msp-card__link:hover .msp-card__image::after {
    background: rgba(15, 15, 15, 0.45);
}

.msp-card--pack .msp-card__body {
    position: relative;
    z-index: 2;
    align-items: center;
    height: 100%;
    text-align: center;
}

.msp-card--pack .msp-card__label {
    margin: auto 0 0;
    color: var(--msp-liste-accent);
    font-size: 1.625rem;
    font-weight: bold;
    text-transform: uppercase;
}

.msp-card--pack .msp-card__title {
    margin-bottom: auto;
    color: #fff;
    font-size: 1.5rem !important;
    font-weight: 400 !important;
    line-height: 1.4;
    max-width: 65%;
}

.et-db #et-boc .et-l .msp-card--pack h3.msp-card__title {
    color: #fff;
}

.msp-card--pack .msp-card__cta {
    width: 100%;
    border-top-color: rgba(255, 255, 255, 0.25);
    color: #fff;
    font-size: 1.125rem;
    font-weight: 500;
    background-color: var(--msp-black);
}

.msp-card--pack .msp-card__link:hover .msp-card__cta {
    color: #fff;
}


/* =============================================================================
   MODE À LA UNE (DUO)
   Une carte à gauche + carrousel ou grille à droite
   ============================================================================= */

.et-db.single-realisation #et-boc .et-l .et_pb_section:has(.msp-liste-duo.msp-liste-duo--carousel){
	padding-bottom: 2rem;
}

.msp-liste-duo {
    display: grid;
    grid-template-columns: minmax(170px, 310px) minmax(0, 1fr);
    column-gap: clamp(1.5rem, 3.5vw, 3.5rem);
    align-items: start;
}

.msp-liste-duo.msp-liste-duo--carousel {
    position: relative;
    grid-template-columns: minmax(170px, 215px) minmax(0, 1fr);
    align-items: stretch;
}

/* En duo grille, la machine se lit comme une colonne supplémentaire de la
   grille équipements */

.msp-liste-duo--grid {
    column-gap: var(--msp-liste-gap);
}

.msp-liste-duo__col {
    min-width: 0;
}

.msp-liste-duo__col--liste {
    min-width: 0;
    overflow: hidden;
}

.msp-liste-duo__col--liste .msp-liste.msp-carousel {
    width: 100%;
    min-width: 0;
    overflow: hidden;
}

.msp-liste-duo__col--liste .carousel-track {
    min-width: 0;
}

.msp-liste-duo__label {
    margin: 0 0 0.75rem;
    color: var(--msp-liste-texte);
    font-size: 0.85rem;
    font-weight: 600;
}

.msp-liste--une {
    display: block;
}

/* ----------------------------------------------------------------
   Variante carousel : dots en haut à droite, sur la ligne des labels
   ---------------------------------------------------------------- */

.msp-liste-duo--carousel
.msp-liste.msp-carousel
.carousel-dots {
    position: absolute;
    z-index: 2; /* au-dessus du fondu blanc */
    top: 0;
    right: 0;
    margin: 0;
}

/* ----------------------------------------------------------------
   DÉBORD À DROITE + FONDU BLANC — DUO CAROUSEL

   Les cards filent jusqu'au bord DROIT de l'écran, la dernière
   s'estompant sous un fondu blanc ; dots et largeur des cards
   restent calés sur la largeur de contenu.
   ---------------------------------------------------------------- */

.msp-liste-duo--carousel .msp-liste-duo__col--liste {
    overflow: visible;
}

.msp-liste-duo--carousel .msp-liste.msp-carousel {
    box-sizing: border-box;
    position: static;
    width: calc(100% + var(--carousel-bleed, 0px));
    margin-right: calc(-1 * var(--carousel-bleed, 0px));
    padding-right: var(--carousel-bleed, 0px);
}

/* Fondu blanc sur la zone de débord */

.msp-liste-duo--carousel .msp-liste.msp-carousel:not(.carousel-static)::after {
    content: "";
    position: absolute;
    z-index: 1;
    top: 0;
    bottom: 0;
    right: calc(-1 * var(--carousel-bleed, 0px));
    width: calc(var(--carousel-bleed, 0px) + 2.5rem);
    background: linear-gradient(to right, rgba(255, 255, 255, 0), var(--msp-fp-bg-grey, #fff) 82%);
    pointer-events: none;
}

.et-db #et-boc .et-l .et_pb_section:has(.msp-liste-duo--carousel) {
    overflow-x: hidden;
    overflow-x: clip;
}

/* ----------------------------------------------------------------
   HAUTEURS ÉGALES MACHINE / CARDS — DUO CAROUSEL
   ---------------------------------------------------------------- */

.msp-liste-duo--carousel .msp-liste-duo__col {
    display: flex;
    flex-direction: column;
}

.msp-liste-duo--carousel .msp-liste--une,
.msp-liste-duo--carousel .msp-liste.msp-carousel {
    flex: 1 1 auto;
}

.msp-liste-duo--carousel .msp-liste.msp-carousel[data-carousel-init="true"] {
    display: flex;
    flex-direction: column;
}

.msp-liste-duo--carousel .msp-liste.msp-carousel .carousel-track {
    flex: 1 1 auto;
}

@media(max-width: 980px){
    .et-db.single-realisation #et-boc .et-l .et_pb_section:has(.msp-liste-duo.msp-liste-duo--carousel){
	    padding-bottom: 1rem;
    }
}

/* ----------------------------------------------------------------
   CARTE MACHINE COMPACTE DANS LE DUO
   ---------------------------------------------------------------- */

.msp-liste-duo__col--une
.msp-card--machine
.msp-card__body {
    min-height: 0;
    padding: 1.35rem 1.437rem 1rem;
    gap: 0.5rem;
}

.et-db #et-boc .et-l
.msp-liste-duo__col--une
.msp-card--machine
h3.msp-card__title {
    margin: 0;
    padding: 0;
    font-size: 1.25rem !important;
    font-weight: 500 !important;
    line-height: 1.2 !important;
}

.msp-liste-duo__col--une
.msp-card--machine
.msp-card__desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.4rem 0 0;
    font-size: 0.85rem;
    line-height: 1.3;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 3;
}

/* ----------------------------------------------------------------
   CARTES ÉQUIPEMENTS COMPACTES DANS LE DUO
   ---------------------------------------------------------------- */

.msp-liste-duo--carousel
.msp-card--equipement
.msp-card__image {
    aspect-ratio: 4 / 3;
}

.msp-liste-duo--carousel
.msp-card--equipement
.msp-card__image img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto;
    object-fit: cover;
}

.msp-liste-duo--carousel
.msp-card--equipement
.msp-card__body {
    min-height: 0;
    padding: 0.9rem 1rem;
    justify-content: space-between;
}

.et-db #et-boc .et-l
.msp-liste-duo--carousel
.msp-card--equipement
h3.msp-card__title {
    margin: 0;
    padding: 0;
    color: var(--msp-liste-texte);
    font-size: 1rem !important;
    font-weight: 400 !important;
    line-height: 1.3 !important;
}

.msp-liste-duo--carousel
.msp-card--equipement
.msp-card__desc {
    display: -webkit-box;
    overflow: hidden;
    margin: 0.3rem 0 0;
    font-size: 0.75rem;
    line-height: 1.35;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
}

/* Le bandeau CTA n'est pas affiché dans la variante duo CAROUSEL */

.msp-liste-duo--carousel
.msp-card--equipement
.msp-card__cta {
    display: none;
}

/* ----------------------------------------------------------------
   CARTES ÉQUIPEMENTS EN DUO GRILLE
   ---------------------------------------------------------------- */

.msp-liste-duo--grid .msp-card--equipement .msp-card__body {
    padding: 1.25rem 1.437rem 0;
}

.et-db #et-boc .et-l
.msp-liste-duo--grid
.msp-card--equipement
h3.msp-card__title {
    font-size: 1.125rem !important;
}

.msp-liste-duo--grid .msp-card--equipement .msp-card__desc {
    margin-bottom: 1rem;
}

.msp-liste-duo--grid .msp-card--equipement .msp-card__cta {
    padding: 0.75rem 0 1rem;
    font-size: 0.875rem;
}

/* =============================================================================
   BLINDAGE COHABITATION + CONTENU ACF

   Cas limite : section contenant à la fois un carousel Divi legacy et une
   msp-liste. Les règles de section :has(.carousel) de carousel.css peuvent
   alors également toucher les cartes du shortcode.
   ============================================================================= */

.et-db #et-boc .et-l
.msp-carousel
.carousel-card::after {
    content: none;
}

.et-db #et-boc .et-l
.msp-carousel
.carousel-card {
    max-height: none;
}

.et-db #et-boc .et-l
.msp-carousel
.msp-card__image img {
    max-height: none;
}

.et-db #et-boc .et-l .msp-card__desc p {
    margin: 0;
    padding: 0;
}

/* =============================================================================
   MESSAGES
   ============================================================================= */

.msp-liste-info,
.msp-liste-erreur {
    color: var(--msp-liste-gris, #706F6F);
    font-size: 0.9rem;
}

.msp-liste-erreur {
    color: #B00020;
}

/* =============================================================================
   RESPONSIVE
   ============================================================================= */

@media (max-width: 1200px) {
    .msp-liste--cols-5,
    .msp-liste--cols-6 {
        grid-template-columns: repeat(4, minmax(0, 1fr));
    }
}

@media (max-width: 1024px) {
    .msp-liste--cols-4,
    .msp-liste--cols-5,
    .msp-liste--cols-6 {
        grid-template-columns: repeat(3, minmax(0, 1fr));
    }

    .msp-liste.msp-carousel {
        --carousel-pv-max: 3;
    }
}

@media (max-width: 980px) {
    .msp-liste-duo,
    .msp-liste-duo.msp-liste-duo--carousel {
        grid-template-columns: minmax(0, 1fr);
        row-gap: 2rem;
    }

    .msp-liste-duo__col--une .msp-liste--une {
        max-width: 320px;
    }

    .msp-liste-duo--carousel
    .msp-liste.msp-carousel
    .carousel-dots {
        position: static;
        justify-content: center;
        margin-top: 1rem;
    }

    .msp-liste-duo--carousel .msp-liste.msp-carousel:not(.carousel-static)::after {
        content: none;
    }
}

@media (max-width: 800px) {
    .msp-liste--grid:not(.msp-liste--cols-1) {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .msp-liste.msp-carousel {
        --carousel-pv-max: 2;
    }
}

@media (max-width: 560px) {
    .msp-liste--grid {
        grid-template-columns: minmax(0, 1fr) !important;
    }

    .msp-liste.msp-carousel {
        --carousel-pv-max: 1;
    }

    .msp-liste-duo__col--une .msp-liste--une {
        max-width: none;
    }

    .msp-liste--dots-haut.msp-carousel {
        padding-top: 0;
    }

    .msp-liste--dots-haut .carousel-dots {
        position: static;
        justify-content: center;
        margin-top: 1rem;
    }
}