/**
 * Tokens du design system Niroline.
 * Variables uniquement. Aucune règle de style.
 */

:root {
	/* Couleur */
	--color-base: #221212; /* Fond principal */
	--color-surface: #2b1816; /* Surfaces élevées, cartes */
	--color-surface-alt: #341614; /* Survol, zones distinctes */
	--color-accent: #fd4819; /* Action ou donnée : un seul par écran */
	--color-cool: #cff4ff; /* Fond de section inversée, NiroMaker, indices de rangée sur fond sombre */
	--color-text: #ffffff; /* Texte sur fond sombre */
	--color-text-invert: var(--color-base); /* Texte sur fond clair */
	--color-line: rgba(255, 255, 255, 0.14); /* Filets de grille */
	--color-paper: #ffffff; /* Sections claires : fond papier */
	--color-cool-soft: #eaf7fc; /* Surface sur fond clair */
	--color-line-accent: var(--color-accent); /* Filets structurants accentués */
	--color-line-invert: rgba(34, 18, 18, 0.18); /* Filets sur fond clair */

	/* Typo — familles */
	--font-display: "Space Grotesk", sans-serif; /* Titres, noms de machines, chiffres clés */
	--font-body: "Inter", sans-serif; /* Courant, navigation, boutons, labels, specs */

	/* Typo — poids autorisés */
	--font-weight-regular: 400; /* Corps Inter */
	--font-weight-medium: 500; /* Inter emphase, Space Grotesk titres */
	--font-weight-bold: 700; /* Space Grotesk titres forts */

	/* Typo — rythme */
	--line-height-display: 1.1; /* Titres et display */
	--line-height-body: 1.5; /* Texte courant */
	--letter-spacing-display: -0.02em; /* Tracking h1 et h2, bas de casse */
	--letter-spacing-label: 0.08em; /* Tracking des libellés en capitales */
	--measure: 68ch; /* Largeur max de lecture */
	--underline-offset: 0.2em; /* Décalage du soulignement des liens */

	/* Typo — échelle fluide, base 16px, 360px → 1024px.

	   Deux ratios et non un seul : 1.25 en grand écran, 1.2 en petit. À 1.25
	   partout, la borne basse du display tombait à 48.8px ; à 360px il reste
	   312px utiles et la première ligne du hero en réclame 333, donc le titre
	   cassait sous la balise de retour posée dans l'éditeur.

	   L'interpolation s'arrête à --bp-tablet et non à 1440px : au-delà, la
	   longueur de ligne ne gagne rien à ce que le corps grossisse encore, et
	   le hero atteignait 112px sur un portable de 14 pouces. Les tailles sont
	   donc définitives dès la tablette, le display excepté.

	   Le display fait exception deux fois : sa borne haute sort de
	   l'échelle — 8rem là où le ratio donnerait 3.8 — et il continue de
	   croître au-delà de --bp-tablet, là où les autres se figent. Un titre
	   de hero occupe une part de l'écran et non une longueur de lecture :
	   figé à 80px il tombait juste sur un portable et se perdait sur un 5K.

	   Sa part fixe en rem n'est pas décorative : elle garde la taille
	   sensible au réglage de police du navigateur, qu'une valeur en vw
	   seule ignorerait. Le plafond de 8rem ne mord qu'au-delà de 3300px de
	   fenêtre, où la proportion cesse de vouloir dire quelque chose.

	   xs et sm gardent leur plancher de 12 et 14px : sous cette taille le
	   texte secondaire n'est plus lisible, aucun ratio ne justifie de
	   descendre en dessous. */
	--font-size-xs: clamp(0.75rem, 0.722892rem + 0.120482vw, 0.8rem); /* Légendes, labels */
	--font-size-sm: clamp(0.875rem, 0.807229rem + 0.301205vw, 1rem); /* Navigation, boutons, méta */
	--font-size-md: clamp(1rem, 0.864458rem + 0.60241vw, 1.25rem); /* Corps */
	--font-size-lg: clamp(1.2rem, 1.10512rem + 0.421687vw, 1.375rem); /* h3 et chapeau */
	--font-size-xl: clamp(1.44rem, 1.1618rem + 1.236446vw, 1.953125rem); /* Titres de section */
	--font-size-2xl: clamp(1.728rem, 1.341281rem + 1.71875vw, 2.441406rem); /* Titres de page */
	--font-size-3xl: clamp(2.0736rem, 1.543276rem + 2.356995vw, 3.051758rem); /* Display intermédiaire */
	--font-size-4xl: clamp(2.48832rem, 1rem + 3.386vw, 8rem); /* Hero et noms de machines */

	/* Espacement — échelle en multiples de la gouttière 24px et du pas 4px */
	--space-2xs: 0.25rem; /* Micro-intervalles */
	--space-xs: 0.5rem; /* Gaps serrés */
	--space-sm: 0.75rem; /* Espacement compact */
	--space-md: 1rem; /* Espacement de base */
	--space-lg: 1.5rem; /* Gouttière de grille */
	--space-xl: 2rem; /* Séparation de blocs */
	--space-2xl: 3rem; /* Deux gouttières */
	--space-3xl: 4rem; /* Rythme de section */
	--space-4xl: 6rem; /* Quatre gouttières */
	--space-inset: 7.5rem; /* Marge wide → contenu : 5 gouttières de chaque côté */
	--space-page: clamp(1.5rem, -0.5rem + 8.888889vw, 7.5rem);

/* Cible tactile minimale. Le critere 2.5.8 de WCAG 2.2 exige 24px de
   cote ; 44px est la valeur au-dela de laquelle le pouce ne rate plus,
   et correspond a la hauteur d'un libelle de menu dote d'un retrait de
   --space-sm. Sert de plancher, jamais de hauteur figee. */
--tap-target: 2.75rem; /* Padding racine : gouttière → inset, 360px → 1440px */

	/* Layout */
	--grid-columns: 12; /* Structure de page */
	--grid-gutter: var(--space-lg); /* Gouttière entre colonnes */
	--width-content: 100%; /* Pleine largeur : la gouttière seule borne le contenu */
	--width-wide: 100%; /* Pleine largeur */
	/* Site en pleine largeur : header, hero et sections occupent tout
	   l'écran, seule --space-page crée la gouttière latérale.
	   La longueur de ligne reste tenue par --measure et par les classes
	   de lecture (.lede, .display), pas par la largeur du conteneur. */
	--mega-col-width: 18rem; /* Largeur max d'une colonne de méga-menu */
	--width-container: none; /* Aucun plafond : voir --space-page pour la gouttière */

	/* Breakpoints — référence documentaire. Une @media ne consomme pas de
	   var() : les seuils y sont écrits en littéral, ces tokens fixent la
	   référence du système et doivent être tenus à jour avec elle.

	   Trois paliers : mobile jusqu'à --bp-mobile, tablette jusqu'à
	   --bp-tablet, desktop au-delà. --bp-sm reste un palier interne à la
	   grille, là où les colonnes passent à une seule.

	   Une exception à connaître : core/columns empile ses colonnes à 781px,
	   seuil imposé par WordPress. Les composants bâtis sur ce bloc suivent
	   cette valeur et non --bp-mobile, sinon un séparateur vertical
	   subsisterait entre des colonnes déjà empilées. */
	--bp-sm: 480px; /* Grille 1 colonne en dessous */
	--bp-mobile: 767px; /* Dernier pixel mobile : mise en page empilée */
	--bp-md: 768px; /* Grille 4 colonnes en dessous, 12 au-dessus */
	--bp-tablet: 1024px; /* Fin de l'échelle fluide : tailles figées au-delà */
	--bp-lg: 1440px; /* Largeur wide */

	/* Logotype — rapport intrinsèque de assets/img/logo.svg (527.64 / 132.61) */
	--logo-aspect: 3.979;

	/* Filets */
	--line-width: 1px; /* Traits de grille */

	/* Focus */
	--focus-width: 2px; /* Épaisseur de l’outline :focus-visible */
	--focus-offset: 2px; /* Décalage de l’outline */

	/* Forme */
	--radius-none: 0; /* Tout sauf boutons */
	--radius-pill: 9999px; /* Boutons uniquement */

	/* Mouvement */
	--duration-none: 0s; /* Neutralisation prefers-reduced-motion */
	--duration-fast: 150ms; /* Survol, pressage */
	--duration-base: 200ms; /* Transitions de bloc */
	--duration-slow: 700ms; /* Apparitions au scroll */
	--reveal-offset: 1.25rem; /* Décalage vertical avant apparition */
	--reveal-offset-tight: 0.5rem; /* Décalage dans un cadre fixe (case de mosaïque) */
	--reveal-stagger: 70ms; /* Délai entre éléments d'une même rangée */
	--reveal-stagger-tight: 40ms; /* Délai entre lignes d'une même case */
	--ease: cubic-bezier(0.2, 0, 0, 1); /* Accélération industrielle */
}