/* ================= INTRODUCTION DE LA TIMELINE ================= */

/* Bloc d’introduction de la timeline */
.timeline-intro {
    text-align: center; /* Centre le texte */
    margin-top: 100px; /* Espace au-dessus de la section */
    margin-bottom: 60px; /* Espace sous l’introduction */
}

/* Titre de l’introduction */
.timeline-intro h2 {
    color: #2c5530; /* Vert principal */
    font-size: 2.2em; /* Taille du titre */
    margin-bottom: 15px; /* Espace sous le titre */
}

/* Texte de présentation de la timeline */
.timeline-intro p {
    font-size: 1.1em; /* Taille du texte */
    color: #666; /* Gris foncé */
    max-width: 600px; /* Largeur maximale pour la lisibilité */
    margin: 0 auto; /* Centrage horizontal */
}

/* ================= TIMELINE ================= */

/* Conteneur global de la timeline */
.timeline {
    position: relative; /* Base pour les éléments positionnés */
    margin: 0 auto 60px; /* Centrage avec marge basse */
}

/* Ligne verticale centrale de la timeline */
.timeline:before {
    content: ''; /* Élément décoratif sans contenu */
    position: absolute; /* Positionné par rapport à .timeline */
    left: 50%; /* Placé au centre horizontal */
    top: 0; /* Débute en haut */
    bottom: 0; /* S’étend jusqu’en bas */
    width: 2px; /* Épaisseur de la ligne */
    background-color: #2c5530; /* Couleur verte */
    transform: translateX(-50%); /* Centrage parfait */
}

/* Élément individuel de la timeline */
.timeline-item {
    position: relative; /* Nécessaire pour le positionnement interne */
    margin-bottom: 40px; /* Espace entre les événements */
    width: 50%; /* Prend la moitié de la largeur */
    padding: 0 40px; /* Espace autour du contenu */
    opacity: 1; /* Visibilité complète */
}

/* Positionnement à gauche pour les éléments impairs */
.timeline-item:nth-child(odd) {
    left: 0; /* Collé à gauche */
}

/* Positionnement à droite pour les éléments pairs */
.timeline-item:nth-child(even) {
    left: 50%; /* Décalé à droite */
}

/* Contenu de chaque événement */
.timeline-content {
    background-color: #e8f4ea; /* Fond vert clair */
    padding: 25px; /* Espacement interne */
    border-radius: 8px; /* Coins arrondis */
    position: relative; /* Base pour le point décoratif */
    transition: all 0.3s ease; /* Animation fluide */
    box-shadow: 0 4px 6px rgba(0,0,0,0.05); /* Ombre légère */
}

/* Icône de l’événement */
.timeline-icon {
    font-size: 1.5em; /* Taille de l’icône */
    margin-bottom: 10px; /* Espace sous l’icône */
}

/* Point circulaire reliant l’événement à la ligne centrale */
.timeline-content:after {
    content: ''; /* Élément décoratif */
    position: absolute; /* Positionnement libre */
    top: 25px; /* Alignement vertical avec le contenu */
    width: 20px; /* Largeur du point */
    height: 20px; /* Hauteur du point */
    background-color: #2c5530; /* Couleur verte */
    border-radius: 50%; /* Forme circulaire */
}

/* Position du point pour les événements à gauche */
.timeline-item:nth-child(odd) .timeline-content:after {
    right: -50px; /* Placé vers la ligne centrale */
}

/* Position du point pour les événements à droite */
.timeline-item:nth-child(even) .timeline-content:after {
    left: -50px; /* Placé vers la ligne centrale */
}