/*
 * Section Frise chronologique — Figma node 2644:68362, contenu du modèle client.
 *
 * Cadrage de la maquette : panneau beige sur la largeur du conteneur (1792), padding 96,
 * contenu sur la colonne de 1490 — texte 625 à gauche, images 737 à droite —, puis 80 plus bas
 * la barre de progression (40 de haut) : compteur, borne, segments, borne, flèches de 40.
 */

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

.section-timeline__panel {
    width: min(var(--container-max-width), 100% - 2 * var(--container-gutter));
    margin-inline: auto;
    padding: var(--space-big-hero) var(--space-bloc);
    border-radius: var(--radius-xxs);
    background-color: var(--color-secondary-300);
}

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

/* La liste EST la zone défilante : les chapitres en sont les enfants directs (contrat du
   partial « snap-carousel »). */
.section-timeline__track {
    display: flex;
    width: min(var(--container-content-width), 100%);
    margin: 0 auto;
    padding: 0;
    list-style: none;
    overflow-x: auto;
    scroll-snap-type: x mandatory;
    scrollbar-width: none;
}

.section-timeline__track::-webkit-scrollbar {
    display: none;
}

.section-timeline__track:focus-visible {
    outline: 2px solid var(--color-secondary-800);
    outline-offset: 4px;
}

.section-timeline__slide {
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* 753 - 625 = 128 entre le texte et les images dans la maquette. */
    gap: var(--space-big-page);
    flex: 0 0 100%;
    /* Hauteur de la zone de contenu de la maquette : les chapitres courts ne font pas sauter
       la barre de progression d'une diapositive à l'autre. */
    min-height: 525px;
    scroll-snap-align: start;
}

/* ---- Texte ---- */

.section-timeline__content {
    flex: 0 1 625px;
    min-width: 0;
}

.section-timeline__chapter {
    font-family: var(--font-family-heading);
    font-size: var(--font-size-h2);
    font-weight: 700;
    line-height: 1.245;
    /* L'or olive du modèle. */
    color: var(--color-secondary-700);
}

.section-timeline__chapter sup {
    font-size: 0.5em;
    line-height: 0;
}

.section-timeline__events {
    display: flex;
    flex-direction: column;
    gap: var(--space-m);
    margin: var(--space-bloc) 0 0;
}

.section-timeline__event {
    display: flex;
    flex-direction: column;
    gap: var(--space-micro);
}

.section-timeline__year {
    font-family: var(--font-family-heading);
    font-size: calc(var(--font-size-h6) * 1.25);
    font-weight: 700;
    line-height: var(--line-height-tight);
    color: var(--color-neutral-900);
}

.section-timeline__text {
    margin: 0;
    font-size: var(--font-size-p);
    line-height: var(--line-height-body);
    color: var(--color-neutral-900);
}

.section-timeline__text p {
    margin: 0;
}

.section-timeline__text p + p {
    margin-block-start: var(--space-compact);
}

/* ---- Images ---- */

.section-timeline__media {
    display: flex;
    /* Centrées dans leur colonne : calées à droite, un portrait étroit laissait un grand vide
       entre le texte et lui. */
    justify-content: center;
    align-items: flex-start;
    gap: var(--space-compact);
    flex: 0 1 737px;
    min-width: 0;
}

/* Le cadre de la maquette : 8 de marge intérieure, filet doré, fond clair, légende dessous. */
.section-timeline__figure {
    display: flex;
    flex-direction: column;
    gap: var(--space-compact);
    flex: 0 1 auto;
    min-width: 0;
    margin: 0;
    padding: var(--space-compact);
    border: 1px solid var(--color-secondary-500);
    background-color: var(--color-secondary-200);
}

.section-timeline__image {
    display: block;
    /*
     * Hauteur plafonnée, largeur libre : les portraits et les paysages gardent leurs
     * proportions, aucun n'est recadré par le CSS. 400 px plutôt que les 509 du cadre de la
     * maquette — le modèle client réduit les images (« modification des proportions ») : un
     * portrait de 509 px écrasait le texte, un paysage occupe encore ses 600 px de large.
     */
    width: auto;
    max-width: 100%;
    max-height: 400px;
    margin-inline: auto;
}

