/* ──────────────────────────────────────────────────────────────────────────
   speedp — fondations. Tout ce qui est ici vient de docs/DESIGN.md §1.
   Le code n'utilise QUE les jetons semantiques (jetons.css), jamais une
   valeur d'echelle directement, et jamais une couleur en dur.
   ────────────────────────────────────────────────────────────────────────── */

@import url("/static/ds/jetons.css");

/* ── Polices. Inter 4 variable (graisse + optique), Plex Arabic chargee
   seulement si un caractere arabe est affiche (unicode-range). */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-display: swap;
  font-weight: 100 900;
  src: url("/static/ds/fonts/inter-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face { font-family: "Plex Arabic"; font-weight: 400; font-display: swap;
  src: url("/static/ds/fonts/plex-arabic-400.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabic"; font-weight: 500; font-display: swap;
  src: url("/static/ds/fonts/plex-arabic-500.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }
@font-face { font-family: "Plex Arabic"; font-weight: 700; font-display: swap;
  src: url("/static/ds/fonts/plex-arabic-700.woff2") format("woff2");
  unicode-range: U+0600-06FF, U+0750-077F, U+08A0-08FF, U+FB50-FDFF, U+FE70-FEFF; }

.compacte { --ligne: 40px; }

/* ── Remise a zero ──────────────────────────────────────────────────── */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; min-height: 100vh; background: var(--fond); color: var(--texte);
  font-family: var(--police); font-size: 14px; line-height: 20px; letter-spacing: -.003em;
  font-feature-settings: "cv11"; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility; accent-color: var(--selection);
}
[lang="ar"] body, [dir="rtl"] body { letter-spacing: 0; line-height: 1.55; }
h1, h2, h3, h4, p, figure { margin: 0; }
button, input, select, textarea { font: inherit; color: inherit; letter-spacing: inherit; }
button { cursor: pointer; }
img { display: block; max-width: 100%; }
a { color: var(--lien); text-decoration: none; }
a:hover { text-decoration: underline; text-underline-offset: 2px; }
:focus-visible { outline: 2px solid var(--selection); outline-offset: 2px; border-radius: var(--rayon-1); }
::selection { background: var(--selection-fond); }

/* ── Typographie (DESIGN.md §1.3) ───────────────────────────────────── */
.t-legende { font-size: 12px; line-height: 16px; font-weight: 500; letter-spacing: 0; }
.t-petit   { font-size: 13px; line-height: 18px; }
.t-corps   { font-size: 14px; line-height: 20px; }
.t-accent  { font-size: 14px; line-height: 20px; font-weight: 550; }
.t-lead    { font-size: 16px; line-height: 24px; letter-spacing: -.006em; }
.t-titre-3 { font-size: 18px; line-height: 24px; font-weight: 600; letter-spacing: -.012em; }
.t-titre-2 { font-size: 24px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "opsz" 32; }
.t-chiffre { font-size: 28px; line-height: 32px; font-weight: 600; letter-spacing: -.02em; font-variation-settings: "opsz" 32; }
.t-geant   { font-size: 40px; line-height: 44px; font-weight: 600; letter-spacing: -.025em; font-variation-settings: "opsz" 32; }
.nb, .t-chiffre, .t-geant { font-variant-numeric: tabular-nums; font-feature-settings: "cv11", "tnum"; }
.texte-2 { color: var(--texte-2); }
.texte-3 { color: var(--texte-3); }
.ltr { direction: ltr; unicode-bidi: isolate; }
.masque-visuel { position: absolute !important; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ── Icones ─────────────────────────────────────────────────────────── */
.ic { width: 16px; height: 16px; flex: none; stroke: currentColor; fill: none;
  stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; vertical-align: -3px; }
.ic-20 { width: 20px; height: 20px; }
.ic-24 { width: 24px; height: 24px; stroke-width: 2; }
.ic-12 { width: 12px; height: 12px; stroke-width: 2.25; vertical-align: -1px; }
[dir="rtl"] .ic-miroir { transform: scaleX(-1); }

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