/*
  Charte HOOS (validée le 24/10/2026) — jetons et marque de BOB50 Connect.
  Source : hoos-site/src/app/globals.css. Anthracite #323232 sur papier chaud,
  Poppins (titres, 500) + Inter (texte), surtitres en capitales espacées.
  good / flag / danger ne disent qu'un état, jamais une décoration.
*/
:root {
  --paper: #f7f6f4;
  --paper-raised: #ffffff;
  --paper-sunken: #edebe7;
  --ink: #323232;
  --ink-deep: #232323;
  --ink-soft: #5c5c5c;
  --ink-faint: #8a8681;
  --band: #323232;
  --on-band: #f7f6f4;
  --rule: #e0ddd8;
  --rule-strong: #c9c5be;
  --accent: #323232;
  --accent-strong: #171717;
  --accent-wash: #edebe7;
  --accent-ink: #ffffff;
  --good: #2f6b52;
  --good-wash: #e8f0eb;
  --flag: #8a5a12;
  --flag-wash: #f7eddc;
  --danger: #9b3a2e;
  --danger-wash: #f6e7e4;
  --lift-1: 0 1px 2px rgba(35, 35, 35, 0.06), 0 1px 3px rgba(35, 35, 35, 0.04);
  --lift-2: 0 2px 4px rgba(35, 35, 35, 0.05), 0 8px 20px -6px rgba(35, 35, 35, 0.12);
  --crest: inset 0 1px 0 rgba(255, 255, 255, 0.9);
  --font-display: 'Poppins', system-ui, sans-serif;
  --font-sans: 'Inter', system-ui, sans-serif;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #1a1a1a;
    --paper-raised: #242424;
    --paper-sunken: #121212;
    --ink: #f0eeea;
    --ink-deep: #ffffff;
    --ink-soft: #b5b1ab;
    --ink-faint: #8a8681;
    --band: #0e0e0e;
    --on-band: #f0eeea;
    --rule: #333333;
    --rule-strong: #454545;
    --accent: #f0eeea;
    --accent-strong: #ffffff;
    --accent-wash: #2c2c2c;
    --accent-ink: #1a1a1a;
    --good: #6cb392;
    --good-wash: #1c2a24;
    --flag: #d9a75d;
    --flag-wash: #2a2013;
    --danger: #e08a7e;
    --danger-wash: #2e1c19;
    --lift-1: 0 1px 2px rgba(0, 0, 0, 0.4);
    --lift-2: 0 2px 4px rgba(0, 0, 0, 0.3), 0 10px 24px -8px rgba(0, 0, 0, 0.6);
    --crest: inset 0 1px 0 rgba(255, 255, 255, 0.06);
  }
}

.display {
  font-family: var(--font-display); font-weight: 500;
  letter-spacing: -0.025em; line-height: 1.08; color: var(--ink-deep);
}
.eyebrow {
  font-size: 11px; font-weight: 500; letter-spacing: 0.22em;
  text-transform: uppercase; color: var(--ink-faint);
}

/* Marque : H + « HOOS » + nom du produit en surtitre. */
.hoos-mark {
  display: inline-block; flex-shrink: 0; background: currentColor;
  -webkit-mask: url(/static/img/hoos-mark.svg) center / contain no-repeat;
  mask: url(/static/img/hoos-mark.svg) center / contain no-repeat;
}
.marque { display: inline-flex; align-items: center; gap: 11px; color: var(--ink); text-decoration: none; }
.marque:hover { color: var(--ink); }
.marque .hoos-mark { width: 34px; height: 34px; }
.marque-texte { display: flex; flex-direction: column; line-height: 1; }
.marque-nom { font-family: var(--font-display); font-weight: 500; font-size: 19px; letter-spacing: -0.025em; color: var(--ink-deep); }
.marque-produit { font-size: 9px; font-weight: 500; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-faint); margin-top: 5px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) {
  * { transition-duration: 0.01ms !important; animation: none !important; }
}