/* En paire, chaque image reste nettement plus petite, comme dans le modèle. */
.section-timeline__media--2 .section-timeline__image {
    max-height: 300px;
}

.section-timeline__caption {
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    color: var(--color-neutral-900);
    text-align: center;
}

/* ---- Barre de progression et flèches ---- */

.section-timeline__controls {
    display: flex;
    align-items: center;
    gap: var(--space-l);
    width: min(var(--container-content-width), 100%);
    /* 80 sous le contenu, comme la maquette. */
    margin: var(--space-large) auto 0;
}

.section-timeline__controls[hidden] {
    display: none;
}

.section-timeline__counter {
    flex: none;
    min-width: 50px;
    font-size: var(--font-size-small);
    line-height: var(--line-height-tight);
    font-variant-numeric: tabular-nums;
    color: var(--color-neutral-900);
}

.section-timeline__progress {
    display: flex;
    align-items: center;
    gap: var(--space-m);
    flex: 1 1 auto;
    min-width: 0;
}

.section-timeline__bound {
    flex: none;
    font-size: var(--font-size-small);
    font-style: italic;
    line-height: var(--line-height-tight);
    color: var(--color-neutral-700);
}

.section-timeline__segments {
    display: flex;
    gap: var(--space-micro);
    flex: 1 1 auto;
    min-width: 0;
    margin: 0;
    padding: 0;
    list-style: none;
}

.section-timeline__segment-item {
    flex: 1 1 0;
    min-width: 0;
}

/*
 * Le segment est un bouton de 20 px de haut — la cible — dont seul un trait de 4 px est
 * dessiné au repos, posé en bas comme dans la maquette. Le segment courant se remplit sur
 * toute sa hauteur, en sombre.
 */
.section-timeline__segment {
    position: relative;
    display: block;
    width: 100%;
    height: 20px;
    padding: 0;
    border: 0;
    background: none;
    cursor: pointer;
}

.section-timeline__segment::before {
    content: "";
    position: absolute;
    inset: auto 0 0;
    height: 4px;
    border-radius: var(--radius-xxxs);
    background-color: var(--color-secondary-500);
    transition:
        height var(--hover-dur) var(--hover-ease),
        background-color var(--hover-dur) var(--hover-ease);
}

.section-timeline__segment:hover::before {
    background-color: var(--color-secondary-700);
}

.section-timeline__segment.is-active::before {
    height: 100%;
    background-color: var(--color-secondary-800);
}

.section-timeline__buttons {
    display: flex;
    gap: var(--space-compact);
    flex: none;
}

.section-timeline__arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    padding: 0;
    border: 1px solid var(--color-secondary-500);
    border-radius: var(--radius-xxxs);
    background: none;
    color: var(--color-secondary-800);
    cursor: pointer;
}

.section-timeline__arrow:hover {
    background-color: var(--color-secondary-200);
}

.section-timeline__arrow--next .section-timeline__chevron {
    transform: rotate(180deg);
}

.section-timeline__chevron {
    display: block;
    width: 4px;
    height: 8px;
}

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

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

    .section-timeline__panel {
        padding-block: var(--space-large);
    }

    /* Texte puis images, l'un sous l'autre. */
    .section-timeline__slide {
        flex-direction: column;
        align-items: stretch;
        justify-content: flex-start;
        gap: var(--space-xl);
        min-height: 0;
    }

    .section-timeline__content,
    .section-timeline__media {
        flex: none;
    }

    .section-timeline__media {
        justify-content: flex-start;
    }

    .section-timeline__image {
        max-height: 360px;
    }

    .section-timeline__media--2 .section-timeline__image {
        max-height: 280px;
    }

    .section-timeline__controls {
        margin-top: var(--space-xl);
    }
}

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

    .section-timeline__panel {
        padding-inline: var(--space-m);
    }

    .section-timeline__chapter {
        font-size: var(--font-size-h3);
    }

    /* Les bornes laissent la place aux segments, qui restent tous visibles. */
    .section-timeline__bound {
        display: none;
    }

    .section-timeline__controls {
        flex-wrap: wrap;
        gap: var(--space-m);
    }

    .section-timeline__progress {
        order: 3;
        flex-basis: 100%;
    }

    .section-timeline__buttons {
        margin-inline-start: auto;
    }
}