:root{
	--bg:#f6f8fb;
	--text:#0e2366;
	--body:#0b1220;
	--muted:#dbe3ef;
	--rail:#0e2a57;
	--dot:#6b8197;
	--card:#ffffff;
}

p.lead{
	margin:.6rem auto 0;
	max-width:70ch;
	color:#2b3858;
}

.timeline{
	position:relative;
	padding:30px 0 70px;
}

.timeline::before{
	content:"";
	position:absolute;
	left:40px;
	top:0;
	bottom:0;
	width:2px;
	background: var(--rail);
}

.event{
	position:relative;
	display:grid;
	grid-template-columns: 150px 1fr;
	gap:36px;
	align-items:start;
	padding:38px 0;
}

.event + .event{
	border-top:1px solid var(--muted);
}

.event::after{
	content:"";
	position:absolute;
	left:40px;
	top:58px;
	bottom:-38px;
	width:2px;
	background: var(--rail);
	opacity:.9;
}

.event:last-child::after{
	display:none;
}

.event .marker{
	position:absolute;
	left:31px;
	top:40px;
	width:18px;
	height:18px;
	border-radius:50%;
	background: radial-gradient(circle at 35% 35%, #F44336, #8ba0b5);
	box-shadow: 0 0 0 6px rgba(14,42,87,.12);
}

.event .left{
	padding-left:70px;
}

.event .year{
	display:block;
	font-weight:800;
	font-size:1.30rem;
	letter-spacing:.02em;
	color:#e82c2b;
	margin-bottom:.35rem;
}

.event .title{
	margin:0;
	font-size: clamp(1.2rem, 1.2vw + .9rem, 2.1rem);
	color:var(--text);
	line-height:1.25;
}


.event .right{
	position:relative;
	z-index:500;
}

.event .desc{
	margin:.25rem 0 1rem;
}

.event .media{
	/*border-radius:16px; */
	overflow:hidden;
	border:1px solid var(--muted);
	box-shadow: 0 10px 26px rgba(10,20,50,.07);
	margin:0;
}

.event .media img{
		display:block;
		width:100%;
		height:auto;
	 background: #e2e2e263;
}

.card{
	background:var(--card);
	border-radius:18px;
	border:1px solid var(--muted);
	padding:18px 20px;
}

.card a{
	color:red !important;
}
.card li{
	padding:5px;
}

@media (max-width: 900px){
	.timeline::before{
		left:22px;
	}
	.event{
		grid-template-columns: 1fr;
		gap:14px;
		padding:26px 0;
	}
	.event .marker{
		left:13px;
		top:26px;
	}
	.event .left{
		padding-left:48px;
	}
	.event .title{
		font-size:clamp(1.1rem, 4.5vw, 1.6rem);
	}
	.event::after{
		left:22px;
		top:42px;
		bottom:-26px;
	}
}

@media print{
	.event + .event{ border-color:#ddd; }
	.timeline::before{ background:#777; }
	.card{ box-shadow:none; }
}

/* Styles optionnels d'écran — supprime-les si non voulus
.event + .event{ border-color:#ddd; }
.timeline::before{ background:#777; }
.card{ box-shadow:none; }
*/