/* ═════════════════════════════════════════════════════════════
   BASE.CSS
   Styles fondamentaux : reset global, typographie, layout flexbox,
   gestion de la navbar fixe, scrollbar personnalisée.
   ═════════════════════════════════════════════════════════════ */

body {
  /* ─ TYPOGRAPHIE ──────────────────────────────────────────────── */
  font-family: var(--font-family-base); /* Police DM Sans sur tout le site */
  font-weight: var(--font-weight-medium); /* Poids normal par défaut */
  color: var(--color-text-primary); /* Texte blanc cassé sur fond noir */
  background: var(--color-bg-primary); /* Fond noir profond */
  line-height: 1.75; /* Espacement vertical des lignes pour lisibilité */
  
  /* ─ RESET : zéro margin/padding de base ────────────────────── */
  margin: 0;
  padding: 0;
  
  /* ─ LAYOUT FLEXBOX : colonnes centrées ────────────────────────– */
  display: flex; /* Active le modèle flexbox */
  flex-direction: column; /* Empile verticalement (header, main, footer) */
  align-items: center; /* Centre horizontalement */
  
  /* ─ DIMENSIONS ───────────────────────────────────────────────── */
  width: 100%; /* Pleine largeur de la fenêtre */
  min-height: 100vh; /* Au moins la hauteur de l'écran */
}

/* Quand .main-nav est présente (navbar fixe active) */
body:has(.main-nav) {
  padding-top: 80px; /* Décale le contenu sous la navbar fixe (80px de haut) */
  padding-left: 0 !important; /* Pas de décalage horizontal — contenu pleine largeur */
  align-items: stretch; /* Enfants s'étirent sur toute la largeur */
}

/* Les blocs principaux restent pleine largeur quand navbar est active */
body:has(.main-nav) header,
body:has(.main-nav) main,
body:has(.main-nav) footer,
body:has(.main-nav) .credits-section,
body:has(.main-nav) .secondary-nav {
  box-sizing: border-box; /* Inclut padding/border dans la largeur */
  width: 100%; /* Pleine largeur (navbar active) */
  max-width: 100%; /* Pas de limite, content interne gère le max-width */
  margin-left: 0; /* Pas de marge horizontale */
  margin-right: 0;
}

/* Quand il n'y a PAS de navbar (pages statiques, maintenance) */
body:not(:has(.main-nav)) header,
body:not(:has(.main-nav)) main,
body:not(:has(.main-nav)) footer {
  width: 100%; /* Pleine largeur du conteneur */
  max-width: 1000px; /* Limite le contenu à 1000px max */
  margin-left: auto; /* Centre horizontalement */
  margin-right: auto;
}

* {
  box-sizing: border-box;
}

::selection {
  background: var(--color-accent);
  color: #fff;
}

/* Universel : border-box pour tous les éléments (padding inclus dans width) */
* {
  box-sizing: border-box;
}

/* Texte sélectionné : fond bleu, texte blanc */
::selection {
  background: var(--color-accent); /* Fond bleu électrique */
  color: #fff; /* Texte blanc */
}

/* ─ SCROLLBAR PERSONNALISÉE (webkit: Chrome, Safari, Edge) ─────── */
::-webkit-scrollbar {
  width: 5px; /* Largeur fine de la barre de défilement */
}
::-webkit-scrollbar-track {
  background: var(--color-bg-primary); /* Fond de la piste (noir) */
}
::-webkit-scrollbar-thumb {
  background: var(--color-border); /* Poignée (gris clair) */
  border-radius: 3px; /* Arrondie légèrement */
}
::-webkit-scrollbar-thumb:hover {
  background: var(--color-text-quaternary); /* Au survol : gris plus visible */
}