/* ==========================================================================
   09 - Mega-menu
   Reprise du panneau déroulant de la maquette, mesuré le 08/09/2026 sur
   https://massignon.devk7.com/ :

     panneau      pleine largeur, sous l'en-tête, fond blanc, filet #E2E0EB,
                  ombre portée, contenu centré sur la largeur du conteneur
     colonnes     séparées par un filet vertical
     titre        violet, capitales, ~14px, gras, interlettrage large,
                  souligné d'un filet
     entrées      ~12px, sur deux colonnes de texte, survol violet

   Le panneau n'apparaît qu'à partir de 1024px. En dessous, c'est le menu
   mobile natif qui prend le relais (lot 8).
   ========================================================================== */

/* Le panneau se positionne par rapport à l’en-tête.

   L’en-tête est rendu collant en `position: sticky` dans
   02-entete-menu.css, et sticky établit lui aussi un bloc conteneur pour
   ses descendants en absolu : il n’y a donc rien à poser ici. Cette règle
   ne vise plus que les en-têtes HFE, qui ne sont pas collants. */
.ehf-header {
  position: relative;
}

/* Plus de conteneur source : les panneaux sont imprimés directement dans
   l’entrée de menu. La règle reste, inoffensive, au cas où un panneau
   traînerait dans une page mise en cache. */
.lm-mega-source { display: none; }

.lm-mega {
  position: absolute;
  left: 0;
  right: 0;
  top: 100%;
  z-index: 100;
  padding-inline: 1rem;
  opacity: 0;
  visibility: hidden;
  transform: translateY(-4px);
  transition: opacity .18s ease, transform .18s ease, visibility .18s;
}

.lm-has-mega:hover > .lm-mega,
.lm-has-mega:focus-within > .lm-mega {
  opacity: 1;
  visibility: visible;
  transform: none;
}

/* Panneau congédié par Échap (lm-front.js, point 6, check du 24/09/2026).
   Il reste fermé tant que le pointeur ou le focus n'a pas quitté l'entrée,
   comme le demande WCAG 1.4.13 pour un contenu qui s'ouvre au survol. */
.lm-has-mega.lm-mega-dismissed > .lm-mega {
  opacity: 0;
  visibility: hidden;
}

.lm-mega__inner {
  display: flex;
  max-width: 72rem;          /* max-w-6xl de la maquette */
  margin-inline: auto;
  background: var(--lm-background);
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: var(--lm-radius);
  box-shadow: 0 20px 25px -5px rgba(35, 29, 48, .12),
              0 8px 10px -6px rgba(35, 29, 48, .10);
}



/* La colonne de section. Règle rétablie le 11/09 : un nettoyage automatique
   l’avait supprimée par erreur, et les colonnes retombaient à 192px au lieu de
   se partager la largeur du panneau. */
.lm-mega__col {
  flex: 1 1 0;
  min-width: 0;
  padding: 1rem .75rem;
}

/* Filet vertical de séparation entre colonnes. */
.lm-mega__col + .lm-mega__col {
  border-left: var(--lm-rule) solid var(--lm-border);
}

.lm-mega__title {
  display: block;
  padding: 0 .75rem .75rem;
  margin-bottom: .5rem;
  border-bottom: var(--lm-rule) solid var(--lm-border);
  color: var(--lm-primary);
  font-size: .875rem;
  font-weight: 600;
  letter-spacing: .05em;
  text-transform: uppercase;
  text-decoration: none;
  line-height: 1.2;
}

.lm-mega__title:hover,
.lm-mega__title:focus-visible {
  color: var(--lm-primary-deep);
}

/* Deux colonnes de texte, comme la maquette (grid-cols-2). */
.lm-mega__list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: .125rem;
  margin: 0;
  padding: 0;
  list-style: none;
}


.lm-mega__list li { margin: 0; }

.lm-mega__list a {
  display: flex;
  align-items: center;
  gap: .75rem;
  padding: .375rem .5rem;
  border-radius: var(--lm-radius);
  color: var(--lm-foreground);
  font-size: .75rem;
  line-height: 1.3;
  text-decoration: none;
  transition: background-color .2s ease, color .2s ease;
}

.lm-mega__list a:hover,
.lm-mega__list a:focus-visible {
  background: var(--lm-primary-soft);
  color: var(--lm-primary);
}

/* Vignettes de 36px, reprises de la maquette. Les images mises en avant ont été
   posées le 11/09 ; les entrées dont la page n'en a pas s'affichent sans, la
   ligne ne bouge pas. Voir lm_mega_thumb() dans inc/megamenu.php. */
.lm-mega__thumb {
  width: 36px;
  height: 36px;
  flex-shrink: 0;
  object-fit: cover;
  border: var(--lm-rule) solid var(--lm-border);
  border-radius: var(--lm-radius);
}

