/* ============================================================
   Timeline Yolo
   Image (collante) + étapes numérotées reliées par une ligne,
   révélées au scroll. Couleurs pilotées par variables (déclinable).
   ============================================================ */

.tl {
	--tl-gap: 64px;
	--tl-num: 56px;
	--tl-num-bg: #ffffff;
	--tl-num-color: #ff5a2d;
	--tl-line: rgba(255, 255, 255, 0.6);
	--tl-line-w: 2px;
	--tl-step-gap: 44px;
	--tl-col-gap: 28px;
	--tl-line-dur: 0.9s;
	--tl-step-dur: 0.6s;
	--tl-btn-circle-bg: #ffffff;
	--tl-btn-arrow: #1a0b4d;
	--tl-btn-bg: #1a0b4d;
	--tl-btn-color: #ffffff;

	display: grid;
	grid-template-columns: 1fr 1fr;
	gap: var(--tl-gap);
	align-items: start;
}

/* Image à droite : on inverse l'ordre des colonnes */
.tl--img-right .tl__media { order: 2; }
.tl--img-right .tl__steps { order: 1; }

/* --- Colonne image --------------------------------------------------- */
.tl__media { min-width: 0; }

.tl__media img {
	display: block;
	width: 100%;
	height: auto;
	border-radius: 18px;
}

/* --- Colonne étapes -------------------------------------------------- */
.tl__steps { min-width: 0; }

.tl__list {
	position: relative;
	list-style: none;
	margin: 0;
	padding: 0;
}

.tl__step {
	display: grid;
	grid-template-columns: var(--tl-num) 1fr;
	gap: var(--tl-col-gap, 28px);
	align-items: start;
	position: relative;
}

/* Ligne verticale : chaque étape (sauf la dernière) trace le segment qui
 * la relie à l'étape suivante. La dernière n'en trace pas → la ligne
 * s'arrête pile au centre du dernier cercle, aucun dépassement. */
.tl__step:not(:last-child)::after {
	content: "";
	position: absolute;
	left: calc(var(--tl-num) / 2 - var(--tl-line-w, 2px) / 2);
	top: calc(var(--tl-num) / 2);
	height: calc(100% + var(--tl-step-gap));
	width: var(--tl-line-w, 2px);
	background: var(--tl-line);
	z-index: 0;
	transform: scaleY(0);
	transform-origin: top center;
	transition: transform var(--tl-line-dur, 0.9s) ease;
}
.tl__step.is-visible:not(:last-child)::after { transform: scaleY(1); }

.tl__step + .tl__step { margin-top: var(--tl-step-gap); }

.tl__marker {
	width: var(--tl-num);
	height: var(--tl-num);
	border-radius: 50%;
	background: var(--tl-num-bg);
	display: flex;
	align-items: center;
	justify-content: center;
	position: relative;
	z-index: 1; /* passe au-dessus de la ligne */
}

.tl__num {
	color: var(--tl-num-color);
	font-weight: 700;
	font-size: 18px;
	line-height: 1;
}

.tl__content { padding-top: 4px; }

.tl__title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 26px;
	line-height: 1.2;
}

.tl__text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.6;
}

.tl__bottom {
	margin-top: 40px;
	margin-left: calc(var(--tl-num) + var(--tl-col-gap, 28px)); /* aligné avec le texte des étapes */
}

.tl__outro {
	margin: 0;
}

.tl__outro-title {
	margin: 0 0 10px;
	color: #fff;
	font-size: 24px;
	line-height: 1.2;
}

.tl__outro-text {
	margin: 0;
	color: rgba(255, 255, 255, 0.92);
	font-size: 16px;
	line-height: 1.6;
}

/* --- Bouton optionnel (pill type Yolo) ------------------------------- */
.tl__btn {
	display: inline-flex;
	align-items: center;
	gap: var(--btn-gap, 16px);
	margin-top: 24px;
	padding: var(--btn-pad, 5px 10px 5px 20px);
	border-radius: 999px;
	background: var(--tl-btn-bg);
	color: var(--tl-btn-color);
	text-decoration: none;
	font-weight: 600;
	line-height: 1;
	transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1);
}

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

.tl__btn-circle {
	width: var(--btn-icon, 40px);
	height: var(--btn-icon, 40px);
	display: flex;
	align-items: center;
	justify-content: center;
	flex: 0 0 auto;
	transition: transform 0.4s cubic-bezier(0.22, 1, 0.36, 1);
}
.tl__btn:hover .tl__btn-circle { transform: rotate(-45deg); }
.tl__btn-circle svg circle { fill: var(--tl-btn-circle-bg, #fff); }
.tl__btn-circle svg path   { stroke: var(--tl-btn-arrow, #1a0b4d); }

.tl__btn-circle svg { width: var(--btn-icon, 40px); height: var(--btn-icon, 40px); display: block; }

/* --- Révélation au scroll -------------------------------------------- */
/* Animation par couches : le marqueur "pop" avec un léger rebond, le contenu
 * glisse en montant juste après — plus vivant qu'un simple fade. */
.tl__marker {
	opacity: 0;
	transform: scale(0.4);
	transition:
		opacity   0.45s ease,
		transform var(--tl-step-dur, 0.6s) cubic-bezier(0.34, 1.45, 0.5, 1);
	will-change: transform, opacity;
}
.tl__content {
	opacity: 0;
	transform: translateY(16px);
	transition:
		opacity   0.5s ease 0.1s,
		transform var(--tl-step-dur, 0.6s) cubic-bezier(0.22, 1, 0.36, 1) 0.1s;
}
.tl__step.is-visible .tl__marker  { opacity: 1; transform: scale(1); }
.tl__step.is-visible .tl__content { opacity: 1; transform: none; }

@media (prefers-reduced-motion: reduce) {
	.tl__marker, .tl__content {
		opacity: 1;
		transform: none;
		transition: none;
	}
	.tl__step:not(:last-child)::after { transform: scaleY(1); transition: none; }
	.tl__btn, .tl__btn-circle { transition: none; }
}

/* --- Responsive ------------------------------------------------------ */
@media (max-width: 900px) {
	.tl {
		grid-template-columns: 1fr;
		gap: 36px;
	}

	/* Image toujours au-dessus des étapes, quelle que soit la position desktop */
	.tl__media { order: 0; }
	.tl__steps { order: 1; }

	.tl__title { font-size: 22px; }
}

@media (max-width: 480px) {
	.tl {
		--tl-num: 46px;
		--tl-gap: 28px;
	}

	.tl__step + .tl__step { margin-top: 32px; }
	.tl__num { font-size: 15px; }
	.tl__title { font-size: 20px; }
	.tl__text { font-size: 15px; }

	.tl__bottom { margin-left: 0; }
}