/* ==========================================================================
   Mon Saju — base commune (public/css/base.css)
   Dépend de tokens.css. Repris de design/maquettes/site/site.css.

   Deux étages :
   1. Règles GLOBALES, valables pour toutes les pages : boîte, police des
      contrôles, fond papier, anneau de focus, utilitaires, mouvement réduit.
   2. Règles du DESIGN SYSTEM, portées par la classe `ds` (posée sur <body> des
      pages du site : landing, calculateur, merci, retrouver, 404/500) : chiffres
      alignés, réinitialisation des titres et listes, classes typographiques, mise
      en page. Zéro spécificité (:where) pour ne jamais écraser un composant.
      Le rapport (`report-page`) et les pages légales (`legal`) n'ont pas `ds` :
      leur typographie est gérée par leurs propres feuilles (report-*.css,
      pages/legal.css) ; la garde est donc conservée, volontairement.
   ========================================================================== */

/* ---------- 1. Global ------------------------------------------------------ */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
/* Boutons et champs héritent de la police du site (jamais la police système). */
button, input, select, textarea { font: inherit; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 3px; }

/* Texte réservé aux lecteurs d'écran. */
.visually-hidden, .sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap;
}

/* Grain de papier (clair) / poussière d'étoiles (sombre), discret. À poser
   sur le conteneur voulu : `<div class="grain">`. */
.grain {
  background-image:
    radial-gradient(circle at 14% 22%, var(--speck-1) 0 .9px, transparent 1.8px),
    radial-gradient(circle at 76% 32%, var(--speck-2) 0 .9px, transparent 1.9px),
    radial-gradient(circle at 40% 70%, var(--speck-2) 0 .8px, transparent 1.7px),
    repeating-linear-gradient(14deg, var(--fiber) 0 1px, transparent 1px 5px);
  background-size: 180px 180px, 230px 230px, 270px 270px, 8px 8px;
}

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

/* ---------- 2. Design system (classe `ds`) -------------------------------- */
:where(.ds) {
  background: var(--paper);
  color: var(--ink);
  font: 400 var(--fs-body)/var(--lh-body) var(--font-ui);
  font-synthesis: none;
  font-variant-numeric: lining-nums;
}
/* Chiffres alignés partout (Cormorant a des chiffres elzéviriens par défaut :
   « 0 » se lit « o »). !important car le raccourci `font:` réinitialise
   font-variant-numeric. Exception : numéros de chapitre en italique (.osn). */
:where(.ds) * { font-variant-numeric: lining-nums !important; }
:where(.ds) .osn, :where(.ds) .osn * { font-variant-numeric: oldstyle-nums !important; }

:where(.ds) :where(img, svg) { display: block; max-width: 100%; }
:where(.ds) :where(a) { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
:where(.ds) :where(p) { margin: 0; }
:where(.ds) :where(h1, h2, h3, h4) { margin: 0; font-weight: 500; }
:where(.ds) :where(ul, ol) { margin: 0; padding: 0; list-style: none; }
:where(.ds) :where(:focus-visible) { border-radius: 4px; }

/* Typographie */
:where(.ds) :where(.display, .h1, .h2, .h3, .h4) { font-family: var(--font-display); color: var(--ink); letter-spacing: -.01em; }
:where(.ds) .display { font-size: var(--fs-display); line-height: var(--lh-tight); font-weight: 500; letter-spacing: -.02em; }
:where(.ds) .h1 { font-size: var(--fs-h1); line-height: 1.04; }
:where(.ds) .h2 { font-size: var(--fs-h2); line-height: 1.06; }
:where(.ds) .h3 { font-size: var(--fs-h3); line-height: var(--lh-title); font-weight: 600; }
:where(.ds) .h4 { font-size: var(--fs-h4); line-height: 1.25; font-weight: 600; }
:where(.ds) :where(.display, .h1, .h2, .h3) { text-wrap: balance; }
:where(.ds) :where(.display, .h1, .h2, .h3) em { font-style: italic; color: var(--accent-ink); font-weight: 500; }
:where(.ds) .kicker {
  font: 600 var(--fs-kicker)/1.3 var(--font-ui);
  letter-spacing: var(--tracking-kicker);
  text-transform: uppercase;
  color: var(--accent-ink);
}
:where(.ds) .kicker--mute { color: var(--ink-3); }
:where(.ds) .lead { font-size: var(--fs-lead); line-height: 1.5; color: var(--ink-2); }
:where(.ds) .small { font-size: var(--fs-small); line-height: 1.5; }
:where(.ds) .meta { font-size: var(--fs-meta); line-height: 1.45; color: var(--ink-3); }
:where(.ds) .mute { color: var(--ink-3); }
:where(.ds) .soft { color: var(--ink-2); }
:where(.ds) .read { font: 400 var(--fs-read)/var(--lh-read) var(--font-display); color: var(--ink); }
:where(.ds) .ko { font-family: var(--font-ko); font-weight: 600; font-style: normal; letter-spacing: 0; }
:where(.ds) .ko-r { font-family: var(--font-ko); font-weight: 400; font-style: normal; }
:where(.ds) .nowrap { white-space: nowrap; }
:where(.ds) .num { font-variant-numeric: lining-nums tabular-nums; }
:where(.ds) .measure { max-width: var(--measure); }

/* Mise en page */
:where(.ds) .wrap { width: 100%; max-width: calc(var(--canvas) + 2 * var(--gutter)); margin: 0 auto; padding: 0 var(--gutter); }
:where(.ds) .section { padding: var(--section-y) 0; }
:where(.ds) .section--alt { background-color: var(--paper-2); }
:where(.ds) .stack > * + * { margin-top: var(--sp-4); }
:where(.ds) .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-md); }
:where(.ds) .card--raised { background: var(--surface-2); box-shadow: var(--shadow-2); }
@media (max-width: 899px) { :where(.ds) .btn--block-m { width: 100%; } }