/* ═════════════════════════════════════════════════════════════
   HEADER.CSS
   En-tête du site : titre principal (h1), infos de mise à jour,
   et barre de navigation secondaire (liens).
   ═════════════════════════════════════════════════════════════ */

/* ─ EN-TÊTE PRINCIPAL ──────────────────────────────────────────── */
header {
  padding: var(--spacing-xxl) var(--spacing-xl) var(--spacing-md); /* 40px haut/bas, 32px côtés, 16px bas */
  width: 100%; /* Pleine largeur */
  max-width: 1000px; /* Limite à 1000px */
  margin: 0 auto; /* Centré horizontalement */
  box-sizing: border-box; /* Padding inclus dans la largeur */
}

/* Titre h1 : grand, élégant, clair */
header h1 {
  font-family: var(--font-family-display); /* Police Playfair (élégante) */
  font-size: 2.4em; /* Grande taille (38px) */
  font-weight: 600; /* Semi-gras */
  letter-spacing: 0.01em; /* Très léger espacement entre lettres */
  margin: 0; /* Pas de marge par défaut */
  color: var(--color-header); /* Blanc cassé clair */
  line-height: 1.2; /* Espacement des lignes resserré */
}

/* Info de mise à jour : petit texte discret */
.update-info {
  margin-top: var(--spacing-sm); /* 8px d'écart avec le h1 */
  font-size: var(--font-size-xs); /* Très petit (12px) */
  color: var(--color-text-tertiary); /* Gris moyen discret */
  letter-spacing: 0.05em; /* Espacé en majuscules */
  text-transform: uppercase; /* En MAJUSCULES */
}

/* ─ BARRE DE NAVIGATION SECONDAIRE ────────────────────────────── */
.secondary-nav {
  padding: 0 var(--spacing-xl) var(--spacing-md); /* 0 haut, 32px côtés, 16px bas */
  max-width: 1000px; /* Aligné avec header */
  width: 100%;
  margin: 0 auto; /* Centré */
  box-sizing: border-box;
  display: flex; /* Alignement horizontal des liens */
  justify-content: flex-end; /* Liens alignés à droite */
}

/* Liens de la nav secondaire */
.secondary-nav a {
  font-size: var(--font-size-sm); /* Petit texte (14px) */
  color: var(--color-text-tertiary); /* Gris moyen */
  text-decoration: none; /* Pas de soulignement */
  letter-spacing: 0.03em; /* Très léger espacement */
  transition: color var(--transition); /* Animation couleur 0.2s */
}

.secondary-nav a:hover {
  color: var(--color-accent); /* Au survol : bleu électrique */
}