/*
 * Section Carrousel de contenu — Figma node 2644:68872.
 *
 * Cadrage de la maquette : panneau sur toute la largeur du conteneur (1792), padding vertical
 * 96, rayon 4, gap 64 entre l'en-tête et la piste. En-tête et commandes sur une ligne de 1490,
 * alignés par le bas. Diapositive : visuel de 737 x 498, gap 80, texte sur 673 — soit
 * 737 + 80 + 673 = 1490, la largeur de contenu exactement.
 */

.section-content-carousel {
    padding-block: var(--section-space);
}

.section-content-carousel__panel {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-hero);
    /* min() plutôt que max-width + padding : combinés, le panneau perdrait la largeur pleine
       du conteneur de la maquette. */
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding-block: var(--space-big-hero);
    border-radius: var(--radius-xxs);
    background-color: var(--color-primary);
}

/* ---- En-tête et commandes ---- */

.section-content-carousel__head {
    display: flex;
    /* Alignés par le bas : les commandes suivent la dernière ligne de l'introduction. */
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-bloc);
    width: min(var(--container-content-width), 100% - 2 * var(--space-bloc));
}

.section-content-carousel__intro-block {
    display: flex;
    flex-direction: column;
    gap: var(--space-list);
    /* 888px dans la maquette. */
    max-width: 888px;
}

.section-content-carousel__title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    /* 61px sur 49px */
    line-height: 1.245;
    color: var(--color-primary-50);
}

.section-content-carousel__intro {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-200);
}

.section-content-carousel__controls {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: var(--space-micro);
    flex-shrink: 0;
}

/* display:flex l'emporterait sur la règle [hidden] du navigateur : sans cette ligne, les
   commandes s'afficheraient avant que le script ne les révèle. */
.section-content-carousel__controls[hidden] {
    display: none;
}

.section-content-carousel__counter {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-primary-200);
    font-variant-numeric: tabular-nums;
}

.section-content-carousel__buttons {
    display: flex;
    align-items: center;
    gap: var(--space-compact);
}

.section-content-carousel__arrow {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: center;
    /* 40 x 40 dans la maquette, sous les 44 recommandés pour une cible tactile. On rattrape
       par une zone de clic invisible plutôt qu'en grossissant le bouton. */
    width: 40px;
    height: 40px;
    flex: none;
    padding: 0;
    border: 1px solid var(--color-primary-200);
    background: none;
    color: var(--color-primary-200);
    cursor: pointer;
    transition: background-color 140ms ease-out, color 140ms ease-out;
}

.section-content-carousel__arrow::after {
    content: "";
    position: absolute;
    inset: -2px;
}

.section-content-carousel__arrow:hover:not(:disabled),
.section-content-carousel__arrow:focus-visible:not(:disabled) {
    background-color: var(--color-primary-200);
    color: var(--color-primary);
}

.section-content-carousel__arrow:disabled {
    opacity: 0.35;
    cursor: default;
}

.section-content-carousel__arrow--next .section-content-carousel__chevron {
    transform: rotate(180deg);
}

.section-content-carousel__chevron {
    display: block;
    /* Le tracé fait 4 x 8, comme la maquette. */
    width: 4px;
    height: 8px;
}

/* ---- Piste ---- */

.section-content-carousel__track {
    width: min(var(--container-content-width), 100% - 2 * var(--space-bloc));
    overflow-x: auto;
    /* L'accrochage est ce qui fait le carrousel : le défilement natif s'arrête sur une
       diapositive et jamais entre deux. */
    scroll-snap-type: x mandatory;
    /* Barre de défilement masquée : les commandes et le geste tactile suffisent, et la barre
       couperait le bas du visuel. */
    scrollbar-width: none;
}

.section-content-carousel__track::-webkit-scrollbar {
    display: none;
}

.section-content-carousel__track:focus-visible {
    outline: 2px solid var(--color-primary-200);
    outline-offset: 4px;
}

