/*
 * Base Animal-Rit - DA2 « L'Écurie »
 * Remise à zéro, typographie, primitives de mise en page, accessibilité.
 * Ne contient aucun composant : voir components.css.
 */

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

html {
	-webkit-text-size-adjust: 100%;
	scroll-behavior: smooth;
}

body {
	margin: 0;
	background: var(--c-bg);
	color: var(--c-ink);
	font-family: var(--od-sans);
	font-weight: 300;
	font-size: var(--t-body);
	line-height: var(--lh-body);
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	overflow-x: hidden;
	transition: background-color var(--dur-2) var(--ease), color var(--dur-2) var(--ease);
}

/* Grain de papier. Discret, il donne la matière « atelier » de la DA2 sans
 * peser : c'est un SVG en ligne, pas une image à télécharger. */
body::after {
	content: "";
	position: fixed;
	inset: 0;
	z-index: var(--z-grain);
	pointer-events: none;
	opacity: .5;
	background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='140' height='140'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.9' numOctaves='2'/%3E%3C/filter%3E%3Crect width='140' height='140' filter='url(%23n)' opacity='.16'/%3E%3C/svg%3E");
}

h1, h2, h3, h4, h5, h6, p, figure, blockquote, ul, ol, dl, dd { margin: 0; }
ul, ol { padding: 0; list-style: none; }

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

input, button, textarea, select { font: inherit; color: inherit; }
button { background: none; border: 0; cursor: pointer; }

a { color: inherit; text-decoration: none; }

/* -------------------------------------------------------------------
 * TITRES
 * ------------------------------------------------------------------- */

h1, h2, h3, h4, .u-serif {
	font-family: var(--od-serif);
	font-weight: 400;
	letter-spacing: -.022em;
}

h1 { font-size: var(--t-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--t-h2); line-height: var(--lh-tight); }
h3 { font-size: var(--t-h3); line-height: var(--lh-title); letter-spacing: -.012em; }
h4 { font-size: var(--t-h4); line-height: var(--lh-title); letter-spacing: -.006em; }

.u-display { font-family: var(--od-serif); font-weight: 300; font-size: var(--t-display); line-height: var(--lh-tight); letter-spacing: -.03em; }
.u-italic  { font-style: italic; font-weight: 400; }
.u-accent  { color: var(--c-accent); }

/* Annotation manuscrite. Registre de la charte (Shadows), utilisée comme une
 * vraie note de la main du commerçant, jamais comme du texte structurel. */
.u-hand {
	font-family: var(--od-hand);
	font-size: clamp(1.05rem, 1.5vw, 1.4rem);
	line-height: 1.35;
	color: var(--c-cta);
	display: inline-block;
	transform: rotate(-1.6deg);
}

/* Micro-capitales interlettrées : étiquettes, numéros de section, sur-titres.
 * En thème clair le doré n'est pas lisible en texte, ces libellés utilisent
 * donc --c-deco-ink et jamais --c-deco. */
.u-caps {
	font-family: var(--od-sans);
	font-size: var(--t-micro);
	font-weight: 500;
	letter-spacing: var(--ls-caps);
	text-transform: uppercase;
	line-height: 1.4;
	color: var(--c-deco-ink);
}

.u-num {
	font-family: var(--od-serif);
	font-weight: 300;
	font-size: var(--t-num);
	line-height: .84;
	letter-spacing: -.045em;
	font-variant-numeric: lining-nums tabular-nums;
}

.u-soft  { color: var(--c-ink-soft); }
.u-faint { color: var(--c-ink-faint); }
.u-measure { max-width: var(--measure); }

/* -------------------------------------------------------------------
 * MISE EN PAGE
 * ------------------------------------------------------------------- */

.l-container { width: 100%; max-width: var(--container); margin-inline: auto; padding-inline: var(--pad-x); }
.l-bleed { padding-inline: var(--pad-x); }
.l-section { padding-block: var(--sec-y); }

