/******* Do not edit this file *******
Simple Custom CSS and JS - by Silkypress.com
Saved: Apr 29 2026 | 18:09:04 */
/* =========================================================
   UiCore MegaMenu — Colonnes + Images (SANS ID)
   Objectifs :
   - Desktop: colonnes même hauteur (séparateurs verticaux égaux)
   - Mobile/Burger: hauteur FIT + items compacts (pas de gros espaces)
   - IMPORTANT: reset des min-height/transform inline de UiCore (ui-custom-tab)
========================================================= */


/* =========================================================
   1) VARIABLES (valeurs par défaut)
========================================================= */

.uicore-navbar li.uicore-simple-megamenu{
  --mm-img-h: 170px;      /* hauteur zone image (desktop) */
  --mm-img-gap: 14px;     /* espace image -> titre */
  --mm-img-maxw: 100%;    /* max largeur image (mode contain) */
  --mm-mask-r: 26px;      /* rayon mask (preset secteurs) */
}


/* =========================================================
   2) PRESETS (Desktop) — à mettre sur le <li> NIVEAU 1
   Ex: <li class="... uicore-simple-megamenu mm-preset-produits">
========================================================= */

.uicore-navbar li.uicore-simple-megamenu.mm-preset-produits{ --mm-img-h: 210px; }
.uicore-navbar li.uicore-simple-megamenu.mm-preset-marches { --mm-img-h: 190px; }
.uicore-navbar li.uicore-simple-megamenu.mm-preset-tech    { --mm-img-h: 130px; --mm-img-maxw: 240px; }
.uicore-navbar li.uicore-simple-megamenu.mm-preset-secteurs{ --mm-img-h: 160px; }


/* =========================================================
   3) RESPONSIVE — Tablette (tokens)
========================================================= */

