/**
 * Aratice — Timeline : frise chronologique alternée gauche/droite avec
 * courbe SVG hardcodée. Responsive : sur mobile, items en stack vertical
 * avec ligne simple à gauche et dots HTML.
 *
 * Architecture :
 *   .aratice-timeline = container principal
 *     .aratice-timeline__stage = position relative, contient SVG + items
 *       .aratice-timeline__svg = SVG hardcodé (path + dots embarqués)
 *       .aratice-timeline__items = single liste en ordre chronologique
 *         .aratice-timeline__item--left/--right = items en absolute desktop
 *           .aratice-timeline__dot-mobile = dot HTML visible mobile uniquement
 *     .aratice-timeline__final = bloc HORIZON centré, posé sous le stage
 *     .aratice-timeline__decor = SVG décoratif bottom-left
 */

.aratice-timeline {
    --at-blue: #163C79;
    --at-green: #8FB960;
    --at-blue-dark: #0E2348;
    --at-svg-width: 250px;

    position: relative;
    max-width: 1100px;
    margin: 0 auto;
    padding: 30px 20px 220px;
    font-family: 'Lexend Deca', 'Lexend', sans-serif;
    color: var(--at-blue);
}

.aratice-timeline * {
    font-family: inherit;
    box-sizing: border-box;
}

/* ===== Stage : SVG centré + items en absolute par-dessus ===== */
.aratice-timeline__stage {
    position: relative;
}

.aratice-timeline__svg {
    display: block;
    width: var(--at-svg-width);
    height: auto;
    margin: 0 auto;
    overflow: visible;
}

/* ===== Items : single ol, alternés via classes ===== */
.aratice-timeline__items {
    position: absolute;
    inset: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.aratice-timeline__item {
    position: absolute;
    top: var(--at-top);
    /* translateY(-30%) recale l'item pour que sa première ligne (la date)
       soit centrée verticalement sur le dot. */
    transform: translateY(-30%);
    /* Largeur = 50% - moitié SVG - padding latéral */
    width: calc(50% - (var(--at-svg-width) / 2) - 20px);
    padding: 0;
}

.aratice-timeline__item--left {
    left: 20px;
    text-align: left;
}

.aratice-timeline__item--right {
    right: 20px;
    text-align: left;
}

/* Dot mobile : caché sur desktop (les dots desktop sont dans le SVG) */
.aratice-timeline__dot-mobile {
    display: none;
}

/* ===== Contenu d'un item ===== */
.aratice-timeline__date {
    display: block;
    font-size: 32px;
    font-weight: 800;
    line-height: 1;
    color: var(--at-blue);
    letter-spacing: -1px;
    margin-bottom: 4px;
}

.aratice-timeline__titre {
    font-size: 16px;
    font-weight: 700;
    color: var(--at-blue);
    margin: 0 0 12px;
    line-height: 1.3;
}

.aratice-timeline__desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--at-blue);
    margin: 0;
    max-width: 360px;
}

.aratice-timeline__image {
    margin-top: 18px;
    max-width: 360px;
    position: relative;
    transform: rotate(-2deg);
}

.aratice-timeline__image::before {
    content: "";
    position: absolute;
    inset: 0;
    border-radius: 14px;
    background: var(--ati-bg, var(--at-green));
    transform: translate(14px, 14px);
    z-index: 0;
    transition: transform 0.4s ease;
}

.aratice-timeline__image img {
    position: relative;
    z-index: 1;
    display: block;
    width: 100%;
    height: auto;
    border-radius: 12px;
    box-shadow: 0 10px 24px rgba(22, 60, 121, 0.18);
}

/* ===== Étape finale ===== */
.aratice-timeline__final {
    text-align: center;
    margin-top: 24px;
    padding: 0 20px;
    position: relative;
    z-index: 2;
}

/* Dot vert HTML : caché sur desktop (le SVG contient déjà sa version)
   visible sur mobile pour fermer la timeline au-dessus de "HORIZON 2026". */
.aratice-timeline__final-dot {
    display: none;
}

.aratice-timeline__final-surtitre {
    display: block;
    font-size: 24px;
    font-weight: 800;
    letter-spacing: 2px;
    color: var(--at-green);
    margin-bottom: 4px;
}

.aratice-timeline__final-titre {
    display: block;
    font-size: 16px;
    font-weight: 700;
    color: var(--at-blue);
    margin-bottom: 14px;
}

.aratice-timeline__final-desc {
    font-size: 14px;
    line-height: 1.6;
    color: var(--at-blue);
    max-width: 480px;
    margin: 0 auto;
}

/* ===== Décoration bottom-left ===== */
.aratice-timeline__decor {
    position: absolute;
    bottom: 0;
    left: -20px;
    width: 344px;
    height: 313px;
    pointer-events: none;
    z-index: 0;
    display: block;
}

/* ===========================================================
   RESPONSIVE
   =========================================================== */

/* Tablet : on resserre un peu (SVG plus étroit) */
@media (max-width: 1024px) {
    .aratice-timeline {
        --at-svg-width: 200px;
        padding: 30px 16px 200px;
    }

    .aratice-timeline__date {
        font-size: 28px;
    }

    .aratice-timeline__decor {
        width: 250px;
        height: 228px;
    }
}

