/* ==========================================================================
   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).
   ========================================================================== */

/* CONSTAT du 08/09/2026, mesuré sur le DOM réel.

   L’en-tête N’EST PAS un template Header Footer Elementor. C’est un template
   du Theme Builder d’Elementor Pro :

     <header class="elementor elementor-100 elementor-location-header">
       <ul class="elementor-nav-menu"> ... </ul>

   Le plugin HFE est bien actif et pose ses classes de compatibilité sur le
   body (ehf-template-*, ehf-stylesheet-*), ce qui a induit le dossier en
   erreur : la classe .ehf-header, elle, n’existe nulle part dans la page.

   Chaque règle est donc écrite deux fois, une fois pour .elementor-location-
   header et une fois pour .ehf-header. La seconde ne sert à rien aujourd’hui,
   elle est gardée au cas où l’en-tête repasserait sous HFE. */

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

.elementor-location-header .hfe-site-title,
.ehf-header .hfe-site-title,
.elementor-location-header .hfe-site-title a,
.ehf-header .hfe-site-title a,
.elementor-location-header .elementor-widget-heading .elementor-heading-title,
.ehf-header .elementor-widget-heading .elementor-heading-title,
.elementor-location-header .elementor-widget-theme-site-title .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é. */
.elementor-location-header .hfe-site-title,
.ehf-header .hfe-site-title,
.elementor-location-header .elementor-widget-heading .elementor-heading-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. */

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

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

.elementor-location-header .elementor-widget-container,
.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. */

.elementor-location-header .lm-header-rule,
.ehf-header .lm-header-rule,
.elementor-location-header .elementor-widget-heading + .elementor-widget-navigation-menu,
.ehf-header .elementor-widget-heading + .elementor-widget-navigation-menu,
.elementor-location-header .elementor-widget-heading + .elementor-widget-nav-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). */
.elementor-location-header,
.ehf-header {
  border-bottom: var(--lm-rule) solid var(--lm-border);
  background: var(--lm-background);
}

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

/* PORTÉE, corrigée le 12/09 : la BARRE de menu seulement.

   Le widget de navigation rend le menu DEUX FOIS, comme le rappelle l'en-tête
   de 08-mobile.css : une barre horizontale dans `nav.elementor-nav-menu--main`
   et un panneau déroulant dans `nav.elementor-nav-menu--dropdown`. Les deux
   listes portent la même classe `.elementor-nav-menu`.

   Sans le `--main` ci-dessous, cette règle passait le panneau mobile en
   `display: flex` : les huit entrées et leurs sous-menus se rangeaient côte à
   côte sur plusieurs rangées, ce qui est le désordre signalé le 12/09. */

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

.elementor-location-header .hfe-nav-menu > li > a,
.ehf-header .hfe-nav-menu > li > a,
.elementor-location-header .elementor-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;
}

.elementor-location-header .hfe-nav-menu > li > a:hover,
.ehf-header .hfe-nav-menu > li > a:hover,
.elementor-location-header .elementor-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. */

.elementor-location-header .hfe-nav-menu > .current-menu-item > a,
.ehf-header .hfe-nav-menu > .current-menu-item > a,
.elementor-location-header .hfe-nav-menu > .current-menu-ancestor > a,
.ehf-header .hfe-nav-menu > .current-menu-ancestor > a,
.elementor-location-header .hfe-nav-menu > .current-page-ancestor > a,
.ehf-header .hfe-nav-menu > .current-page-ancestor > a,
.elementor-location-header .elementor-nav-menu > .current-menu-item > a,
.ehf-header .elementor-nav-menu > .current-menu-item > a,
.elementor-location-header .elementor-nav-menu > .current-menu-ancestor > a,
.ehf-header .elementor-nav-menu > .current-menu-ancestor > a,
.elementor-location-header .elementor-nav-menu > .current-page-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. */
.elementor-location-header .hfe-nav-menu a::after,
.ehf-header .hfe-nav-menu a::after,
.elementor-location-header .hfe-nav-menu a::before,
.ehf-header .hfe-nav-menu a::before,
.elementor-location-header .elementor-nav-menu a::after,
.ehf-header .elementor-nav-menu a::after,
.elementor-location-header .elementor-nav-menu a::before,
.ehf-header .elementor-nav-menu a::before {
  display: none;
}

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

