/* Cosmo : blanc, or et gris. Les écrans des yeux restent noirs, cerclés d'or comme les dômes du DualEye. */
:root {
  --fond: #f5f3ee;
  --carte: #ffffff;
  --carte-2: #faf8f4;
  --ligne: #e7e2d7;
  --ligne-2: #d9d2c2;
  --texte: #1e2227;
  --doux: #646a72;
  --pale: #9aa0a7;
  --or: #b08a2e;
  --or-vif: #d4b25a;
  --or-pale: #f4ecd6;
  --or-fonce: #7d611c;
  --gris: #8b9198;
  --vert: #3f8f5a;
  --rouge: #b9473b;
  --ombre: 0 1px 2px rgba(30, 34, 39, .05), 0 6px 24px rgba(30, 34, 39, .05);
  --rayon: 16px;
  --mono: "JetBrains Mono", ui-monospace, Menlo, Consolas, monospace;
  --titre: "Outfit", "Inter", system-ui, sans-serif;
}
* { box-sizing: border-box; }
html, body { margin: 0; }
body {
  background: var(--fond);
  color: var(--texte);
  font: 14px/1.5 "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;
  -webkit-font-smoothing: antialiased;
}
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3 { font-family: var(--titre); font-weight: 600; margin: 0; letter-spacing: -.01em; }
a { color: var(--or-fonce); }

/* boutons */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 34px; padding: 6px 12px; border-radius: 10px;
  border: 1px solid var(--ligne-2); background: var(--carte); cursor: pointer;
  transition: border-color .15s, background .15s, box-shadow .15s;
}
.btn:hover { border-color: var(--or-vif); }
.btn:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(212, 178, 90, .35); }
.btn:disabled { opacity: .5; cursor: not-allowed; }
.btn.on { border-color: var(--or); background: var(--or-pale); color: var(--or-fonce); font-weight: 600; }
.btn.plein { background: linear-gradient(180deg, var(--or-vif), var(--or)); border-color: var(--or); color: #fff; font-weight: 600; }
.btn.plein:hover { background: linear-gradient(180deg, #dcbd6b, #a8842a); }
.btn.danger:hover { border-color: var(--rouge); color: var(--rouge); }
.btn.petit { min-height: 28px; padding: 3px 9px; font-size: 12.5px; border-radius: 8px; }

/* la petite étoile de Cosmo */
.etoile { display: inline-block; width: 26px; height: 26px; }