/* ===== BASE ===== */
*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; -webkit-tap-highlight-color: transparent; }

body {
	margin: 0;
	background: var(--color-bg);
	color: var(--color-text);
	font-family: var(--font-body);
	font-size: 14px;
	line-height: 1.5;
	min-height: 100vh;
	min-height: 100dvh;
	overflow-wrap: anywhere;
}

h1, h2, h3, h4 { font-family: var(--font-title); margin: 0; }
p { margin: 0; }
a { color: var(--color-primary-dark); }
button, input { font-family: inherit; font-size: inherit; color: inherit; }
button { cursor: pointer; }

/* L'attribut hidden ne masque pas les éléments SVG par défaut (icônes œil ouvert / barré) */
svg[hidden] { display: none; }

:focus-visible { outline: 2px solid var(--color-primary); outline-offset: 2px; }

.visually-hidden {
	position: absolute !important;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}

.skip-link {
	position: absolute;
	left: 12px; top: -48px;
	z-index: 100;
	background: var(--color-primary);
	color: #FFFFFF;
	padding: 8px 14px;
	border-radius: var(--radius);
	text-decoration: none;
	transition: top var(--transition);
}
.skip-link:focus { top: 12px; }

[x-cloak] { display: none !important; }