.elementor-location-header .sub-menu,
.ehf-header .sub-menu,
.elementor-location-header .hfe-nav-menu ul.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);
}

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

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

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

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

.elementor-location-header .lm-header-search,
.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. */
.elementor-location-header input[type="search"],
.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;
}

/* --- Voile plein écran de la recherche : ne jamais le peindre --------------

   CONSTAT du 10/09/2026, mesuré sur le DOM réel de massignon.studiowpdev.com.

   Elementor imprime widget-search-form.min.css DANS LE <body>, après le
   balisage de l'en-tête (ligne ~634 du HTML, avec post-42.css et
   widget-nav-menu.min.css). Le template d'en-tête est rendu après wp_head :
   ses styles de widgets arrivent donc trop tard pour la première peinture.

   Conséquence : au premier rendu, le conteneur du skin « plein écran » est
   dessiné SANS style, donc opaque et en flux. La feuille arrive ensuite et le
   bascule à opacity:0 / transform:scale(0). Comme la règle du widget porte
   `transition:.3s`, le navigateur ANIME ce passage : un voile noir plein écran
   apparaît puis se contracte vers le centre, à chaque chargement de page.

   Notre feuille, elle, est dans le <head>. En posant l'état fermé dès le
   départ, la valeur ne change plus quand la feuille du widget arrive : plus de
   transition, donc plus de clignotement — et plus de place occupée dans
   l'en-tête pendant l'attente.

   Le sélecteur est celui du widget : à l'ouverture, Elementor ajoute la classe
   .elementor-search-form--full-screen sur le conteneur, le :not() cesse de
   matcher, et la recherche s'affiche normalement. */

.elementor-search-form--skin-full_screen
  .elementor-search-form__container:not(.elementor-search-form--full-screen) {
  position: fixed;
  inset: 0;
  z-index: 9998;
  opacity: 0;
  overflow: hidden;
  transform: scale(0);
}

/* --- La recherche s'ouvre SOUS LA LOUPE, pas en plein écran ----------------
   Demande du 24/09/2026 : « un champ de recherche plus petit et pas une pop
   in, cela peut s'ouvrir en dessous ». Le widget du modèle d'en-tête est réglé
   en habillage « plein écran » : voile sombre sur toute la page, champ en
   50px. Changer d'habillage demanderait de rouvrir le modèle dans Elementor ;
   on garde donc le widget et son script, et on redessine seulement l'état
   ouvert — `.elementor-search-form--full-screen`, que le script pose au clic
   sur la loupe — en panneau de 320px accroché sous la loupe.

   Fermeture : Échap (script du widget), clic en dehors ou second clic sur la
   loupe (assets/js/lm-front.js, point 4). La croix du plein écran n'a plus
   de raison d'être dans un panneau, elle est masquée.

   !important partout : les règles du widget et du modèle (post-42.css) ont
   jusqu'à quatre classes et imposent position, taille, fond et police. */

header.elementor-location-header .elementor-widget-search-form .elementor-search-form,
.ehf-header .elementor-widget-search-form .elementor-search-form {
  position: relative;
}

header.elementor-location-header .elementor-search-form__container,
.ehf-header .elementor-search-form__container {
  transition: none !important;
}

header.elementor-location-header .elementor-search-form__container.elementor-search-form--full-screen,
.ehf-header .elementor-search-form__container.elementor-search-form--full-screen {
  position: absolute !important;
  inset: auto !important;
  top: calc(100% + .75rem) !important;
  right: 0 !important;
  z-index: 10000 !important;
  display: block !important;
  width: min(320px, calc(100vw - 2rem)) !important;
  height: auto !important;
  min-height: 0 !important;
  margin: 0 !important;
  padding: .75rem !important;
  background: var(--lm-background) !important;
  border: var(--lm-rule) solid var(--lm-border) !important;
  border-radius: var(--lm-radius) !important;
  box-shadow: 0 8px 24px rgba(35, 29, 48, .08) !important;
  opacity: 1 !important;
  transform: none !important;
}

