/* =============================================================================
   BARRE DE MENU — themes/eman/common/header.php
   =============================================================================
   Une des trois zones de la page, avec le contenu (style.css) et le pied de
   page (footer.css). Ce fichier contient TOUTE la barre de menu et rien
   d'autre.

   Convention : toutes les regles sont prefixees par `#primary-nav`, l'id de la
   barre. Deux ou trois niveaux, jamais plus.
   La structure produite par header.php :

     #primary-nav                     la bande de papier collante en haut
       ul.nav-menu                    la rangee de boutons
         li > a | span.nav-category   un bouton (lien, ou rubrique sans page)
           ul                         le deroulant
             li > a                   une entree du deroulant
               ul                     le sous-deroulant (ouvre sur le cote)
       div.lang-switch                les drapeaux de langue, tout a droite
                                      (SwitchLanguage, repose la par header.php)

   Les trois entrees posees par le theme (et non par le menu administrable)
   portent une classe qui dit ce qu'elles sont :
     a.site-home           le nom du projet, en tete de barre
     a.search-modal-toggle la loupe, en bout de barre
     a.admin-menu          « Bienvenue <nom> » / « Se connecter », tout a droite
   ========================================================================== */


/* !---------- La bande ------------------------------------------------------ */

/* La bande elle-meme : collante en haut, opaque, pleine largeur de la fenetre
   (pas de gouttiere laterale, contrairement a #content). */
#primary-nav {
  /* Plus besoin de sticky : la barre est le premier item de la colonne flex du
     <body> et ne defile plus avec la page — c'est #page-scroll, sous elle, qui
     defile (cf. style.css). flex-shrink: 0 pour qu'elle ne soit jamais
     comprimee par le contenu. */
  flex: 0 0 auto;
  position: relative;
  z-index: 50;
  clear: both;
  margin: 0;
  padding: 0;
  /* Toute la barre est en Philosopher : une seule fonte pour le nom du projet
     comme pour les boutons, deroulants compris (les boutons reprennent cette
     fonte par le `font: inherit` plus bas). Son gras et son romain partagent
     exactement les memes metriques verticales, contrairement a Crimson : le
     nom du projet, en gras, tombe donc sur la meme ligne de base que le
     reste. */
  font-family: "Philosopher", sans-serif;
  background-color: var(--eman-barre);
  /* background-image: url(../images/seamless_paper_texture.png); */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15);
}

#primary-nav .nav-menu {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 1px;
  margin: 0;
  padding: 0;
  list-style: none;
}

#primary-nav li {
  position: relative;
  margin: 0;
  padding: 0;
  list-style: none;
  background: transparent;
}

/* Les entrees de premier niveau sont elles-memes des boites flex. Sans ca leur
   bouton, en inline-flex, reste un element de ligne pose sur la ligne de base :
   des que l'un des boutons est plus haut que les autres (le nom du projet, qui
   porte le logo), la ligne de base descend et les libelles voisins se
   retrouvent decales vers le haut. */
#primary-nav .nav-menu > li {
  display: flex;
  align-items: center;
}


/* !---------- Un bouton de la barre ----------------------------------------- */

/* Tous les boutons de la barre, deroulants compris. Une « rubrique » est une
   entree qui n'ouvre aucune page : Zend rend alors un <span class="nav-category">
   au lieu d'un <a>, d'ou le doublement des selecteurs dans tout ce fichier. */
#primary-nav a,
#primary-nav .nav-category {
  position: relative;
  z-index: 1;
  display: block;
  box-sizing: border-box;
  padding: 9px 18px;
  /* Meme fonte et meme corps pour tous les boutons, quels que soient les styles
     que le navigateur ou Bootstrap posent sur <a> et <span>. */
  font: inherit;
  /* Hauteur de ligne fixe, egale a celle du logo du projet (22px) : sans elle
     le nom du projet, seul bouton a porter une image, a une boite de contenu
     plus haute que les autres et son libelle ne tombe plus a la meme hauteur
     (visible surtout sous Firefox). */
  line-height: 22px;
  /* Etat au repos ; le survol et la page courante posent leur aplat plus bas. */
  background: transparent;
  color: var(--eman-texte);
  text-decoration: none;
}

/* Les boutons de premier niveau : boites flex, pour centrer le libelle et son
   chevron sans dependre des metriques de la fonte. */
