/* =========================================================
   FOND GLOBAL SITE — FORCE #F8F8F8 SUR TOUTES LES PAGES
   ========================================================= */

html,
body,
#wrapper,
.wrapper,
.page-content,
.content,
.main-content,
.container,
.container-fluid {
  background-color: #f8f8f8 !important;
}



/* =========================================================
   HEADER IMAGE (logo)
   ========================================================= */

p.header-image {
  text-align: center !important;
  margin: 0 auto !important;
}

p.header-image > img {
  width: 25% !important;
  max-width: 420px !important;
  height: auto !important;
  display: inline-block !important;
  border-radius: 10px !important;
}

/* =========================================================
   NAVIGATION — STYLE EVENT 2 (barre sombre DANS le container)
   ========================================================= */

/* 1) #menu : on garde la largeur container (PAS de 100vw) */
nav#menu {
  /* on annule les paddings bootstrap du markup (px-3 py-5...) */
  padding: 0 !important;
  margin: 0 !important;

  background: #1f2d3d !important;
  border: 0 !important;
  border-radius: 0 !important;

  /* IMPORTANT : on ne force plus la pleine largeur */
  width: auto !important;
  max-width: none !important;
  left: auto !important;
  transform: none !important;
  position: relative !important;
}

/* 2) UL : alignement à gauche (comme event 2) */
nav#menu > ul.menu {
  display: flex !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  align-items: center !important;

  gap: 0 !important;

  padding: 0 !important;
  margin: 0 !important;
  list-style: none !important;
}

/* 3) LI */
nav#menu > ul.menu > li {
  margin: 0 !important;
  padding: 0 !important;
}

/* 4) Liens */
nav#menu > ul.menu > li > a {
  display: block !important;

  padding: 16px 28px !important;
  margin: 0 !important;

  color: #ffffff !important;
  text-decoration: none !important;

  font-family: Arial, Helvetica, sans-serif !important;
  font-size: 18px !important;
  font-weight: 400 !important;
  text-transform: none !important;
  letter-spacing: 0 !important;

  border: 0 !important;
  background: transparent !important;

  transition: background-color 0.2s ease, color 0.2s ease !important;
}

/* 5) Hover */
nav#menu > ul.menu > li > a:hover,
nav#menu > ul.menu > li > a:focus {
  background: #24384c !important;
  color: #ffffff !important;
}

/* 6) Actif */
nav#menu > ul.menu > li.MainMenuItem > a,
nav#menu > ul.menu > li.active > a {
  background: #24384c !important;
  color: #ffffff !important;
}

/* 7) Neutraliser les décorations template */
nav#menu > ul.menu > li > a::before,
nav#menu > ul.menu > li > a::after {
  content: none !important;
  display: none !important;
}

/* 8) Hamburger */
.menu-trigger svg {
  fill: #ffffff !important;
}


header .head {
    padding: 0 0 0 0;
}


/* =========================================================
   MOBILE
   ========================================================= */
@media (max-width: 991px) {
  nav#menu {
    background: #1f2d3d !important;
  }

  nav#menu > ul.menu {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  nav#menu > ul.menu > li > a {
    width: 100% !important;
    padding: 16px 22px !important;
  }
}


.euromit-container {
    padding: 0 0px !important;
}

/* ===============================
   FIX MENU MOBILE ≤ 480px
   =============================== */
@media (max-width: 480px) {

  /* Conteneur menu */
  #menu {
    position: fixed;
    top: 0;
    left: 0;

    width: 100vw;
    height: 100vh;

    background: #2b495d; /* ou couleur charte */
    z-index: 10000;

    overflow-y: auto;

    /* caché par défaut */
    transform: translateX(-100%);
    transition: transform .3s ease;
  }

  /* Menu visible */
  body.show-menu #menu {
    transform: translateX(0);
  }

  /* Liste */
  #menu ul.menu {
    display: flex;
    flex-direction: column;
    gap: 12px;
  }

  #menu ul.menu li {
    display: block;
  }

  #menu ul.menu li a {
    display: block;
    padding: 12px 16px;
    color: #fff;
    font-size: 16px;
    text-align: left;
  }

  /* Bouton fermeture */
  #menu .close-menu {
    display: block;
    font-size: 28px;
    color: #fff;
  }

}
/* ===============================
   FIX MENU MOBILE ≤ 480px (override des !important desktop)
   =============================== */
@media (max-width: 480px) {

  nav#menu#menu{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;

    width: 100vw !important;
    height: 100vh !important;

    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;

    /* IMPORTANT : repasse au comportement overlay */
    transform: translateX(-100%) !important;
    transition: transform .3s ease !important;

    overflow-y: auto !important;

    /* au-dessus des backgrounds modales qui sont à 10000 :contentReference[oaicite:2]{index=2} */
    z-index: 10002 !important;

    background: #1f2d3d !important;
  }

  body.show-menu nav#menu#menu{
    transform: translateX(0) !important;
  }

  nav#menu#menu > ul.menu{
    display: flex !important;
    flex-direction: column !important;
    align-items: stretch !important;
    margin-top: 56px !important; /* laisse respirer le bouton close */
  }

  nav#menu#menu .close-menu{
    display: block !important;
    position: sticky !important;
    top: 0 !important;
    padding: 12px 0 !important;
    background: #1f2d3d !important;
    z-index: 1 !important;
  }
}