/* ==========================================================================
   .pm-header — barre de navigation principale

   Un seul bloc pour les deux breakpoints. La maquette mobile et la maquette
   desktop partagent la même structure en trois zones — [début] [logo] [fin] —
   le mobile n'en montrant qu'un sous-ensemble. Les éléments propres au desktop
   portent donc .pm-header__desktop-only et sont simplement masqués en dessous
   de 1024px, plutôt que dupliqués dans un second bloc.

   Ce n'est pas cosmétique : ces éléments masqués (S'abonner, Boutique, les
   rubriques) sont exactement ceux que le panneau menu réaffiche en mobile.
   ========================================================================== */

.pm-header {
  position: sticky;

  /* Pas `top: 0` : la barre d'administration de Drupal est en `position: fixed`
     par-dessus la page, et un header collant à 0 vient se glisser dessous dès
     qu'on défile. `--drupal-displace-offset-top` est l'API de core pour
     connaître cette hauteur (misc/displace.js) ; elle vaut 0 pour un visiteur,
     displace.js n'étant alors pas chargé.

     @see components/menu-panel.css, qui décale le panneau de la même façon */
  top: var(--drupal-displace-offset-top, 0px);

  /* Au-dessus du voile : dans la maquette, Rectangle 1 démarre à y=160, le
     header n'est jamais assombri. */
  z-index: var(--pm-z-header);

  background-color: var(--pm-color-surface);

  /* Contour interne : garde la hauteur totale à 160px (desktop) et 60px
     (mobile), comme la maquette. Voir --pm-stroke-bottom dans tokens.css. */
  box-shadow: var(--pm-stroke-bottom);
}

/* --- Barre principale ----------------------------------------------------- */

/* Grille 1fr auto 1fr plutôt qu'un space-between : elle centre le logo sur la
   page, et non entre ses deux voisins. Le centrage tient donc même si le
   contenu de gauche et de droite change de longueur — ce qui arrivera dès que
   Drupal alimentera ces liens. */
.pm-header__bar {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  height: var(--pm-header-height-mobile);
  padding-inline: 18px;
}

.pm-header__side {
  display: flex;
  align-items: center;
  gap: var(--pm-space-l);
}

.pm-header__side--end {
  justify-content: flex-end;
}

.pm-header__logo {
  display: block;
  width: 175px;
  margin: 0 auto !important;
}

.pm-header__logo img {
  width: 100%;
  height: auto;
}

/* --- Pastilles de gauche -------------------------------------------------
   « Menu » et « Lire le magazine » sont deux frames CTA identiques dans la
   maquette : rayon 60, gap 12, aucun fond. D'où une classe partagée.
   ------------------------------------------------------------------------- */

.pm-header__pill {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-xs);
  border-radius: var(--pm-radius-pill);
  font-family: var(--pm-text-interface-family);
  font-size: var(--pm-text-interface-size);
  font-weight: var(--pm-text-interface-weight);
  line-height: var(--pm-text-interface-height);
  letter-spacing: var(--pm-text-interface-spacing);
}

/* Les deux icônes coexistent dans le DOM ; le CSS choisit laquelle montrer.
   Cela évite au JS de manipuler des chemins d'images, et garde le libellé
   accessible cohérent avec ce qui est affiché. */
.pm-header__toggle-icon--close {
  display: none;
}

/* L'ouverture du menu remplace le burger par une croix, aux deux breakpoints.
   La frame « Menu desktop » montre pourtant un ☰ inchangé panneau ouvert :
   incohérence de maquette, arbitrée en faveur du comportement mobile. Le
   libellé « Menu », lui, reste affiché en desktop. */
body.is-menu-open .pm-header__toggle-icon--open {
  display: none;
}

body.is-menu-open .pm-header__toggle-icon--close {
  display: block;
}

/* Le libellé « Menu » n'apparaît qu'en desktop. */
.pm-header__toggle-label {
  display: none;
}

/* --- Rangée des rubriques (desktop uniquement) --------------------------- */

.pm-header__rubrics {
  display: none;
}

.pm-rubrics {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  gap: var(--pm-space-l);
  height: 60px;
}

/* L'entrée occupe toute la hauteur des 60px de la rangée : c'est elle qui
   porte le filet de survol, lequel doit s'aligner sur le bas de la rangée et
   non sur le bas du texte. */
