/* =========================================================
   Enterprise Story Timeline – HORIZONTAL – style.css v2.1
   ========================================================= */

/* ── Wrapper ── */
.tl-wrapper-817eaa67 {
    position: relative;
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
    padding: 20px 20px 40px;
    box-sizing: border-box;
    overflow: hidden;
}

/* ── Horizontal track ── */
.tl-track-817eaa67 {
    display: flex;
    flex-direction: row;
    align-items: flex-start;  /* tous les cols partent du haut */
    position: relative;
    gap: var(--tl-col-gap, 0px);
}

/* ── Ligne horizontale via ::before ──
   Position = hauteur zone image + moitié dot (28px / 2 = 14px)
   Valeur par défaut : 160 + 14 = 174px
   Overridable via Elementor selector sur image_height              */
.tl-track-817eaa67::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    height: 4px;
    background-color: #C8722A;
    top: 174px;
    z-index: 1;
}

/* ── Colonne (1 étape) ── */
.tl-col-817eaa67 {
    flex: 1 1 0;
    min-width: 160px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
    z-index: 2;
}

/* ── Zone illustration ── */
.tl-img-wrap-817eaa67 {
    width: 100%;
    height: 160px;
    display: flex;
    justify-content: center;
    align-items: flex-end;
    padding: 0 8px 16px;
    box-sizing: border-box;
}

.tl-img-817eaa67 {
    max-width: 100%;
    max-height: 140px;
    object-fit: contain;
    display: block;
}

.tl-img-placeholder-817eaa67 {
    width: 72px;
    height: 72px;
    border-radius: 50%;
    background: #f0ede8;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #bbb;
}

/* ── Dot row ── */
.tl-dot-row-817eaa67 {
    display: flex;
    justify-content: center;
    align-items: center;
    width: 100%;
    height: 28px;
    position: relative;
    z-index: 3;
}

.tl-dot-817eaa67 {
    width: 20px;
    height: 20px;
    border-radius: 50%;
    background-color: var(--tl-item-color, #C8722A);
    border: 4px solid #fff;
    box-shadow: 0 0 0 3px var(--tl-item-color, #C8722A);
    flex-shrink: 0;
    z-index: 4;
    position: relative;
}

/* ── Zone texte (toujours en bas) ── */
.tl-text-wrap-817eaa67 {
    width: 100%;
    padding: 16px 12px 0;
    box-sizing: border-box;
    text-align: center;
}

/* ── Année ── */
.tl-year-817eaa67 {
    font-size: 28px;
    font-weight: 800;
    line-height: 1;
    color: var(--tl-item-color, #C8722A);
    display: block;
    margin-bottom: 6px;
}

/* ── Titre ── */
.tl-title-817eaa67 {
    margin: 0 0 6px;
    font-size: 14px;
    font-weight: 700;
    color: #1a1a2e;
    line-height: 1.35;
}

/* ── Description ── */
.tl-desc-817eaa67 {
    margin: 0;
    font-size: 13px;
    color: #555;
    line-height: 1.55;
}

/* =========================================================
   RESPONSIVE ≤ 767px — carousel avec navigation soignée
   ========================================================= */
@media (max-width: 767px) {

    .tl-wrapper-817eaa67 {
        padding: 10px 0 16px;
    }

    /* ── Track scrollable ── */
    .tl-track-817eaa67 {
        overflow-x: auto;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        -ms-overflow-style: none;
        /* peek effect : on voit le bord du suivant */
        padding: 0 10vw 16px;
        gap: 16px;
    }

    .tl-track-817eaa67::-webkit-scrollbar { display: none; }

    /* ── Chaque carte ── */
    .tl-col-817eaa67 {
        flex: 0 0 72vw;
        min-width: 200px;
        max-width: 260px;
        scroll-snap-align: center;
        /* card visuelle */
        background: #fff;
        border-radius: 14px;
        box-shadow: 0 4px 18px rgba(0,0,0,0.08);
        padding-bottom: 20px;
        overflow: hidden;
    }

    /* Ligne masquée sur mobile (inutile dans le scroll) */
    .tl-track-817eaa67::before { display: none; }

    /* Image prend toute la largeur de la carte */
    .tl-img-wrap-817eaa67 {
        width: 100%;
        height: 130px;
        padding: 12px 12px 8px;
        background: #faf8f5;
        border-bottom: 1px solid #f0ede8;
    }

    /* Dot + couleur accent dans la carte */
    .tl-dot-row-817eaa67 { height: 20px; margin-top: 8px; }

    .tl-dot-817eaa67 {
        width: 14px;
        height: 14px;
    }

    .tl-text-wrap-817eaa67 { padding: 10px 14px 0; text-align: left; }

    .tl-year-817eaa67 { font-size: 22px; }

    /* ── Barre de navigation ── */
    .tl-nav-817eaa67 {
        display: flex;
        align-items: center;
        justify-content: center;
        gap: 16px;
        padding: 16px 20px 4px;
    }

    /* Flèches prev / next */
    .tl-nav-btn-817eaa67 {
        width: 36px;
        height: 36px;
        border-radius: 50%;
        border: 2px solid #ddd;
        background: #fff;
        cursor: pointer;
        display: flex;
        align-items: center;
        justify-content: center;
        transition: border-color 0.2s, background 0.2s;
        flex-shrink: 0;
        padding: 0;
    }

    .tl-nav-btn-817eaa67:hover,
    .tl-nav-btn-817eaa67:focus-visible {
        border-color: var(--tl-nav-color, #C8722A);
        background: var(--tl-nav-color, #C8722A);
    }

    .tl-nav-btn-817eaa67:hover svg,
    .tl-nav-btn-817eaa67:focus-visible svg {
        stroke: #fff;
    }

    .tl-nav-btn-817eaa67:disabled {
        opacity: 0.3;
        cursor: default;
    }

    .tl-nav-btn-817eaa67 svg {
        width: 18px;
        height: 18px;
        stroke: #666;
        fill: none;
        stroke-width: 2;
        stroke-linecap: round;
        stroke-linejoin: round;
        transition: stroke 0.2s;
    }

    /* Dots indicateurs */
    .tl-scroll-hint-817eaa67 {
        display: flex;
        gap: 6px;
        align-items: center;
    }

    .tl-scroll-hint-817eaa67 span {
        width: 7px;
        height: 7px;
        border-radius: 50%;
        background: #ddd;
        transition: background 0.25s, transform 0.25s, width 0.25s;
        flex-shrink: 0;
    }

    .tl-scroll-hint-817eaa67 span.active {
        background: var(--tl-nav-color, #C8722A);
        width: 20px;
        border-radius: 4px;
        transform: none;
    }
}

/* Desktop : masquer la nav mobile */
@media (min-width: 768px) {
    .tl-nav-817eaa67 { display: none; }
    .tl-scroll-hint-817eaa67 { display: none; }
}