/* ===========================================================================
   TCG Vault — BASE (reset + éléments + typographie)
   =========================================================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

html { height: 100%; -webkit-text-size-adjust: 100%; }

body {
  font-family: var(--font-body);
  font-size: var(--fs-14);
  line-height: 1.45;
  color: var(--c-ink);
  background: var(--c-bg-2);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  /* Verrouille la page au viewport dynamique : header + nav toujours visibles
     (corrige iOS Safari, où la page défilait sous les barres du navigateur). */
  position: fixed; top: 0; left: 0; right: 0;
  height: 100vh; height: 100dvh;
  overflow: hidden; overscroll-behavior: none;
}

h1, h2, h3, h4 { font-family: var(--font-display); font-weight: 600; line-height: 1.1; letter-spacing: .01em; }

button { font: inherit; color: inherit; background: none; border: none; cursor: pointer; }
/* 16px mini sur les champs : empêche le zoom automatique de Safari iOS au focus */
input, select, textarea { font: inherit; color: inherit; font-size: 16px; }
a { color: inherit; text-decoration: none; }
img, svg { display: block; }
ul { list-style: none; }

/* Chiffres alignés partout où on affiche des nombres */
.mono { font-family: var(--font-mono); font-variant-numeric: tabular-nums; }

/* Label discret en petites capitales */
.label {
  font-family: var(--font-body); font-size: var(--fs-11); font-weight: 600;
  letter-spacing: .06em; text-transform: uppercase; color: var(--c-ink-3);
}

/* Texture guilloché très subtile, signature « papier sécurité » */
.guilloche {
  background-image:
    repeating-linear-gradient(45deg,  rgba(124,100,60,.05) 0 1px, transparent 1px 7px),
    repeating-linear-gradient(-45deg, rgba(124,100,60,.05) 0 1px, transparent 1px 7px);
}

/* Barres de défilement horizontales discrètes (chips) */
.scroll-x {
  display: flex; gap: var(--sp-2); overflow-x: auto;
  scroll-snap-type: x proximity; -webkit-overflow-scrolling: touch;
  scrollbar-width: none; padding: var(--sp-1) 0;
}
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x > * { scroll-snap-align: start; flex: none; }

[hidden] { display: none !important; }

:focus-visible { outline: 2px solid var(--c-brand); outline-offset: 2px; }