/* ==========================================================================
   STYLE DE LA FRISE CHRONOLOGIQUE (TIMELINE)
   ========================================================================== */

/* --- Custom Scrollbar --- */
.custom-scrollbar::-webkit-scrollbar {
    height: 8px;
}

.custom-scrollbar::-webkit-scrollbar-track {
    background: var(--bg-primary); 
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
    background: linear-gradient(90deg, var(--color-sky), var(--color-cosmic)); 
    border-radius: 10px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
    background: linear-gradient(90deg, var(--color-cosmic), var(--color-sky)); 
}

/* --- Positionnement des cartes de la timeline --- */
.timeline-top-card {
    bottom: 50%;
    margin-bottom: 50px !important;
}

.timeline-bottom-card {
    top: 50%;
    margin-top: 50px !important;
}

/* --- Positionnement des connecteurs --- */
.timeline-connector {
    width: 4px;
    height: 50px;
    transform: translateX(-50%);
    z-index: 1;
    opacity: 0.8;
}

.timeline-connector-top {
    bottom: 50%;
}

.timeline-connector-bottom {
    top: 50%;
}


/* --- Nouveaux utilitaires pour remplacer les styles inline --- */
.timeline-line {
    height: 4px;
    background: linear-gradient(90deg, var(--color-sky), var(--color-cosmic));
    transform: translateY(calc(-50% - 4px)); /* -4px pour compenser exactement la hauteur de la scrollbar (8px) */
    opacity: 0.6;
}

.timeline-container-about {
    height: 650px;
}

.timeline-container-portfolio {
    height: 750px;
}

.timeline-item-wrapper {
    width: 320px;
    height: 100%;
}

.timeline-node {
    width: 16px;
    height: 16px;
    transform: translate(-50%, -50%);
    z-index: 2;
    background: var(--color-sky);
    box-shadow: 0 0 10px var(--color-sky) !important;
}

.timeline-card {
    min-height: 180px;
    position: relative;
    z-index: 10;
}

.timeline-card:hover {
    z-index: 20;
}

.timeline-icon {
    width: 45px;
    height: 45px;
    z-index: 5;
}

.timeline-img {
    height: 160px;
}