/* ============================================================
   OYVIA — Base : reset, typographie, utilitaires
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; }
html { -webkit-text-size-adjust: 100%; scroll-behavior: smooth; }

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--c-text);
  background: var(--c-bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

img, svg, video { display: block; max-width: 100%; }
svg { flex-shrink: 0; }
input, button, textarea, select { font: inherit; color: inherit; }
button { cursor: pointer; background: none; border: none; }
a { color: inherit; text-decoration: none; }
ul, ol { list-style: none; padding: 0; }
table { border-collapse: collapse; width: 100%; }

/* --- Titres : Geist en graisse forte, tracking serré --- */
h1, h2, h3, h4, h5 {
  font-family: var(--font-title);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-tight);
  letter-spacing: var(--tracking-tight);
  color: var(--c-text);
}
h1 { font-size: var(--fs-3xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); }
h2 { font-size: var(--fs-2xl); font-weight: var(--fw-bold); letter-spacing: var(--tracking-tighter); }
h3 { font-size: var(--fs-xl); }
h4 { font-size: var(--fs-lg); }

/* Chiffres alignés partout où on affiche des données */
.tnum, table, .stat-value, .money, .tabular { font-variant-numeric: tabular-nums; }

/* --- Focus clavier visible --- */
:focus-visible { outline: 2px solid var(--c-accent); outline-offset: 2px; border-radius: var(--r-sm); }
:focus:not(:focus-visible) { outline: none; }
::selection { background: var(--blue-200); color: var(--ink-950); }

/* --- Scrollbars discrètes --- */
* { scrollbar-width: thin; scrollbar-color: var(--ink-300) transparent; }
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-thumb { background: var(--ink-300); border-radius: var(--r-full); border: 3px solid transparent; background-clip: padding-box; }
*::-webkit-scrollbar-thumb:hover { background: var(--ink-400); background-clip: padding-box; }

/* ============================================================
   Utilitaires
   ============================================================ */
.visually-hidden { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

.container { width: 100%; max-width: var(--content-max); margin-inline: auto; padding-inline: var(--sp-6); }

/* Flex helpers */
.row   { display: flex; align-items: center; }
.row-between { display: flex; align-items: center; justify-content: space-between; }
.col   { display: flex; flex-direction: column; }
.wrap  { flex-wrap: wrap; }
.grow  { flex: 1 1 auto; }
.center{ display: flex; align-items: center; justify-content: center; }

/* Gaps */
.gap-1 { gap: var(--sp-1); } .gap-2 { gap: var(--sp-2); } .gap-3 { gap: var(--sp-3); }
.gap-4 { gap: var(--sp-4); } .gap-6 { gap: var(--sp-6); }

/* Texte */
.text-sm    { font-size: var(--fs-sm); }
.text-xs    { font-size: var(--fs-xs); }
.text-lg    { font-size: var(--fs-lg); }
.text-soft  { color: var(--c-text-soft); }
.text-muted { color: var(--c-text-muted); }
.text-accent{ color: var(--c-accent); }
.text-danger{ color: var(--c-danger-ink); }
.fw-medium  { font-weight: var(--fw-medium); }
.fw-semibold{ font-weight: var(--fw-semibold); }
.fw-bold    { font-weight: var(--fw-bold); }
.uppercase  { text-transform: uppercase; letter-spacing: var(--tracking-wider); }
.truncate   { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.tabular    { font-variant-numeric: tabular-nums; }

/* Eyebrow (petite majuscule bleue discrète) */
.eyebrow { font-size: var(--fs-xs); font-weight: var(--fw-semibold); text-transform: uppercase; letter-spacing: var(--tracking-wider); color: var(--c-accent); }

/* Divers */
.mt-2 { margin-top: var(--sp-2); } .mt-3 { margin-top: var(--sp-3); } .mt-4 { margin-top: var(--sp-4); }
.mt-5 { margin-top: var(--sp-5); } .mt-6 { margin-top: var(--sp-6); }
.mb-2 { margin-bottom: var(--sp-2); } .mb-3 { margin-bottom: var(--sp-3); } .mb-4 { margin-bottom: var(--sp-4); }
.hidden { display: none !important; }
/* L'attribut `hidden` doit l'emporter sur le display: des composants.
   La feuille de l'agent utilisateur pose bien [hidden]{display:none},
   mais n'importe quelle règle d'auteur la bat : `.field{display:flex}`
   suffisait à réafficher un champ pourtant marqué hidden. C'est ce qui
   laissait « Forfait mensuel » visible sur un contrat à la commission. */
[hidden] { display: none !important; }
.divider { height: 1px; background: var(--c-border); border: 0; width: 100%; }

/* Logo Oyvia (wordmark SVG) */
.brand-logo { height: 84px; width: auto; display: block; }
.brand-logo--lg { height: 108px; }

@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; }
}