/* ==============================
 * Block — Nos solutions (slider infini, peek cards)
 * Scope racine : .block-solutions
 * ============================== */

.block-solutions {
    position: relative;
    background: var(--color-primary);
    color: var(--color-text-on-primary);
    padding: var(--section-py) 0 clamp(48px, 5vw, 72px);

    --card-width: clamp(220px, 28vw, 320px);
    --card-gap: 24px;
    --white-band-h: clamp(80px, 9vw, 120px);
}

@media (min-width: 1024px) {
    .block-solutions { margin-top: 65px; }
}

/* Bande blanche absolue en bas du bloc — le slider la chevauche */
.block-solutions__white-band {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 0;
    height: var(--white-band-h);
    background: var(--color-bg);
    z-index: 0;
}

/* Tout le contenu passe au-dessus de la bande blanche */
.block-solutions__container {
    position: relative;
    z-index: 1;
    display: flex;
    flex-direction: column;
    gap: clamp(24px, 4vw, 48px);
    align-items: stretch;
}

/* Mobile : on libère le bord droit pour que le slider colle au bord
   de l'écran. La colonne intro garde son padding-right pour rester
   lisible dans la gouttière. */
@media (max-width: 1023px) {
    .block-solutions__container.container {
        padding-right: 0;
    }
    .block-solutions__intro-col {
        padding-right: var(--gutter);
    }
}

@media (min-width: 1024px) {
    /* On override .container pour libérer le côté droit jusqu'au bord du viewport. */
    .block-solutions__container.container {
        max-width: none;
        padding-right: 0;
        /* La gauche reste alignée avec où serait le bord d'un .container 1120 centré. */
        padding-left: max(var(--gutter), calc(50vw - var(--container-max) / 2 + var(--gutter)));
    }
    .block-solutions__container {
        flex-direction: row;
        align-items: flex-end;
        gap: clamp(32px, 5vw, 80px);
    }
    .block-solutions__intro-col {
        flex: 0 0 clamp(280px, 26vw, 360px);
        align-self: stretch;
    }
    .block-solutions__viewport  { flex: 1 1 auto; min-width: 0; align-self: flex-end; }
}

/* Intro */
.block-solutions__intro-col {
    display: flex;
    flex-direction: column;
}
.block-solutions__intro-col > * + * { margin-top: var(--text-stack-gap); }

.block-solutions__title {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: var(--fs-h2);
    color: var(--color-white);
    margin: 0;
    line-height: 1.15;
}

.block-solutions__intro {
    font-family: var(--font-body);
    font-weight: var(--weight-body);
    font-size: var(--fs-body);
    color: var(--color-white);
    line-height: 1.6;
}
.block-solutions__intro > * { margin: 0; }
.block-solutions__intro > * + * { margin-top: 12px; }

/* Flèches dans la colonne intro, ancrées à droite et descendues dans la bande blanche */
.block-solutions__nav {
    display: flex;
    gap: 8px;
    align-items: center;
    justify-content: flex-end;
    align-self: stretch;
    margin-top: auto;
    padding-top: clamp(32px, 4vw, 56px);
}

.block-solutions__nav-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    background: transparent;
    border: 0;
    cursor: pointer;
    color: var(--color-text); /* dark — visible sur la bande blanche derrière */
    transition: transform var(--dur) var(--ease), color var(--dur) var(--ease);
}
.block-solutions__nav-btn:hover,
.block-solutions__nav-btn:focus-visible {
    color: var(--color-primary);
    transform: scale(1.15);
}
.block-solutions__nav-btn:active { transform: translateZ(0) scale(0.92); }

.block-solutions__nav-arrow {
    width: 18px;
    height: auto;
    /* fill via currentColor */
}
/* SVG par défaut = flèche gauche → on miroir pour le bouton "next" */
.block-solutions__nav-btn--next .block-solutions__nav-arrow {
    transform: scaleX(-1);
}

/* Slider viewport — clip ici (pas sur la section) pour que le débord ne dépasse pas le container central */
.block-solutions__viewport {
    position: relative;
    overflow: hidden;
    width: 100%;
}

/* Track : flexbox horizontal sans wrap, débord clippé par le viewport */
.block-solutions__track {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: nowrap;
    gap: var(--card-gap);
    transform: translateX(0);
    transition: transform .45s var(--ease);
    will-change: transform;
}

/* Cartes (largeur fixe, débordent à droite si nombreuses) */
.block-solutions__card {
    flex: 0 0 var(--card-width);
    position: relative;
    aspect-ratio: 3 / 4;
    border-radius: var(--radius-lg);
    overflow: hidden;
    background: var(--color-bg-dark);
}

.block-solutions__card-link {
    display: block;
    width: 100%;
    height: 100%;
    color: inherit;
    text-decoration: none;
}

.block-solutions__card-media {
    position: absolute;
    inset: 0;
    margin: 0;
    z-index: 0;
    background: var(--color-bg-dark);
}
.block-solutions__card-media--empty {
    background: linear-gradient(135deg, #2a2a2a, #1a1a1a);
}
.block-solutions__card-image {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
    transition: transform var(--dur) var(--ease);
}
.block-solutions__card:hover .block-solutions__card-image { transform: scale(1.04); }

.block-solutions__card::after {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(180deg, rgba(0,0,0,0) 40%, rgba(0,0,0,.65) 100%);
    z-index: 1;
    pointer-events: none;
}

.block-solutions__card-body {
    position: absolute;
    left: 0;
    right: 0;
    bottom: 16px;
    z-index: 2;
    padding: 0 16px;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 12px;
    text-align: left;
}

.block-solutions__card-name {
    font-family: var(--font-heading);
    font-weight: var(--weight-heading);
    font-size: clamp(20px, 2vw, 24px);
    color: var(--color-white);
    margin: 0;
    padding-left: 8px;
    text-shadow: 0 2px 8px rgba(0,0,0,.4);
    letter-spacing: 0.01em;
}

.block-solutions__card-cta { pointer-events: none; }
.block-solutions__card-link:hover .block-solutions__card-cta,
.block-solutions__card-link:focus-visible .block-solutions__card-cta {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

/* Slide en cours d'animation : pas d'interaction */
.block-solutions__track.is-animating .block-solutions__card-link { pointer-events: none; }

/* Empty state (édition) */
.block-solutions__empty {
    padding: 24px;
    background: rgba(255,255,255,.1);
    border-radius: var(--radius-md);
    text-align: center;
    font-family: var(--font-body);
}

@media (prefers-reduced-motion: reduce) {
    .block-solutions__track { transition: none; }
}