/**
 * Comm360 — Navigation méga (Mega Navigation, Directional Hover).
 *
 * CSS repris VERBATIM de la fiche Osmo « Mega Navigation (Directional Hover) ».
 * Aucune règle n'est renommée, simplifiée ni supprimée : toutes les classes
 * Osmo (mega-nav, mega-nav__bar, mega-nav__container, mega-nav__bar-link,
 * mega-nav__dropdown-*, mega-nav__panel-*, mega-nav__card*, mega-nav__burger*,
 * mega-nav__backdrop, is--dropdown, is--colored, has--card…) et toutes les
 * media queries sont conservées à l'identique.
 *
 * La racine du widget porte À LA FOIS `mega-nav`, `data-menu-wrap` et
 * `comm360-navigation-mega`, donc ces règles s'appliquent telles quelles.
 * Les surcharges de l'onglet Style passent par des sélecteurs
 * `.comm360-navigation-mega …` ajoutés EN FIN de fichier, sans toucher au
 * layout Osmo ci-dessus.
 *
 * Dépendance : GSAP (animations dans navigation-mega.js).
 */

[data-menu-wrap] {
  --nav-height: 4em;
}

.mega-nav {
  z-index: 100;
  position: relative;
}
/* Barre fixe en haut de page : activée par le réglage « Barre fixe » (classe
   is--fixed). Par défaut la barre reste dans le flux normal de la page. */
.mega-nav.is--fixed {
  position: fixed;
  top: 1.25em;
  left: 1.25em;
  right: 1.25em;
}
/* Superposition. `.mega-nav` est en position:relative avec un z-index : elle crée
   donc un plan d'empilement dont ses popups ne peuvent PAS sortir. C'est bien
   cette valeur-ci qui décide si les popups passent au-dessus du contenu de la
   page — d'où un réglage unique pour l'ensemble. */
.comm360-navigation-mega {
  z-index: var( --comm360-navm-z, 100 );
}

/* Par défaut la popup glisse sous la barre (bar z-index 3 > wrapper 2), comme
   dans la fiche Osmo. `is--panel-top` inverse les deux pour qu'elle recouvre. */
.comm360-navigation-mega.is--panel-top .mega-nav__dropdown-wrapper {
  z-index: 4;
}

/* Logo laissé vide : aucun espace réservé (le <a> reste pour le JS). */
.mega-nav__bar-logo.is--empty {
  display: none;
}
/* Méga-panneau alimenté par un modèle Elementor (conteneurs de l'utilisateur). */
.mega-nav__dropdown-inner.is--tpl {
  display: block;
}
.mega-nav__panel-tpl {
  width: 100%;
}

.mega-nav__bar {
  z-index: 3;
  background-color: #fff;
  border-bottom: 1px solid #0000001a;
  border-radius: .25em;
  width: 100%;
  max-width: 80em;
  margin-left: auto;
  margin-right: auto;
  position: relative;
}

.mega-nav__container {
  height: var(--nav-height);
  justify-content: space-between;
  align-items: center;
  padding: 1em 1.5em;
  display: flex;
}

.mega-nav__bar-start {
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  display: flex;
  position: relative;
}

.mega-nav__bar-logo {
  flex: none;
  width: 5.75em;
  margin-right: 3em;
  display: flex;
}