.pm-rubrics__link {
  display: inline-flex;
  align-items: center;
  gap: var(--pm-space-3xs);
  padding-block: var(--pm-space-xs);

  /* Le contenu doit faire 24px de haut, avec ou sans icône : dans la maquette,
     chaque entrée contient un Frame 23 de 24px, et la présence d'une icône n'y
     change rien. Sans ce minimum, une entrée sans icône se contente des 22px de
     sa ligne de texte, son lien tombe à 58px au lieu de 60, et comme la rangée
     aligne tout par le bas, « Le Fil » — seule entrée à porter une icône — voit
     son texte remonter de 1px par rapport aux cinq autres. */
  min-height: calc(var(--pm-icon-size) + var(--pm-space-xs) * 2);
  font-family: var(--pm-text-menu-family);
  font-size: var(--pm-text-menu-size);
  font-weight: var(--pm-text-menu-weight);
  line-height: var(--pm-text-menu-height);
  transition:
    box-shadow var(--pm-duration) var(--pm-easing),
    color var(--pm-duration) var(--pm-easing);
}

/* Variante « Entrée menu / survol » (2068:4242) : filet bas de 4px, texte ET
   icône en bleu. L'icône suit sans règle propre — c'est un masque peint en
   currentColor. Le filet est une ombre interne : l'entrée reste à 60px. */
.pm-rubrics__link:hover {
  box-shadow: var(--pm-indicator-hover);
  color: var(--pm-color-hover);
}

/* Page courante : la maquette ne définit pas cet état. Le même filet que le
   survol, sans le passage au bleu, est l'interprétation la plus cohérente —
   à valider. */
.pm-rubrics__link[aria-current="page"] {
  box-shadow: var(--pm-indicator-hover);
  color: var(--pm-color-hover);
}

/* --- Liens texte de la zone droite --------------------------------------- */

.pm-header__link {
  font-family: var(--pm-text-interface-family);
  font-size: var(--pm-text-interface-size);
  font-weight: var(--pm-text-interface-weight);
  line-height: var(--pm-text-interface-height);
  letter-spacing: var(--pm-text-interface-spacing);
}

/* Pas de variante Figma pour ces liens. Le bleu au survol est l'inférence la
   plus cohérente avec le reste du système, où tout survol passe au bleu. */
.pm-header__link:hover {
  color: var(--pm-color-hover);
}

/* --- Éléments réservés au desktop ---------------------------------------- */

.pm-header__desktop-only {
  display: none;
}

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

@media (min-width: 1024px) {
  .pm-header__bar {
    /* 24 en haut, 0 en bas : les 6px de gap et les 60px de la rangée des
       rubriques complètent les 160px de hauteur totale de la maquette
       (24 + 70 + 6 + 60). */
    height: auto;
    min-height: 70px;
    padding: var(--pm-space-l) var(--pm-space-xl) 0;
  }

  .pm-header__logo {
    width: 300px;
  }

  .pm-header__desktop-only {
    display: inline-flex;
  }

  .pm-header__toggle-label {
    display: block;
  }

  /* Pastilles : rayon 60 sans fond dans la maquette. Le fond au survol est un
     ajout, sans lequel elles n'ont aucune affordance. Le padding est compensé
     par une marge négative sur la première, pour que le texte reste aligné sur
     la gouttière de 48px malgré la surface de survol qui la dépasse. */
  .pm-header__pill {
    height: 39px;
    padding-inline: var(--pm-space-xs);
  }

  .pm-header__pill--flush {
    margin-inline-start: calc(var(--pm-space-xs) * -1);
  }

  /* Idem : aucune variante fournie pour les pastilles. Bleu au survol, et pas
     le fond gris que j'avais supposé avant de connaître le système. */
  .pm-header__pill:hover {
    color: var(--pm-color-hover);
  }

  .pm-header__rubrics {
    display: block;
    padding-inline: var(--pm-space-xl);
    margin-top: var(--pm-space-3xs);
  }

  /* La bascule burger → croix vaut aussi en desktop : les règles générales
     portées par body.is-menu-open s'appliquent telles quelles, rien à
     neutraliser ici. La frame « Menu desktop » montre un ☰ inchangé panneau
     ouvert, mais c'est une incohérence de maquette — arbitrée en faveur du
     comportement mobile, qui est le plus lisible. Le libellé « Menu », lui,
     reste affiché.
     ------------------------------------------------------------------- */
}