/*
  Base de la charte : styles de départ, typographie, mise en page, en-tête.
  Rôle : tout ce qui concerne la page entière (pas les composants, voir composants.css).
  Règle C-03 : aucune couleur, taille ou police écrite en dur ici, uniquement les
  variables de tokens.css. Points de rupture (constantes) : 820 px (mobile) et 560 px (listes).
*/
*, *::before, *::after { box-sizing: border-box; }

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

body {
  margin: 0;
  font-family: var(--police-base);
  font-size: var(--taille-texte);
  line-height: var(--interligne);
  color: var(--couleur-texte);
  background: var(--couleur-fond);
}

h1, h2, h3 {
  color: var(--couleur-bleu-profond);
  line-height: 1.25;
  margin: var(--espace-5) 0 var(--espace-2);
}
h1 { font-size: var(--taille-titre-1); margin-top: var(--espace-4); }
h2 {
  font-size: var(--taille-titre-2);
  padding-bottom: var(--espace-1);
  border-bottom: var(--epaisseur-champ) solid var(--couleur-bleu-clair);
}
h3 { font-size: var(--taille-texte); }

p { margin: 0 0 var(--espace-3); }

a { color: var(--couleur-bleu-action); text-underline-offset: 2px; }
a:hover { color: var(--couleur-bleu-profond); }

/* Anneau de focus : visible au clavier, jamais supprimé (charte §5 et §7) */
:focus-visible {
  outline: var(--epaisseur-focus) solid var(--couleur-bleu-action);
  outline-offset: var(--decalage-focus);
}

.texte-doux { color: var(--couleur-texte-doux); }
.petit { font-size: var(--taille-petite); }

/* Zone de contenu centrée */
.contenu {
  max-width: var(--largeur-contenu);
  margin: 0 auto;
  padding: var(--espace-4) var(--espace-4) var(--espace-6);
}

/* En-tête : logo à gauche, filet bleu logo dessous, menu avec entrée active soulignée de rouge */
.entete {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--espace-2) var(--espace-5);
  padding: var(--espace-2) var(--espace-5);
  background: var(--couleur-blanc);
  border-bottom: var(--epaisseur-entete) solid var(--couleur-bleu-logo);
}
.entete__logo { display: block; height: var(--hauteur-logo-pc); width: auto; }
.entete__menu {
  display: flex;
  gap: var(--espace-5);
  margin: 0;
  padding: 0;
  list-style: none;
}
.entete__menu a {
  display: inline-flex;
  align-items: center;
  min-height: var(--cible-min);
  font-weight: 700;
  color: var(--couleur-bleu-profond);
  text-decoration: none;
  border-bottom: var(--epaisseur-menu) solid transparent;
}
/* Seul usage du rouge du logo à l'écran (charte §6) */
.entete__menu a[aria-current="page"] { border-bottom-color: var(--couleur-rouge-logo); }

@media (min-width: 821px) {
  .contenu { padding-left: var(--espace-5); padding-right: var(--espace-5); }
}

/* Disposition mobile. Menu provisoire : second rang défilable, à concevoir avec le chat Portail. */
@media (max-width: 820px) {
  .entete { padding: var(--espace-2) var(--espace-4); gap: var(--espace-1) var(--espace-4); }
  .entete__logo { height: var(--hauteur-logo-mobile); }
  .entete__menu { width: 100%; overflow-x: auto; gap: var(--espace-4); }
  .entete__menu a { white-space: nowrap; }
}