header.elementor-location-header .elementor-search-form--full-screen input[type="search"].elementor-search-form__input,
.ehf-header .elementor-search-form--full-screen input[type="search"].elementor-search-form__input {
  width: 100% !important;
  height: auto !important;
  margin: 0 !important;
  padding: .5rem .7rem !important;
  font-family: var(--lm-font) !important;
  font-size: .9375rem !important;
  line-height: 1.4 !important;
  text-align: left !important;
  color: var(--lm-foreground) !important;
  background: var(--lm-background) !important;
  border: var(--lm-rule) solid var(--lm-border) !important;
  border-radius: var(--lm-radius) !important;
}

header.elementor-location-header .elementor-search-form--full-screen input[type="search"].elementor-search-form__input:focus,
.ehf-header .elementor-search-form--full-screen input[type="search"].elementor-search-form__input:focus {
  border-color: var(--lm-primary) !important;
  outline: none !important;
}

header.elementor-location-header .elementor-search-form--full-screen .dialog-lightbox-close-button,
.ehf-header .elementor-search-form--full-screen .dialog-lightbox-close-button {
  display: none !important;
}

/* --- Suggestions pendant la frappe (24/09/2026) -----------------------------
   Liste construite par lm-front.js (point 5), sous le champ du panneau. Titre
   en violet sur deux lignes au plus — les titres d'articles font parfois trois
   phrases —, chemin dans le site en dessous, en petit. Réponse survolée ou
   choisie au clavier sur fond violet pâle. */

.lm-suggest {
  list-style: none;
  max-height: min(60vh, 26rem);
  margin: .5rem 0 0;
  padding: 0;
  overflow-y: auto;
  font-family: var(--lm-font);
  text-align: left;
}

.lm-suggest[hidden] {
  display: none;
}

.lm-suggest li {
  margin: 0;
  padding: 0;
}

header.elementor-location-header .lm-suggest a,
.ehf-header .lm-suggest a {
  display: block;
  padding: .45rem .5rem;
  color: var(--lm-foreground);
  text-decoration: none;
  border-radius: var(--lm-radius);
}

header.elementor-location-header .lm-suggest a:hover,
.ehf-header .lm-suggest a:hover,
.lm-suggest [aria-selected="true"] > a {
  background: var(--lm-primary-soft);
}

.lm-suggest__title {
  display: -webkit-box;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  font-size: .9375rem;
  line-height: 1.3;
  color: var(--lm-primary);
}

.lm-suggest__title strong {
  font-weight: 600;
}

.lm-suggest__path {
  display: block;
  margin-top: .1rem;
  font-size: .75rem;
  line-height: 1.3;
  color: var(--lm-muted);
}

.lm-suggest__all {
  margin-top: .25rem !important;
  padding-top: .25rem !important;
  border-top: var(--lm-rule) solid var(--lm-border);
}

header.elementor-location-header .lm-suggest__all a,
.ehf-header .lm-suggest__all a {
  font-size: .8125rem;
  color: var(--lm-primary);
}

.lm-suggest__empty {
  padding: .45rem .5rem !important;
  font-size: .875rem;
  color: var(--lm-muted);
}

/* --- Correctifs de recette du 08/09/2026 ---------------------------------
   Mesurés sur le DOM réel, en 1440px de large. */

/* 1. DÉBORDEMENT DU MENU.

   Après la reprise du menu (« Recherches » au pluriel, « + » remplacé par
   « Contact ») et la bascule vers Source Sans 3, qui est plus large que
   FUTURA, les huit entrées faisaient 949px pour un conteneur de 962px. Avec
   les gouttières, « Contact » tombait sur une deuxième ligne, ce qui est
   explicitement exclu par la recette du lot 2.

   On récupère la place sur les espacements plutôt que sur la taille du texte :
   le libellé reste lisible, et on garde de la marge pour les écrans plus
   étroits que 1440px. */

.elementor-location-header .elementor-nav-menu,
.ehf-header .elementor-nav-menu,
.elementor-location-header .hfe-nav-menu,
.ehf-header .hfe-nav-menu {
  gap: 0;
}

.elementor-location-header .elementor-nav-menu > li > a,
.ehf-header .elementor-nav-menu > li > a,
.elementor-location-header .hfe-nav-menu > li > a,
.ehf-header .hfe-nav-menu > li > a {
  padding-inline: .5rem;
}

