.card-body{
    box-shadow: 0 6px 16px rgba(0,0,0,0.30);
}

.timeline-branch {
    position: relative;
    width: 100%;
    min-height: 500px; /* Ajustez selon vos besoins */
    overflow: hidden;
    /*box-shadow: 0 6px 16px rgba(0,0,0,0.20);*/
}

/* L'image de fond qui REMPLIT toute la div */
.timeline-branch::before {
    content: "";
    position: absolute;
    inset: 0;
    background-image: url('/images/Ligne_du_Temps.png');
    background-size: 100% 100%; /* Force l'image à remplir 100% de la largeur ET 100% de la hauteur */
    background-repeat: no-repeat;
    background-position: center;
    z-index: 1;
    animation: softWave 5s ease-in-out infinite alternate;
}

/* Animation douce */
@keyframes softWave {
    0% { transform: scale(1) translateY(0); }
    100% { transform: scale(1.02) translateY(-4px); }
}

/* Le contenu reste au-dessus */
.timeline-content {
    position: relative;
    z-index: 2;
}

/* Bulle */
.timeline-node {
    position: absolute;
    width: 180px;
    max-width: 40vw;
    opacity: 0;
    transform: scale(0.9);
    transition: opacity .6s ease, transform .6s ease;
}

.timeline-node.visible {
    opacity: 1;
    transform: scale(1);
}

.timeline-node-inner {
    background: #fff7e3;
    border-radius: 50%;
    padding: 15px;
    text-align: center;
    /*box-shadow: 0 6px 16px rgba(0,0,0,0.20);*/
    box-shadow: 0 6px 16px rgba(0,0,0,0.20);
    font-size: 0.85rem;
}

/* Année en plus gros dans la bulle */
.timeline-year {
    font-weight: 700;
    margin-bottom: 4px;
}

/* Image à l’intérieur de la bulle (optionnelle) */
.timeline-img {
    width: 70px;
    height: 70px;
    object-fit: cover;
    border-radius: 50%;
    margin-bottom: 6px;
}

/* Titre et texte */
.timeline-title {
    font-weight: 600;
    margin-bottom: 2px;
}

.timeline-text {
    font-size: 0.8rem;
}

/* Positions des bulles le long de la branche (en S) */
.timeline-pos-1 { top: 10%; left: 8%; }
.timeline-pos-2 { top: 30%; left: 28%; }
.timeline-pos-3 { top: 15%; left: 50%; }
.timeline-pos-4 { top: 40%; left: 70%; }
.timeline-pos-5 { top: 65%; left: 55%; }
.timeline-pos-6 { top: 75%; left: 30%; }
.timeline-pos-7 { top: 55%; left: 12%; }

/* Responsive : resserrer un peu sur mobile */
@media (max-width: 768px) {
    .timeline-node {
        width: 140px;
    }
}

.timeline-bubble {
    opacity: 0;
    transform: scale(0.9);
    transition: opacity .8s ease, transform .8s ease;
}

.timeline-bubble.visible {
    opacity: 1;
    transform: scale(1);
}