/**
 * Reset et styles de base.
 * Toutes les valeurs proviennent de tokens.css.
 */

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

* { margin: 0; }

/* La règle du navigateur pour « hidden » ne pose qu'un display: none de faible
   priorité : la moindre déclaration de display sur l'élément la bat. Les bulles
   du Hub sont en flex, et le filtre par pays les marquait masquées sans qu'elles
   disparaissent — d'où des onglets qui semblaient sans effet. Même chose pour
   tout bouton .btn masqué au chargement.

   !important assumé : masquer est une intention, pas une suggestion. */
[hidden] { display: none !important; }

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

body {
	font-family: var(--font-body);
	font-size: var(--fs-body);
	line-height: var(--lh-body);
	color: var(--color-text-body);
	/* Blanc, comme le frame Figma : le crème est posé par .zone-creme et par
	   les composants qui le portent (footer, hero). */
	background-color: var(--color-bg-alt);
	-webkit-font-smoothing: antialiased;
	text-rendering: optimizeLegibility;
}

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

h1, h2, h3, h4 {
	font-family: var(--font-display);
	font-weight: var(--fw-bold);
	line-height: var(--lh-heading);
	color: var(--color-text);
	text-wrap: balance;
}

h1 { font-size: var(--fs-h1); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h2); }
h3 { font-size: var(--fs-h3); }

p { text-wrap: pretty; }

a {
	color: inherit;
	text-decoration-thickness: 1px;
	text-underline-offset: 0.15em;
}

button, input, textarea, select {
	font: inherit;
	color: inherit;
}

:focus-visible {
	outline: var(--focus-ring);
	outline-offset: 2px;
}

/* Accessibilité */
.screen-reader-text {
	position: absolute;
	width: 1px;
	height: 1px;
	padding: 0;
	overflow: hidden;
	clip-path: inset(50%);
	white-space: nowrap;
	border: 0;
}

.skip-link:focus {
	position: fixed;
	top: var(--space-4);
	left: var(--space-4);
	z-index: var(--z-modal);
	width: auto;
	height: auto;
	padding: var(--space-3) var(--space-4);
	clip-path: none;
	background: var(--color-surface);
	border-radius: var(--radius-sm);
}


/* ------------------------------------------------------------
   Défilement doux

   Les boutons du bandeau mènent à une section de la même page : un saut sec
   fait perdre le fil, une glissade montre le chemin parcouru.

   Sous condition de préférence : « prefers-reduced-motion » n'est pas un
   confort mais une nécessité pour qui souffre de troubles vestibulaires, chez
   qui un défilement animé déclenche des vertiges. Le système le signale, on
   l'écoute.
   ------------------------------------------------------------ */

@media (prefers-reduced-motion: no-preference) {

	html {
		scroll-behavior: smooth;
	}

}


/* ------------------------------------------------------------
   Cible d'ancre

   Les boutons du bandeau mènent à une section de la même page. Sans marge de
   défilement, le haut de la section se cale sous l'en-tête — fixe en mobile —
   et le titre visé reste caché. La valeur couvre la hauteur du logo et son
   retrait, plus un peu d'air pour que l'arrivée ne colle pas à la barre.
   ------------------------------------------------------------ */

:target,
[id]:target {
	scroll-margin-block-start: 120px;
}

@media (min-width: 768px) {

	/* Le bandeau reste collé en haut et mesure --header-height-scrolled une
	   fois la page défilée : une marge plus courte que lui glisse la cible
	   dessous. Elle valait 48 px pour 88 px de bandeau, et le haut de chaque
	   ancre s'en trouvait masqué. */
	[id]:target {
		scroll-margin-block-start: calc(var(--header-height-scrolled) + var(--space-4));
	}

}