/* 2. COULEUR DU LIBELLÉ ACTIF.

   Le widget de navigation écrit sa couleur de lien avec un sélecteur porté par
   l'identifiant du widget :

     .elementor-100 .elementor-element.elementor-element-314fef3
       .elementor-nav-menu--main .elementor-item { color: ... }

   soit une spécificité de (0,5,0), que rien d'écrit ici ne peut battre sans
   !important. Résultat sans ce bloc : libellé NOIR sur le rectangle violet.

   !important assumé, limité à la couleur et au fond de la SEULE entrée active.
   Le reste du menu n'est pas touché. Ce bloc disparaîtra le jour où les
   couleurs seront reprises dans le widget lui-même. */

/* `--main` ajouté le 12/09. Étant en !important, ce bloc battait aussi la règle
   du panneau mobile posée dans 08-mobile.css : l'entrée parente de la page
   courante y prenait un rectangle violet sur toute la largeur de l'écran, que
   le lot 8 exclut explicitement. */
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-item > a,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-ancestor > a,
.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .current-page-ancestor > a,
.elementor-location-header .hfe-nav-menu > .current-menu-item > a,
.elementor-location-header .hfe-nav-menu > .current-menu-ancestor > a,
.ehf-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-item > a,
.ehf-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-ancestor > a {
  background: var(--lm-primary) !important;
  color: var(--lm-primary-contrast) !important;
}

/* ==========================================================================
   Alignement sur la maquette, mesuré le 08/09/2026 sur
   https://massignon.devk7.com/ en 1440px de large.

   Valeurs relevées sur la maquette :
     hauteur totale de l'en-tête      108px
     titre                            34px, graisse 300, interlettrage 9.52px
                                      (= 0.28em), couleur #231D30
     filet                            1px, #E2E0EB, largeur du conteneur
     entrées de menu                  14px, graisse 400, interlettrage 0.35px,
                                      padding 8px 12px
     entrée active                    fond #7058D0, texte blanc

   État mesuré sur le site avant ce bloc : en-tête de 289px, titre en 63px avec
   107px d'interligne. C'est le « l'en-tête mange l'écran » du client.

   L'en-tête est un template Elementor (`elementor-42`) inséré par un widget
   shortcode. Le titre n'est pas un widget `heading` mais un widget
   `text-editor` : les sélecteurs du lot 2 ne pouvaient pas l'atteindre.

   Elementor écrit ses réglages avec une spécificité de (0,3,0)
   (`.elementor-42 .elementor-element.elementor-element-5b3e5f0`). On passe
   donc par `body[class*="elementor-kit-"]`, soit (0,3,2), ce qui gagne sans
   !important et sans coder en dur l'identifiant du widget.
   ========================================================================== */

/* --- Titre du site : 63px -> 34px ---------------------------------------- */

body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-text-editor,
body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-text-editor p {
  font-size: var(--lm-site-title-size);
  line-height: 1.15;
  font-weight: 300;
  letter-spacing: var(--lm-site-title-tracking);
  text-transform: uppercase;
  text-align: center;
  color: var(--lm-foreground);
}

/* Le widget porte des marges négatives de compensation calculées pour
   l'ancien interligne de 107px. Elles n'ont plus lieu d'être. */
body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-text-editor .elementor-widget-container {
  margin-block: 0;
}

body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-text-editor p {
  margin-block: 0;
}

/* --- Compression des espacements ------------------------------------------
   Cible : 108px de hauteur totale, comme la maquette. */

body[class*="elementor-kit-"] header.elementor-location-header .elementor-section > .elementor-container {
  padding-block: .5rem;
}

body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-wrap {
  padding-block: 0;
}

body[class*="elementor-kit-"] header.elementor-location-header .elementor-section {
  margin-block: 0;
}

/* --- Entrées de menu : valeurs exactes de la maquette --------------------- */

body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu > li > a {
  font-size: 14px;
  font-weight: 400;
  letter-spacing: .025em;
  padding-block: 8px;
}

/* --- P1 : débrancher Futura du menu ---------------------------------------
   Retour d'intégration du 10/09/2026. Le réglage de police est LOCAL au widget
   de navigation dans le template d'en-tête : il prime sur le kit Elementor,
   donc aligner le kit ne suffit pas.

   Le réglage local n'est pas accessible autrement qu'en rouvrant le template
   dans Elementor. !important est donc assumé ici, strictement limité à
   font-family, et à retirer le jour où le réglage sera nettoyé dans le widget. */

