/* =============================================
   GLOBAL — Dark Minimal Tech
   Corps de page, typographie, boutons, utilitaires
   ============================================= */

/* ── CORPS DE PAGE ────────────────────────── */
body {
  font-family:  var(--font-body);
  font-size:    var(--text-base);
  font-weight:  400;
  color:        var(--color-text-body); /* #A3A3A3 Off White — texte courant */
  background:   var(--color-bg);        /* #0F0F0F Carbon Black */
  line-height:  1.6;
  display:      flex;
  flex-direction: column;
  /* Grain noise ultra-subtil optionnel — opacity 0.02 */
  position: relative;
}

body::after {
  content: '';
  position: fixed;
  inset: 0;
  background-image: url("data:image/svg+xml,%3Csvg viewBox='0 0 256 256' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='noise'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23noise)'/%3E%3C/svg%3E");
  opacity: 0.02; /* maximum autorisé — pureté absolue */
  pointer-events: none;
  z-index: var(--z-above);
}

#app-shell { display: flex; flex-direction: column; min-height: 100vh; }
#app       { flex: 1; padding-top: var(--nav-height); }

/* ── CONTENEUR ────────────────────────────── */
.container {
  width: 100%;
  max-width:      var(--container-max);
  margin-inline:  auto;
  padding-inline: var(--container-pad);
}

/* ── TYPOGRAPHIE ──────────────────────────── */

/* H1 : Syne bold, display, #FFFFFF, tracking serré */
h1 {
  font-family:    var(--font-heading);
  font-size:      var(--text-hero);    /* 64–96px */
  font-weight:    800;
  letter-spacing: -0.04em;            /* spécification exacte */
  line-height:    1.0;
  color:          var(--color-text);   /* #FFFFFF — usage rare */
}

/* H2 : Syne semi-display */
h2 {
  font-family:    var(--font-heading);
  font-size:      var(--text-4xl);
  font-weight:    700;
  letter-spacing: -0.02em;
  line-height:    1.1;
  color:          var(--color-text);
}

/* H3 : Syne medium */
h3 {
  font-family:    var(--font-heading);
  font-size:      var(--text-xl);
  font-weight:    700;
  letter-spacing: -0.01em;
  line-height:    1.2;
  color:          var(--color-text);
}

h4, h5, h6 {
  font-family: var(--font-heading);
  font-weight: 700;
  color:       var(--color-text);
}

/* Corps de texte — DM Sans Off White */
p {
  font-family: var(--font-body);
  font-weight: 400;
  color:       var(--color-text-body);
  margin-bottom: var(--space-4);
}

/* Labels section : Geist Mono, uppercase, 11px, Muted Gray */
/* Classe utilitaire utilisable sur <p>, <span>, <small> */
.label {
  font-family:    var(--font-mono);
  font-size:      var(--text-label); /* 11px */
  font-weight:    500;
  text-transform: uppercase;
  letter-spacing: 0.2em;
  color:          var(--color-text-muted); /* #525252 */
}

/* Nombres/indices (01, 02, 03) — Geist Mono */
.mono {
  font-family: var(--font-mono);
  font-size:   var(--text-sm);
  font-weight: 500;
  color:       var(--color-text-muted);
}

/* ── BOUTONS ──────────────────────────────── */

/* Base commune */
.btn {
  display:     inline-flex;
  align-items: center;
  gap:         var(--space-2);
  padding:     var(--space-3) var(--space-6);
  font-family: var(--font-body);
  font-size:   var(--text-sm);
  font-weight: 500;
  cursor:      pointer;
  border:      1px solid transparent;
  /* Radius 0 (carré) ou 6px max — spec exacte */
  border-radius: var(--radius-lg); /* 6px */
  transition:  all var(--transition);
  text-decoration: none;
}

/* Bouton CTA principal : bg Electric Blue, blanc */
.btn-primary {
  background:   var(--color-accent);  /* #0EA5E9 */
  border-color: var(--color-accent);
  color:        #ffffff;
}
.btn-primary:hover {
  background:   var(--color-accent-hover); /* #38BDF8 */
  border-color: var(--color-accent-hover);
  transform:    scale(1.01); /* max autorisé */
}

/* Bouton secondaire : transparent, border Border Gray, Off White */
.btn-secondary,
.btn-outline {
  background:   transparent;
  border-color: var(--color-border); /* #2A2A2A */
  color:        var(--color-text-body); /* #A3A3A3 */
}
.btn-secondary:hover,
.btn-outline:hover {
  border-color: var(--color-accent); /* Electric Blue au hover */
  color:        var(--color-text);
}

/* Ghost : invisible au repos, actif au hover */
.btn-ghost {
  background:   transparent;
  border-color: transparent;
  color:        var(--color-text-muted);
}
.btn-ghost:hover {
  color:        var(--color-text-body);
}

/* Taille petite */
.btn-sm {
  padding:   4px 12px;
  font-size: var(--text-xs);
}

/* Groupe de boutons */
.btn-group {
  display:   flex;
  flex-wrap: wrap;
  gap:       var(--space-3);
  margin-top: var(--space-8);
}

/* ── FOCUS STATES — accessibilité prioritaire ─
   outline 2px solid #0EA5E9 offset 3px — spec exacte */
*:focus-visible {
  outline:        2px solid var(--color-accent);
  outline-offset: 3px;
}

/* Sections */
section { padding-block: var(--space-16); }

/* ── UTILITAIRES ─────────────────────────── */
.sr-only {
  position: absolute; width: 1px; height: 1px;
  overflow: hidden; clip: rect(0,0,0,0);
}
.text-center { text-align: center; }

/* Ligne séparatrice h : border-bottom 1px #2A2A2A — jamais plus épaisse */
.divider {
  border: none;
  border-bottom: 1px solid var(--color-border);
}