/* ==========================================================================
   .pm-menu — panneau de navigation, et .pm-scrim — son voile

   Figma : composant « menu », identique aux deux breakpoints à deux blocs
   près. En desktop, les blocs « S'abonner / Boutique » et « rubriques » sont
   masqués parce que le header les fournit déjà. Vérification arithmétique sur
   la maquette : 1019px de blocs visibles + 3 gaps de 24 = 1091px, la hauteur
   exacte du conteneur desktop (contre 1511 + 5 × 24 = 1631 en mobile).

   D'où .pm-menu__block--mobile-only : un modificateur, pas un second panneau.
   Côté Twig, ce sera un {% if %} autour de ces deux blocs.
   ========================================================================== */

/* Le panneau et son voile démarrent sous le header. Comme ils sont en
   `position: fixed`, leur origine est le haut du viewport, pas celui du
   document : quand la barre d'administration de Drupal repousse la page vers le
   bas, ils restent en place et passent sous la barre.

   `--drupal-displace-offset-top` est l'API de core pour ça (misc/displace.js),
   recalculée quand la barre est dépliée, repliée ou réorientée. Chez un
   visiteur, displace.js n'est pas chargé : la variable n'existe pas et le repli
   à 0px s'applique — rien ne change.

   Un seul token pour les deux composants : le voile démarre exactement là où
   démarre le panneau, et cette égalité mérite d'être portée par le code plutôt
   que répétée dans trois `calc`. */
:root {
  --pm-menu-top: calc(var(--drupal-displace-offset-top, 0px) + var(--pm-header-height-mobile));
}

.pm-menu {
  position: fixed;
  top: var(--pm-menu-top);
  left: 0;
  z-index: var(--pm-z-menu);

  /* En mobile le panneau occupe toute la largeur — aucun voile n'est visible.
     En desktop il fait 396px et laisse voir la page assombrie à sa droite. */
  width: 100%;
  height: calc(100% - var(--pm-menu-top));

  display: flex;
  flex-direction: column;
  padding: var(--pm-space-l) var(--pm-space-m);
  background-color: var(--pm-color-surface);

  /* Le contenu dépasse le viewport dans la maquette (1187px de panneau pour
     1117px de frame en desktop, 1679px en mobile) : il doit scroller. */
  overflow-y: auto;
  overscroll-behavior: contain;

  /* État fermé. visibility, et pas seulement transform, pour sortir le panneau
     de l'ordre de tabulation quand il est refermé.

     Le délai sur visibility n'est pas cosmétique. En transitionnant visibility
     comme transform, le panneau restait `hidden` pendant les 200ms d'ouverture,
     et le panel.focus() du JS échouait sans erreur : la navigation clavier
     n'entrait jamais dans le menu. D'où deux réglages distincts :
       — fermeture : on retarde le passage à hidden jusqu'à la fin du glissement,
         pour que le panneau reste visible pendant qu'il sort ;
       — ouverture : visibility bascule immédiatement, sans délai. */
  transform: translateX(-100%);
  visibility: hidden;
  transition:
    transform var(--pm-duration) var(--pm-easing),
    visibility 0s linear var(--pm-duration);
}

body.is-menu-open .pm-menu {
  transform: none;
  visibility: visible;
  transition:
    transform var(--pm-duration) var(--pm-easing),
    visibility 0s linear 0s;
}

/* Le panneau reçoit le focus par programme à l'ouverture, uniquement pour que
   la tabulation y entre. Ce n'est pas une commande : son anneau de focus
   n'apporte rien et dessinait un liséré bleu de 2px sur tout son pourtour,
   y compris pour une ouverture à la souris. Les éléments focusables qu'il
   contient gardent le leur — c'est là que l'anneau est utile. */
.pm-menu:focus,
.pm-menu:focus-visible {
  outline: none;
}

.pm-menu__inner {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-l);
}

/* Blocs que le header desktop rend redondants. */
.pm-menu__block--mobile-only {
  display: block;
}

/* Empile deux boutons pleine largeur (S'abonner + Boutique, Se connecter +
   Rechercher). Deux occurrences dans la maquette, même gap de 12. */
.pm-menu__actions {
  display: flex;
  flex-direction: column;
  gap: var(--pm-space-xs);
}

/* --- Voile ----------------------------------------------------------------
   Masqué en mobile : le panneau y est pleine largeur, la maquette mobile ne
   comporte aucun voile.
   ------------------------------------------------------------------------- */

.pm-scrim {
  display: none;
}

/* --- Verrou de défilement ------------------------------------------------ */

body.is-menu-open {
  overflow: hidden;
}

/* ==========================================================================
   Desktop — à partir de 1024px
   ========================================================================== */

@media (min-width: 1024px) {
  :root {
    --pm-menu-top: calc(var(--drupal-displace-offset-top, 0px) + var(--pm-header-height-desktop));
  }

  .pm-menu {
    top: var(--pm-menu-top);
    width: var(--pm-menu-width-desktop);
    height: calc(100% - var(--pm-menu-top));

    /* 48px en haut et en bas contre 24 en mobile : l'instance desktop du
       composant a son propre padding dans la maquette (48/20 vs 24/20).
       C'est ce qui porte la hauteur totale du panneau à 1091 + 96 = 1187px. */
    padding-block: var(--pm-space-xl);
  }

  .pm-menu__block--mobile-only {
    display: none;
  }

  .pm-scrim {
    display: block;
    position: fixed;

    /* Démarre sous le header, comme Rectangle 1 dans la maquette (y=160). */
    inset: var(--pm-menu-top) 0 0 0;
    z-index: var(--pm-z-scrim);

    background-color: var(--pm-color-scrim);
    opacity: 0;
    pointer-events: none;
    transition: opacity var(--pm-duration) var(--pm-easing);
  }

  body.is-menu-open .pm-scrim {
    opacity: 1;
    pointer-events: auto;
  }
}