/*
  En-tête : symbole (image décorative, alt vide) et nom en texte (direction artistique §3.4),
  navigation en noms courts, bouton « Commencer » toujours visible (guide Voix, « L'en-tête »).
  Téléphone : « Commencer » et « Menu » à droite ; la liste se déroule sous la barre, par-dessus la page,
  sans changer la hauteur de l'en-tête.
  Ordinateur : symbole et nom, trois liens, « Commencer ». Le bouton existe deux fois dans le code,
  une seule version est affichée à la fois (l'autre est en display: none : ni lue ni atteinte au clavier).
*/

.site-header {
  position: relative;   /* la liste du menu s'ancre sous la barre sur téléphone */
  border-bottom: 1px solid var(--border-subtle);
}

.site-header__inner {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2) var(--space-3);
  min-height: 4.5rem;
  padding-block: var(--space-2);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  min-height: var(--target);
  color: var(--text);
  text-decoration: none;
}

.brand:hover,
a.brand:active {
  color: var(--text);
  text-decoration: none;
}

.brand-name {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: 1.5rem;
  line-height: 1;
}

.site-header__actions {
  display: flex;
  flex-wrap: wrap;   /* texte très agrandi : « Commencer » et « Menu » passent à la ligne */
  justify-content: flex-end;
  align-items: center;
  gap: var(--space-2);
  margin-left: auto;
}

/* Bouton du menu : une icône (trois traits qui deviennent une croix), le nom « Menu » / « Fermer » reste dans le code
   (.visually-hidden) pour les lecteurs d'écran. Même zone de toucher de 44 px que les autres boutons. */
.menu-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--target);
  min-height: var(--target);
  padding: 0;
  background: transparent;
  color: var(--text);
  border: 2px solid var(--border-control);
  border-radius: var(--radius-m);
  cursor: pointer;
}

.menu-toggle__icon,
.menu-toggle__icon::before,
.menu-toggle__icon::after {
  display: block;
  width: 1.25rem;
  height: 2px;
  border-radius: 1px;
  background: currentColor;
}

.menu-toggle__icon {
  position: relative;
}

.menu-toggle__icon::before,
.menu-toggle__icon::after {
  content: "";
  position: absolute;
  left: 0;
}

.menu-toggle__icon::before {
  top: -0.375rem;
}

.menu-toggle__icon::after {
  top: 0.375rem;
}

/* Ouvert : le trait du milieu disparaît, les deux autres forment une croix */
.menu-toggle[aria-expanded="true"] .menu-toggle__icon {
  background: transparent;
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::before {
  transform: translateY(0.375rem) rotate(45deg);
}

.menu-toggle[aria-expanded="true"] .menu-toggle__icon::after {
  transform: translateY(-0.375rem) rotate(-45deg);
}

@media (prefers-reduced-motion: no-preference) {
  .menu-toggle__icon,
  .menu-toggle__icon::before,
  .menu-toggle__icon::after {
    transition: transform 0.2s ease, background-color 0.2s ease;
  }
}

/* Survol : seulement avec une souris (au toucher il reste collé) ; l'appui donne le retour */
@media (hover: hover) and (pointer: fine) {
  .menu-toggle:hover {
    background: var(--surface);
  }
}

.menu-toggle:active {
  background: var(--surface);
}

.site-nav {
  display: none;
}

.site-nav ul {
  margin: 0;
  padding: 0 0 var(--space-2);
  list-style: none;
}

.site-nav li {
  max-width: none;
  margin: 0;
}

.site-nav a:not(.btn) {
  display: flex;
  align-items: center;
  min-height: var(--target);
  color: var(--text);
  font-weight: var(--weight-strong);
  text-decoration: none;
}

@media (hover: hover) and (pointer: fine) {
  .site-nav a:not(.btn):hover {
    color: var(--link-hover);
    text-decoration: underline;
  }
}

.site-nav a:not(.btn):active {
  color: var(--link-hover);
  text-decoration: underline;
}

/* Page courante : soulignée et annoncée (aria-current), jamais par la couleur seule */
.site-nav a[aria-current="page"] {
  text-decoration: underline;
  text-decoration-thickness: 0.14em;
  text-underline-offset: 0.3em;
}

.site-nav__cta {
  display: none;
}

@media (max-width: 30em) {
  .brand img {
    width: 2rem;
    height: auto;
  }

  .brand {
    gap: 0.5rem;
  }

  .brand-name {
    font-size: 1.125rem;
  }

  .site-header__actions {
    gap: 0.375rem;
  }
}

/* Très petits téléphones (320 px) : espaces resserrés pour que la barre tienne sur une seule ligne */
@media (max-width: 22.5em) {
  .site-header__inner {
    column-gap: var(--space-2);
  }

  .site-header__actions {
    gap: var(--space-1);
  }

  .site-header__actions .btn--compact {
    padding-inline: var(--space-2);
  }
}

/* Téléphone : la liste est un panneau qui se déroule sous la barre (hauteur animée de 0 à sa taille).
   Fermé, il est en visibility: hidden : ni lu ni atteint au clavier, comme avec display: none. */
@media (max-width: 47.99em) {
  .site-nav {
    position: absolute;
    top: calc(100% + 1px);   /* sous le trait de l'en-tête, qui reste visible */
    inset-inline: 0;
    z-index: 20;
    display: grid;
    grid-template-rows: 0fr;
    visibility: hidden;
    background: var(--bg);
    border-bottom: 1px solid var(--border-subtle);
  }

  .site-nav.is-open {
    grid-template-rows: 1fr;
    visibility: visible;
  }

  .site-nav ul {
    min-height: 0;
    overflow: hidden;
    padding: 0 var(--gutter);
  }

  .site-nav li + li {
    border-top: 1px solid var(--border-subtle);
  }

  .site-nav a:not(.btn) {
    min-height: 3rem;
  }

  @media (prefers-reduced-motion: no-preference) {
    .site-nav {
      transition: grid-template-rows 0.25s ease, visibility 0s linear 0.25s;
    }

    .site-nav.is-open {
      transition: grid-template-rows 0.25s ease, visibility 0s;
    }
  }
}

@media (min-width: 48em) {
  .site-header__actions {
    display: none;
  }

  .site-nav {
    display: block;
    flex-basis: auto;
    margin-left: auto;
  }

  .site-nav ul {
    display: flex;
    align-items: center;
    gap: var(--space-5);
    padding: 0;
  }

  .site-nav__cta {
    display: block;
  }
}