/* ============================================================
   Domaine des Jeux — design tokens
   Import this file before components.css.

   Required Google Fonts (add to <head>):
     <link href="https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,500;0,600;0,700;1,500;1,600;1,700&family=Nunito:wght@400;500;600;700;800&display=swap" rel="stylesheet">
   ============================================================ */

:root {
  /* ---------- Palette · identité ---------- */
  --bordeaux:     #7A2E2B;  /* Primary action, marque, links */
  --bordeaux-700: #5E2120;  /* Hover / pressed */
  --bordeaux-100: #F0D9D7;  /* Soft tint, accent backgrounds */
  --terracotta:    #C9663C; /* Secondary warm */
  --terracotta-100:#FBE5D6;
  --ocre:         #D9A441;  /* Highlight, popularité */
  --ocre-100:     #FBEFCF;
  --foret:        #3F6A4E;  /* Success, validation */
  --foret-100:    #DFEBE0;

  /* ---------- Palette · neutres ---------- */
  --parchemin:    #F7EFDD;  /* Page bg */
  --parchemin-2:  #FCF6E8;  /* Cards, sections */
  --creme:        #FFFCF3;  /* Modals, fields */
  --encre:        #2C1F14;  /* Primary text */
  --encre-2:      #5B4636;  /* Secondary text */
  --encre-3:      #8A7965;  /* Tertiary / placeholder */
  --trait:        #E5D7B8;  /* Borders, dividers */

  /* ---------- Sémantique ---------- */
  --danger:     #B43A2E;
  --danger-100: #F7D8D2;

  /* ---------- Type ---------- */
  --serif: "Lora", Georgia, serif;
  --sans:  "Nunito", system-ui, -apple-system, sans-serif;

  /* ---------- Radii ---------- */
  --r-xs:   8px;
  --r-sm:   10px;
  --r-md:   14px;  /* default — buttons, inputs */
  --r-lg:   18px;  /* cards */
  --r-xl:   24px;  /* large surfaces */
  --r-pill: 999px;

  /* ---------- Espacement (4-pt) ---------- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 20px;
  --sp-6: 24px;
  --sp-7: 32px;
  --sp-8: 40px;
  --sp-9: 56px;
  --sp-10: 80px;

  /* ---------- Ombres ---------- */
  --sh-1:    0 2px 6px rgba(44,31,20,0.06);
  --sh-2:    0 10px 30px rgba(44,31,20,0.12);
  --sh-card: 0 1px 0 rgba(255,255,255,0.6) inset, 0 8px 22px rgba(122,46,43,0.08);
  --sh-cta:  0 8px 20px rgba(122,46,43,0.25), inset 0 -3px 0 rgba(0,0,0,0.18), inset 0 1px 0 rgba(255,252,243,0.15);

  /* ---------- Motion ---------- */
  --ease:    cubic-bezier(0.4, 0, 0.2, 1);
  --dur-1:   120ms;
  --dur-2:   180ms;
  --dur-3:   280ms;

  /* ---------- Layout ---------- */
  --tap-min: 52px;       /* min interactive height — non-negotiable */
  --content-mobile: 100%;
  --content-desktop: 1240px;
}

/* ---------- Reset minimal ---------- */
* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  font-family: var(--sans);
  font-size: 18px;          /* base — never below 16 */
  line-height: 1.55;
  color: var(--encre);
  background: var(--parchemin);
  -webkit-font-smoothing: antialiased;
}
a { color: var(--bordeaux); text-decoration: none; }
a:hover { text-decoration: underline; }
img, svg { max-width: 100%; display: block; }

/* ---------- Type utility classes ---------- */
.t-display {
  font-family: var(--serif);
  font-weight: 700; font-style: italic;
  font-size: 44px; line-height: 1.05;
  letter-spacing: -0.005em;
}
.t-h1 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 36px; line-height: 1.15;
}
.t-h2 {
  font-family: var(--serif);
  font-weight: 700;
  font-size: 26px; line-height: 1.2;
}
.t-h3 {
  font-family: var(--serif);
  font-weight: 700; font-style: italic;
  font-size: 22px; line-height: 1.3;
}
.t-body {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 18px; line-height: 1.55;
}
.t-helper {
  font-family: var(--sans);
  font-weight: 500;
  font-size: 15px; line-height: 1.45;
  color: var(--encre-3);
}
.t-label {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 16px; line-height: 1.2;
  color: var(--encre);
}
.t-meta {
  font-family: var(--sans);
  font-weight: 700;
  font-size: 13px;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--encre-3);
}
.t-muted { color: var(--encre-2); }
.t-tertiary { color: var(--encre-3); }