/* En-tête commun à toutes les pages (posé par _scripts/poser-menu.py).
   Préfixe mn- : aucune règle d'une autre feuille ne s'y applique.
   Toutes les valeurs viennent de assets/tokens.css. */
.mn-tete {
  position: relative;
  z-index: var(--plan-tete);
  margin: var(--e-4-5) var(--marge) 0;
  min-height: 64px;
  padding: 0 var(--e-2-5) 0 var(--e-5);
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--e-5);
  background: var(--voile-tete);
  border: 1px solid var(--encre-a06);
  border-radius: var(--r-20);
  font-family: var(--police);
  color: var(--encre);
  /* stylelint-disable-next-line property-no-vendor-prefix -- Safari avant la version 18 ne lit que la forme préfixée */
  -webkit-backdrop-filter: blur(8px);
  backdrop-filter: blur(8px);
  box-sizing: border-box;
}

.mn-tete *,
.mn-tete *::before,
.mn-tete *::after {
  box-sizing: border-box;
}

.mn-logo {
  flex-shrink: 0;
  display: flex;
  align-items: center;
}

.mn-logo img {
  display: block;
  height: 26px;
  width: auto;
}

/* Navigation centrée */
.mn-nav {
  display: flex;
  align-items: center;
  gap: var(--e-1);
  font-size: var(--t-15);
  white-space: nowrap;
}

.mn-nav > a,
.mn-titre {
  min-height: var(--cible-tactile);
  display: flex;
  align-items: center;
  gap: var(--e-1-5);
  padding: 0 var(--e-3);
  border-radius: var(--r-12);
  color: var(--encre-2);
  text-decoration: none;
  font: inherit;
  background: none;
  border: 0;
  cursor: pointer;
}

.mn-nav > a:hover,
.mn-deroulant:hover .mn-titre,
.mn-deroulant:focus-within .mn-titre {
  color: var(--encre);
  background: var(--encre-a05);
}

.mn-nav > a[aria-current],
.mn-titre.actif {
  color: var(--encre);
  font-weight: 500;
}

.mn-titre svg {
  transition: transform var(--duree-bascule) ease;
}

.mn-deroulant {
  position: relative;
}

.mn-deroulant:hover .mn-titre svg,
.mn-deroulant:focus-within .mn-titre svg {
  transform: rotate(180deg);
}

/* Sous-menu : apparaît au survol (et au clavier) */
.mn-panneau {
  position: absolute;
  left: 50%;
  top: 100%;
  padding-top: var(--e-2-5);
  transform: translate(-50%, 6px);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity var(--duree-panneau) ease, transform var(--duree-panneau) ease, visibility 0s linear var(--duree-panneau);
}

.mn-deroulant:hover .mn-panneau,
.mn-deroulant:focus-within .mn-panneau,
.mn-deroulant.ouvert .mn-panneau {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translate(-50%, 0);
  transition: opacity var(--duree-panneau) ease, transform var(--duree-panneau) ease, visibility 0s;
}

.mn-deroulant.ferme .mn-panneau {
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
}

.mn-liste {
  min-width: 360px;
  padding: var(--e-2);
  background: var(--blanc);
  border: 1px solid var(--encre-a08);
  border-radius: var(--r-20);
  box-shadow: var(--ombre-menu);
  display: grid;
  gap: var(--e-0-5);
  white-space: normal;
}

.mn-liste.deux {
  min-width: 290px;
}

.mn-liste a {
  display: flex;
  flex-direction: column;
  gap: var(--e-0-5);
  padding: var(--e-3) var(--e-3-5);
  border-radius: var(--r-champ);
  color: var(--encre);
  text-decoration: none;
}

.mn-liste a strong {
  font-weight: 500;
  font-size: var(--t-15);
  display: flex;
  align-items: center;
  gap: var(--e-2);
}

.mn-liste a strong::before {
  content: "";
  flex-shrink: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--jaune);
  outline: 1.5px solid var(--encre);
}

.mn-liste a span {
  padding-left: var(--e-4);
  font-size: var(--t-13-5);
  line-height: 1.4;
  color: var(--gris);
}

