/**
 * Bloc : lg/chronologie
 *
 * Timeline verticale des étapes clés du groupe.
 * Mobile-first : empilé à gauche de la ligne, puis alternance gauche/droite sur desktop.
 *
 * SPECS VISUELLES:
 * ─────────────────────────────────────────────────────────────
 * - Titre de section en haut
 * - Timeline verticale avec ligne centrale
 * - Chaque étape :
 *   - Date (année) affichée en gros, bold
 *   - Dot/marqueur sur la ligne de timeline (cercle, couleur accent)
 *   - Titre de l'étape en bold
 *   - Texte descriptif en gris
 *   - Image miniature (border-radius)
 * - Ligne verticale reliant les étapes (trait fin gris ou accent)
 * - Desktop : étapes alternent gauche/droite par rapport à la ligne centrale
 * - Mobile : toutes les étapes à droite de la ligne (ligne à gauche)
 * - NOTE : Animation scroll JS à confirmer (avenant)
 * ─────────────────────────────────────────────────────────────
 *
 * Couche : @layer blocks
 *
 * @since 1.0.0
 */

.lg-chronologie__title {
			font-family: var(--ff-heading);
			font-size: var(--fs-h2);
			font-weight: var(--fw-bold);
			line-height: var(--lh-tight);
			text-transform: uppercase;
			color: var(--color-noir-primary);
			text-align: center;
			margin-bottom: var(--space-10);
		}

/* ── Container de la timeline ── */

.lg-chronologie__timeline {
			position: relative;
			padding: var(--space-6) 0;
		}

/* Ligne verticale de la timeline */

.lg-chronologie__line {
			position: absolute;
			left: 20px;
			top: 0;
			bottom: 0;
			width: 2px;
			background: var(--color-gris-border);
		}

/* ── Étape ── */

.lg-chronologie__step {
			position: relative;
			padding-left: 60px;
			margin-bottom: var(--space-8);
		}

.lg-chronologie__step:last-child {
			margin-bottom: 0;
		}

/* Dot/marqueur sur la ligne */

.lg-chronologie__step-dot {
			position: absolute;
			left: 12px;
			top: 4px;
			width: 18px;
			height: 18px;
			border-radius: var(--radius-full);
			background: var(--color-accent);
			border: 3px solid var(--color-blanc);
			box-shadow: 0 0 0 2px var(--color-accent);
			z-index: 1;
		}

.lg-chronologie__step-date {
			font-family: var(--ff-heading);
			font-size: var(--fs-h3);
			font-weight: var(--fw-bold);
			color: var(--color-accent);
			margin-bottom: var(--space-2);
		}

.lg-chronologie__step-content {
			display: flex;
			flex-direction: column;
			gap: var(--space-3);
		}

.lg-chronologie__step-title {
			font-family: var(--ff-heading);
			font-size: var(--fs-body-lg);
			font-weight: var(--fw-bold);
			line-height: var(--lh-heading);
			color: var(--color-noir-primary);
		}

.lg-chronologie__step-text {
			font-size: var(--fs-body-sm);
			line-height: var(--lh-body);
			color: var(--color-text-muted);
		}

.lg-chronologie__step-image {
			width: 100%;
			max-width: 280px;
			height: auto;
			border-radius: var(--radius-md);
			-o-object-fit: cover;
			   object-fit: cover;
		}

/* ============================================
		   Desktop — Alternance gauche/droite
		   ============================================ */

@media (min-width: 1024px) {
	.lg-chronologie {

			/* Ligne centrale */

			/* Étapes à gauche */

			/* Étapes à droite */
	}
			.lg-chronologie__line {
				left: 50%;
				transform: translateX(-50%);
			}

			.lg-chronologie__step {
				width: 50%;
				padding-left: 0;
			}
			.lg-chronologie__step--left {
				padding-right: var(--space-10);
				text-align: right;
			}

				.lg-chronologie__step--left .lg-chronologie__step-content {
					align-items: flex-end;
				}

			.lg-chronologie__step--left .lg-chronologie__step-dot {
				left: auto;
				right: -9px;
			}
			.lg-chronologie__step--right {
				margin-left: 50%;
				padding-left: var(--space-10);
			}

			.lg-chronologie__step--right .lg-chronologie__step-dot {
				left: -9px;
			}
		}