/* ==========================================================================
   02 - En-tête et menu
   Lot 2. Cible (maquette Header.tsx) :

           LOUIS MASSIGNON              titre texte, centré, ~34px,
     ------------------------------     capitales, interlettrage 0.28em
     Accueil  Actualités  Biographie ...          [loupe]

   L'en-tête est un template Header Footer Elementor. Tout ce qui est réglable
   en CSS l'est ici ; ce qui demande de déplacer un widget est listé dans
   README-integration.md, section « À faire dans Elementor ».

   Les sélecteurs couvrent les deux widgets de menu possibles : celui de HFE
   (.hfe-nav-menu) et celui d'Elementor Pro (.elementor-nav-menu).
   ========================================================================== */

/* --- Titre du site ------------------------------------------------------- */

.ehf-header .hfe-site-title,
.ehf-header .hfe-site-title a,
.ehf-header .elementor-widget-heading .elementor-heading-title,
.ehf-header .elementor-widget-theme-site-title .elementor-heading-title {
  font-family: var(--lm-font);
  font-size: var(--lm-site-title-size);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: var(--lm-site-title-tracking);
  text-transform: uppercase;
  text-align: center;
  color: var(--lm-foreground);
  margin: 0;
}

/* L'interlettrage décale visuellement le texte vers la gauche : on compense
   par la moitié de l'interlettrage pour que le titre soit optiquement centré. */
.ehf-header .hfe-site-title,
.ehf-header .elementor-widget-heading .elementor-heading-title {
  text-indent: var(--lm-site-title-tracking);
}

/* --- Hauteur d'en-tête ---------------------------------------------------
   Objectif de recette : sur 1440 x 900, le haut des trois photos de l'accueil
   doit être visible sans scroller. On resserre les espacements verticaux
   plutôt que d'imposer une hauteur fixe. */

.ehf-header .elementor-section > .elementor-container {
  padding-block: var(--lm-space-header);
}

.ehf-header .elementor-widget:not(:last-child) {
  margin-bottom: .35rem;
}

.ehf-header .elementor-widget-container {
  margin-block: 0;
}

/* --- Marqueur 1 : filet horizontal entre le titre et le menu -------------- */
/* Deux écritures : une classe posée à la main sur un widget séparateur dans
   Elementor, et un repli qui borde le widget de menu quand il suit
   directement le titre. */

.ehf-header .lm-header-rule,
.ehf-header .elementor-widget-heading + .elementor-widget-navigation-menu,
.ehf-header .elementor-widget-heading + .elementor-widget-nav-menu {
  border-top: var(--lm-rule) solid var(--lm-border);
  padding-top: .35rem;
}

/* Filet bas de l'en-tête, comme dans la maquette (border-b border-border). */
.ehf-header {
  border-bottom: var(--lm-rule) solid var(--lm-border);
  background: var(--lm-background);
}

/* --- Menu centré ---------------------------------------------------------- */

.ehf-header .hfe-nav-menu,
.ehf-header .elementor-nav-menu {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: .125rem;
}

.ehf-header .hfe-nav-menu > li > a,
.ehf-header .elementor-nav-menu > li > a {
  font-size: .875rem;
  letter-spacing: .02em;
  padding: .5rem .75rem;
  border-radius: var(--lm-radius);
  color: var(--lm-foreground);
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.ehf-header .hfe-nav-menu > li > a:hover,
.ehf-header .elementor-nav-menu > li > a:hover {
  color: var(--lm-primary);
}

/* --- Marqueur 3 : rectangle violet plein sur l'entrée active -------------- */
/* Ne cible que le menu de l'en-tête desktop. Le panneau mobile est traité
   dans 08-mobile.css, son fond est différent. */

.ehf-header .hfe-nav-menu > .current-menu-item > a,
.ehf-header .hfe-nav-menu > .current-menu-ancestor > a,
.ehf-header .hfe-nav-menu > .current-page-ancestor > a,
.ehf-header .elementor-nav-menu > .current-menu-item > a,
.ehf-header .elementor-nav-menu > .current-menu-ancestor > a,
.ehf-header .elementor-nav-menu > .current-page-ancestor > a {
  background: var(--lm-primary);
  color: var(--lm-primary-contrast);
  border-radius: var(--lm-radius);
  text-decoration: none;
}

/* Neutralisation du soulignement d'origine, qui est remplacé par le
   rectangle. Les deux widgets posent ce trait en ::before ou ::after. */
.ehf-header .hfe-nav-menu a::after,
.ehf-header .hfe-nav-menu a::before,
.ehf-header .elementor-nav-menu a::after,
.ehf-header .elementor-nav-menu a::before {
  display: none;
}

/* --- Sous-menus déroulants ------------------------------------------------ */

.ehf-header .sub-menu,
.ehf-header .hfe-nav-menu ul.sub-menu {
  background: var(--lm-background);
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: 0 12px 28px rgba(35, 29, 48, .12);
}

.ehf-header .sub-menu a {
  font-size: .8125rem;
  padding: .5rem .9rem;
}

.ehf-header .sub-menu a:hover {
  background: var(--lm-primary-soft);
  color: var(--lm-primary);
}

/* --- Loupe de recherche, à l'extrémité droite ----------------------------- */

.ehf-header .elementor-widget-search-form,
.ehf-header .elementor-widget-hfe-search-button,
.ehf-header .lm-header-search {
  margin-left: auto;
}

.ehf-header .lm-header-search {
  border-left: var(--lm-rule) solid var(--lm-border);
  padding-left: .75rem;
}

/* Le champ de recherche reprend les formes du design system. */
.ehf-header input[type="search"] {
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: var(--lm-radius);
  font-family: var(--lm-font);
  font-size: .875rem;
  padding: .5rem .7rem;
}