.mn-liste a:hover,
.mn-liste a:focus-visible {
  background: var(--fond);
}

.mn-liste a[aria-current] {
  background: var(--jaune-pale);
}

/* Actions à droite */
.mn-actions {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  gap: var(--e-2);
  white-space: nowrap;
}

.mn-tel {
  min-height: var(--cible-tactile);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-3);
  color: var(--encre);
  text-decoration: none;
  font-size: var(--t-15);
}

.mn-cta {
  min-height: var(--cible-tactile);
  display: inline-flex;
  align-items: center;
  gap: var(--e-2-5);
  padding: 0 var(--e-1-5) 0 var(--e-4);
  border-radius: var(--r-pilule);
  background: var(--encre);
  color: var(--blanc);
  text-decoration: none;
  font-size: var(--t-15);
  font-weight: 500;
}

.mn-cta .rond {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: var(--jaune);
  color: var(--encre);
}

.mn-cta:hover .rond {
  transform: rotate(45deg);
  transition: transform var(--duree-bascule) ease;
}

/* Menu téléphone et tablette */
.mn-mobile {
  display: none;
  position: relative;
}

.mn-mobile > summary {
  list-style: none;
  min-height: var(--cible-tactile);
  display: flex;
  align-items: center;
  gap: var(--e-2);
  padding: 0 var(--e-3-5);
  border: 1.5px solid var(--encre);
  border-radius: var(--r-champ);
  font-size: var(--t-15);
  font-weight: 500;
  cursor: pointer;
}

.mn-mobile > summary::-webkit-details-marker {
  display: none;
}

.mn-mobile[open] > summary {
  background: var(--encre);
  color: var(--blanc);
}

.mn-mobile-panneau {
  position: absolute;
  right: 0;
  top: calc(100% + 10px);
  width: min(360px, calc(100vw - 40px));
  max-height: calc(100vh - 110px);
  overflow: auto;
  padding: var(--e-2-5);
  background: var(--blanc);
  border: 1px solid var(--encre-a08);
  border-radius: var(--r-20);
  box-shadow: var(--ombre-menu-mobile);
  display: flex;
  flex-direction: column;
  gap: var(--e-0-5);
  white-space: normal;
}

.mn-groupe {
  padding: var(--e-3) var(--e-3) var(--e-1);
  font-size: var(--t-12);
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--gris);
}

.mn-mobile-panneau a {
  min-height: var(--cible-tactile);
  display: flex;
  align-items: center;
  padding: 0 var(--e-3);
  border-radius: var(--r-12);
  color: var(--encre);
  text-decoration: none;
  font-size: var(--t-16);
}

.mn-mobile-panneau a[aria-current] {
  background: var(--jaune-pale);
  font-weight: 500;
}

.mn-mobile-panneau a.mn-mobile-cta {
  margin-top: var(--e-2);
  justify-content: center;
  background: var(--encre);
  color: var(--blanc);
  font-weight: 500;
}

@media (max-width: 1439px) {
  .mn-tel .numero {
    display: none;
  }

  .mn-tel {
    width: var(--cible-tactile);
    justify-content: center;
    padding: 0;
  }
}

@media (max-width: 1320px) {
  .mn-nav > a,
  .mn-titre {
    padding: 0 var(--e-2);
  }
}

@media (max-width: 1200px) {
  .mn-nav {
    display: none;
  }

  .mn-mobile {
    display: block;
  }

  .mn-tel .numero {
    display: none;
  }
}

@media (max-width: 560px) {
  .mn-tete {
    margin: var(--e-2-5) var(--e-2-5) 0;
    min-height: 56px;
    padding: 0 var(--e-1-5) 0 var(--e-4);
    border-radius: var(--r-18);
  }

  .mn-cta {
    display: none;
  }

  .mn-tel {
    width: var(--cible-tactile);
    justify-content: center;
    padding: 0;
    border-radius: var(--r-champ);
    background: var(--jaune-pale);
  }
}

@media (prefers-reduced-motion: reduce) {
  .mn-panneau,
  .mn-titre svg {
    transition: none;
  }
}