.ehf-header .elementor-nav-menu a,
.ehf-header .hfe-nav-menu a,
header.elementor-location-header .elementor-nav-menu a,
header.elementor-location-header .hfe-nav-menu a,
.lm-mega a {
  font-family: var(--lm-font) !important;
}

/* ==========================================================================
   P3 - Filet et entrée active de l'en-tête
   Retour d'intégration du 10/09/2026.

   Le filet était posé en `border-bottom` sur le conteneur du widget de titre
   (élément 5b3e5f0), relevé à 0.8px #231D30 sur 1100px : le titre le
   traversait et le coupait en deux. C'était le défaut le plus visible de
   l'en-tête.

   Il est déplacé en `border-top` sur le conteneur de la SECTION qui porte le
   menu : il passe donc sous le titre, d'un seul trait, sur toute la largeur du
   conteneur, et rien ne le traverse.

   Le titre lui-même était déjà conforme au moment d'appliquer ce point
   (34px, graisse 300, rgb(35, 29, 48)) : les règles de graisse et de couleur
   de la fiche 13 sont donc rappelées ici pour mémoire, sans rien changer.
   ========================================================================== */

/* --- Retrait du filet mal placé ------------------------------------------- */

header.elementor-location-header .elementor-widget-text-editor .elementor-widget-container,
header.elementor-location-header .elementor-widget-heading .elementor-widget-container,
.ehf-header .elementor-widget-text-editor .elementor-widget-container,
.ehf-header .elementor-widget-heading .elementor-widget-container {
  border-bottom: 0 !important;   /* posé par le réglage du widget */
}

/* --- Le filet, sous le titre, sur toute la largeur du conteneur ------------
   `:has()` cible la section qui contient le menu sans dépendre de l'ordre des
   sections ni d'un identifiant d'élément. */

header.elementor-location-header .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-nav-menu) > .elementor-container,
.ehf-header .elementor-section:has(> .elementor-container > .elementor-column > .elementor-widget-wrap > .elementor-widget-nav-menu) > .elementor-container {
  border-top: 1px solid var(--lm-border);
  padding-top: .5rem;
}

/* --- Titre : rappel des valeurs de la maquette ----------------------------- */

body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-text-editor,
body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-text-editor p,
body[class*="elementor-kit-"] header.elementor-location-header .elementor-heading-title {
  font-weight: 300;
  color: var(--lm-foreground);
}

/* --- Entrée active : pastille à angles droits, aux proportions mesurées -----
   Maquette : padding 8px 12px, rayon 0, hauteur 36px.
   Relevé avant correction : padding 2px 24px, rayon 2px, hauteur 24px, soit
   une pastille trop large et trop plate.

   L'interligne de 20px est ce qui donne les 36px : 20 + 8 + 8. */

/* `--main` ajouté le 12/09, comme aux autres marqueurs de ce fichier : la
   pastille est le gabarit de la BARRE desktop, pas du panneau mobile, où
   08-mobile.css pose ses propres cibles de 44px. */
body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > li > a,
body[class*="elementor-kit-"] .ehf-header .elementor-nav-menu--main .elementor-nav-menu > li > a {
  padding: 8px 12px;
  line-height: 20px;
  border-radius: 0;
}

body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-item > a,
body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-ancestor > a,
body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu > .current-page-ancestor > a,
body[class*="elementor-kit-"] .ehf-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-item > a,
body[class*="elementor-kit-"] .ehf-header .elementor-nav-menu--main .elementor-nav-menu > .current-menu-ancestor > a {
  background: var(--lm-primary);
  color: var(--lm-primary-contrast);
  border-radius: 0;
  padding: 8px 12px;
  line-height: 20px;
}

/* Le padding de la pastille est posé par le réglage du widget de navigation,
   avec une spécificité de (0,5,1) :
   `.elementor-42 .elementor-element-314fef3 .elementor-nav-menu--main
    .elementor-nav-menu a`.
   La battre proprement supposerait de coder en dur l'identifiant du template et
   celui du widget, ce qui casserait au premier changement de template.
   !important est donc assumé, limité aux trois propriétés de forme, et à
   retirer le jour où le réglage sera nettoyé dans le widget. */

/* `--main` ajouté le 12/09, même raison qu'au « Menu centré » plus haut : ce
   gabarit de pastille est celui de la barre desktop. Appliqué au panneau
   mobile, il écrasait les 44px de cible tactile posés dans 08-mobile.css, que
   rien n'aurait pu reprendre puisque la règle est en !important. */
