/* STARK — couleurs. Base claire, un seul accent (bleu profond #0F4B70),
   un cyan de teinte (#C4F8FF), une seule section sombre par page. */
:root {
  /* Fonds clairs */
  --bg: #f6f9fb;
  --bg-2: #ffffff;
  --card: #ffffff;
  --card-grad-end: #eef4f8;

  /* Lignes */
  --line: #d5e0e7;
  --line-soft: #e6eef3;

  /* Textes */
  --text: #0b1d29;
  --dim: #5c6f7c;

  /* Accent — bleu profond, deux valeurs + cyan */
  --blue: #0f4b70;
  --blue-soft: #1a74ab;
  --cyan: #c4f8ff;
  --blue-tint: #e4f6fc;
  --blue-select: rgba(15, 75, 112, 0.22);
  --blue-hairline: rgba(15, 75, 112, 0.28);

  /* Icônes de carte (dégradé de tuile) */
  --ico-from: #c4f8ff;
  --ico-to: #e4f6fc;

  /* Section sombre — la seule respiration profonde du site */
  --cream: #0f4b70;
  --cream-text: #ffffff;
  --cream-dim: #b6d6e8;
  --cream-line: rgba(196, 248, 255, 0.28);
  --cream-ink: #c4f8ff;
  --cream-dot: rgba(196, 248, 255, 0.35);
  --cream-dot-on: #c4f8ff;

  /* Cadre de téléphone */
  --phone-bezel: #0b1d29;
  --phone-bezel-light: #143349;

  /* Boutons */
  --btn-face: #0f4b70;
  --btn-face-hover: #0a3956;
  --btn-ink: #ffffff;
  --btn-dark: #0b1d29;
  --btn-dark-hover: #143349;
}

/* STARK — une seule famille : Inter, en trois graisses (400 Regular,
   500 Medium, 600 SemiBold). Les titres sont en Inter 600, TOUT EN CAPITALES,
   avec un interligne inférieur à 1 (0.87 / 0.9). La seule exception est le
   titre de la section profonde, en casse normale, très serré (-0.045em). */
:root {
  --display: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* @kind font */
  --body: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif; /* @kind font */

  /* Les trois seules graisses chargées */
  --fw-regular: 400; /* @kind font */
  --fw-medium: 500; /* @kind font */
  --fw-semibold: 600; /* @kind font */

  /* Titres — fluides, jamais figés */
  --fs-display: clamp(3.2rem, 6.6vw, 6rem); /* @kind font */
  /* Le display de la page encyclopédie : un cran plus petit, interligne 0.9 */
  --fs-display-page: clamp(3rem, 6vw, 5.4rem); /* @kind font */
  --lh-display-page: 0.9; /* @kind font */
  --lh-display: 0.87; /* @kind font */
  --tr-display: -0.015em; /* @kind font */

  --fs-h2: clamp(2.4rem, 5vw, 4rem); /* @kind font */
  --lh-h2: 0.9; /* @kind font */
  --tr-h2: -0.01em; /* @kind font */

  /* Titre de la section crème (pile système, casse normale) */
  --fs-h2-soft: clamp(2.15rem, 4vw, 3.7rem); /* @kind font */
  --lh-h2-soft: 1.03; /* @kind font */
  --tr-h2-soft: -0.045em; /* @kind font */

  --fs-h3: 1.3rem; /* @kind font */
  --tr-h3: -0.02em; /* @kind font */
  --lh-h3: 1.15; /* @kind font */

  /* Corps */
  --fs-lede: clamp(1.05rem, 1.5vw, 1.2rem); /* @kind font */
  --lh-lede: 1.6; /* @kind font */
  --fs-copy: 1.02rem; /* @kind font */
  --lh-copy: 1.65; /* @kind font */
  --fs-body: 16px; /* @kind font */
  --lh-body: 1.55; /* @kind font */

  /* Sur-titre / pilule — capitales très espacées */
  --fs-eyebrow: 0.75rem; /* @kind font */
  --tr-eyebrow: 0.14em; /* @kind font */
  --fs-pill: 0.78rem; /* @kind font */
  --tr-pill: 0.05em; /* @kind font */
  --fs-nav: 0.92rem; /* @kind font */
  --fs-btn: 0.97rem; /* @kind font */
}

/* STARK — échelle d'espacement à six crans. Les sections respirent large :
   --s-6 (96px) en haut et en bas d'une section, --s-5 pour un grand écart
   interne, --s-2/--s-3 pour les détails. */
:root {
  --s-1: 8px;
  --s-2: 16px;
  --s-3: 24px;
  --s-4: 40px;
  --s-5: 64px;
  --s-6: 96px;

  /* Largeur de page : 1200px max, gouttière 20px puis 56px dès 640px */
  --shell: 1200px;
  --shell-gutter: 40px;
  --shell-gutter-wide: 56px;
  --shell-narrow: 760px;
}

/* STARK — rayons. Un seul rayon de carte (18px), des pilules partout ailleurs,
   et les rayons du cadre de téléphone qui sont dictés par le matériel. */
:root {
  --r-md: 18px;
  --r-card-ico: 13px;
  --r-brand-mark: 9px;
  --r-feature: 16px;
  --r-pill: 999px;
  --r-phone: 44px;
  --r-phone-screen: 36px;
  --r-phone-sm: 34px;
  --r-phone-sm-screen: 28px;
}

/* STARK — mouvement. Une seule idée : les blocs montent de 18px en fondu quand
   ils entrent dans le champ, avec trois crans de décalage. Les survols
   soulèvent de 2 à 5px. Rien d'autre. Tout est coupé sous
   prefers-reduced-motion. */
:root {
  --reveal-shift: 18px; /* @kind other */
  --reveal-dur: 0.5s; /* @kind other */
  --reveal-delay-1: 0.08s; /* @kind other */
  --reveal-delay-2: 0.16s; /* @kind other */
  --reveal-delay-3: 0.24s; /* @kind other */
  --lift-card: -5px; /* @kind other */
  --lift-option: -2px; /* @kind other */
  --ease: ease; /* @kind other */
  --t-fast: 0.18s; /* @kind other */
  --t-base: 0.2s; /* @kind other */
  --t-card: 0.22s; /* @kind other */
  --shadow-card-hover: 0 18px 34px rgba(11, 29, 41, 0.12);
  --shadow-cream: 0 12px 24px rgba(0, 0, 0, 0.25);
  --shadow-phone-cream: 0 24px 48px rgba(11, 29, 41, 0.18);
}

/* STARK — reset et règles globales, reprises de landing/index.html. */
* { box-sizing: border-box; }

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

body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font: var(--fs-body)/var(--lh-body) var(--body);
  overflow-x: hidden;
  -webkit-font-smoothing: antialiased;
}

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

a { color: inherit; text-decoration: none; }
a:hover { color: var(--blue-soft); }

button { font: inherit; cursor: pointer; }

/* Le gras du navigateur vaut 700, une graisse qu'Inter ne charge pas ici : sans
   cette règle, titres et <strong> partent en faux gras synthétisé. */
h1, h2, h3, h4, h5, h6, b, strong { font-weight: var(--fw-semibold); }

::selection { background: var(--cyan); color: var(--text); }

:focus-visible { outline: 3px solid var(--blue-soft); outline-offset: 3px; border-radius: 4px; }

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