:root {
    --tl-bg: #ffffff;
    --tl-border: #e5e7eb;
    --tl-shadow: 0 2px 10px rgba(0,0,0,.06);
    --tl-month-odd: #fafafa;
    --tl-month-even: #f3f4f6;
    --tl-day-tick: rgba(17,24,39,.07);
    --tl-month-line: rgba(17,24,39,.16);
    --tl-header-text: #374151;
    --tl-accent: #5b8ef1;
    /* marge entre le bloc et les tooltips latérales */
    --tl-tip-gap: 8px;
    --tl-tip-bg: #111827;
    --tl-tip-text: #fff;
}

/* ====== Container ====== */
.timeline-root {
    position: relative;
    width: 100%;
    min-height: 164px;
    border: 1px solid var(--tl-border);
    border-radius: 12px;
    background: var(--tl-bg);
    box-shadow: var(--tl-shadow);
    overflow: visible;
    padding: 44px 0 14px 0; /* plus de marge à gauche/droite */
}

/* ====== Track / Layers ====== */

.timeline-months-layer,
.timeline-month-boundaries,
.timeline-days-layer {
    position: absolute;
    inset: 44px 0px 14px 0px;
    pointer-events: none;
    z-index: 1;
}

.timeline-track {
    position: relative;
    height: 96px;
    background: linear-gradient(to bottom, rgba(0,0,0,0.03), rgba(0,0,0,0.00));
    border-top: 1px solid var(--tl-border);
    position: relative;
    z-index: 2;
}


/* ====== Mois (bandes + label) ====== */
.month-band {
    position: absolute;
    top: 0;
    bottom: 0;
    border-left: 1px solid var(--tl-month-line);
}

    .month-band.even {
        background: var(--tl-month-even);
    }

    .month-band.odd {
        background: var(--tl-month-odd);
    }

    .month-band .month-label {
        position: absolute;
        top: -28px;
        left: 50%;
        transform: translateX(-50%);
        font-size: 12px;
        font-weight: 600;
        color: var(--tl-header-text);
        text-transform: capitalize;
        background: var(--tl-bg);
        padding: 0 6px;
        border-radius: 6px;
        white-space: nowrap; /* empêche le retour ligne "2025" */
        max-width: calc(100% - 8px);
        overflow: hidden;
        text-overflow: ellipsis;
        line-height: 1.2;
        pointer-events: none; /* pas d’interaction qui ferait remonter l’élément au-dessus des calques */
        z-index: 2; /* au-dessus des bandes, en dessous des tooltips si besoin */
    }

/* Lignes début de mois qui traversent toute la frise */
.month-boundary {
    position: absolute;
    top: -44px;
    bottom: -14px;
    width: 1px;
    background: var(--tl-month-line);
}

.timeline-month-boundaries .month-boundary:first-child {
    width: 0;
}

/* Ticks journaliers */
.day-tick {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: var(--tl-day-tick);
}

/* ====== Blocs ====== */
.timeline-block {
    position: absolute; /* référence pour tooltips internes */
    top: 28px;
    height: 36px;
    border-radius: 10px;
    background: color-mix(in srgb, var(--block-color) 85%, white 15%);
    border: 1px solid color-mix(in srgb, var(--block-color) 65%, black 15%);
    box-shadow: 0 2px 8px rgba(0,0,0,.08);
    cursor: grab;
    user-select: none;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .06s ease;
    z-index: 10; /* bloc normal */
}
    /* Le bloc “actif” (celui qui affiche le tooltip) passe DEVANT tous les autres */
    .timeline-block.is-active {
        z-index: 10000;
    }

    .timeline-block:hover {
        transform: translateY(-1px);
    }

    .timeline-block:active {
        cursor: grabbing;
    }

.timeline-block-label {
    font-weight: 700;
    font-size: 12px;
    line-height: 1;
    color: #0f172a;
    padding: 0 8px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 100%;
}

/* ====== Tooltips ====== */
.date-tip {
    position: absolute;
    padding: 4px 6px;
    font-size: 11px;
    border-radius: 6px;
    background: var(--tl-tip-bg);
    color: var(--tl-tip-text);
    box-shadow: 0 2px 6px rgba(0,0,0,.2);
    pointer-events: none;
    white-space: nowrap;
    display: inline-block;
    box-sizing: border-box;
    line-height: 1.2;
    z-index: 10001;
    pointer-events: none;
}

/* === Tooltips latérales : collées AUX CÔTÉS du bloc, à l’EXTÉRIEUR === */
.side-tip {
    top: 50%;
    transform: translateY(-50%);
}

/* Gauche : extérieur, collée au bord gauche du bloc */
.tip-left-out {
    right: calc(100% + var(--tl-tip-gap));
    left: auto;
    text-align: right;
}

    .tip-left-out::after {
        content: "";
        position: absolute;
        top: 50%;
        right: -5px;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-left-color: var(--tl-tip-bg);
    }

/* Droite : extérieur, collée au bord droit du bloc */
.tip-right-out {
    left: calc(100% + var(--tl-tip-gap));
    right: auto;
    text-align: left;
}

    .tip-right-out::after {
        content: "";
        position: absolute;
        top: 50%;
        left: -5px;
        transform: translateY(-50%);
        border: 5px solid transparent;
        border-right-color: var(--tl-tip-bg);
    }

/* Transitions douces uniquement lors du recalage post-drag */
.timeline-root.animating .timeline-track .timeline-block,
.timeline-root.animating .timeline-months-layer .month-band,
.timeline-root.animating .timeline-month-boundaries .month-boundary,
.timeline-root.animating .timeline-days-layer .day-tick {
    transition: left 220ms ease, width 220ms ease;
    will-change: left, width;
}

/* Respecte l’accessibilité “réduire les animations” */
@media (prefers-reduced-motion: reduce) {
    .timeline-root.animating .timeline-track .timeline-block,
    .timeline-root.animating .timeline-months-layer .month-band,
    .timeline-root.animating .timeline-month-boundaries .month-boundary,
    .timeline-root.animating .timeline-days-layer .day-tick {
        transition: none !important;
    }
}

/* lignes supplémentaires dans l'entête */
.mtl-days-row, .mtl-hours-row {
    position: relative;
    height: 20px;
    border-top: 1px solid var(--mtl-border, #e0e0e0);
}

.mtl-day-cell, .mtl-hour-cell {
    position: absolute;
    top: 0;
    bottom: 0;
    box-sizing: border-box;
    border-left: 1px dashed rgba(0,0,0,.08);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 11px;
    line-height: 1;
    user-select: none;
    pointer-events: none; /* évite tout conflit de clic */
}

.mtl-day-label {
    opacity: .7;
}

.mtl-hour-label {
    opacity: .6;
    font-size: 10px;
}

/* Optionnel : micro “grid” vertical léger dans la frise (pistes) aux heures */
.mtl-tracks .mtl-hour-grid {
    position: absolute;
    top: 0;
    bottom: 0;
    width: 1px;
    background: rgba(0,0,0,.05);
    pointer-events: none;
}