body[class*="elementor-kit-"] header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item,
body[class*="elementor-kit-"] .ehf-header .elementor-nav-menu--main .elementor-nav-menu a.elementor-item {
  padding: 8px 12px !important;
  line-height: 20px !important;
  border-radius: 0 !important;
}

/* ==========================================================================
   Deux réglages demandés le 10/09
   ========================================================================== */

/* --- 1. Le champ de recherche, aligné sur la ligne de menu ------------------
   Mesuré : la loupe occupait y=60 à 84 alors que la ligne de menu va de y=64 à
   100. Elle est dans la seconde colonne de la section du menu, dont le
   conteneur de widgets est calé en haut (`align-content: flex-start`), d'où le
   décalage vertical d'une dizaine de pixels.

   On centre verticalement et on pousse à droite, comme dans la maquette. */

header.elementor-location-header .elementor-widget-wrap:has(> .elementor-widget-search-form),
.ehf-header .elementor-widget-wrap:has(> .elementor-widget-search-form) {
  align-content: center;
  align-items: center;
  justify-content: flex-end;
  height: 100%;
}

header.elementor-location-header .elementor-column:has(.elementor-widget-search-form),
.ehf-header .elementor-column:has(.elementor-widget-search-form) {
  justify-content: center;
}

/* --- 2. L'en-tête collant : en CSS, et non plus par Elementor ---------------
   Historique, 10 et 11/09. Deux tentatives ont échoué avant celle-ci, et elles
   ont la même racine.

   L'élément rendu collant par Elementor Pro n'est pas une section mais le
   WIDGET SHORTCODE qui porte tout le template d'en-tête (élément b086036). En
   flux il fait 1120px de large à x=200. Elementor le sort du flux en
   `position: fixed` et lui pose une largeur en ligne.

   Tentative 1, le forcer à 100vw : l'en-tête devenait pleine largeur mais tout
   son contenu se recentrait, le titre sautait de 200px.
   Tentative 2, peindre seulement la bande en pseudo-élément : les mesures
   donnaient zéro décalage, mais un saut restait perceptible à l'écran, parce
   que le passage en `position: fixed` sort malgré tout l'élément du flux.

   SOLUTION RETENUE : on neutralise le collant d'Elementor et on rend tout
   l'en-tête collant en CSS. Un élément en `position: sticky` RESTE DANS LE
   FLUX : il ne change ni de largeur, ni de position, il s'arrête simplement en
   haut de l'écran. Il n'y a donc plus de moment de bascule, donc plus rien qui
   puisse se décaler.

   Pré-requis traité dans 08-mobile.css : `overflow-x` passe de `hidden` à
   `clip` sur html et body, faute de quoi la racine devient un conteneur de
   défilement et `sticky` ne fonctionne pas. */

/* Neutralisation du collant d'Elementor. */
header.elementor-location-header .elementor-sticky--active,
header.elementor-location-header .elementor-sticky--effects,
.ehf-header .elementor-sticky--active {
  position: static !important;
  width: auto !important;
  max-width: none !important;
  inset: auto !important;
  transform: none !important;
  box-shadow: none !important;
}

header.elementor-location-header .elementor-sticky__spacer,
.ehf-header .elementor-sticky__spacer {
  display: none !important;
}

/* L'en-tête, collant en CSS et sur toute la largeur. */
header.elementor-location-header,
.ehf-header {
  position: sticky;
  top: 0;
  z-index: 500;
  background: var(--lm-background);
}

/* --- LA CAUSE DES ENTRÉES QUI DISPARAISSENT AU SURVOL ----------------------
   Diagnostic du 10/09, mesuré dans le navigateur de Philippe, curseur posé sur
   l'entrée : `getComputedStyle(a).color` renvoie `rgb(255, 255, 255)`.

   Le widget de navigation a une couleur de survol réglée sur BLANC. Elle
   fonctionnait tant que le widget posait aussi un fond au survol ; l'en-tête
   étant désormais blanc et sans fond de survol, on obtenait du blanc sur blanc.
   L'entrée gardait sa place et son texte, mais n'était plus peinte.

   Ce n'était donc ni le script du mega-menu, ni un problème de recouvrement.

   La maquette met le survol en violet. Le réglage vient du widget, avec une
   spécificité que l'on ne peut pas battre sans coder en dur son identifiant :
   !important est assumé, limité à la couleur. */

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

