/* ─────────────────────────────────────────────
   Design tokens Immersio — palette + breakpoints
   À importer en haut des feuilles refondues mobile-first :
       @import url('/static/css/_tokens.css');
   ───────────────────────────────────────────── */
:root {
  /* Couleurs (alignées mon-espace) */
  --bg:            #0c0a09;
  --surface:       #141210;
  --surface-2:     rgba(255,255,255,0.025);
  --surface-3:     rgba(255,255,255,0.04);
  --border:        rgba(255,255,255,0.07);
  --border-strong: rgba(255,255,255,0.16);

  --gold:          #c9a87c;
  --gold-soft:     #e2c79e;
  --gold-dim:      rgba(201,168,124,0.10);
  --gold-strong:   rgba(201,168,124,0.30);

  --text:          #e4e2dc;
  --text-strong:   #faf9f6;
  --muted:         rgba(228,226,220,0.5);
  --muted-2:       rgba(228,226,220,0.72);

  --green:         #7ec99b;
  --green-dim:     rgba(126,201,155,0.10);
  --red:           #e08585;
  --red-dim:       rgba(224,133,133,0.08);
  --amber:         #d9b76b;

  /* Typo */
  --font-sans:     'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;

  /* Espacements fluides */
  --gap-sm:        clamp(8px, 1.6vw, 12px);
  --gap-md:        clamp(14px, 2.4vw, 20px);
  --gap-lg:        clamp(20px, 3.6vw, 32px);
  --gap-xl:        clamp(32px, 6vw, 56px);

  --pad-page:      clamp(16px, 4vw, 32px);
  --pad-section:   clamp(40px, 8vw, 80px);

  /* Rayons */
  --radius-sm:     8px;
  --radius-md:     12px;
  --radius-lg:     16px;
  --radius-xl:     20px;

  /* Tap targets (a11y mobile) */
  --tap-min:       44px;

  /* Breakpoints — utilisables avec @media (min-width: var(--bp-md)) */
  --bp-sm:         540px;
  --bp-md:         760px;
  --bp-lg:         1024px;
  --bp-xl:         1280px;
}

/* Reset minimal partagé */
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { -webkit-tap-highlight-color: transparent; }

/* Inputs : font-size 16px min sur mobile (sinon iOS zoom auto au focus) */
@media (max-width: 760px) {
  input, select, textarea { font-size: 16px !important; }
}

/* ─────────────────────────────────────────────
   Dropdowns natifs en thème sombre
   Sans `color-scheme: dark`, Chrome/Edge sous Windows utilisent le rendu OS
   en mode clair → fond blanc + texte gris clair illisible sur fond noir.
   Pas d'`appearance: none` global pour ne pas casser les selects qui surchargent
   leur background en inline (ils perdraient leur chevron natif).
   ───────────────────────────────────────────── */
select { color-scheme: dark; }
select option {
  background-color: #1a1814;
  color: #e4e2dc;
  padding: 8px 12px;
}
select option:checked,
select option:hover {
  background-color: #2a2622;
  color: #faf9f6;
}
select option:disabled {
  color: rgba(255,255,255,0.3);
}