/**
 * base.css — Reset & règles globales
 * Motmot Treks — Design System V1.
 *
 * 1. Reset : neutralise les styles par défaut hétérogènes des navigateurs.
 * 2. Règles globales : applique les fondations (couleur, typo) sur les
 *    éléments de base. Aucun style de composant ici.
 *
 * Toutes les valeurs proviennent de tokens.css — rien en dur.
 */

/* ============================================================
   1. RESET
   ============================================================ */

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

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

/* Images : fluides et jamais débordantes par défaut. */
img,
picture,
svg,
video {
	display: block;
	max-width: 100%;
	height: auto;
}

/* Les éléments de formulaire héritent de la typographie. */
input,
button,
textarea,
select {
	font: inherit;
	color: inherit;
}

/* Listes : on retire les puces par défaut (réintroduites au besoin). */
ul,
ol {
	list-style: none;
}

/* Liens : héritent de la couleur, soulignement géré au cas par cas. */
a {
	color: inherit;
	text-decoration: none;
}

/* ============================================================
   2. RÈGLES GLOBALES
   ============================================================ */

body {
	background-color: var(--surface-primary);
	color: var(--text-primary);
	font-family: var(--font-text);
	font-size: var(--text-base);
	font-weight: var(--weight-regular);
	line-height: var(--leading-relaxed);
	font-optical-sizing: auto;
	-webkit-font-smoothing: antialiased;
	-moz-osx-font-smoothing: grayscale;
	min-height: 100vh;
}

/* Titres : héritent par défaut, hiérarchie fine gérée en typography.css. */
h1, h2, h3, h4, h5, h6 {
	font-weight: var(--weight-regular);
	line-height: var(--leading-snug);
}

/* Cible de focus visible — accessibilité (Design System §11). */
:focus-visible {
	outline: none;
	box-shadow: var(--focus-ring);
}

/* Respect de la préférence système de réduction des animations (§9). */
@media (prefers-reduced-motion: reduce) {
	*,
	*::before,
	*::after {
		animation-duration: 0.01ms !important;
		transition-duration: 0.01ms !important;
	}
}

/* ============================================================
   3. CONTENEURS & GRILLE
   Plomberie de layout (Design System §4.2 & §4.3). Les conteneurs
   bornent la largeur du contenu et posent la marge latérale de
   respiration. padding-inline (propriété logique) — prêt pour le
   multilingue. Aucun style de composant ici.
   ============================================================ */

/* Quatre largeurs de contenu, chacune avec un rôle narratif. */
.container-text {
	max-width: var(--container-text);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.container-base {
	max-width: var(--container-base);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

.container-wide {
	max-width: var(--container-wide);
	margin-inline: auto;
	padding-inline: var(--space-6);
}

/* Plein écran, sans marge — pour les compositions immersives. */
.container-full {
	width: 100%;
}

/* Grille technique unique : base 12 colonnes, usage expressif
   via les patterns (DS §4.3). On ne remplit jamais les 12
   colonnes uniformément. */
.grid {
	display: grid;
	grid-template-columns: repeat(12, 1fr);
	gap: var(--space-6);
}

/* Lien d'évitement — caché visuellement, révélé au focus clavier (§11.1). */
.skip-link {
	position: absolute;
	left: var(--space-4);
	top: var(--space-4);
	z-index: var(--z-toast);
	padding: var(--space-3) var(--space-4);
	background-color: var(--surface-primary);
	color: var(--text-primary);
	border-radius: var(--radius-sm);
	box-shadow: var(--focus-ring);
	transform: translateY(-150%);
}

.skip-link:focus {
	transform: translateY(0);
}

/* Contenu réservé aux technologies d'assistance (ex. annonces
   aria-live) — jamais visible, jamais retiré du flux de lecture. */
.visually-hidden {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	margin: -1px;
	overflow: hidden;
	clip: rect(0, 0, 0, 0);
	white-space: nowrap;
	border: 0;
}