.mega-nav__bar-list {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-start;
  align-items: center;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-list.is--actions {
  margin-left: auto;
}

.mega-nav__bar-link {
  color: #201d1d;
  background-color: #0000;
  border-radius: .25em;
  justify-content: flex-start;
  align-items: center;
  padding: .375em .625em;
  text-decoration: none;
  display: flex;
}

.mega-nav__bar-link-label {
  font-size: .9375em;
  font-weight: 500;
  line-height: 1.2;
}

.mega-nav__bar-link-icon {
  width: 1.25em;
}

.mega-nav__bar-end {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-end;
  align-items: center;
  display: none;
}

.mega-nav__bar-cta {
  color: #f2f2f2;
  background-color: #6840ff;
  border-radius: .25em;
  justify-content: center;
  align-items: center;
  padding: .375em .625em;
  text-decoration: none;
  display: flex;
}

.mega-nav__bar-cta.is--secondary {
  color: #6840ff;
  background-color: #0000;
  border: 1px solid #6840ff;
}

.mega-nav__bar-inner {
  grid-column-gap: .75em;
  grid-row-gap: .75em;
  justify-content: flex-start;
  align-items: center;
  width: 100%;
  margin-bottom: 0;
  padding-left: 0;
  list-style: none;
  display: flex;
}

.mega-nav__bar-inner.is--actions {
  margin-left: auto;
}

.mega-nav__burger {
  grid-column-gap: .2em;
  grid-row-gap: .2em;
  background-color: #e4e0f5;
  border-radius: .25em;
  flex-flow: column;
  justify-content: center;
  align-items: center;
  width: 2.5em;
  height: 2.5em;
  padding: 0;
  display: flex;
}

.mega-nav__burger-line {
  z-index: 1;
  background-color: #6840ff;
  border-radius: .125em;
  flex: none;
  width: 1.25em;
  height: .125em;
  padding: 0;
  display: block;
  position: relative;
}

.mega-nav__back {
  z-index: 2;
  opacity: 0;
  visibility: hidden;
  position: absolute;
  left: -.625em;
}

.mega-nav__backdrop {
  z-index: 0;
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  background-color: #00000040;
  position: fixed;
  inset: 0%;
}

.mega-nav__dropdown-wrapper {
  z-index: 2;
  pointer-events: none;
  width: 100%;
  max-width: 80rem;
  margin-left: auto;
  margin-right: auto;
  position: absolute;
  top: calc(100% - .25em);
  left: 0;
  right: 0;
}

.mega-nav__dropdown-container {
  position: relative;
  overflow: hidden;
}

.mega-nav__dropdown-bg {
  will-change: transform;
  background-color: #fff;
  border-bottom-right-radius: .25em;
  border-bottom-left-radius: .25em;
  position: absolute;
  inset: 0;
}

.mega-nav__dropdown-panel {
  opacity: 0;
  pointer-events: none;
  visibility: hidden;
  position: absolute;
  inset: 0 0 auto;
  overflow: hidden;
}

.mega-nav__dropdown-inner {
  display: flex;
}

.mega-nav__panel-col {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  border-right: 1px solid #0000001a;
  flex-flow: column;
  flex: 1;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 2.5em 1.5em;
  display: flex;
}

.mega-nav__panel-col:last-of-type {
  border: none;
}

.mega-nav__panel-col.is--colored {
  background-color: #f7f5ff;
}

.mega-nav__panel-col.is--colored.has--card {
  padding-top: 1.5em;
  padding-bottom: 1.5em;
}

.mega-nav__panel-label {
  text-transform: uppercase;
  padding-left: 1em;
  font-family: Haffer Mono, Arial, sans-serif;
  font-size: .75em;
  line-height: 1;
}

.mega-nav__panel-list {
  grid-column-gap: 0px;
  grid-row-gap: 0px;
  flex-flow: column;
  justify-content: flex-start;
  align-items: stretch;
  width: 100%;
  margin-bottom: 0;
  padding: 0;
  list-style: none;
  display: flex;
}

.mega-nav__panel-link {
  color: #201d1d;
  border-radius: .25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: .625em .75em;
  text-decoration: none;
  display: flex;
}

.mega-nav__panel-link-text {
  font-weight: 500;
}

.mega-nav__panel-link-desc {
  opacity: .6;
  font-size: .875em;
  font-weight: 400;
}

.mega-nav__card {
  background-color: #fff;
  border-radius: .5em;
  flex-flow: column;
  width: 100%;
  display: flex;
  overflow: hidden;
}

.mega-nav__card-img {
  object-fit: cover;
  width: 100%;
  height: 100%;
}

.mega-nav__card-visual {
  width: 100%;
  height: 16.25em;
  position: relative;
}

.mega-nav__card-content {
  grid-column-gap: 1.25em;
  grid-row-gap: 1.25em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  padding: 1.5em;
  display: flex;
}

.mega-nav__card-text {
  grid-column-gap: .125em;
  grid-row-gap: .125em;
  flex-flow: column;
  justify-content: flex-start;
  align-items: flex-start;
  display: flex;
}

.mega-nav__card-cta {
  color: #f2f2f2;
  background-color: #6840ff;
  border-radius: .25em;
  justify-content: center;
  align-items: center;
  padding: .375em .625em;
  text-decoration: none;
  display: flex;
}

.mega-nav__card-cta.is--secondary {
  color: #6840ff;
  background-color: #0000;
  border: 1px solid #6840ff;
}

.mega-nav__card-cta-label {
  font-size: .9375em;
  font-weight: 500;
  line-height: 1.2;
}

.mega-nav__card-cta-icon {
  width: 1.25em;
}

@media screen and (max-width: 991px) {
  .mega-nav {
    top: 0;
    left: 0;
    right: 0;
  }

  .mega-nav__bar-start {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-list {
    grid-column-gap: 0em;
    grid-row-gap: 0em;
    flex-flow: column;
    justify-content: flex-start;
    align-items: stretch;
    width: 100%;
  }

  .mega-nav__bar-list.is--actions {
    grid-column-gap: 1em;
    grid-row-gap: 1em;
    flex-flow: row;
    justify-content: space-between;
    align-items: stretch;
  }

  .mega-nav__bar-link {
    border-bottom: 1px solid #0000001a;
    border-radius: 0;
    width: 100%;
    padding: .75em 0;
    font-size: 1.25em;
  }

  .mega-nav__bar-link.is--dropdown {
    justify-content: space-between;
    align-items: center;
  }

  .mega-nav__bar-link.is--back {
    border-bottom-style: none;
    font-size: 1em;
  }

  .mega-nav__bar-link-label {
    font-size: 1.25em;
  }

  .mega-nav__bar-link-icon {
    width: 1.5em;
  }

  .mega-nav__bar-link-icon.is--dropdown {
    transform: rotate(-90deg);
  }

  .mega-nav__bar-end {
    display: flex;
  }

  .mega-nav__bar-cta {
    padding: 1em .75em 1em 1em;
  }

  .mega-nav__bar-inner {
    opacity: 0;
    bottom: 0%;
    left: 0%;
    right: 0%;
    top: var(--nav-height);
    visibility: hidden;
    background-color: #fff;
    flex-flow: column;
    justify-content: space-between;
    align-items: center;
    padding: 2em 1.5em;
    position: fixed;
    overflow: auto;
  }

  .mega-nav__backdrop {
    display: none;
  }

  .mega-nav__dropdown-wrapper {
    z-index: 4;
    bottom: 0;
    top: var(--nav-height);
    position: fixed;
  }

  .mega-nav__dropdown-container {
    height: 100%;
    overflow: auto;
  }

  .mega-nav__dropdown-bg {
    display: none;
  }

  .mega-nav__dropdown-panel {
    background-color: #fff;
    bottom: 0;
    overflow: auto;
  }

  .mega-nav__dropdown-inner {
    flex-flow: column;
  }

  .mega-nav__panel-col {
    border-bottom: 1px solid #0000001a;
    border-right-style: none;
    padding-top: 1.5em;
    padding-bottom: 1.5em;
  }

  .mega-nav__panel-label {
    width: 100%;
  }

  .mega-nav__bar-action {
    flex: 1;
  }

  .mega-nav__card-cta-icon.is--dropdown {
    transform: rotate(-90deg);
  }
}

@media screen and (max-width: 479px) {
  .mega-nav__bar-link-label {
    font-size: 1em;
  }

  .mega-nav__bar-link-icon {
    width: 1.375em;
  }

  .mega-nav__panel-col.is--colored.has--card {
    padding: 0;
  }

  .mega-nav__card {
    border-bottom: 1px solid #0000001a;
    border-radius: 0;
  }

  .mega-nav__card-content {
    padding: 1em 1em 1.5em;
  }

  .mega-nav__card-cta-label {
    font-size: 1em;
  }

  .mega-nav__card-cta-icon {
    width: 1.375em;
  }
}

/* =====================================================================
 * AJOUTS NON-OSMO (n'altèrent PAS le layout ci-dessus) :
 *  1) Reset minimal pour les <button> qui servent de liens de barre, afin
 *     qu'ils rendent comme les <a> Osmo (la fiche suppose un reset global
 *     type Webflow ; ici on le pose localement, scopé au widget).
 *  2) Affichage du logo (img/svg) injecté par Elementor.
 *  3) Aperçu éditeur Elementor : on dé-fixe le nav et on force le premier
 *     panneau visible (le JS pose data-panel-state="active").
 *  4) Mappage des variables de l'onglet Style → propriétés Osmo, par
 *     surcharge ciblée (uniquement si la variable est définie).
 * ===================================================================== */

/* 1) Les déclencheurs de menu sont des <button> : on neutralise le style natif. */
.comm360-navigation-mega button.mega-nav__bar-link {
  background-color: #0000;
  border: 0;
  margin: 0;
  font: inherit;
  cursor: pointer;
  text-align: left;
}

/* 2) Logo image/SVG. */
.comm360-navigation-mega .mega-nav__bar-logo img,
.comm360-navigation-mega .mega-nav__bar-logo svg {
  width: 100%;
  height: auto;
  display: block;
}

/* Indice affiché quand aucun élément de barre n'est configuré. */
.comm360-navigation-mega .mega-nav__empty {
  padding: 1em 1.5em;
  font-size: .9375em;
  color: #201d1d;
}

/* 3) Aperçu éditeur : le nav n'est PAS fixé (sinon il flotte par-dessus le
 *    canevas) ; le premier panneau (data-panel-state="active") est forcé
 *    visible et en flux pour donner sa hauteur au conteneur. */
.comm360-navigation-mega.is-editor.mega-nav {
  position: relative;
  top: auto;
  left: auto;
  right: auto;
}

.comm360-navigation-mega.is-editor .mega-nav__dropdown-wrapper {
  position: relative;
  top: .25em;
  pointer-events: auto;
}

/* Le conteneur imbriqué se met en flux (pas la grille de colonnes). */
.comm360-navigation-mega .mega-nav__dropdown-inner.is--nested {
  display: block;
}
/* Éditeur : TOUS les panneaux méga révélés + empilés, pour éditer chaque
   conteneur imbriqué (drop-zone). Chaque zone a une hauteur minimale visible. */
.comm360-navigation-mega.is-editor .mega-nav__dropdown-panel {
  position: static;
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  display: block;
  margin-bottom: 1em;
}
/* ---------------------- MISE EN PAGE PILOTÉE DEPUIS L'ÉDITEUR ---------------- */
/* Espacements des onglets (comportement d'un menu classique). Les valeurs par
   défaut sont celles d'Osmo : sans réglage, le rendu est inchangé. */
.comm360-navigation-mega .mega-nav__bar-link {
  padding: var( --comm360-navm-link-padding, .375em .625em );
}

.comm360-navigation-mega .mega-nav__bar-list {
  grid-column-gap: var( --comm360-navm-link-gap, .75em );
  grid-row-gap: var( --comm360-navm-link-gap, .75em );
}

.comm360-navigation-mega .mega-nav__bar-logo {
  margin-right: var( --comm360-navm-logo-gap, 3em );
}

/* Largeur des panneaux méga.
   Par défaut (aucune classe) : alignée sur la barre, comme la fiche Osmo. */
/* Pleine largeur de page : lever le max-width ne suffit pas, la largeur reste
   imposée par le conteneur Elementor parent. On s'en échappe en repartant du
   centre sur toute la largeur de la fenêtre. */
.comm360-navigation-mega.is--w-page .mega-nav__dropdown-wrapper {
  max-width: none;
  width: 100vw;
  left: 50%;
  right: auto;
  margin-left: 0;
  margin-right: 0;
  transform: translateX( -50% );
}

/* Largeur du contenu : les panneaux sont en position absolue, ils ne donnent
   donc aucune largeur à leur parent (d'où une popup de largeur nulle). On les
   remet dans le flux via une grille où ils se superposent tous dans la même
   cellule : ils continuent de se chevaucher comme avant, mais dimensionnent
   enfin le conteneur. */
/* ----------------- BARRE : DIMENSIONS PILOTÉES DEPUIS L'ÉDITEUR ------------- */
/* Marge intérieure de la barre (défaut Osmo : 1em / 1.5em). */
.comm360-navigation-mega .mega-nav__container {
  padding: var( --comm360-navm-bar-padding, 1em 1.5em );
}

/* « Ajuster la barre à son contenu » : la hauteur suit alors la marge intérieure
   des onglets (au lieu d'une hauteur fixe), et la largeur celle du contenu. */
.comm360-navigation-mega.is--fit .mega-nav__container {
  height: auto;
}

.comm360-navigation-mega.is--fit .mega-nav__bar {
  width: max-content;
  max-width: 100%;
}

.comm360-navigation-mega.is--fit .mega-nav__bar-start {
  width: auto;
}

/* Position de la barre ajustée (centrée par défaut, via les marges auto Osmo). */
.comm360-navigation-mega.is--fit.is--fit-left .mega-nav__bar {
  margin-left: 0;
  margin-right: auto;
}

.comm360-navigation-mega.is--fit.is--fit-right .mega-nav__bar {
  margin-left: auto;
  margin-right: 0;
}

/* Écarts : avant les boutons (auto = repoussés à droite, comme Osmo) et entre eux. */
.comm360-navigation-mega .mega-nav__bar-list.is--actions {
  margin-left: var( --comm360-navm-actions-gap, auto );
  grid-column-gap: var( --comm360-navm-buttons-gap, .75em );
  grid-row-gap: var( --comm360-navm-buttons-gap, .75em );
}

/* Barre ajustée : « auto » ne repousse plus rien (la barre fait la taille de son
   contenu), il faut donc un écart réel par défaut entre onglets et boutons. */
.comm360-navigation-mega.is--fit .mega-nav__bar-list.is--actions {
  margin-left: var( --comm360-navm-actions-gap, 2em );
}

/* ------------------------------- LOGO -------------------------------------- */
.comm360-navigation-mega .mega-nav__bar-logo {
  width: var( --comm360-navm-logo-width, 5.75em );
}

.comm360-navigation-mega .mega-nav__bar-logo img,
.comm360-navigation-mega .mega-nav__bar-logo svg {
  max-height: var( --comm360-navm-logo-maxh, none );
  width: 100%;
  height: auto;
  object-fit: contain;
}

/* ------------------- SOULIGNEMENT AU SURVOL (trait directionnel) ------------ */
/* Le trait se déploie depuis la GAUCHE au survol, puis se retire vers la DROITE
   quand la souris s'en va : c'est l'inversion du point d'origine entre les deux
   états qui produit cet effet, sans aucun JavaScript. */
.comm360-navigation-mega.is--underline .mega-nav__bar-link {
  position: relative;
}

.comm360-navigation-mega.is--underline .mega-nav__bar-link::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  /* Décalage réglable : négatif = le trait remonte vers le texte, positif = il
     s'en éloigne. Mesuré depuis le bas de l'onglet, marge intérieure comprise. */
  bottom: calc( -1 * var( --comm360-navm-underline-offset, 0px ) );
  height: var( --comm360-navm-underline-size, 2px );
  background-color: var( --comm360-navm-underline-color, currentColor );
  transform: scaleX( 0 );
  transform-origin: right center;
  transition: transform var( --comm360-navm-underline-duration, .35s ) cubic-bezier( .645, .045, .355, 1 );
  pointer-events: none;
}

.comm360-navigation-mega.is--underline .mega-nav__bar-link:hover::after,
.comm360-navigation-mega.is--underline .mega-nav__bar-link:focus-visible::after {
  transform: scaleX( 1 );
  transform-origin: left center;
}

/* Respect du réglage système « animations réduites ». */
@media ( prefers-reduced-motion: reduce ) {
  .comm360-navigation-mega.is--underline .mega-nav__bar-link::after {
    transition: none;
  }
}

/* ---------------------------- ANGLES DROITS (DA carrée) --------------------- */
.comm360-navigation-mega.is--square .mega-nav__bar,
.comm360-navigation-mega.is--square .mega-nav__bar-link,
.comm360-navigation-mega.is--square .mega-nav__bar-cta,
.comm360-navigation-mega.is--square .mega-nav__burger,
.comm360-navigation-mega.is--square .mega-nav__dropdown-bg,
.comm360-navigation-mega.is--square .mega-nav__panel-link,
.comm360-navigation-mega.is--square .mega-nav__card,
.comm360-navigation-mega.is--square .mega-nav__dropdown-container > .e-con {
  border-radius: 0;
}

/* Largeur du contenu : la popup étant plus étroite que la barre, elle s'ouvre
   SOUS l'onglet qui la déclenche (décalage calculé par le script), au lieu de
   rester centrée. Sans script — éditeur, aperçu figé — elle reste calée à
   gauche, ce qui reste lisible. */
.comm360-navigation-mega.is--w-content .mega-nav__dropdown-wrapper {
  width: max-content;
  /* Le plafond se mesure sur la FENÊTRE, pas sur le parent : sinon un contenu
     plus large que la barre voyait son fond s'arrêter à la largeur de celle-ci
     alors que le panneau, lui, continuait — d'où une asymétrie à droite. Le
     script borne déjà la POSITION pour que la popup reste à l'écran. */
  max-width: calc( 100vw - 16px );
  left: var( --comm360-navm-panel-x, 0px );
  right: auto;
  margin-left: 0;
  margin-right: 0;
  transform: none;
}

.comm360-navigation-mega.is--w-content .mega-nav__dropdown-container {
  display: grid;
  grid-template-columns: max-content;
  width: max-content;
  max-width: 100%;
  /* L'ouverture anime la HAUTEUR du conteneur. Sans ces deux règles, la ligne de
     la grille s'étire à cette hauteur imposée et écrase le panneau (dépendance
     circulaire : la hauteur du conteneur vient du panneau, mais celle du panneau
     viendrait du conteneur). La ligne se dimensionne donc sur son contenu. */
  grid-auto-rows: max-content;
  align-content: start;
  /* Les éléments d'une grille s'étirent par défaut à la hauteur de leur ligne.
     Or, au changement d'onglet, le panneau sortant est encore affiché : le
     panneau entrant, mesuré à cet instant, héritait de CETTE hauteur — la popup
     ne redescendait donc jamais vers un panneau plus court. Chaque panneau garde
     désormais sa hauteur propre. */
  align-items: start;
}

.comm360-navigation-mega.is--w-content .mega-nav__dropdown-container > * {
  grid-area: 1 / 1;
}

/* Seul le panneau AFFICHÉ participe au dimensionnement : sinon la cellule de la
   grille prendrait la taille du plus grand panneau (popup trop large, et hauteur
   figée qui rogne le contenu). Le panneau actif est marqué par le script. */
.comm360-navigation-mega.is--w-content .mega-nav__dropdown-container > .e-con {
  display: none;
  position: relative;
  inset: auto;
  /* Le panneau occupe la cellule (dimensionnée par son propre contenu) : lui
     imposer « max-content » le ferait déborder de la largeur disponible. */
  width: auto;
  max-width: 100%;
  height: auto;
}

.comm360-navigation-mega.is--w-content .mega-nav__dropdown-container > .e-con[data-panel-state="active"] {
  display: flex;
}

/* En édition, c'est le panneau ciblé par les réglages qui doit rester visible
   (le script n'y tourne pas) : la règle nth-child générée au rendu s'en charge. */
.comm360-navigation-mega.is--w-content.is-editor .mega-nav__dropdown-container > .e-con {
  display: none;
}

/* Voile derrière le méga-menu : désactivable. */
.comm360-navigation-mega.is--no-backdrop .mega-nav__backdrop {
  display: none;
}

/* VUE ÉDITION CIBLÉE : un seul panneau déplié à la fois, celui choisi dans les
   réglages. Le premier enfant de la zone d'accueil est le fond animé, les
   panneaux commencent donc au deuxième — la règle nth-child est générée au
   rendu, avec le décalage déjà appliqué. */
.comm360-navigation-mega.is-editor .mega-nav__dropdown-container > .e-con {
  display: none;
}

.comm360-navigation-mega.is-editor .mega-nav__dropdown-container > .e-con.is--edit-target {
  display: flex;
}

/* PANNEAU = CONTENEUR ELEMENTOR (popup garantie).
   Le panneau méga est désormais le conteneur enfant déposé par l'utilisateur :
   il porte donc aussi la classe `.e-con` d'Elementor, dont les styles par défaut
   (position: relative, largeurs) ont la MÊME spécificité que la règle Osmo et
   peuvent l'emporter selon l'ordre de chargement — le méga s'ouvrirait alors
   dans le flux en poussant la page au lieu de flotter par-dessus.
   Ces règles scopées (spécificité supérieure) garantissent la popup. */
.comm360-navigation-mega .mega-nav__dropdown-panel {
  position: absolute;
  inset: 0 0 auto;
  width: 100%;
  max-width: none;
  margin: 0;
  overflow: hidden;
}

/* L'ouverture est animée en hauteur sur le conteneur : il doit flotter au-dessus
   du contenu de la page, et ne jamais être rogné par la barre. */
.comm360-navigation-mega .mega-nav__dropdown-wrapper {
  z-index: 4;
}

/* ZONE DE DÉPÔT (éditeur) — sans ces règles, le conteneur imbriqué est rogné :
   sur le site, `.mega-nav__dropdown-container` est en `overflow:hidden` avec sa
   hauteur animée (0 au repos), et le panneau lui-même masque son débordement.
   Dans l'éditeur, on rend donc la zone visible et de hauteur libre, sinon il n'y
   a aucune surface où déposer widgets et conteneurs. */
.comm360-navigation-mega.is-editor .mega-nav__dropdown-container {
  overflow: visible;
  height: auto;
}

.comm360-navigation-mega.is-editor .mega-nav__dropdown-panel {
  overflow: visible;
  height: auto;
}

/* Le panneau EST le conteneur Elementor déposé : dans l'éditeur il doit être
   une vraie surface de dépôt (hauteur minimale visible, repère en pointillés). */
.comm360-navigation-mega.is-editor .mega-nav__dropdown-panel {
  min-height: 6em;
  width: 100%;
  outline: 1px dashed var(--comm360-navm-divider, #22201c24);
  outline-offset: -3px;
}

.comm360-navigation-mega.is-editor .mega-nav__dropdown-bg,
.comm360-navigation-mega.is-editor .mega-nav__backdrop {
  display: none;
}

/* 4) Variables de l'onglet Style → propriétés Osmo (surcharge ciblée). */
.comm360-navigation-mega .mega-nav__bar {
  background-color: var(--comm360-navm-bar-bg, #fff);
  border-bottom-color: var(--comm360-navm-bar-border, #0000001a);
  border-radius: var(--comm360-navm-bar-radius, .25em);
  max-width: var(--comm360-navm-bar-maxwidth, 80em);
}

.comm360-navigation-mega .mega-nav__bar-link {
  color: var(--comm360-navm-link-color, #201d1d);
}

.comm360-navigation-mega .mega-nav__bar-link:hover {
  color: var(--comm360-navm-link-hover-color, #201d1d);
  background-color: var(--comm360-navm-link-hover-bg, transparent);
}

.comm360-navigation-mega .mega-nav__bar-cta {
  color: var(--comm360-navm-cta-color, #f2f2f2);
  background-color: var(--comm360-navm-cta-bg, #6840ff);
  border-radius: var(--comm360-navm-cta-radius, .25em);
}

/* Le bouton secondaire est SANS fond dans la fiche Osmo. La règle générique
   ci-dessus (`.comm360-navigation-mega .mega-nav__bar-cta`) a la même
   spécificité que le `.is--secondary` d'origine et arrive après : elle lui
   réimposait donc le violet. Ce sélecteur, plus spécifique, rétablit le fond
   transparent — que la section « Boutons — style secondaire » peut surcharger. */
.comm360-navigation-mega .mega-nav__bar-cta.is--secondary {
  color: var(--comm360-navm-cta2-color, #6840ff);
  background-color: transparent;
  border-color: var(--comm360-navm-cta2-border, #6840ff);
}

.comm360-navigation-mega .mega-nav__burger {
  background-color: var(--comm360-navm-burger-bg, #e4e0f5);
}

.comm360-navigation-mega .mega-nav__burger-line {
  background-color: var(--comm360-navm-burger-line, #6840ff);
}

/* `.mega-nav__bar-inner` N'EST PAS dans cette liste : sur ordinateur il porte le
   menu à l'intérieur de la barre, et prenait donc le fond du panneau — d'où un
   bandeau blanc au milieu d'une barre foncée. Sous le point de rupture il devient
   le panneau plein écran : son fond est alors rétabli dans la media query. */
.comm360-navigation-mega .mega-nav__dropdown-bg,
.comm360-navigation-mega .mega-nav__dropdown-panel {
  background-color: var(--comm360-navm-panel-bg, #fff);
}

@media screen and (max-width: 991px) {
  .comm360-navigation-mega .mega-nav__bar-inner {
    background-color: var(--comm360-navm-panel-bg, #fff);
  }
}

.comm360-navigation-mega .mega-nav__panel-col {
  border-right-color: var(--comm360-navm-divider, #0000001a);
}

.comm360-navigation-mega .mega-nav__panel-col.is--colored {
  background-color: var(--comm360-navm-colored-bg, #f7f5ff);
}

.comm360-navigation-mega .mega-nav__panel-label {
  color: var(--comm360-navm-panel-label-color, inherit);
}

.comm360-navigation-mega .mega-nav__panel-link {
  color: var(--comm360-navm-panel-link-color, #201d1d);
}

.comm360-navigation-mega .mega-nav__panel-link:hover {
  background-color: var(--comm360-navm-panel-link-hover-bg, transparent);
}

.comm360-navigation-mega .mega-nav__panel-link-desc {
  color: var(--comm360-navm-panel-desc-color, inherit);
}

.comm360-navigation-mega .mega-nav__card {
  background-color: var(--comm360-navm-card-bg, #fff);
  border-radius: var(--comm360-navm-card-radius, .5em);
}

.comm360-navigation-mega .mega-nav__card-cta {
  color: var(--comm360-navm-cta-color, #f2f2f2);
  background-color: var(--comm360-navm-cta-bg, #6840ff);
  border-radius: var(--comm360-navm-cta-radius, .25em);
}

/* Voile : couleur (alpha incluse) paramétrable. L'OPACITÉ finale est pilotée
 * par GSAP (autoAlpha 0↔1) comme dans la fiche : on ne pose donc PAS d'opacité
 * en CSS ici. Le défaut reproduit le #00000040 (noir 25%) d'Osmo. */
.comm360-navigation-mega .mega-nav__backdrop {
  background-color: var(--comm360-navm-backdrop-color, #00000040);
}