#primary-nav .nav-menu > li > a,
#primary-nav .nav-menu > li > .nav-category {
  display: flex;
  align-items: center;
  /* Hauteur imposee, identique pour tous : 22px de ligne + 2 x 9px de marge
     interne. Elle ne depend donc plus de ce que chaque bouton contient — un
     <a> et un <span class="nav-category"> tombent exactement a la meme
     hauteur, sur tous les navigateurs. */
  min-height: 40px;
  white-space: nowrap;
}

/* Les rubriques (span.nav-category) : elles ouvrent un deroulant, d'ou le
   curseur main et la selection de texte neutralisee. */
#primary-nav .nav-category {
  cursor: pointer;
  user-select: none;
}

/* Survol et focus clavier d'un bouton. :focus-visible et non :focus, sinon un
   bouton reste allume apres le clic. */
#primary-nav a:hover,
#primary-nav a:focus-visible,
#primary-nav .nav-category:hover,
#primary-nav .nav-category:focus-visible {
  background-color: var(--eman-barre-survol);
  color: var(--eman-texte);
}

/* Le bouton de la page affichee. */
#primary-nav li.active > a {
  background-color: var(--eman-clair);
  box-shadow: inset 0 -3px 0 var(--eman-encre-nuit);
}

/* Lisere de focus du navigateur : les regles ci-dessus marquent deja l'etat. */
#primary-nav a:focus,
#primary-nav .nav-category:focus {
  outline: none;
}


/* !---------- Chevron des entrees a deroulant -------------------------------- */

/* Le chevron des entrees a deroulant, dessine en bordures CSS plutot qu'avec
   un glyphe de police. L'etat ouvert n'est qu'une rotation. */
#primary-nav li:has(> ul) > a:after,
#primary-nav li:has(> ul) > .nav-category:after {
  content: "";
  display: inline-block;
  width: 0;
  height: 0;
  margin-left: 0.5em;
  vertical-align: middle;
  border-top: 4px solid currentColor;
  border-right: 4px solid transparent;
  border-left: 4px solid transparent;
}

#primary-nav li:hover:has(> ul) > a:after,
#primary-nav li:hover:has(> ul) > .nav-category:after,
#primary-nav li:focus-within:has(> ul) > a:after,
#primary-nav li:focus-within:has(> ul) > .nav-category:after {
  transform: rotate(180deg);
}


/* !---------- Deroulants ------------------------------------------------------ */

/* Le panneau deroulant (ul dans un li de la barre). Ouverture en CSS pur, au
   survol ou au focus clavier du <li> ; aucun JS, aucune classe .open. */
#primary-nav ul ul {
  position: absolute;
  top: 100%;
  left: 0;
  z-index: 999;
  display: none;
  /* Largeur : celle des libelles, jamais moins que le bouton parent. */
  width: auto;
  min-width: 100%;
  margin: 0;
  padding: 6px 0;
  white-space: nowrap;
  /* Meme aplat que la barre : le deroulant se lit comme son prolongement, et
     non comme un panneau rapporte. C'est le filet et l'ombre portee qui le
     detachent du contenu de la page. */
  background-color: var(--eman-barre);
  border: 1px solid var(--eman-lin);
  border-radius: 3px;
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.14);
}

#primary-nav li:hover > ul,
#primary-nav li:focus-within > ul {
  display: block;
}

/* Les sous-deroulants : ils s'ouvrent sur le cote de leur parent. */
#primary-nav ul ul ul {
  top: -7px;
  left: 100%;
}

#primary-nav ul ul li {
  display: block;
  width: 100%;
}

/* Les entrees d'un deroulant. */
#primary-nav ul ul a,
#primary-nav ul ul .nav-category {
  width: 100%;
  padding: 6px 18px;
  line-height: 22px;
  background: transparent;
}

#primary-nav ul ul a:before,
#primary-nav ul ul .nav-category:before {
  content: "—";
  margin-right: 4.5px;
}

/* L'entree de la page courante dans un deroulant : elle annule l'aplat et le
   filet de l'etat actif de la barre. */
#primary-nav ul ul li.active > a {
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}


/* !---------- Nom du projet (a.site-home) -------------------------------------- */

/* Premiere entree de la barre, lien vers l'accueil. Elle annule, dans tous
   ses etats, l'aplat et le filet des boutons. */
#primary-nav a.site-home,
#primary-nav a.site-home:hover,
#primary-nav a.site-home:focus-visible,
#primary-nav li.active > a.site-home {
  font-weight: 700;
  background: transparent;
  box-shadow: none;
}