/* Quand notre panneau prend le relais, le sous-menu natif d'Elementor ne doit
   plus s'ouvrir : deux menus déroulants superposés seraient illisibles.

   PORTÉE CORRIGÉE LE 12/09. La règle était globale, et son pendant en dessous
   de 1024px remettait `display: block !important` : dans le panneau mobile,
   les sept sous-menus étaient donc OUVERTS EN PERMANENCE et l'accordéon du
   widget, qui travaille en style en ligne, ne pouvait plus les refermer.
   C'est l'empilement signalé le 12/09, capture à l'appui.

   Le panneau n'existant qu'à partir de 1024px (voir plus bas), il suffit de
   n'y masquer le sous-menu natif qu'à partir de cette largeur. En dessous,
   plus une seule de nos règles ne touche au dépliage : c'est le widget qui
   ouvre et ferme, comme prévu au lot 8. */
@media (min-width: 1024px) {
  .lm-has-mega > .sub-menu,
  .lm-has-mega > .elementor-nav-menu--dropdown {
    display: none !important;   /* le widget force son affichage au survol */
  }
}

/* Flèche d'indication sur les entrées qui ouvrent un panneau. */
.lm-has-mega > a::after {
  content: "";
  display: inline-block;
  width: .5em;
  height: .5em;
  margin-left: .4em;
  border-right: 1px solid currentColor;
  border-bottom: 1px solid currentColor;
  transform: translateY(-2px) rotate(45deg);
  transition: transform .2s ease;
}

.lm-has-mega:hover > a::after,
.lm-has-mega:focus-within > a::after {
  transform: translateY(1px) rotate(-135deg);
}

/* En dessous de 1024px, le menu mobile natif reprend la main : on retire le
   panneau et sa flèche, et on ne dit RIEN du sous-menu natif, dont l'ouverture
   appartient au widget. */
@media (max-width: 1023px) {
  .lm-mega { display: none; }
  .lm-has-mega > a::after { display: none; }
}

/* --- Le trou de survol -----------------------------------------------------
   Second retour du 10/09/2026, piste A.

   Le panneau est ancré en `top: 100%` sur l'en-tête, alors que l'entrée de menu
   se termine plus haut : il reste une bande où plus rien n'est survolé. Le
   curseur qui descend vers le sous-menu la traverse, le panneau se ferme sous
   lui. C'est la cause classique d'un menu qui « disparaît » quand on essaie de
   l'atteindre.

   Mesure du 10/09 : bas de l'entrée à y=108, haut du panneau à y=120, soit
   12px de vide. La fiche annonçait 24px, la géométrie de l'en-tête a changé
   depuis. La valeur est donc mise dans une variable, pour n'avoir qu'un
   endroit à corriger si l'en-tête bouge encore.

   Le padding prolonge la zone survolable vers le haut jusqu'à l'entrée ; la
   marge négative de même valeur annule le décalage visuel. Le panneau ne bouge
   pas d'un pixel, seule sa zone de survol grandit. */

.lm-mega {
  --lm-mega-gap: 12px;
  padding-top: var(--lm-mega-gap);
  margin-top: calc(-1 * var(--lm-mega-gap));
}

/* ==========================================================================
   Version sans JavaScript, 10/09/2026

   Le panneau est désormais un enfant du <li> de l'entrée de menu, imprimé par
   PHP (inc/megamenu.php). Il s'ouvre au `:hover` et au `:focus-within`, sans
   une ligne de script.

   Deux conséquences heureuses : le survol du panneau maintient le `:hover` de
   l'entrée, puisqu'un élément est survolé quand le pointeur est sur l'un de ses
   descendants ; et l'ouverture au clavier vient gratuitement avec
   `:focus-within`.

   Le panneau reste positionné par rapport à l'EN-TÊTE et non par rapport au
   <li> : c'est ce qui lui donne la pleine largeur de la maquette. Le <li> ne
   doit donc surtout pas être mis en `position: relative`.
   ========================================================================== */

/* Rien ne doit rogner le panneau, qui déborde très largement de son entrée. */
header.elementor-location-header .elementor-nav-menu,
header.elementor-location-header .elementor-nav-menu > li,
header.elementor-location-header .elementor-nav-menu--main,
.ehf-header .elementor-nav-menu,
.ehf-header .elementor-nav-menu > li {
  overflow: visible;
}

/* Le panneau vit dans un <ul> de menu : on annule ce que le widget de
   navigation impose à ses descendants, sans quoi les entrées du panneau
   héritent des puces, des retraits et des hauteurs de la barre de menu. */
.lm-mega,
.lm-mega * {
  text-align: left;
}