/* Mobile : layout en stack vertical avec ligne verticale unique à gauche.
   - SVG courbe caché.
   - La ligne est un ::before sur le stage (couvre les items) prolongée par un
     ::before sur le bloc final (jusqu'au centre du dot vert).
   - Tous les dots (bleus + vert final) sont centrés sur la même position X
     via `left + transform: translateX(-50%)`. Pas de border-left, pas de
     décalages fragiles. */
@media (max-width: 768px) {
    .aratice-timeline {
        padding: 20px 12px 170px;
    }

    /* SVG courbe caché sur mobile */
    .aratice-timeline__svg {
        display: none;
    }

    /* Pas de ligne sur le stage : on ancre toute la ligne au bloc final
       via final::before (point fixe = dot vert) pour ne pas dépendre des
       marges/paddings imprévisibles entre stage et final. */
    .aratice-timeline__stage::before {
        display: none;
    }

    /* Items : flow normal, padding-left pour les dots, padding-bottom pour
       garder l'aération AVANT le bloc final sans introduire de margin-bottom
       qui casserait la continuité de la ligne. */
    .aratice-timeline__items {
        position: static;
        list-style: none;
        margin: 0;
        padding: 0 0 36px 60px;
        border: 0;
    }

    .aratice-timeline__item {
        position: relative;
        top: auto;
        left: auto;
        right: auto;
        transform: none;
        width: 100%;
        padding: 0;
        margin-bottom: 36px;
        text-align: left;
    }

    /* Dernier item : pas de margin-bottom, le bloc final colle juste derrière
       (la ligne reste continue via ::before). */
    .aratice-timeline__items>li:last-child {
        margin-bottom: 0;
    }

    /* Dot bleu : centré exactement sur la ligne via translateX(-50%) */
    .aratice-timeline__dot-mobile {
        display: block;
        position: absolute;
        left: -42px;
        transform: translateX(-50%);
        top: 8px;
        width: 14px;
        height: 14px;
        border-radius: 50%;
        background: var(--at-blue);
        box-shadow: 0 0 0 4px #fff;
        z-index: 1;
    }

    .aratice-timeline__date {
        font-size: 24px;
    }

    .aratice-timeline__titre {
        font-size: 15px;
        margin-bottom: 8px;
    }

    .aratice-timeline__desc {
        font-size: 13px;
        max-width: 100%;
    }

    .aratice-timeline__image {
        max-width: 100%;
    }

    /* Bloc final : aligné à gauche comme les items, dot sur la même ligne.
       Le padding-left match celui des items. z-index: auto sur mobile pour
       que la ligne du stage::before (z-index: 0) reste visible derrière le
       bloc final là où il n'y a pas de contenu opaque. */
    .aratice-timeline__final {
        position: relative;
        text-align: left;
        padding: 0 0 0 60px;
        margin-top: 0;
        z-index: auto;
    }

    /* LIGNE UNIQUE ancrée au bloc final : s'étend vers le haut sur 800px
       (couvre n'importe quel nombre d'items au-dessus) et descend jusqu'au
       centre du dot vert (top:0+14px). Le dot vert (z-index supérieur) la
       masque visuellement à partir de son sommet. Les dots bleus des items
       (z-index 1) masquent la ligne là où ils sont. */
    .aratice-timeline__final::before {
        content: '';
        position: absolute;
        left: 18px;
        top: -800px;
        height: 814px;
        width: 2px;
        margin-left: -1px;
        background: rgba(22, 60, 121, 0.35);
        z-index: 0;
    }

    /* Dot vert : centré sur la ligne, même position X que les dots bleus */
    .aratice-timeline__final-dot {
        display: block;
        position: absolute;
        left: 18px;
        transform: translateX(-50%);
        top: 0;
        margin: 0;
        width: 28px;
        height: 28px;
        border-radius: 50%;
        background: var(--at-green);
        border: 4px solid #fff;
        box-shadow: 0 0 0 3px var(--at-green);
        z-index: 1;
    }

    .aratice-timeline__final-surtitre {
        font-size: 20px;
    }

    .aratice-timeline__final-desc {
        margin-left: 0;
    }

    /* Décor : réduit + repositionné au plus près du bord */
    .aratice-timeline__decor {
        width: 200px;
        height: 182px;
        left: -12px;
    }
}

/* Très petit mobile : on réduit encore et on rapproche la ligne du bord. */
@media (max-width: 420px) {
    .aratice-timeline {
        padding: 16px 10px 150px;
    }

    .aratice-timeline__stage::before {
        left: 14px;
    }

    .aratice-timeline__items {
        padding-left: 48px;
    }

    .aratice-timeline__dot-mobile {
        left: -34px;
    }

    .aratice-timeline__final {
        padding-left: 48px;
    }

    .aratice-timeline__final::before {
        left: 14px;
    }

    .aratice-timeline__final-dot {
        left: 14px;
    }

    .aratice-timeline__date {
        font-size: 22px;
    }

    .aratice-timeline__decor {
        width: 150px;
        height: 137px;
        left: -8px;
    }
}