/* Le logo du projet, en icone devant son nom. L'URL arrive par la variable
   --eman-site-logo, posee par common/header.php, qui ajoute aussi la classe
   .has-site-logo : sans elle la pastille n'existe pas et le nom ne traine pas
   un blanc de 22px. Le bouton etant une boite flex, la pastille en est un
   element : elle se centre sur le libelle sans reglage vertical. */
#primary-nav.has-site-logo a.site-home::before {
  content: "";
  display: block;
  flex: none;
  width: 22px;
  height: 22px;
  margin-right: 8px;
  background-image: var(--eman-site-logo);
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* Ses etats survol / focus / page courante, marques par la couleur seule. */
#primary-nav a.site-home:hover,
#primary-nav a.site-home:focus-visible,
#primary-nav li.active > a.site-home {
  color: var(--eman-encre-nuit);
}


/* !---------- Loupe (a.search-modal-toggle) ------------------------------------ */

/* La loupe, en bout de barre. Son libelle vient de Zend_Navigation et ne peut
   pas contenir de <span class="fa"> : le glyphe est pose en :before, et le
   libelle reste dans le DOM pour les lecteurs d'ecran sans etre visible. */
#primary-nav a.search-modal-toggle {
  font-size: 0;
  line-height: 0;
  padding: 9px 15px;
}

#primary-nav a.search-modal-toggle:before {
  content: "\f002";
  display: block;
  font-family: "FontAwesome";
  font-size: 15px;
  font-style: normal;
  font-weight: 400;
  line-height: 1;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}


/* !---------- Bout de barre : loupe et administration --------------------------- */

/* Les deux entrees de bout de barre, rejetees a droite. :has() cible le <li>
   car Zend pose la classe sur le <a> ; sans son support, elles restent
   simplement les dernieres de la rangee. */
#primary-nav li:has(> a.search-modal-toggle),
#primary-nav li:has(> a.admin-menu) {
  margin-left: auto;
}

/* Loupe et administration ensemble : seule la premiere pousse, sinon l'espace
   libre se partage entre les deux. */
#primary-nav li:has(> a.search-modal-toggle) ~ li:has(> a.admin-menu) {
  margin-left: 0;
}

/* Le deroulant d'« Administration », cale au bord droit : aligne a gauche, il
   depasserait la fenetre. */
#primary-nav li:has(> a.admin-menu) > ul {
  left: auto;
  right: 0;
}

#primary-nav li:has(> a.admin-menu) ul ul {
  left: auto;
  right: 100%;
}

/* Derniere entree du deroulant d'administration (« Se deconnecter »). */
#primary-nav li:has(> a.admin-menu) > ul > li:last-child {
  margin-top: 6px;
  padding-top: 6px;
  border-top: 1px solid var(--eman-lin);
}


/* !---------- Drapeaux de langue (.lang-switch) -------------------------------- */

/* SwitchLanguage rend ses drapeaux sur le hook public_body ; header.php detache
   ce bloc et le repose ici, dans la barre, apres ul.nav-menu. La barre devient
   donc une rangee de deux elements : la rangee de boutons, qui prend toute la
   place restante, puis les drapeaux, tout a droite — donc apres
   « Bienvenue <nom> ». */
#primary-nav {
  display: flex;
  align-items: stretch;
}

#primary-nav .nav-menu {
  flex: 1 1 auto;
  min-width: 0;
}

#primary-nav .lang-switch,
#primary-nav #form_langSwitch {
  display: flex;
  align-items: center;
  margin: 0;
}

#primary-nav #form_langSwitch {
  gap: 6px;
  padding: 0 12px;
}

/* Les liens de drapeau ne sont pas des boutons de menu : ni aplat, ni filet. */
#primary-nav #form_langSwitch a,
#primary-nav #form_langSwitch a:hover,
#primary-nav #form_langSwitch a:focus-visible {
  display: flex;
  align-items: center;
  padding: 0;
  background: transparent;
  box-shadow: none;
}

#primary-nav #form_langSwitch img {
  display: block;
  opacity: 0.75;
  transition: opacity 0.15s ease;
}

#primary-nav #form_langSwitch a:hover img,
#primary-nav #form_langSwitch a:focus-visible img {
  opacity: 1;
}


/* !---------- Menu mobile ------------------------------------------------------- */

/* Le second menu rendu par header.php et replie par Berlin.dropDown().
   Affiche a aucune largeur : la barre principale passe a la ligne toute seule
   sur les petits ecrans. */
#mobile-nav {
  display: none;
}