/* ==========================================================
   Timeline widget - CSS
   À enqueue via wp_enqueue_style dans ton plugin, comme tes
   autres widgets custom (ou coller dans le CSS custom d'Elementor)
   ========================================================== */

.tl-wrapper {
    /* Valeurs par défaut, écrasées par les selectors des controls Elementor */
    --tl-line-color: #c9d1d3;
    --tl-line-width: 1px;
    --tl-dot-color: #2b3a42;
    --tl-dot-inner-color: #c4d600;
    --tl-dot-size: 18px;
    --tl-item-spacing: 60px;

    position: relative;
}

.tl-item {
    position: relative;
    display: flex;
    padding-left: calc(var(--tl-dot-size) + 30px);
    margin-bottom: var(--tl-item-spacing);
}

.tl-item--last {
    margin-bottom: 0;
}

/* La ligne verticale : un pseudo-élément sur le marker, qui part
   du centre du dot courant jusqu'au centre du prochain dot. */
.tl-marker {
    position: absolute;
    left: 0;
    top: 0;
    bottom: 0;
    width: var(--tl-dot-size);
    display: flex;
    justify-content: center;
}

.tl-marker::before {
    content: "";
    position: absolute;
    top: calc(var(--tl-dot-size) / 2);
    left: 50%;
    transform: translateX(-50%);
    width: var(--tl-line-width);
    /* la ligne traverse tout l'espacement + la hauteur du prochain dot */
    height: calc(100% + var(--tl-item-spacing));
    background-color: var(--tl-line-color);
    z-index: 1;
}

.tl-item--last .tl-marker::before {
    display: none; /* pas de ligne après le dernier point */
}

.tl-dot {
    position: relative;
    z-index: 2;
    width: var(--tl-dot-size);
    height: var(--tl-dot-size);
    border-radius: 50%;
    border: 2px solid var(--tl-dot-color);
    background: #f2f1ec; /* même couleur que le fond, ajuste au besoin */
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.tl-dot::after {
    content: "";
    width: 40%;
    height: 40%;
    border-radius: 50%;
    background-color: var(--tl-dot-inner-color);
}

.tl-body {
    flex: 1;
}

.tl-title {
    font-size: 48px;
    font-weight: 400;
    line-height: 1.1;
    margin-bottom: 10px;
}

.tl-text {
    font-size: 18px;
    line-height: 1.5;
}