.lm-mega__list li {
  display: block;
  width: auto;
  min-height: 0;
  border: 0;
  background: none;
}

.lm-mega__list a {
  min-height: 0;
  text-transform: none;
  letter-spacing: normal;
}

/* Le panneau ne doit jamais apparaître dans le panneau mobile, où le menu
   natif se déplie en accordéon. */
@media (max-width: 1023px) {
  .elementor-nav-menu--dropdown .lm-mega,
  .hfe-nav-menu__layout-vertical .lm-mega {
    display: none;
  }
}

/* --- Le <li> doit rester statique ------------------------------------------
   CONSTAT du 10/09 : le widget de navigation d'Elementor met ses <li> en
   `position: relative`, pour y ancrer ses propres sous-menus. Conséquence
   mesurée après le passage au CSS pur : le panneau, devenu enfant du <li>,
   prenait le <li> comme bloc conteneur et se retrouvait large de 91px au lieu
   de la pleine largeur.

   On repasse en `position: static` les seules entrées qui portent un panneau.
   Sans risque : leur sous-menu natif est masqué, plus rien ne s'ancre sur
   elles. Le bloc conteneur redevient l'en-tête, qui est en `position: relative`,
   et le panneau retrouve la pleine largeur de la maquette, y compris quand
   l'en-tête est collant. */

/* Requête média ajoutée le 12/09. Cette règle ne vaut que pour le panneau, qui
   n'existe qu'à partir de 1024px. En dessous, elle rendait statiques les
   entrées du panneau mobile, et le bouton de dépliage posé par lm-front.js,
   qui s'ancre sur son entrée, se retrouvait collé en haut du panneau — les
   cinq boutons empilés dans le même coin. */
@media (min-width: 1024px) {
  header.elementor-location-header .elementor-nav-menu > li.lm-has-mega,
  .ehf-header .elementor-nav-menu > li.lm-has-mega {
    position: static;
  }
}

/* La liste elle-même est positionnée par le widget : tant qu'elle l'est, c'est
   ELLE qui sert de bloc conteneur au panneau, qui se retrouve à la largeur du
   menu et non à celle de l'en-tête. Mesuré : 718px au lieu de 1536px. */
header.elementor-location-header .elementor-nav-menu--main .elementor-nav-menu,
.ehf-header .elementor-nav-menu--main .elementor-nav-menu {
  position: static;
}

/* --- Deux effets de bord du fait de vivre dans un menu Elementor ------------
   Le panneau est maintenant un enfant de l'entrée de menu. Il subit donc deux
   règles du widget de navigation, mesurées le 10/09 :

   1. Elementor masque TOUT <ul> imbriqué dans un menu, pour cacher les
      sous-menus natifs : `.elementor-nav-menu ul { display: none }`. Notre
      liste d'entrées, qui est un <ul>, tombait sous cette règle et le panneau
      n'affichait plus que ses titres de colonne.

   2. Le widget de navigation est positionné, si bien que c'est LUI qui servait
      de bloc conteneur au panneau : 962px de large au lieu de la pleine
      largeur. On repasse la chaîne en `position: static` jusqu'à l'en-tête, qui
      redevient la référence.
   -------------------------------------------------------------------------- */

.lm-mega .lm-mega__list {
  display: grid !important;   /* contre `.elementor-nav-menu ul { display:none }` */
}

header.elementor-location-header .elementor-widget-nav-menu,
header.elementor-location-header .elementor-widget-nav-menu > .elementor-widget-container,
header.elementor-location-header .elementor-nav-menu--main,
.ehf-header .elementor-widget-nav-menu,
.ehf-header .elementor-widget-nav-menu > .elementor-widget-container,
.ehf-header .elementor-nav-menu--main {
  position: static;
}

/* Troisième effet de bord de la même famille : Elementor positionne en absolu
   les <ul> de sous-menu. Notre liste sortait donc du flux, le cadre blanc ne
   grandissait pas et les entrées débordaient sur la page. */
.lm-mega .lm-mega__list,
.lm-mega .lm-mega__list li {
  position: static !important;
  width: auto;
  min-width: 0;
  box-shadow: none;
  border: 0;
}

/* --- Pleine largeur, sans dépendre de l'ancêtre positionné -----------------
   Dans un en-tête Elementor, à peu près tous les niveaux d'emboîtement peuvent
   être positionnés : widget, conteneur de widget, colonne, section. Chasser
   l'ancêtre positionné n'en finit pas et casserait au premier réglage changé
   dans le template.

   On s'en affranchit avec la technique du plein écran : le panneau est décalé
   d'une demi-largeur d'écran depuis le centre de son bloc conteneur. Comme ce
   bloc est centré dans la page, le panneau couvre exactement l'écran, quel que
   soit l'ancêtre retenu par le navigateur. */

