/* SERVICES ON HOVER - SOCLE PARTAGE DU PANNEAU DEROULANT */

/*
 * Ce que les deux variantes ont en commun n'est pas leur contenu — une grille
 * d'icones d'un cote, un menu split avec image de l'autre — mais leur NATURE :
 * un panneau qui tombe sous le bandeau, large comme le contenu du site, revele
 * au survol de l'onglet Services. C'etait ecrit deux fois, a l'identique, dans
 * les deux feuilles de variante.
 *
 * DECLENCHEMENT PAR HOOK, PAS PAR CLASSE (§4.4). Aucun selecteur generique ici :
 * la variante POSE `data-services-menu` sur sa racine pour heriter du socle. Une
 * troisieme variante qui voudrait un panneau plein ecran, ou colle a droite, n'a
 * qu'a ne pas poser l'attribut — elle est libre, sans rien casser chez ses
 * freres.
 *
 * PREFIXE `[data-header]` (§4.12) : le panneau vit DANS le bandeau, dont les
 * feuilles ciblent des elements generiques descendants. Sans ce prefixe, une
 * regle de header l'emporterait sur le socle.
 */

[data-header] [data-services-menu] {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%);
  width: 100vw;
  /* La largeur du contenu du site, pas un 1200 recopie : un theme qui elargit
     ses pages elargit son menu. */
  max-width: var(--max-content-width);
  background: var(--white);
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  /* Jamais `transition: all` : le panneau change aussi de geometrie quand la
     fenetre bouge, et `all` animerait ces sauts-la. */
  transition: opacity 0.3s ease, visibility 0.3s ease;
}

/* `:focus-within` autant que `:hover` : au clavier, l'onglet Services doit
   ouvrir son panneau comme a la souris. */
[data-header] .nav-item:hover [data-services-menu],
[data-header] .nav-item:focus-within [data-services-menu] {
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
}

/* Sous 1024px la navigation desktop disparait au profit du menu mobile : le
   panneau n'a plus de declencheur, on le retire du document. */
@media (max-width: 1024px) {
  [data-header] [data-services-menu] {
    display: none;
  }
}