/* ═══════════════════════════════════════════════════════════════
   base.css — reset, jetons de design, thèmes clair/sombre
   Cible : tablette / grand écran tactile mural, portrait ou paysage
   ═══════════════════════════════════════════════════════════════ */

*, *::before, *::after { box-sizing: border-box; }

html, body {
  height: 100%;
  margin: 0;
  overscroll-behavior: none;
}

body {
  font-family: var(--font-sans);
  font-size: var(--fs-base);
  line-height: 1.45;
  color: var(--txt);
  background: var(--bg);
  -webkit-font-smoothing: antialiased;
  -webkit-tap-highlight-color: transparent;
  text-rendering: optimizeLegibility;
}

/* Pas de sélection de texte parasite au toucher, sauf dans les champs */
body { -webkit-user-select: none; user-select: none; }
input, textarea, [contenteditable] { -webkit-user-select: text; user-select: text; }

img { max-width: 100%; display: block; }
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }
input, textarea, select { font: inherit; color: inherit; }
h1, h2, h3, h4, p, figure { margin: 0; }
ul, ol { margin: 0; padding: 0; list-style: none; }

:focus { outline: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }

/* ─────────────────────────────  Jetons  ───────────────────────────── */

:root {
  --font-sans: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --font-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Georgia, ui-serif, serif;

  /* Échelle typographique — généreuse : l'écran est à ~50 cm des yeux */
  --fs-xs: 12px;
  --fs-sm: 14px;
  --fs-base: 16px;
  --fs-md: 18px;
  --fs-lg: 22px;
  --fs-xl: 30px;
  --fs-2xl: 40px;

  /* Rythme */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 24px; --sp-6: 32px; --sp-7: 48px; --sp-8: 64px;

  --r-sm: 10px; --r-md: 16px; --r-lg: 24px; --r-xl: 32px; --r-full: 999px;

  /* Cibles tactiles — jamais en dessous de 48 px */
  --touch: 56px;
  --touch-sm: 48px;

  --nav-rail: 116px;   /* largeur du rail en paysage */
  --nav-bar: 88px;     /* hauteur de la barre en portrait */

  --ease: cubic-bezier(.22, .61, .36, 1);
  --ease-out: cubic-bezier(.16, 1, .3, 1);
  --dur: 260ms;

  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: env(safe-area-inset-left, 0px);
  --safe-r: env(safe-area-inset-right, 0px);
}

/* Thème sombre — défaut, adapté à un écran allumé en permanence dans une pièce */
:root, [data-theme="dark"] {
  --bg:        #0e0e11;
  --bg-deep:   #08080a;
  --surface:   #17171c;
  --surface-2: #1f1f26;
  --surface-3: #2a2a33;
  --line:      #2e2e38;
  --line-soft: #23232b;

  --txt:       #f4f2ef;
  --txt-2:     #a9a6a1;
  --txt-3:     #6e6b68;

  --accent:      #d9a05b;   /* camel */
  --accent-2:    #f0c691;
  --accent-ink:  #1a1206;
  --danger:      #e2685f;
  --ok:          #6fbf8b;

  --shadow-1: 0 2px 10px rgba(0,0,0,.4);
  --shadow-2: 0 12px 40px rgba(0,0,0,.55);
  --shadow-3: 0 24px 80px rgba(0,0,0,.7);
  --scrim: rgba(6,6,8,.72);
  --img-bg: #202027;
}

[data-theme="light"] {
  --bg:        #f7f5f2;
  --bg-deep:   #efece7;
  --surface:   #ffffff;
  --surface-2: #f2efea;
  --surface-3: #e7e3dc;
  --line:      #ddd8d0;
  --line-soft: #e9e5df;

  --txt:       #1b1a18;
  --txt-2:     #5f5c57;
  --txt-3:     #918c85;

  --accent:      #a9702a;
  --accent-2:    #8a5a1e;
  --accent-ink:  #fffaf3;
  --danger:      #c2453c;
  --ok:          #2f7d51;

  --shadow-1: 0 2px 8px rgba(30,25,18,.08);
  --shadow-2: 0 12px 32px rgba(30,25,18,.14);
  --shadow-3: 0 24px 64px rgba(30,25,18,.2);
  --scrim: rgba(28,24,20,.5);
  --img-bg: #e9e5df;
}

/* ─────────────────────────────  Utilitaires  ───────────────────────────── */

.serif { font-family: var(--font-serif); font-weight: 400; letter-spacing: -.01em; }

.ico { width: 26px; height: 26px; fill: currentColor; flex: none; }
.ico--sm { width: 20px; height: 20px; }
.ico--lg { width: 32px; height: 32px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

.scroller {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  scrollbar-width: thin;
  scrollbar-color: var(--surface-3) transparent;
}
.scroller::-webkit-scrollbar { width: 8px; height: 8px; }
.scroller::-webkit-scrollbar-thumb { background: var(--surface-3); border-radius: var(--r-full); }
.scroller::-webkit-scrollbar-track { background: transparent; }

.hrow {
  display: flex; gap: var(--sp-2);
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scrollbar-width: none;
}
.hrow::-webkit-scrollbar { display: none; }

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