/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Jun 03 2026 | 19:03:59 */
/* =========================================================
   MEGAMENU "PRODUITS" — 5 COLONNES (AHU / ERU / MAU / GAS / COMPOSANTES)
   Colonne = Titre -> Image -> Enfants (stack)
   SAFE: layout appliqué seulement quand ouvert
========================================================= */

@media (min-width: 1025px) and (hover:hover){

  /* (Garde/assure la sécurité : fermé = pas focusable) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu:is(:hover, :focus-within) > ul.sub-menu{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
 
  /* === PANEL : 3 ou 5 colonnes : choisir === */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu:is(:hover,:focus-within) > ul.sub-menu{
  display: grid !important;
  /*grid-template-columns: repeat(5, minmax(0, 1fr));*/ /* 5 colonnes */
  grid-template-columns: repeat(3, minmax(0, 1fr)); /* 3 colonnes */
  gap: 28px;
  align-items: start;
  align-content: start;
  width: min(980px, calc(100vw - 60px));
  }

  /* Chaque colonne (AHU / ERU / MAU / GAS / COMPOSANTES) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li{
    padding-left: 22px;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li:first-child{
    padding-left: 0;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li + li{
    border-left: 1px solid rgba(0,0,0,.10);
  }

  /* Titre + image (lien parent) : stack vertical */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a{
    display: grid !important;
    grid-template-rows: auto auto !important;     /* titre puis image */
    row-gap: 12px;
    justify-items: start;
    align-items: start;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }

  /* IMPORTANT : dans ton HTML l'image est avant le titre.
     On force le titre en row 1 et l'image en row 2. */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a > span.ui-menu-item-wrapper{
    grid-row: 1;
    padding: 0 !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a > img.ui-menu-img{
    grid-row: 2;
    width: 100% !important;
    height: 110px !important;          /* ajuste 90–140px si besoin */
    object-fit: contain !important;
    object-position: left center !important;
    display: block !important;
  }

  /* Enfants sous l'image (liste à l'intérieur de la colonne) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > ul.sub-menu{
    position: static !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    transform: none !important;
    background: transparent !important;
    box-shadow: none !important;

    margin: 14px 0 0 !important;
    padding: 0 !important;
    list-style: none !important;

    display: grid;
    gap: 10px;
    justify-items: start;
    align-content: start;
  }

  /* Liens enfants + chevron */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > ul.sub-menu > li > a{
    background: transparent !important;
    padding: 0 !important;
  }

  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > ul.sub-menu > li > a > span.ui-menu-item-wrapper{
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    line-height: 1.1;
  }

  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > ul.sub-menu > li > a > span.ui-menu-item-wrapper::before{
    content: "›";
    opacity: .7;
    transform: translateY(-1px);
  }

  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > ul.sub-menu > li > a:hover > span.ui-menu-item-wrapper{
    background: rgba(0,0,0,.06) !important;
  }
}

/* =========================================================
   PATCH — PRODUITS : align left + moins d'espace + panneau centré/respire
========================================================= */
@media (min-width: 1025px) and (hover:hover){

  /* 1) Le panneau ne colle plus à droite : on le centre + marge latérale */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu{
    right: auto !important;
    left: 50% !important;
    transform: translateX(-50%) !important;

    width: min(980px, calc(100vw - 80px)) !important; /* “respire” */
    padding: 28px 32px !important;                   /* air intérieur */
    border-radius: 14px !important;
    box-sizing: border-box !important;
  }

  /* 2) Tout aligné à gauche (au cas où un style centre) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu,
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li,
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a,
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > ul.sub-menu{
    text-align: left !important;
    justify-items: start !important;
    align-items: start !important;
  }

  /* 3) Moins d'espace entre le titre (ERU) et l'image */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a{
    row-gap: 6px !important;   /* au lieu de 12+ */
    margin: 0 !important;
  }

  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a > span.ui-menu-item-wrapper{
    margin: 0 !important;
    padding: 0 !important;
  }

  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > a > img.ui-menu-img{
    margin: 0 !important;      /* UiCore met parfois un margin */
  }

  /* 4) Optionnel : rapproche aussi les enfants de l'image */
  .uicore-nav-menu .uicore-menu > li.mm-preset-produits.uicore-simple-megamenu > ul.sub-menu > li > ul.sub-menu{
    margin-top: 10px !important;
  }
}

@media (min-width: 1025px) and (hover:hover){

  /* Le parent de colonne (AHU / ERU / MAU / GAS) */
  .uicore-nav-menu .uicore-menu
  > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > a{
    display: grid !important;

    /* ✅ LA CLÉ : pas de colonnes implicites */
    grid-template-columns: 1fr !important;
    grid-template-rows: auto auto !important;

    grid-auto-flow: row !important;
    justify-items: start !important;
    align-items: start !important;

    row-gap: 6px !important; /* réduit l’espace titre -> image */
  }

  /* Titre au-dessus */
  .uicore-nav-menu .uicore-menu
  > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > a > span.ui-menu-item-wrapper{
    grid-column: 1 !important;
    grid-row: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }

  /* Image en dessous */
  .uicore-nav-menu .uicore-menu
  > li.mm-preset-produits.uicore-simple-megamenu
  > ul.sub-menu > li > a > img.ui-menu-img{
    grid-column: 1 !important;
    grid-row: 2 !important;
    margin: 0 !important;
  }
}


@media (min-width: 1025px) and (hover:hover){

  /* SAFE (fermé = pas focusable) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu:is(:hover,:focus-within) > ul.sub-menu{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Panneau : centré + “respire” sans casser l’anim (translate séparé) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu{
    right: auto !important;
    left: 50% !important;
    width: min(980px, calc(100vw - 80px)) !important;
    padding: 28px 32px !important;
    box-sizing: border-box !important;
  }
  @supports (translate: -50% 0){
    .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu{
      translate: -50% 0 !important;
    }
  }

  /* Layout colonnes auto = 1 colonne par item */
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu:is(:hover,:focus-within) > ul.sub-menu{
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    align-content: start;
  }

  /* Séparateurs */
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu > li{
    min-width: 0;
    padding-left: 22px;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu > li:first-child{
    padding-left: 0;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu > li + li{
    border-left: 1px solid rgba(0,0,0,.10);
  }

  /* Colonne : Titre au-dessus, logo en dessous */
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu > li > a{
    display: grid !important;
    grid-template-columns: 1fr !important;     /* évite colonnes implicites */
    grid-template-rows: auto auto !important;
    justify-items: start !important;
    align-items: start !important;
    row-gap: 8px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu > li > a > span.ui-menu-item-wrapper{
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-tech.uicore-simple-megamenu > ul.sub-menu > li > a > img.ui-menu-img{
    grid-row: 2 !important;
    grid-column: 1 !important;

    height: 56px !important;     /* logos SVG (width=1 height=1) */
    width: auto !important;
    max-width: 240px !important;
    object-fit: contain !important;
    display: block !important;
    margin: 0 !important;
  }
}


@media (min-width: 1025px) and (hover:hover){

  /* SAFE (fermé = pas focusable) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu:is(:hover,:focus-within) > ul.sub-menu{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }

  /* Panneau : centré + “respire” */
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu{
    right: auto !important;
    left: 50% !important;
    width: min(1100px, calc(100vw - 80px)) !important;
    padding: 28px 32px !important;
    box-sizing: border-box !important;
  }
  @supports (translate: -50% 0){
    .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu{
      translate: -50% 0 !important;
    }
  }

  /* Layout colonnes auto = 1 colonne par item (5 items => 5 colonnes) */
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu:is(:hover,:focus-within) > ul.sub-menu{
    display: grid !important;
    grid-auto-flow: column;
    grid-auto-columns: minmax(0, 1fr);
    gap: 28px;
    align-items: start;
    align-content: start;
  }

  /* Séparateurs */
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu > li{
    min-width: 0 !important;
    padding-left: 22px;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu > li:first-child{
    padding-left: 0;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu > li + li{
    border-left: 1px solid rgba(0,0,0,.10);
  }

  /* Colonne : Titre au-dessus, image en dessous */
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu > li > a{
    display: grid !important;
    grid-template-columns: 1fr !important;
    grid-template-rows: minmax(56px, auto) auto !important;
    justify-items: start !important;
    align-items: start !important;
    row-gap: 10px !important;
    padding: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    min-width: 0 !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu > li > a > span.ui-menu-item-wrapper{
    grid-row: 1 !important;
    grid-column: 1 !important;
    margin: 0 !important;
    padding: 0 !important;
    display: block !important;
    width: 100% !important;
    min-width: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.2 !important;
  }
  .uicore-nav-menu .uicore-menu > li.mm-preset-secteurs.uicore-simple-megamenu > ul.sub-menu > li > a > img.ui-menu-img{
    grid-row: 2 !important;
    grid-column: 1 !important;

    width: 100% !important;
    height: 130px !important;              /* uniforme */
    object-fit: cover !important;          /* crop propre */
    border-radius: 18px;
    display: block !important;
    margin: 0 !important;
    max-width: 100% !important;
  }
}

@media (min-width: 1025px) and (hover:hover){

  /* Marchés : image = “cover” dans un masque (cadre) */
  .uicore-nav-menu .uicore-menu
  > li.mm-preset-secteurs.uicore-simple-megamenu
  > ul.sub-menu > li > a > img.ui-menu-img{
    width: 100% !important;
    height: 130px !important;        /* ajuste au besoin */
    object-fit: cover !important;     /* cover dans le cadre */
    object-position: center !important;
    border-radius: 18px !important;   /* le masque */
    display: block !important;
    background: rgba(0,0,0,.05);      /* si l’image charge lentement */
  }
}


/* =========================================================
   Menu item burger (li.burger) — look + animation
   Le thème gère l'ouverture; ici on dessine et anime.
========================================================= */

/* 1) Le lien du burger devient une pastille carrée */
.uicore-nav-menu .uicore-menu > li.burger > a{
  --btn: 44px;
  --w: 22px;
  --h: 2px;
  --gap: 7px;

  position: relative;
  display: grid;
  place-items: center;

  width: var(--btn);
  height: var(--btn);

  padding: 0 !important;
  border-radius: 999px;

  /* état par défaut */
  background: transparent;
  color: var(--orange-bti);

  line-height: 0;
  text-decoration: none;
}

/* Masque le texte (conserve accessibilité) */
.uicore-nav-menu .uicore-menu > li.burger > a .ui-menu-item-wrapper{
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* 2) Dessine les 3 barres (milieu = background, haut/bas = pseudo-éléments) */
.uicore-nav-menu .uicore-menu > li.burger > a::before,
.uicore-nav-menu .uicore-menu > li.burger > a::after{
  content: "";
  position: absolute;
  width: var(--w);
  height: var(--h);
  background: currentColor;
  border-radius: 999px;
  left: 50%;
  transform: translateX(-50%);
}

.uicore-nav-menu .uicore-menu > li.burger > a::before{
  top: calc(50% - var(--gap));
}
.uicore-nav-menu .uicore-menu > li.burger > a::after{
  top: calc(50% + var(--gap));
}

/* barre du milieu via background sur le lien */
.uicore-nav-menu .uicore-menu > li.burger > a{
  background-image: linear-gradient(currentColor, currentColor);
  background-repeat: no-repeat;
  background-size: var(--w) var(--h);
  background-position: 50% 50%;
}

/* Transitions (douces) */
@media (prefers-reduced-motion: no-preference){
  .uicore-nav-menu .uicore-menu > li.burger > a{
    transition: background-color .2s ease, color .2s ease, background-size .2s ease;
  }
  .uicore-nav-menu .uicore-menu > li.burger > a::before,
  .uicore-nav-menu .uicore-menu > li.burger > a::after{
    transition: transform .2s ease, top .2s ease;
  }
}

/* 3) Hover / Focus : pastille bleu + barres blanches */
@media (hover:hover){
  .uicore-nav-menu .uicore-menu > li.burger > a:hover,
  .uicore-nav-menu .uicore-menu > li.burger > a:focus-visible{
    background-color: var(--blue-bti);
    color: #fff;
  }
}

/* =========================================================
   4) ÉTAT OUVERT -> pastille orange + X blanc
   Déclencheurs possibles (garde celui qui marche chez toi):
   - li.burger.is-open
   - body.uicore-menu-open / body.mobile-menu-open
   - présence du wrapper mobile (fallback)
========================================================= */

/* Déclencheur A: classe directe sur l'item */
.uicore-nav-menu .uicore-menu > li.burger.is-open > a,

/* Déclencheur B: classe sur body (selon thème) */
body.uicore-menu-open .uicore-nav-menu .uicore-menu > li.burger > a,
body.mobile-menu-open .uicore-nav-menu .uicore-menu > li.burger > a,

/* Déclencheur C: si le wrapper mobile est présent/actif (fallback soft) */
body:has(.uicore-mobile-menu-wrapper) .uicore-nav-menu .uicore-menu > li.burger > a{
  background-color: var(--orange-bti);
  color: #fff;
}

/* Quand ouvert, on garde orange même au hover */
@media (hover:hover){
  .uicore-nav-menu .uicore-menu > li.burger.is-open > a:hover,
  body.uicore-menu-open .uicore-nav-menu .uicore-menu > li.burger > a:hover,
  body.mobile-menu-open .uicore-nav-menu .uicore-menu > li.burger > a:hover{
    background-color: var(--orange-bti);
    color: #fff;
  }
}

/* Transforme en X */
.uicore-nav-menu .uicore-menu > li.burger.is-open > a,
body.uicore-menu-open .uicore-nav-menu .uicore-menu > li.burger > a,
body.mobile-menu-open .uicore-nav-menu .uicore-menu > li.burger > a,
body:has(.uicore-mobile-menu-wrapper) .uicore-nav-menu .uicore-menu > li.burger > a{
  background-size: 0 0; /* cache la barre du milieu */
}

.uicore-nav-menu .uicore-menu > li.burger.is-open > a::before,
body.uicore-menu-open .uicore-nav-menu .uicore-menu > li.burger > a::before,
body.mobile-menu-open .uicore-nav-menu .uicore-menu > li.burger > a::before,
body:has(.uicore-mobile-menu-wrapper) .uicore-nav-menu .uicore-menu > li.burger > a::before{
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}

.uicore-nav-menu .uicore-menu > li.burger.is-open > a::after,
body.uicore-menu-open .uicore-nav-menu .uicore-menu > li.burger > a::after,
body.mobile-menu-open .uicore-nav-menu .uicore-menu > li.burger > a::after,
body:has(.uicore-mobile-menu-wrapper) .uicore-nav-menu .uicore-menu > li.burger > a::after{
  top: 50%;
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}

/* =========================================================
   MOBILE — corrige l'affichage des sections Produits et Marchés
   (image + titre bien alignés, titres longs qui cassent proprement)
========================================================= */
@media (max-width: 1024px){

  /* Lien parent de chaque item */
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-produits .sub-menu > li > a,
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-secteurs .sub-menu > li > a{
    display: grid !important;
    grid-template-columns: 110px minmax(0, 1fr) !important;
    align-items: center !important;
    column-gap: 16px !important;
    row-gap: 0 !important;
    min-width: 0 !important;
    padding: 16px 56px 16px 0 !important; /* laisse l'espace au chevron à droite */
  }

  /* Titre */
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-produits .sub-menu > li > a > span.ui-menu-item-wrapper,
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-secteurs .sub-menu > li > a > span.ui-menu-item-wrapper{
    display: block !important;
    min-width: 0 !important;
    width: 100% !important;
    margin: 0 !important;
    padding: 0 !important;
    white-space: normal !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
    line-height: 1.2 !important;
    text-align: left !important;
  }

  /* Images Produits */
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-produits .sub-menu > li > a > img.ui-menu-img{
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    object-fit: contain !important;
    object-position: center !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Images Marchés */
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-secteurs .sub-menu > li > a > img.ui-menu-img{
    width: 110px !important;
    height: 110px !important;
    min-width: 110px !important;
    max-width: 110px !important;
    object-fit: cover !important;
    object-position: center !important;
    border-radius: 18px !important;
    display: block !important;
    margin: 0 !important;
  }

  /* Chaque item peut rétrécir correctement */
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-produits .sub-menu > li,
  .uicore-mobile-menu-wrapper .uicore-menu > li.mm-preset-secteurs .sub-menu > li{
    min-width: 0 !important;
  }
}

@media (max-width: 1024px){

  /* Ajustement alignement TITRE vs IMAGE — Marchés seulement */
  .uicore-mobile-menu-wrapper 
  .uicore-menu > li.mm-preset-secteurs 
  .sub-menu > li > a{
    grid-template-columns: 110px 1fr !important;
    column-gap: 12px !important; /* légèrement réduit pour alignement visuel */
  }

  .uicore-mobile-menu-wrapper 
  .uicore-menu > li.mm-preset-secteurs 
  .sub-menu > li > a > span.ui-menu-item-wrapper{
    margin-left: -2px !important; /* micro-alignement visuel */
  }

}

@media (min-width: 1025px) and (hover:hover){

  /* Zone tampon invisible entre l'item parent et le mega menu */
  .uicore-nav-menu .uicore-menu > li.uicore-simple-megamenu{
    position: relative;
  }

  .uicore-nav-menu .uicore-menu > li.uicore-simple-megamenu::after{
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 100%;
    height: 24px; /* ajuste entre 16px et 32px au besoin */
    background: transparent;
  }
}