.lm-mega {
  left: 50%;
  right: auto;
  width: 100vw;
  margin-left: -50vw;
}

/* Les libellés passent à la ligne plutôt que de déborder sur la colonne
   voisine : mesuré, « Jeunesse et vie familiale » chevauchait « L'homme de
   Dieu » quand la piste faisait 95px. */
.lm-mega__list a {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
}

.lm-mega__list {
  gap: .125rem 1rem;
}

/* --- Correction finale de l'ancrage ----------------------------------------
   La technique du plein écran donnait bien 1536px, mais décalés de 46px : le
   bloc conteneur retenu n'était pas parfaitement centré dans la page.

   On revient à un ancrage franc, en rendant statiques les trois niveaux
   d'emboîtement entre le menu et sa section. Le bloc conteneur devient alors :
     - la SECTION quand l'en-tête est collant, puisqu'Elementor la passe en
       `position: fixed` et que nous lui donnons déjà 100vw ;
     - l'EN-TÊTE sinon, qui est en `position: relative` et pleine largeur.
   Dans les deux cas, `left: 0; right: 0` couvre exactement l'écran.

   La section n'est volontairement PAS rendue statique : cela casserait le
   collant d'Elementor, qui repose sur son positionnement. */

header.elementor-location-header .elementor-widget-wrap:has(.elementor-widget-nav-menu),
header.elementor-location-header .elementor-column:has(.elementor-widget-nav-menu),
header.elementor-location-header .elementor-container:has(.elementor-widget-nav-menu),
.ehf-header .elementor-widget-wrap:has(.elementor-widget-nav-menu),
.ehf-header .elementor-column:has(.elementor-widget-nav-menu) {
  position: static;
}

.lm-mega {
  left: 0;
  right: 0;
  width: auto;
  margin-left: 0;
}

/* Le `white-space: nowrap` vient du menu et porte sur le <span>, pas sur le
   lien : c'est lui qui faisait déborder les libellés sur la colonne voisine. */
.lm-mega__list a span {
  white-space: normal;
  overflow-wrap: break-word;
  min-width: 0;
  flex: 1 1 auto;
}

/* --- Largeur du cadre et pistes de la grille -------------------------------
   Les pistes tombaient à une cinquantaine de pixels et coupaient les libellés
   en plein mot (« L'intellec / tuel / engagé »).

   Deux garanties plutôt qu'un calcul en cascade : une largeur explicite pour
   le cadre blanc, et des pistes qui ne descendent jamais sous 150px. En
   dessous, la grille repasse d'elle-même sur une seule colonne. */

.lm-mega__inner {
  width: min(72rem, calc(100vw - 2rem));
  margin-inline: auto;
}

.lm-mega__list {
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}

/* La césure forcée n'a plus lieu d'être une fois les pistes assez larges. */
.lm-mega__list a span {
  overflow-wrap: normal;
}

/* --- Toujours deux colonnes, jamais plus ------------------------------------
   `repeat(auto-fit, minmax(150px, 1fr))` créait autant de pistes que la largeur
   le permettait. Mesuré le 11/09 :

     /biographie    colonnes de 383px  -> 2 pistes   (correct par hasard)
     /idees-debats  colonnes de 575px  -> 3 pistes
     /ressources    colonne de 1150px  -> 6 pistes

   La maquette pose systématiquement DEUX colonnes de texte par section, quelle
   que soit la largeur disponible. On le fixe donc explicitement.

   Le repli à une seule colonne est traité plus bas, par requête média.
   */

.lm-mega .lm-mega__list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}



/* Une seule colonne sur les écrans étroits. Une requête média sur la fenêtre
   plutôt qu'une requête de conteneur : `container-type: inline-size` posait un
   confinement qui écrasait la largeur des colonnes du panneau, mesuré. */
@media (max-width: 1100px) {
  .lm-mega .lm-mega__list {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Quatrième effet de bord du même ordre : Elementor pose une LARGEUR FIXE sur
   les <ul> de sous-menu. La règle, relevée le 11/09 dans le CSS réellement
   servi, est celle du widget de navigation :

     .elementor-nav-menu--main .elementor-nav-menu ul { width: 12em }

   Soit 192px, dans une colonne qui en fait 383 : la grille n'avait plus de quoi
   poser ses deux pistes et coupait les libellés en plein mot.

   Elle l'emporte sur le `width: auto` posé plus haut, qui ne compte que deux
   classes là où elle en compte trois et un type. Plutôt qu'un `!important`, que
   le projet s'interdit, on écrit le chemin complet du panneau : quatre classes
   suffisent à passer devant, et la règle reste lisible. */
.lm-mega .lm-mega__inner .lm-mega__col .lm-mega__list {
  width: auto;
  max-width: none;
}