/**
 * cas-clients.css — Section Cas clients
 */

/* -------------------------
   Section
------------------------- */
.section-cas-clients {
    position: relative;
    z-index: 2; /* au-dessus de toutes les shapes adjacentes (z-index max = var(--z-base) = 1) */
    overflow: hidden;
    background-color: var(--color-black);
}

/* -------------------------
   Inner — mobile-first
------------------------- */
.section-cas-clients__inner {
    position: relative;
    z-index: var(--z-base);
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
    padding-inline: var(--container-padding);
}

/* -------------------------
   Titre — fond lime, centré
------------------------- */
.section-cas-clients__title {
    font-family: var(--font-primary);
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-tight);
    color: var(--color-black);
    text-transform: uppercase;
    background-color: var(--color-lime);
    padding: var(--space-sm) var(--space-md);
    width: fit-content;
    margin-inline: auto;
}

/* -------------------------
   Liste
------------------------- */
.section-cas-clients__list {
    display: flex;
    flex-direction: column;
    gap: var(--space-2xl);
    list-style: none;
    padding: 0;
    margin: 0;
}

/* -------------------------
   Carte — wrapper global (info+visual puis charte)
------------------------- */
.section-cas-clients__card {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* -------------------------
   Main — zone haute (info + visual)
   Mobile : column / Desktop : row
------------------------- */
.section-cas-clients__card-main {
    display: flex;
    flex-direction: column;
    gap: var(--space-xl);
}

/* -------------------------
   Info (texte + CTA)
------------------------- */
.section-cas-clients__card-info {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: var(--space-md);
}

.section-cas-clients__card-name {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-3xl);
    font-weight: var(--font-weight-black);
    color: var(--color-white);
    text-transform: uppercase;
}

.section-cas-clients__card-accroche {
    margin: 0;
    font-family: var(--font-primary);
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-black);
    line-height: var(--line-height-snug);
}


.section-cas-clients__card-desc,
.section-cas-clients__card-desc p {
    margin: 0;
    font-family: var(--font-secondary);
    font-size: var(--font-size-base);
    color: var(--color-silver);
    line-height: var(--line-height-loose);
}


/* -------------------------
   Visual (logo + mockup empilés)
------------------------- */
.section-cas-clients__card-visual {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    justify-content: center;
}

.section-cas-clients__card-logo {
    margin: auto;
    width: 100%;
}

.section-cas-clients__card-logo img {
    width: 100%;
    height: auto;
    margin:auto;
    object-fit: contain;
    display: block;
    max-width: 300px;
    max-height: 100px;
}

.section-cas-clients__card-mockup {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
}

.section-cas-clients__card-mockup img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* -------------------------
   Charte — pleine largeur sous le main
------------------------- */
.section-cas-clients__card-charte {
    margin: 0;
    border-radius: var(--radius-lg);
    overflow: hidden;
    width: 100%;
}

.section-cas-clients__card-charte img {
    width: 100%;
    height: auto;
    display: block;
    object-fit: cover;
}

/* -------------------------
   Tablette 768px
------------------------- */
@media (min-width: 768px) {
    .section-cas-clients__title {
        font-size: var(--font-size-6xl);
    }

    .section-cas-clients__card-name {
        font-size: var(--font-size-4xl);
    }
}

/* -------------------------
   Desktop 1024px — main en row (info à gauche, visual à droite)
------------------------- */
@media (min-width: 1024px) {

    .section-cas-clients__inner {
        padding-inline: var(--section-padding-x-xl);
        max-width: var(--container-max-width-xl);
    }

    .section-cas-clients__title {
    font-size: var(--font-size-7xl);
    padding: var(--space-sm) var(--space-xl);
}




    .section-cas-clients__card-main {
        flex-direction: row;
        align-items: flex-start;
        gap: var(--space-2xl);
    }

    .section-cas-clients__card-info,
    .section-cas-clients__card-visual {
        flex: 1;
    }
}

/* =========================
   Splide — overrides carrousel
========================= */

/* Neutraliser le flex colonne custom sur la liste Splide */
.section-cas-clients__carousel .section-cas-clients__list {
    flex-direction: row;
    gap: 0;
}

/* Carousel wrapper */
.section-cas-clients__carousel {
    overflow: visible;
}

.section-cas-clients__carousel .splide__track {
    overflow: hidden;
}

/* Padding bas pour que les dots ne soient pas coupés
   par overflow:hidden de la section */
.section-cas-clients__inner {
    padding-bottom: var(--space-2xl);
}

/* -------------------------
   Dots / pagination
------------------------- */
.section-cas-clients__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: var(--space-xs);
    padding: 0;
    margin-top: var(--space-md);
    list-style: none;
}

button.section-cas-clients__dot {
    display: block;
    width: 10px;
    height: 10px;
    background-color: rgba(255, 255, 255, 0.3);
    border: none;
    border-radius: var(--radius-full);
    padding: 0;
    cursor: pointer;
    transition: none;
    -webkit-appearance: none;
    appearance: none;
}

button.section-cas-clients__dot.is-active {
    background-color: var(--color-lime);
    transform: none;
}