/* ==========================================================================
   Frise « Notre histoire » – .st-timeline
   Mobile first. Fichier : assets/css/timeline-history.css
   ========================================================================== */

.st-timeline {
    --tl-terracotta: #C67B5C;
    --tl-brun: #4A3B32;
    --tl-sable: #F7EFE4;
    --tl-gris: #C9C0B6;
    position: relative;
    width: 100%;
    max-width: 1280px;
    margin: 0 auto;
    padding: 24px 16px 32px;
    color: var(--tl-brun);
    background: var(--tl-sable);
    box-sizing: border-box;
}
.st-timeline *,
.st-timeline *::before,
.st-timeline *::after { box-sizing: border-box; }

/* --------------------------------------------------------------------------
   Rail des dates
   -------------------------------------------------------------------------- */
.st-timeline__rail {
    position: relative;
    display: flex;
    justify-content: space-between;   /* 1re date au début du trait, dernière à la fin */
    align-items: center;
    height: 96px;
    margin: 0 0 24px;
    padding: 0 28px;
}

/* Trait pointillé */
.st-timeline__rail::before {
    content: "";
    position: absolute;
    left: 28px;
    right: 28px;
    top: 50%;
    border-top: 2px dashed var(--tl-gris);
    transform: translateY(-1px);
}

/* Neutralise les styles globaux de boutons (thème / Elementor) */
.st-timeline .st-timeline__step,
.st-timeline .st-timeline__step:hover,
.st-timeline .st-timeline__step:focus,
.st-timeline .st-timeline__step:active {
    background: transparent;
    box-shadow: none;
    border: 0;
    border-radius: 0;
    color: var(--tl-brun);
    text-decoration: none;
}

.st-timeline__step {
    position: relative;
    flex: 0 0 auto;
    width: 0;                 /* le point sert d'ancre, l'année déborde */
    height: 100%;
    padding: 0;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
}

/* Point */
.st-timeline__dot {
    position: absolute;
    top: 50%;
    left: 0;
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--tl-brun);
    transform: translate(-50%, -50%) scale(1);
    opacity: 1;
    transition: transform .25s ease, background-color .25s ease, opacity .25s ease;
}

/* Année : alternance dessus / dessous */
.st-timeline__year {
    position: absolute;
    left: 0;
    transform: translateX(-50%);
    font-size: 15px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    color: var(--tl-brun);
    transition: color .25s ease, transform .25s ease;
}
.st-timeline__step:nth-child(odd)  .st-timeline__year { bottom: calc(50% + 16px); }
.st-timeline__step:nth-child(even) .st-timeline__year { top: calc(50% + 16px); }

/* Les extrémités du rail sont volontairement insetées : chaque libellé reste
   centré sur son point sans sortir du conteneur, y compris 1989 et 2025. */

/* Survol : rond +10 % à 50 % d'opacité (appareils avec souris uniquement) */
@media (hover: hover) {
    .st-timeline__step:hover .st-timeline__dot {
        transform: translate(-50%, -50%) scale(1.1);
        background: var(--tl-terracotta);
        opacity: .5;
    }
    .st-timeline__step:hover .st-timeline__year {
        color: var(--tl-terracotta);
        transform: translateX(-50%) scale(1.1);
        transform-origin: center;
    }
}

/* Actif : point et date plus grands, en terracotta */
.st-timeline__step.is-active .st-timeline__dot {
    background: var(--tl-terracotta);
    transform: translate(-50%, -50%) scale(1.6);
    opacity: 1;
}
.st-timeline .st-timeline__step.is-active .st-timeline__year {
    color: var(--tl-terracotta);
    transform: translateX(-50%) scale(1.18);
    transform-origin: center;
}

/* Focus clavier */
.st-timeline__step:focus-visible {
    outline: 2px solid var(--tl-terracotta);
    outline-offset: 6px;
}

/* --------------------------------------------------------------------------
   Carte texte (mobile : cadre arrondi, balayable)
   -------------------------------------------------------------------------- */
.st-timeline__card {
    position: relative;
    padding: 24px 20px;
    border-radius: 16px;
    background: #FFFBF5;
    touch-action: pan-y;      /* laisse le scroll vertical, capte le balayage horizontal */
}
.st-timeline__panels { text-align: center; }

