/* design/lib/base.css — socle : fontes auto-hébergées, remise à zéro, primitives.
   Aucune valeur de couleur ni de taille en dur : tout vient de tokens/tokens.css.
   Soumis à la porte 2 (`node tools/gate-tokens.mjs`). */

/* ---------- Fontes auto-hébergées ------------------------------------------
   JAMAIS d'@import depuis un CDN : il BLOQUE le rendu et ferait échouer le
   budget de performance. Les 4 fontes variables sont sous-ensemblées au
   français + la ponctuation de marque : 155 Ko servis au lieu de 3,2 Mo.
   `font-display: swap` garantit que le texte est lisible immédiatement. */
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond.woff2") format("woff2-variations");
  font-weight: 300 700; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Cormorant Garamond";
  src: url("/assets/fonts/cormorant-garamond-italic.woff2") format("woff2-variations");
  font-weight: 300 700; font-style: italic; font-display: swap;
}
@font-face {
  font-family: "Inter";
  src: url("/assets/fonts/inter.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}
@font-face {
  font-family: "Inter Tight";
  src: url("/assets/fonts/inter-tight.woff2") format("woff2-variations");
  font-weight: 100 900; font-style: normal; font-display: swap;
}

/* ---------- Remise à zéro ---------------------------------------------------- */
*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }

html {
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  *, *::before, *::after {
    animation-duration: 0.01ms !important; animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important; scroll-behavior: auto !important;
  }
}

body {
  background: var(--bg-page);          /* porcelaine — JAMAIS blanc pur */
  color: var(--fg-1);
  font-family: var(--font-ui);
  font-size: var(--fs-body);
  line-height: var(--lh-relaxed);
  font-synthesis-weight: none;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img, picture, svg, video, canvas { display: block; max-width: 100%; }
img, video { height: auto; }
input, button, textarea, select { font: inherit; color: inherit; }
p, h1, h2, h3, h4, h5, h6 { overflow-wrap: break-word; }

/* ---------- Titres — Cormorant, jamais gras --------------------------------- */
h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 500; line-height: var(--lh-snug); }
h1 { font-size: var(--fs-display); line-height: var(--lh-tight); }
h2 { font-size: var(--fs-h1); }
h3 { font-size: var(--fs-h2); }
h4 { font-size: var(--fs-h3); }

/* Le glyphe € rend comme un « C » en Cormorant à taille d'affichage :
   il est TOUJOURS porté par la police de labeur. */
.euro, .prix { font-family: var(--font-data); font-variant-numeric: tabular-nums; }

/* ---------- Accessibilité --------------------------------------------------- */
:where(a, button, input, select, textarea, summary, [tabindex]):focus-visible {
  outline: 2px solid var(--line-focus);
  outline-offset: 2px;
  border-radius: var(--radius-xs, 0);
}
.sr-only {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip-path: inset(50%); white-space: nowrap;
}
/* Plancher tactile WCAG 2.2 SC 2.5.8. Le constat B5 a relevé 106 cibles
   sous le plancher, dont ~96 dues à un `.link-quiet` sans min-height. */
:where(a, button, [role="button"], summary, label) { min-height: var(--tap-min, 24px); }

/* ---------- Primitives de mise en page -------------------------------------- */
.bande { width: 100%; padding-inline: var(--space-4); }
.bande > * { max-width: var(--mesure-large, 1240px); margin-inline: auto; }
.pile { display: grid; gap: var(--space-4); }
.mesure { max-width: 68ch; }