/**
 * Socle : remise à plat, éléments, utilitaires de mise en page.
 * Aucune couleur en dur, tout passe par les jetons.
 */

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

html {
  -webkit-text-size-adjust: 100%;
  scroll-behavior: smooth;
  /* Site sombre : barres de défilement et champs natifs assortis. */
  color-scheme: dark;
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* L'attribut hidden doit gagner sur tout display posé par une classe. */
[hidden] { display: none !important; }

body {
  margin: 0;
  background: var(--safir-fond);
  color: var(--safir-texte);
  font-family: var(--safir-police-texte);
  font-size: var(--safir-t-m);
  line-height: var(--safir-interligne-texte);
  font-weight: var(--safir-graisse-normale);
  -webkit-font-smoothing: antialiased;
}

h1, h2, h3, h4 {
  margin: 0 0 var(--safir-esp-s);
  font-family: var(--safir-police-titre);
  /* Montserrat Alternates n'est chargée qu'en 600 : demander une graisse
     absente ferait synthétiser un faux maigre par le navigateur. */
  font-weight: var(--safir-graisse-forte);
  line-height: var(--safir-interligne-titre);
  text-wrap: balance;
}

h1 { font-size: var(--safir-t-3xl); }
h2 { font-size: var(--safir-t-2xl); }
h3 { font-size: var(--safir-t-xl); }
h4 { font-size: var(--safir-t-l); }

p, ul, ol { margin: 0 0 var(--safir-esp-s); }
p { text-wrap: pretty; }

a {
  color: inherit;
  text-decoration-thickness: 1px;
  text-underline-offset: .18em;
  transition: color var(--safir-transition), opacity var(--safir-transition);
}

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

/* Une image de carte doit remplir son cadre sans se déformer. */
.safir-media { position: relative; overflow: hidden; }
.safir-media img { width: 100%; height: 100%; object-fit: cover; }

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

/* Cible de pointage confortable, y compris au doigt. */
button, [role="button"], a.safir-bouton, input[type="submit"] { min-height: 44px; }

/* Pas de délai de double-tap sur les commandes, et un surlignage tactile discret. */
a, button, [role="button"], input, select, textarea, label { touch-action: manipulation; }
a, button { -webkit-tap-highlight-color: transparent; }

:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid currentColor;
  outline-offset: 3px;
  border-radius: var(--safir-rayon-s);
}

/* ------------------------------------------------------------------
   Mise en page
   ------------------------------------------------------------------ */

.safir-contenant {
  width: 100%;
  max-width: var(--safir-largeur-max);
  margin-inline: auto;
  padding-inline: var(--safir-gouttiere);
}

.safir-section { padding-block: var(--safir-esp-2xl); }
.safir-section--dense { padding-block: var(--safir-esp-xl); }

.safir-section__titre {
  font-size: var(--safir-t-xl);
  margin-bottom: var(--safir-esp-l);
}

/* Grille auto-adaptative : le nombre de colonnes découle de la largeur
   disponible, sans multiplier les points de rupture. */
.safir-grille {
  display: grid;
  gap: var(--safir-esp-m);
  grid-template-columns: repeat(auto-fill, minmax(min(280px, 100%), 1fr));
}

.safir-grille--3 { grid-template-columns: repeat(auto-fit, minmax(min(300px, 100%), 1fr)); }

/* ------------------------------------------------------------------
   Accessibilité
   ------------------------------------------------------------------ */

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

.safir-evitement {
  position: absolute;
  left: -9999px;
  top: 0;
  z-index: 100;
  padding: var(--safir-esp-xs) var(--safir-esp-s);
  background: var(--safir-noir);
  color: var(--safir-texte-inverse);
}

.safir-evitement:focus { left: var(--safir-esp-s); top: var(--safir-esp-s); }