.st-timeline__panel {
    animation: st-timeline-fade .3s ease;
}
.st-timeline__panel[hidden] { display: none; }

.st-timeline__title {
    margin: 0 0 16px;
    font-size: 22px;
    line-height: 1.25;
    font-weight: 400;
    color: var(--tl-terracotta);
}
.st-timeline__text {
    margin: 0 auto;
    max-width: 820px;
    font-size: 15px;
    line-height: 1.7;
}
.st-timeline__text p { margin: 0 0 .8em; }
.st-timeline__text p:last-child { margin-bottom: 0; }

@keyframes st-timeline-fade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* --------------------------------------------------------------------------
   Flèches (masquées sur mobile, remplacées par les puces)
   -------------------------------------------------------------------------- */
.st-timeline__nav { display: none; }

/* --------------------------------------------------------------------------
   Pagination par puces (mobile uniquement)
   -------------------------------------------------------------------------- */
.st-timeline__dots {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0;
    margin-top: 16px;
}
.st-timeline .st-timeline__pagedot,
.st-timeline .st-timeline__pagedot:hover,
.st-timeline .st-timeline__pagedot:focus,
.st-timeline .st-timeline__pagedot:active {
    background: transparent;
    box-shadow: none;
    border: 0;
}
.st-timeline__pagedot {
    position: relative;
    display: inline-block;
    width: 24px;              /* zone tactile étroite : puces rapprochées */
    height: 44px;
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}
.st-timeline__pagedot::before {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    width: 10px;
    height: 10px;
    border-radius: 999px;
    background: var(--tl-gris);
    transform: translate(-50%, -50%);
    transition: width .25s ease, background-color .25s ease;
}
.st-timeline__pagedot.is-active::before {
    width: 24px;              /* puce active plus large */
    background: var(--tl-terracotta);
}

/* --------------------------------------------------------------------------
   Tablette / Desktop (≥ 768px)
   -------------------------------------------------------------------------- */
@media (min-width: 768px) {
    .st-timeline { padding: 40px 0 56px; }

    .st-timeline__rail { height: 110px; margin-bottom: 40px; }
    .st-timeline__year { font-size: 17px; }
    .st-timeline__step.is-active .st-timeline__year { font-size: 17px; }

    /* Carte desktop : sans cadre, texte centré */
    .st-timeline__card {
        padding: 0;
        border-radius: 0;
        background: transparent;
    }
    .st-timeline__title { font-size: 30px; }
    .st-timeline__text  { font-size: 17px; }

    /* Flèches rondes sous le texte */
    .st-timeline__nav {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 14px;
        margin-top: 32px;
    }
    .st-timeline .st-timeline__arrow,
    .st-timeline .st-timeline__arrow:hover,
    .st-timeline .st-timeline__arrow:focus {
        display: inline-flex;
        align-items: center;
        justify-content: center;
        width: 54px;
        height: 54px;
        padding: 0;
        border-radius: 50%;
        box-shadow: none;
        cursor: pointer;
        transition: background-color .2s ease, color .2s ease, opacity .2s ease;
    }
    /* Précédente : fond clair, liseré et chevron bruns */
    .st-timeline .st-timeline__arrow--prev {
        background: #FFFBF5;
        border: 1px solid var(--tl-brun);
        color: var(--tl-brun);
    }
    /* Suivante : rond plein brun, chevron blanc */
    .st-timeline .st-timeline__arrow--next {
        background: var(--tl-brun);
        border: 1px solid var(--tl-brun);
        color: #fff;
    }
    .st-timeline .st-timeline__arrow:hover    { opacity: .85; }
    .st-timeline .st-timeline__arrow:disabled { opacity: .35; cursor: default; }

    /* Puces masquées sur desktop */
    .st-timeline__dots { display: none; }
}

/* --------------------------------------------------------------------------
   Accessibilité : réduction des animations
   -------------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
    .st-timeline__panel { animation: none; }
    .st-timeline__dot,
    .st-timeline__year,
    .st-timeline__pagedot::before { transition: none; }
}