/* ============================================================
   DELTEA · Base — reset, typo, conteneurs, hairlines
   Mobile-first (360 → 768 → 1280)
   ============================================================ */

/* ---------- Reset minimal ---------- */
*, *::before, *::after {
	box-sizing: border-box;
	margin: 0;
	padding: 0;
}

html {
	overflow-x: visible; /* le clip reste sur body, jamais sur html */
}

body {
	font-family: 'General Sans', sans-serif;
	font-size: var(--typo-base);
	line-height: 1.6;
	color: var(--ink);
	background-color: var(--bg);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: clip;
}

/* ---------- Hiérarchie typographique ---------- */

h1, h2, h3 {
	font-family: 'Clash Display', sans-serif;
	line-height: 1.1;
	font-weight: 600; /* Semibold */
	color: var(--ink);
}

h1 {
	font-size: var(--typo-hero);
	letter-spacing: -0.02em;
}

h2 {
	font-size: var(--typo-3xl);
	letter-spacing: -0.01em;
}

h3 {
	font-size: var(--typo-2xl);
	line-height: 1.15;
}

p {
	margin-bottom: var(--esp-sm);
}

/* Eyebrows / labels en Space Mono */
.eyebrow, [data-eyebrow] {
	font-family: 'Space Mono', monospace;
	font-size: var(--typo-xs);
	text-transform: uppercase;
	letter-spacing: 0.08em;
	color: var(--ink-2);
	line-height: 1.4;
}

/* ---------- Conteneurs ---------- */

.conteneur {
	width: 100%;
	max-width: var(--large);
	margin-left: auto;
	margin-right: auto;
	padding-left: var(--esp-md);
	padding-right: var(--esp-md);
}

.colonne-lecture {
	width: 100%;
	max-width: var(--lecture);
	margin-left: auto;
	margin-right: auto;
}

/* ---------- Hairlines 1px ---------- */

.hairline {
	border: none;
	border-top: 1px solid var(--hairline);
}

.hairline-v {
	border: none;
	border-left: 1px solid var(--hairline);
}

/* ---------- Utilitaires ---------- */

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

/* ---------- Liens ---------- */

a {
	color: var(--sauge);
	text-decoration-thickness: 1px;
	text-underline-offset: 3px;
}

a:hover {
	text-decoration-thickness: 2px;
}

/* ---------- Listes ---------- */

ul, ol {
	list-style: none;
}

/* ---------- Images / médias ---------- */

img, svg {
	display: block;
	max-width: 100%;
	height: auto;
}