:root {
	--fond: #ffffff;
	--fond-2: #f7f4f1;
	--fond-3: #efe9e4;
	--ligne: #e8e1da;
	--encre: #141414;
	--encre-2: #3d3a38;
	--gris: #8a837d;
	--bordeaux: #6d0f1f;
	--bordeaux-2: #8a1528;
	--rouge: #b3192b;
	--or: #c9a24b;
	--or-fonce: #a8822f;
	--ok: #2f7d4a;
	--rayon: 20px;
	color-scheme: light;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }

body {
	margin: 0;
	min-height: 100vh;
	background: var(--fond);
	color: var(--encre);
	font-family: "Inter", system-ui, -apple-system, "Segoe UI", sans-serif;
	font-size: 16px;
	line-height: 1.6;
	-webkit-font-smoothing: antialiased;
}

.display { font-family: "Bebas Neue", "Oswald", Impact, sans-serif; font-weight: 400; letter-spacing: .03em; }
.script { font-family: "Great Vibes", "Brush Script MT", cursive; font-weight: 400; }

/* Libellé façon écusson : petites capitales espacées */
.kicker {
	font: 600 12px/1 "Inter", sans-serif; letter-spacing: .32em; text-transform: uppercase; color: var(--bordeaux);
}

/* Trace de pneu décorative */
.trace {
	position: absolute; left: -20%; width: 140%; height: 44px; pointer-events: none; z-index: 0;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='28' height='44' viewBox='0 0 28 44'%3E%3Cpath d='M4 4l12 9-12 9M4 22l12 9-12 9' fill='none' stroke='%23141414' stroke-width='5' stroke-linejoin='round'/%3E%3C/svg%3E");
	background-size: 28px 44px;
	opacity: .045;
}

/* Papillons */
.papillon { display: block; }
.papillon .aile { animation: battement 2.8s ease-in-out infinite; transform-box: fill-box; }
.papillon .aile.g { transform-origin: right center; }
.papillon .aile.d { transform-origin: left center; }
@keyframes battement { 0%, 100% { transform: scaleX(1); } 50% { transform: scaleX(.72); } }

.vol { position: fixed; pointer-events: none; z-index: 0; animation: flotte 16s ease-in-out infinite; }
@keyframes flotte {
	0%, 100% { transform: translate(0, 0) rotate(-10deg); }
	33% { transform: translate(18px, -26px) rotate(4deg); }
	66% { transform: translate(-10px, -12px) rotate(-4deg); }
}

/* Boutons */
.btn {
	appearance: none; border: 0; cursor: pointer;
	display: inline-flex; align-items: center; justify-content: center; gap: 10px;
	padding: 14px 22px; border-radius: 999px;
	font: 600 15px/1.2 "Inter", system-ui, sans-serif; letter-spacing: .01em;
	color: #fff; background: var(--encre);
	box-shadow: 0 10px 30px -12px rgba(20, 20, 20, .55);
	transition: transform .15s, background .2s, box-shadow .2s;
	text-decoration: none;
}
.btn:hover { background: var(--bordeaux); box-shadow: 0 12px 30px -12px rgba(109, 15, 31, .7); }
.btn:active { transform: scale(.98); }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn:focus-visible { outline: 3px solid var(--or); outline-offset: 3px; }
.btn.ghost { background: transparent; color: var(--encre); box-shadow: inset 0 0 0 1.5px var(--encre); }
.btn.ghost:hover { background: var(--encre); color: #fff; }
.btn.danger { background: transparent; color: var(--rouge); box-shadow: inset 0 0 0 1.5px var(--rouge); }
.btn.danger:hover { background: var(--rouge); color: #fff; }
.btn.small { padding: 9px 15px; font-size: 13px; }

select {
	padding: 10px 14px; border-radius: 12px; border: 1.5px solid var(--ligne); background: #fff; color: var(--encre);
	font: 14px "Inter", system-ui, sans-serif;
}

.carte {
	background: #fff;
	border: 1px solid var(--ligne);
	border-radius: var(--rayon);
	box-shadow: 0 1px 2px rgba(20, 20, 20, .04), 0 24px 48px -28px rgba(20, 20, 20, .25);
}

.barre { height: 6px; border-radius: 6px; background: var(--fond-3); overflow: hidden; }
.barre > span {
	display: block; height: 100%; width: 0; border-radius: 6px;
	background: linear-gradient(90deg, var(--bordeaux), var(--rouge) 60%, var(--or));
	transition: width .3s;
}

.sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); }

@media (prefers-reduced-motion: reduce) {
	*, *::before, *::after { animation: none !important; transition: none !important; }
}