:root{
	  --bg:#f7f8fb; --card:#ffffff; --muted:#6b7280; --accent:#2b6cb0; --danger:#c53030; --success:#1f9d55;
	  --radius:14px; --max:900px;
	  /*font-family: Inter, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial;*/
	  font-family: 'Poppins', sans-serif;
	  --shadow: 0 4px 8px rgba(0,0,0,0.1);
	}
	*{box-sizing:border-box}
	body{margin:0;background:linear-gradient(180deg,#f7f8fb 0%, #ffffff 100%);color:#111827;line-height:1.5}
	.container{max-width:var(--max);margin:36px auto;padding:20px}
	header{display:grid;grid-template-columns:1fr 220px;gap:20px;align-items:center}
	.hero{background:var(--card);padding:24px;border-radius:18px;box-shadow:0 6px 20px rgba(16,24,40,0.06)}
	h1{margin:0 0 8px;font-size:28px;color:var(--muted);}
	p.lead{margin:0;color:var(--muted);text-align:left;}

	/* Illustration card */
	.illu{background:linear-gradient(135deg,#ffffff 0%, #eef6ff 100%);padding:18px;border-radius:18px;display:flex;align-items:center;justify-content:center}
	svg{max-width:100%;height:auto}

	/* Article layout */
	article{margin-top:22px;background:transparent}
	.meta{display:flex;gap:10px;align-items:center;margin-bottom:10px}
	.badge{background:var(--accent);color:#fff;padding:6px 10px;border-radius:999px;font-weight:600;font-size:13px}

	.timeline{display:grid;gap:12px;margin-top:12px;}
	.phase{display:grid;grid-template-columns:56px 1fr;gap:12px;padding:14px;background:var(--card);border-radius:12px;box-shadow:0 4px 16px rgba(17,24,39,0.04);}
	.phase h3{margin:0;font-size:16px}
	.phase p{margin:6px 0;color:var(--muted);text-align:left;}
	.phase ul{margin:8px 0 0 18px;color:var(--muted)}

	.quote{border-left:4px solid var(--accent);padding:12px 16px;background:linear-gradient(90deg,#ffffff,#fbfdff);border-radius:8px;margin:12px 0;color:#0f172a}

	footer.resources{margin-top:18px;display:grid;gap:12px}
	.resources a{display:inline-block;background:#fff;padding:12px;border-radius:10px;text-decoration:none;color:var(--accent);box-shadow:0 6px 18px rgba(43,108,176,0.08)}

	.cta{display:flex;gap:10px;flex-wrap:wrap;margin-top:18px}
	.btn{background:var(--danger);color:white;padding:12px 16px;border-radius:10px;text-decoration:none;font-weight:700}
	.btn.secondary{background:transparent;color:var(--danger);border:2px solid rgba(197,48,48,0.12)}

	/* Responsiveness */
	@media (max-width:720px){header{grid-template-columns:1fr;}
	  .illu{order:2}
	}
	
	
	nav {
		display: flex;
		justify-content: space-between;
		align-items: center;
		max-width: 1100px;
		margin: 0 auto;
		padding: 0 20px;
	}

	.logo a {
		color: white;
		font-size: 1.5em;
		font-weight: bold;
		text-decoration: none;
	}

	nav ul {
		list-style: none;
		margin: 0;
		padding: 0;
		display: flex;
	}

	nav ul li {
		margin-left: 25px;
		font-weight: bold;
		text-decoration: none;
	}

	nav ul li a {
		color: black;
		text-decoration: none;
		font-weight: 500;
		padding: 5px 10px;
		border-radius: 5px;
		transition: background-color 0.3s;
		font-weight: bold;
		text-decoration: none;
	}

	nav ul li a:hover,
	nav ul li a.active {
		/* background-color: #00332e; */
		 color: #2575fc;
	}
	
	/* --- Bouton Quitter Vite --- */
	.quick-exit {
		position: fixed;
		bottom: 20px;
		right: 20px;
		background-color: #d32f2f;
		color: #ffffff;
		padding: 10px 15px;
		border-radius: 50px;
		text-decoration: none;
		font-weight: 600;
		box-shadow: var(--shadow);
		z-index: 1000;
		transition: transform 0.2s;
	}
	.quick-exit:hover {
		transform: scale(1.05);
	}