/* =====================================================================
   Lunéoo — Design tokens & composants canoniques (source de vérité)
   Généré depuis la palette #E8AF24 (ramp) + charte de marque.
   À inclure sur toutes les pages front : <link rel="stylesheet" href="./assets/theme.css">
   ===================================================================== */
:root {
  /* --- Couleurs marque --- */
  --brand: #E8AF24;            /* Jaune Lunéoo (lead) */
  --ink: #1D1D1D;              /* Noir mat (texte) */
  --cream: #E6DCD0;            /* Blanc cassé */
  --wood: #D1A573;            /* Bois clair */
  --grey: #B8B1A9;            /* Gris clair */
  --paper: #F5F0E8;
  /* Ramp jaune (états hover/tint) */
  --brand-50:#f2deac; --brand-100:#f2dba4; --brand-200:#f2d795; --brand-300:#f2d285;
  --brand-400:#f6cd54; --brand-500:#e8c060; --brand-600:#c79a1e; --brand-700:#8b6e27;
  --brand-800:#5c4714; --brand-900:#2e2207;
  /* Sémantique */
  --success:#1b7a1b; --warning:#9a7400; --error:#b4441f;
  /* Surfaces & lignes */
  --surface:#ffffff; --surface-soft:rgba(255,255,255,.9); --line:rgba(230,213,154,.8);
  --text:#1D1D1D; --text-soft:#675f52; --text-faint:#948c7d;

  /* --- Typographie (échelle modulaire) --- */
  --font-display:"Archivo", system-ui, sans-serif;
  --font-body:"Archivo", system-ui, sans-serif;
  --font-mono:"Space Mono", ui-monospace, monospace;
  --fs-xs:.7rem; --fs-sm:.82rem; --fs-base:1rem; --fs-lg:1.25rem;
  --fs-xl:1.55rem; --fs-2xl:1.95rem; --fs-3xl:2.45rem; --fs-4xl:3.05rem; --fs-5xl:3.8rem;

  /* --- Espacement (base 4px) --- */
  --space-1:4px; --space-2:8px; --space-3:12px; --space-4:16px;
  --space-5:24px; --space-6:32px; --space-7:48px; --space-8:64px;

  /* --- Rayons --- */
  --radius-sm:12px; --radius-md:16px; --radius-lg:22px; --radius-xl:30px; --radius-pill:999px;

  /* --- Élévation --- */
  --shadow-sm:0 8px 20px rgba(40,30,8,.07);
  --shadow-md:0 18px 46px rgba(40,30,8,.10);
  --shadow-lg:0 30px 80px rgba(40,30,8,.13);
}

/* ============ Globals sûrs (améliorent toutes les pages) ============ */
/* Accessibilité clavier : anneau de focus net */
:where(a, button, input, select, textarea, [tabindex]):focus-visible {
  outline: 3px solid var(--brand);
  outline-offset: 2px;
  border-radius: 6px;
}
::selection { background: var(--brand); color: var(--ink); }

/* Lien d'évitement (skip-link) : caché jusqu'au focus clavier */
.skip-link {
  position: absolute; left: 12px; top: -60px; z-index: 999;
  display: inline-flex; align-items: center;
  padding: 10px 16px; border-radius: var(--radius-md);
  background: var(--ink); color: #fff; font-family: var(--font-body); font-weight: 800;
  text-decoration: none; transition: top .18s ease;
}
.skip-link:focus { top: 12px; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; scroll-behavior:auto !important; }
}

/* ============ Composants canoniques (opt-in : classes lx-*) ============ */
.lx-btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:52px; padding:14px 22px; border:0; border-radius:var(--radius-md);
  font-family:var(--font-body); font-weight:800; font-size:var(--fs-base);
  cursor:pointer; transition:transform .14s ease, box-shadow .14s ease, background .14s ease;
}
.lx-btn--primary { background:linear-gradient(180deg, var(--brand-400) 0%, var(--brand) 100%); color:var(--ink); box-shadow:0 14px 28px rgba(201,154,30,.26); }
.lx-btn--secondary { background:var(--surface); border:1px solid var(--line); color:var(--ink); }
.lx-btn--dark { background:var(--ink); color:#fff; }
.lx-btn:hover { transform:translateY(-1px); }

.lx-card {
  background:var(--surface); border:1px solid var(--line);
  border-radius:var(--radius-lg); box-shadow:var(--shadow-sm); padding:var(--space-5);
}

.lx-pill {
  display:inline-flex; align-items:center; gap:8px; padding:8px 14px;
  border-radius:var(--radius-pill); background:var(--surface-soft); border:1px solid var(--line);
  font-family:var(--font-mono); font-size:var(--fs-xs); letter-spacing:.08em; text-transform:uppercase; font-weight:700;
}

.lx-chip {
  display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border-radius:var(--radius-pill); border:1px solid var(--line); background:var(--surface);
  font-weight:700; font-size:var(--fs-sm); cursor:pointer;
}
.lx-chip.is-on { background:var(--ink); color:var(--brand); border-color:var(--ink); }