/* Feuille unique du site.
   Matière : papier crème (texture reprise de Riviouz) teinté par multiplication,
   lueur ambrée en haut de page. La carte est une feuille posée : contact serré
   qui la pose, diffuse large qui lui donne sa hauteur, liseré clair en haut.
   Titres en Fraunces auto-hébergée (`fonts/`), texte courant en police système. */
@font-face {
	font-family: "Fraunces";
	src: url("/fonts/fraunces.woff2") format("woff2-variations");
	font-weight: 100 900;
	font-display: swap;
}
:root {
	--fond: #f2ece1;
	--carte: #fffdf8;
	--encre: #1c1a17;
	--encre-douce: #6b6358;
	--bordure: #ded5c6;
	--ambre: #eaa300;
	--ambre-clair: #ffc93c;
	--ambre-fonce: #8a5a00;
	--ombre:
		0 0 0 1px rgba(70, 50, 20, 0.05),
		0 1px 2px rgba(70, 50, 20, 0.12),
		0 40px 80px -36px rgba(70, 50, 20, 0.36);
	--titres: "Fraunces", Georgia, serif;
	font-family: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
	color: var(--encre);
}
* { box-sizing: border-box; }
body {
	margin: 0;
	min-height: 100vh;
	background-color: var(--fond);
	background-image:
		radial-gradient(120% 60% at 50% -10%, rgba(255, 201, 60, 0.3), rgba(255, 201, 60, 0) 60%),
		linear-gradient(rgba(255, 251, 242, 0.5), rgba(255, 251, 242, 0.5)),
		url("/images/papier.jpg");
	background-size: 100% 100vh, auto, 640px 640px;
	background-repeat: no-repeat, no-repeat, repeat;
	background-blend-mode: normal, normal, multiply;
	line-height: 1.55;
	-webkit-font-smoothing: antialiased;
}
main {
	min-height: 100vh;
	max-width: 720px;
	margin: 0 auto;
	padding: 48px 16px;
	display: flex;
	flex-direction: column;
	justify-content: center;
	gap: 24px;
}
.feuille {
	position: relative;
	background: linear-gradient(180deg, #fffefa, var(--carte));
	border-radius: 24px;
	padding: clamp(28px, 6vw, 56px);
	box-shadow: var(--ombre), inset 0 1px 0 rgba(255, 255, 255, 0.9);
}
.sur-titre {
	display: inline-flex;
	align-items: center;
	gap: 10px;
	margin: 0 0 20px;
	font-size: 0.82rem;
	font-weight: 600;
	letter-spacing: 0.06em;
	text-transform: uppercase;
	color: var(--ambre-fonce);
}
.point {
	width: 9px;
	height: 9px;
	border-radius: 50%;
	background: var(--ambre);
	box-shadow: 0 0 0 4px rgba(234, 163, 0, 0.2), 0 0 14px rgba(255, 201, 60, 0.9);
}
h1 {
	font-family: var(--titres);
	font-weight: 600;
	font-size: clamp(1.9rem, 5vw, 2.9rem);
	line-height: 1.12;
	letter-spacing: -0.015em;
	margin: 0 0 18px;
}
.chapo { font-size: 1.08rem; color: var(--encre-douce); margin: 0 0 32px; max-width: 34em; }
.etapes {
	list-style: none;
	margin: 0;
	padding: 24px 0 0;
	border-top: 1px dashed var(--bordure);
	display: flex;
	flex-wrap: wrap;
	gap: 12px 28px;
	font-weight: 500;
}
.etapes li { display: flex; align-items: center; gap: 10px; }
.numero {
	display: grid;
	place-items: center;
	width: 28px;
	height: 28px;
	border-radius: 50%;
	font-family: var(--titres);
	font-size: 0.9rem;
	background: linear-gradient(180deg, var(--ambre-clair), var(--ambre));
	color: #3d2800;
	box-shadow: 0 1px 1px rgba(90, 60, 0, 0.3), 0 6px 14px -6px rgba(234, 163, 0, 0.8);
}
.pied { text-align: center; font-size: 0.85rem; color: var(--encre-douce); margin: 0; }