/* L'entrée active garde son libellé blanc sur le rectangle violet, y compris
   au survol : sinon c'est elle qui devient illisible. */
header.elementor-location-header .elementor-nav-menu > .current-menu-item > a:hover,
header.elementor-location-header .elementor-nav-menu > .current-menu-item > a:focus,
header.elementor-location-header .elementor-nav-menu > .current-menu-ancestor > a:hover,
header.elementor-location-header .elementor-nav-menu > .current-page-ancestor > a:hover,
.ehf-header .elementor-nav-menu > .current-menu-item > a:hover {
  color: var(--lm-primary-contrast) !important;
}

/* La barre d'administration de WordPress occupe les premiers pixels de l'écran
   pour les personnes connectées, Philippe et Valérie comprises. Sans ce
   décalage, l'en-tête collant passerait dessous. */
body.admin-bar header.elementor-location-header,
body.admin-bar .ehf-header {
  top: 32px;
}

@media screen and (max-width: 782px) {
  body.admin-bar header.elementor-location-header,
  body.admin-bar .ehf-header {
    top: 46px;
  }
}

/* ==========================================================================
   Recette du 12/09 : la loupe remontée d'une dizaine de pixels
   ========================================================================== */

/* CONSTAT, mesuré sur le DOM réel en 1440px de large.

   La ligne de menu va de y=71,9 à y=107,9, centre à 89,9. La loupe, elle,
   occupait y=62,9 à 97,9, centre à 80,4 : neuf pixels et demi trop haut, ce qui
   se voit à côté de « Contact ».

   Le réglage du 10/09 centrait bien le WIDGET dans sa colonne, mais ce n'est pas
   lui qui porte le dessin. Deux marges négatives, posées à la main dans le
   modèle d'en-tête et servies par post-42.css, décalent le contenu vers le haut :

     .elementor-element-826df2d > .elementor-widget-container { margin: -11px 0 0 }
     .elementor-element-2b718c4 > .elementor-element-populated { margin: -4px 0 0 }

   La première, surtout : le conteneur du widget déborde de 11px AU-DESSUS de sa
   propre boîte, qui ne mesure donc plus que 24px au lieu de 35. Centrer cette
   boîte de 24px ne peut pas centrer un dessin qui en dépasse.

   S'ajoute la façon dont le bouton est posé : `inline-block` avec une hauteur
   de ligne de 59,5px héritée du kit, donc calé sur une ligne de texte et non
   sur son conteneur.

   CORRECTIF. On annule les deux marges du modèle, on centre le dessin dans son
   conteneur en flex — plus de calcul de ligne de base — et on rend au bouton une
   hauteur de ligne neutre. Résultat mesuré : centre de la loupe à 89,9, soit
   exactement celui de la ligne de menu.

   La spécificité des règles d'Elementor est de quatre classes ; `body[class*=]`
   est le préfixe déjà retenu plus haut dans ce fichier pour les battre sans
   coder en dur les identifiants d'éléments, qui changeraient au premier
   enregistrement du modèle.

   Le jour où les deux marges seront retirées dans l'éditeur, ce bloc pourra
   l'être aussi : il n'ajoute rien d'autre que leur annulation. */

body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-search-form > .elementor-widget-container,
body[class*="elementor-kit-"] .ehf-header .elementor-widget-search-form > .elementor-widget-container {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  margin-top: 0;
}

body[class*="elementor-kit-"] header.elementor-location-header .elementor-widget-wrap:has(> .elementor-widget-search-form),
body[class*="elementor-kit-"] .ehf-header .elementor-widget-wrap:has(> .elementor-widget-search-form) {
  margin-top: 0;
}

/* Le bouton porte le pictogramme : il le centre lui-même, au lieu de le poser
   sur une ligne de texte. Ne touche pas au voile plein écran, qui est un frère
   de ce bouton et reste en `position: fixed`. */
header.elementor-location-header .elementor-search-form--skin-full_screen .elementor-search-form__toggle,
.ehf-header .elementor-search-form--skin-full_screen .elementor-search-form__toggle {
  display: flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}