/* ============================================================
 * VideoIA — Base styles (refonte v2.0)
 * Source : spec section 03 (étendu)
 * Reset léger + typographie
 * ============================================================ */

/* === Reset léger === */
*, *::before, *::after { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
img, video, svg { max-width: 100%; height: auto; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
ul, ol { padding: 0; margin: 0; }

/* === Body / fond === */
html, body {
	background: var(--vi-bg);
	color: var(--vi-text);
	font: 400 16px/1.55 var(--vi-sans);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	text-rendering: optimizeLegibility;
}

/* === Headings — Instrument Serif === */
h1, h2, h3, h4, h5, h6,
.entry-title,
.vi-h {
	font-family: var(--vi-serif);
	font-weight: 400;
	letter-spacing: -0.01em;
	line-height: 1.05;
	text-wrap: balance;
	color: var(--vi-text);
	margin: 0;
}
h1 { font-size: clamp(40px, 6vw, 76px); }
h2 { font-size: clamp(28px, 3.2vw, 38px); }
h3 { font-size: clamp(20px, 2.2vw, 26px); }
h4 { font-size: clamp(17px, 1.6vw, 22px); }

/* L'italique de Instrument Serif est notre accent — gris muted */
em, i,
.vi-em {
	font-style: italic;
	color: var(--vi-mute);
}

/* === Paragraphes === */
p {
	color: var(--vi-text-2);
	line-height: 1.55;
	text-wrap: pretty;
	margin: 0 0 1em;
}
p:last-child { margin-bottom: 0; }

/* === Liens === */
a {
	color: inherit;
	text-decoration: none;
	transition: color 0.15s ease;
}
a:hover { color: var(--vi-ink); }

/* === Eyebrow — petites étiquettes mono === */
.vi-eyebrow {
	display: inline-flex;
	align-items: center;
	gap: 8px;
	font: 500 11px/1 var(--vi-mono);
	letter-spacing: 0.16em;
	text-transform: uppercase;
	color: var(--vi-mute);
}
.vi-eyebrow.is-accent { color: var(--vi-accent); }
.vi-eyebrow .dot {
	width: 6px;
	height: 6px;
	border-radius: 50%;
	background: currentColor;
}

/* === Container — largeur max validée 1320px === */
.vi-container {
	max-width: var(--vi-container);
	margin: 0 auto;
	border-left: 1px solid var(--vi-line);
	border-right: 1px solid var(--vi-line);
}

/* === Sélection texte === */
::selection {
	background: var(--vi-ink);
	color: var(--vi-paper);
}

/* === Focus visible (accessibilité) === */
:focus-visible {
	outline: 2px solid var(--vi-accent);
	outline-offset: 2px;
	border-radius: 4px;
}

/* === Scrollbar (sobre) === */
@media (pointer: fine) {
	* { scrollbar-width: thin; scrollbar-color: var(--vi-mute) transparent; }
}