/* La liste EST la zone défilable : les diapositives sont ses enfants directs, sans div
   intermédiaire. Un enfant plus étroit que la distance à parcourir faisait échouer
   silencieusement le défilement animé. */
.section-content-carousel__track {
    display: flex;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-content-carousel__slide {
    display: flex;
    align-items: center;
    gap: var(--space-large);
    /* Une diapositive occupe toute la piste : c'est ce qui donne « une à la fois ». */
    flex: 0 0 100%;
    scroll-snap-align: start;
}

.section-content-carousel__media {
    /* 737 sur 1490, soit 49,46 % : en pourcentage, le visuel et le texte se réduisent
       ensemble plutôt que de se disputer la place. */
    flex: 0 0 49.463%;
    /* Rapport de la maquette, 737 x 498. min-height à 0 : sans lui, la hauteur intrinsèque de
       l'image l'emporterait sur le rapport, un piège déjà rencontré sur ce thème. */
    aspect-ratio: 737 / 498;
    min-height: 0;
    border-radius: var(--radius-xxxs);
    overflow: hidden;
}

.section-content-carousel__image {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.section-content-carousel__content {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    /* 673 sur 1490, le complément du visuel une fois les 80 de gouttière retirés. */
    flex: 1 1 auto;
    min-width: 0;
    color: var(--color-primary-50);
}

.section-content-carousel__slide-title {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h6);
    font-weight: 700;
    line-height: 1.3;
}

.section-content-carousel__text {
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
}

.section-content-carousel__text > :first-child {
    margin-block-start: 0;
}

.section-content-carousel__text > :last-child {
    margin-block-end: 0;
}

/* La maquette sépare ses deux paragraphes par une ligne vide, soit une interligne. */
.section-content-carousel__text p + p {
    margin-block-start: var(--space-list);
}

.section-content-carousel__text a {
    color: var(--color-primary-200);
    text-decoration: underline;
}

/*
 * PAS DE scroll-behavior: smooth ICI, ET C'EST DÉLIBÉRÉ.
 *
 * L'animation du changement de diapositive est demandée par le script, au coup par coup. Posée
 * ici, elle s'appliquerait à TOUT défilement de la piste, y compris à l'écriture de rattrapage
 * du filet — qui deviendrait alors elle aussi un no-op quand le navigateur n'anime pas, et le
 * carrousel resterait bloqué. C'est constaté, pas supposé.
 *
 * Le geste tactile et la molette gardent leur inertie native, qui ne dépend pas de cette
 * propriété.
 */

/* ---- Adaptations ---- */

@media (max-width: 1200px) {
    .section-content-carousel {
        --container-gutter: var(--space-bloc);
        padding-block: var(--section-space);
    }

    .section-content-carousel__panel {
        gap: var(--space-xl);
        padding-block: var(--space-large);
    }

    .section-content-carousel__slide {
        gap: var(--space-bloc);
    }
}

@media (max-width: 900px) {
    /* Le visuel et le texte côte à côte deviennent deux colonnes trop étroites : la
       diapositive passe en pile, visuel au-dessus. */
    .section-content-carousel__slide {
        flex-direction: column;
        align-items: stretch;
    }

    .section-content-carousel__media {
        flex: none;
        width: 100%;
    }
}

@media (max-width: 768px) {
    .section-content-carousel {
        --container-gutter: var(--space-m);
    }

    .section-content-carousel__panel {
        padding-block: var(--space-bloc);
        gap: var(--space-bloc);
    }

    .section-content-carousel__head,
    .section-content-carousel__track {
        width: min(var(--container-content-width), 100% - 2 * var(--space-l));
    }

    .section-content-carousel__head {
        /* Les commandes passent sous l'introduction : à côté, il ne reste plus de place pour
           le titre. */
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-list);
    }

    .section-content-carousel__controls {
        align-items: flex-start;
    }
}