@media (max-width: 1024px){
  .uicore-navbar li.uicore-simple-megamenu{ --mm-img-h: 150px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-produits{ --mm-img-h: 190px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-marches { --mm-img-h: 170px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-tech    { --mm-img-h: 120px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-secteurs{ --mm-img-h: 140px; }
}


/* =========================================================
   4) RESPONSIVE — Mobile (tokens)
========================================================= */

@media (max-width: 767px){
  .uicore-navbar li.uicore-simple-megamenu{
    --mm-img-h: 120px;
    --mm-img-gap: 10px;
  }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-produits{ --mm-img-h: 160px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-marches { --mm-img-h: 150px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-tech    { --mm-img-h: 110px; }
  .uicore-navbar li.uicore-simple-megamenu.mm-preset-secteurs{ --mm-img-h: 130px; }
}


/* =========================================================
   5) DESKTOP (>= 1025px) — Colonnes égales
   IMPORTANT : on ne touche pas au display des panneaux
========================================================= */

@media (min-width: 1025px){

  .uicore-navbar li.uicore-simple-megamenu > ul.sub-menu{
    align-items: stretch !important;
  }

  .uicore-navbar li.uicore-simple-megamenu > ul.sub-menu > li{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
  }

  .uicore-navbar li.uicore-simple-megamenu > ul.sub-menu > li > a{
    width: 100% !important;
    text-align: left !important;
  }
}


/* =========================================================
   6) MOBILE / BURGER — Fit + compact + reset UiCore inline
   NOTE: On scope par le wrapper mobile UiCore (plus fiable qu'un media query)
========================================================= */

/* --- A) Reset du “gros espace” causé par UiCore (inline) --- */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper a.ui-custom-tab{
  min-height: 0 !important;      /* override min-height inline */
  height: auto !important;
  transform: none !important;     /* override translate3d inline */
}

/* (au cas où UiCore met min-height ailleurs) */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a{
  min-height: 0 !important;
  height: auto !important;
}

/* --- B) On annule le “stretch” en mobile --- */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu{
  align-items: flex-start !important;
}

.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li{
  display: block !important;
  height: auto !important;
  min-height: 0 !important;
}

/* --- C) Layout “ligne” compact: (thumb | label | chevron) --- */
/* Base (même sans image) */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a{
  display: grid !important;
  grid-template-columns: 1fr auto !important; /* sans image */
  column-gap: 14px !important;
  row-gap: 0 !important;
  align-items: center !important;

  width: 100% !important;
  text-align: left !important;

  padding: 12px 16px !important;
}

/* Variante AVEC image */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a:has(> img),
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li.mm-has-img > a{
  grid-template-columns: 56px 1fr auto !important;
}

/* Placement des éléments */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a > img{
  grid-column: 1;
  width: auto !important;
  height: 44px !important;       /* ajuste 40–52px si tu veux */
  max-width: 56px !important;

  object-fit: contain !important;
  object-position: center !important;

  margin: 0 !important;
  justify-self: start !important;
  align-self: center !important;
  display: block !important;
}

/* Texte */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a .ui-menu-item-wrapper,
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a > span{
  text-align: left !important;
  justify-self: start !important;
}

/* Si image présente, le texte est en colonne 2 */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a:has(> img) .ui-menu-item-wrapper,
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li.mm-has-img > a .ui-menu-item-wrapper{
  grid-column: 2;
}

/* Chevron / indicateur à droite */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a::after{
  grid-column: -1;
  justify-self: end !important;
}

.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a .sub-arrow,
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a .uicore-submenu-indicator,
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li > a .uicore-submenu-icon{
  justify-self: end !important;
}

/* Optionnel: resserrer un peu l’espace vertical entre items */
.uicore-navigation-wrapper.uicore-content-mobile-menu-wrapper
li.uicore-simple-megamenu > ul.sub-menu > li{
  margin: 0 !important;
}


/* =========================================================
   6) LAYOUT "CARTE" : image AU-DESSUS du titre (par défaut)
   -> On n’applique le grid QUE si une image est présente.
   -> :has() (navigateurs modernes) + fallback .mm-has-img
========================================================= */

.uicore-navbar li.uicore-simple-megamenu > ul.sub-menu > li > a:has(> img),
.uicore-navbar li.uicore-simple-megamenu > ul.sub-menu > li.mm-has-img > a{
  display: grid !important;

  /* verrouille en vertical (évite image à gauche / texte à droite) */
  grid-auto-flow: row !important;
  grid-template-columns: 1fr !important;
  grid-template-rows: var(--mm-img-h) auto !important;

  row-gap: var(--mm-img-gap);
  align-content: start;

  /* texte à gauche */
  justify-items: start !important;
  align-items: start !important;
  text-align: left !important;
}

/* Le wrapper texte UiCore : force à gauche (évite align auto/margin auto) */
.uicore-navbar li.uicore-simple-megamenu > ul.sub-menu > li > a > .ui-menu-item-wrapper{
  justify-self: start !important;
  text-align: left !important;
  margin: 0 !important;
  width: 100%;
}

/* Image (mode CONTAIN) : non déformée, centrée, width auto */
.uicore-navbar li.uicore-simple-megamenu > ul.sub-menu > li > a > img{
  max-width: min(var(--mm-img-maxw), 100%) !important;
  max-height: 100% !important;

  width: auto !important;
  height: auto !important;

  object-fit: contain !important;
  object-position: center !important;

  justify-self: center !important;
  align-self: center !important;

  display: block !important;
  margin: 0 !important;
}


/* =========================================================
   7) OPTION : image SOUS le titre (mm-img-bottom sur N1)
========================================================= */

.uicore-navbar li.uicore-simple-megamenu.mm-img-bottom > ul.sub-menu > li > a:has(> img),
.uicore-navbar li.uicore-simple-megamenu.mm-img-bottom > ul.sub-menu > li.mm-has-img > a{
  grid-template-rows: auto var(--mm-img-h) !important;
}

.uicore-navbar li.uicore-simple-megamenu.mm-img-bottom > ul.sub-menu > li > a > img{
  grid-row: 2;
}


/* =========================================================
   8) PRESET SECTEURS : cover + mask
   - l'image remplit la zone (crop OK, pas de déformation)
========================================================= */

.uicore-navbar li.uicore-simple-megamenu.mm-preset-secteurs > ul.sub-menu > li > a:has(> img) > img,
.uicore-navbar li.uicore-simple-megamenu.mm-preset-secteurs > ul.sub-menu > li.mm-has-img > a > img{
  width: 100% !important;
  height: 100% !important;

  max-width: none !important;
  max-height: none !important;

  object-fit: cover !important;
  object-position: center !important;

  border-radius: var(--mm-mask-r) !important;

  justify-self: stretch !important;
  align-self: stretch !important;
}


/* =========================================================
   9) SÉCURITÉ : empêche "menu accessible fermé" (desktop hover)
   - ne change PAS display (donc ne casse pas UiCore)
   - bloque click/tab quand non ouvert
========================================================= */

@media (min-width: 1025px) and (hover:hover){
  .uicore-navbar li.uicore-simple-megamenu:not(:hover):not(:focus-within) > ul.sub-menu{
    visibility: hidden !important;
    opacity: 0 !important;
    pointer-events: none !important;
  }

  .uicore-navbar li.uicore-simple-megamenu:hover > ul.sub-menu,
  .uicore-navbar li.uicore-simple-megamenu:focus-within > ul.sub-menu{
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
  }
}