/* Grille de référence : 4 colonnes en mobile, 8 en tablette, 12 en desktop.
 * Toute grille du site se compose sur celle-ci. */
.l-grid {
	display: grid;
	grid-template-columns: repeat(4, minmax(0, 1fr));
	gap: var(--sp-4);
}
@media (min-width: 48rem) { .l-grid { grid-template-columns: repeat(8, minmax(0, 1fr)); gap: var(--sp-5); } }
@media (min-width: 64rem) { .l-grid { grid-template-columns: repeat(12, minmax(0, 1fr)); } }

/* Découpe signature de la DA2 : colonne éditoriale fixe à gauche, flux à
 * droite. La colonne se désolidarise en dessous de 61rem. */
.l-split { display: grid; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 61rem) { .l-split { grid-template-columns: var(--rail-w) minmax(0, 1fr); } }

.l-rail {
	padding: var(--pad-x);
	border-bottom: 1px solid var(--c-line);
	display: flex;
	flex-direction: column;
	gap: var(--sp-6);
}
@media (min-width: 61rem) {
	.l-rail {
		position: sticky;
		top: var(--header-h, 4.125rem);
		min-height: calc(100svh - var(--header-h, 4.125rem));
		border-bottom: 0;
		border-right: 1px solid var(--c-line);
		justify-content: space-between;
	}
}

.l-flow { min-width: 0; }

/* -------------------------------------------------------------------
 * ACCESSIBILITÉ
 * ------------------------------------------------------------------- */

/* Focus visible partout, dans les deux thèmes. Jamais supprimé. */
:focus-visible {
	outline: 2px solid var(--c-focus);
	outline-offset: 3px;
	border-radius: 2px;
}
:focus:not(:focus-visible) { outline: none; }

.u-visually-hidden {
	position: absolute;
	width: 1px; height: 1px;
	margin: -1px; padding: 0;
	overflow: hidden;
	clip: rect(0 0 0 0);
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

/* Lien d'évitement : premier élément focalisable de la page. */
.skip-link {
	position: absolute;
	top: var(--sp-2);
	left: var(--sp-2);
	z-index: calc(var(--z-drawer) + 10);
	padding: var(--sp-3) var(--sp-5);
	background: var(--c-cta);
	color: var(--c-cta-ink);
	font-size: var(--t-small);
	font-weight: 500;
	border-radius: var(--r-sm);
	transform: translateY(-160%);
	transition: transform var(--dur-1) var(--ease);
}
.skip-link:focus { transform: translateY(0); }

/* Toute cible tactile fait au moins 44px, seuil WCAG 2.5.5. */
.u-tap { min-width: 44px; min-height: 44px; }

/* Révélation au défilement. L'état visible est le défaut : si le JavaScript
 * ne s'exécute pas, la page reste entièrement lisible. C'est la classe
 * .is-armed, posée par le script lui-même, qui masque avant révélation. */
.rv.is-armed {
	opacity: 0;
	transform: translateY(22px);
	transition: opacity var(--dur-3) var(--ease), transform var(--dur-3) var(--ease);
}
.rv.is-armed.is-in { opacity: 1; transform: none; }
.rv.d1 { transition-delay: .08s; }
.rv.d2 { transition-delay: .16s; }
.rv.d3 { transition-delay: .24s; }
.rv.d4 { transition-delay: .32s; }

/* Respect strict de la préférence « mouvement réduit » : plus aucune
 * animation, plus aucun défilement fluide, plus de rail panoramique. */
@media (prefers-reduced-motion: reduce) {
	html { scroll-behavior: auto; }
	*, *::before, *::after {
		animation-duration: .01ms !important;
		animation-iteration-count: 1 !important;
		transition-duration: .01ms !important;
		scroll-behavior: auto !important;
	}
	.rv.is-armed { opacity: 1; transform: none; }
}

/* Impression : on retire le décor, on garde le contenu. */
@media print {
	body::after, .site-header, .site-footer, .theme-toggle { display: none !important; }
	body { background: #fff; color: #000; }
}