/* Réinitialisation */

* {

  margin: 0;

  padding: 0;

  box-sizing: border-box;

}

body {

  font-family: Arial, sans-serif;

  background: #f4f4f4;

}



/* Conteneur */

.container2 {

  width: 100%;

  margin: 0 auto;
	transition: all ease-in-out .5s;
}



/* Nav */

nav#main-navigation {

  /* background:#333;  */

}


/* Par défaut : cacher tous les sous‑menus */

.sub-menu-wrapper {

  display: none;

  margin-top: -10px;

box-shadow: 0px 0px 20px rgb(0 26 51 / 9%);

}



/* ========== DESKTOP (≥769px) ========== */

@media (min-width: 1080px) {

  #main-menu {

    list-style: none;

    display: flex;

    padding: 10px 20px;

  }

  #main-menu > li {

    margin-right: 40px;

  }

  #main-menu > li a {

    color: #fff;

    text-decoration: none;

    padding: 10px 15px;

    display: block;
	  	  font-size: 15px;
	  letter-spacing: 1px;
	  font-family: 'Poppins-Light';

  }



  .sub-menu-wrapper {

    position: absolute;

    top: 100%;

    left: 0;

    background: #fff;

    white-space: nowrap;

    z-index: 9999;

  }

  /* Hover pour desktop */

  .has-submenu:hover .sub-menu-wrapper,

  .has-submenu .sub-menu-wrapper:hover {

    display: block;

    border-radius: 5px;

  }



  .sub-menu {

    list-style: none;

    list-style-type: none;

    display: flex;

    padding: 10px 20px;

    list-style-type: none !important;

  }

  /* .sub-menu li {

    margin-right: 30px;

  } */

  .sub-menu li a {

    list-style: none;

    color: #fff;

    text-decoration: none;

    padding: 10px 15px;

    display: block;

    color: #001a33 !important;

  }

  /* Effet hover */

  #main-menu a:hover,

  .sub-menu a:hover {

    /* background:#555; */

  }

}





/* ========== MOBILE (≤768px) ========== */

@media (max-width: 1079px) {

  #main-menu {

    list-style: none;

    display: flex;

    flex-direction: column;

    padding: 10px;

  }

  #main-menu > li {

    position: relative;

    border-bottom: 1px solid #444;

  }

  #main-menu > li a {

    color: #fff;

    text-decoration: none;

    padding: 10px;

    display: block;

  }



  /* Chevron */

  .has-submenu > a::after {

    content: "▼";

    position: absolute;

    right: 20px;

    transition: transform 0.2s;

  }

  .has-submenu.open > a::after {

    transform: rotate(-180deg);

  }



  .sub-menu-wrapper {

    position: static;

    width: 100%;

    background: #fff;

  }

  .sub-menu {

    list-style: none;

    list-style-type: none !important;

    display: flex;

    flex-direction: column;

  }

  .sub-menu li {

    border-bottom: 1px solid #555;

  }

  .sub-menu li a {

    padding: 10px 20px;

  }



  /* Afficher quand 'open' */

  .has-submenu.open .sub-menu-wrapper {

    display: block;

    background-color: unset;

  }

}



/* Contenu */

.content {

  padding: 20px;

}





.container2 {



  height: 110px;

}



#main-navigation {

  display: flex;

  justify-content: space-between;

  /* logo à gauche, menu à droite */

  align-items: center;

  /* tout est centré verticalement */

  padding: 0 20px;

  /* un peu de marge interne si besoin */



  text-transform: uppercase;

}



/* 2) Rends les items de menu horizontaux */

#main-navigation #main-menu {

  display: flex;

  margin: 0;

  padding: 0;

  list-style: none;

}



/* 3) Optionnel : espacement entre les liens */

#main-navigation #main-menu>li {

  margin-left: 30px;

}







/* 4) Controle la taille max du logo pour qu’il ne déforme pas la nav */

#main-navigation .logo-container img {

  max-height: 80px;

  /* adapte la valeur à ta hauteur souhaitée */

  width: auto;

}



#main-navigation .logo-container a {

  display: block;

}





.menu-toggle {

  display: none;

}





#main-navigation {

  top: 0px;

  /* position de départ */

  z-index: 100;

  /* en-dessous du sticky */

  transition: all 0.3s ease;

  margin: auto;





}



#main-navigation #logoPellet {

  filter: brightness(0) invert(1);

}



/* 2) Mobile (<768px) : afficher burger, masquer menu */

@media (max-width: 1079px) {

 /* Passe la nav en colonne : logo au-dessus, menu en dessous */

 #main-navigation {

      flex-direction: column;

      align-items: flex-start;

      /* logo collé à gauche */

      padding: 10px 20px;

      /* ajuster si besoin */

  }



  /* Logo réduit à 40px de haut */

  #main-navigation .logo-container img {

      max-height: 40px;

      width: auto;

  }



  /* Menu full width, items en colonne ou toggle selon ton JS */

  #main-navigation #main-menu {

      flex-direction: column;

      width: 100%;

      margin-top: 10px;

      /* espace entre logo et menu */

  }



  /* Si tu veux que chaque lien prenne toute la largeur */

  #main-navigation #main-menu>li {

      width: 100%;

      margin: 0;

  }



  /* Et, si tu utilises un toggle JS, cache le menu par défaut */

  /* #main-navigation #main-menu { display: none; } */

  /* #main-navigation .menu-toggle.active + #main-menu { display: flex; } */



  body.menuOpen {

      overflow: hidden;

      height: 100vh; 

  }

  html.menuOpen{

      overflow: hidden;

  }



  #main-navigation {

      position: relative;

      justify-content: flex-start;

      padding: 20px 40px;

  }



  .container2 {

      height: 90px;

  }



  /* Burger aligné à droite */

  .menu-toggle {

      display: flex;

      flex-direction: column;

      justify-content: space-between;

      width: 24px;

      height: 20px;

      background: none;

      border: none;

      cursor: pointer;

      margin-left: auto;

      /* pousse à l’extrême droite */

      padding: 0;

      position: absolute;

      right: 30px;

      top: 30px;

  }



  .menu-toggle span {

      display: block;

      height: 2px;

      background: #fff;

      border-radius: 1px;

      transition: transform 0.3s ease, opacity 0.3s ease;

  }



  /* Menu caché */

  #main-navigation #main-menu {

      display: none;

      flex-direction: column;

      width: 100%;

      margin-top: 10px;

  }



  /* Quand on a la classe .active sur nav, on affiche le menu */

  #main-navigation.active #main-menu {

      display: flex;

  }



  #main-navigation.active {

      height: 100vh;

      background-color: #001a33;

  }



  /* Transformation burger → croix */

  #menu-toggle.active span:nth-child(1) {

      transform: translateY(9px) rotate(45deg);

  }



  #menu-toggle.active span:nth-child(2) {

      opacity: 0;

  }



  #menu-toggle.active span:nth-child(3) {

      transform: translateY(-9px) rotate(-45deg);

  }

}



@media (min-width: 1080px) {



  .has-submenu>a:hover::after {



      content: ' ';

      position: absolute;

      width: 0;

      height: 0;

      bottom: 0px;

      border-style: solid;

      border-width: 0 15px 15px 15px;
	  	  box-shadow: 0px 0px 20px rgb(0 26 51 / 9%);

      border-color: transparent transparent #fff transparent;


  }



  #left-area ul,

  .entry-content ul,

  .et-l--body ul,

  .et-l--footer ul,

  .et-l--header ul {

      padding: 10px 0 10px 0;

  }



  .container2 {

      position: absolute;

      height: 100px;

      top: 0px;

  }



  .sub-menu>li:not(:last-child) {

      border-right: 1px solid #ccc;

  }



  #main-menu>li:last-child a {

      height: 50px !important;

      background-color: #F2B705;

      color: #001a33;

      border-radius: 5px;

  }
	#main-navigation.sticky #main-menu>li:last-child a{
		border-radius: 0px;
		height: 100% !important;

	}


  #container2.sticky {

      background-color: #fff;

      position: fixed;
    
	  box-shadow: 0px 0px 20px rgb(0 26 51 / 9%);
	  transition: all ease-in-out .5s;

  }



  #main-navigation {

      width: 100%;

      max-width: 1640px;

      left: 50%;

      position: absolute;

      transform: translate(-50%, 0);

  }



  /* Barre fixe en haut */

  #main-navigation.sticky #logoPellet {

      filter: unset;

  }



  #main-navigation.sticky #main-menu>li a {

      color: #001a33;

  }



  #main-navigation #main-menu>li {

      display: flex;

      /* active flex sur chaque li */

      align-items: center;

      /* centre verticalement le contenu */

      margin-left: 30px;

      height: 100px;

      margin-right: 0.5em;

      margin-left: 0.5em;

  }





  #main-navigation #main-menu>li>a {

      display: block;

      width: 100%;

      height: 107px;

      display: flex;

      /* active le module flex */

      align-items: center;

      /* centre verticalement */

      justify-content: center;

      /* (optionnel) centre aussi horizontalement */

      height: 100px;

      width: 100%;

      text-align: center;

	  transition: letter-spacing ease-in-out .2s;
      /* facultatif : text-align si tu veux centrer horizontalement aussi */

      /* text-align: center; */

  }
#main-navigation #main-menu>li>a:hover {
    letter-spacing: 2px;
    transition: letter-spacing ease-in-out .2s;
}


  #main-navigation.sticky {

      top: 0;

      left: 50%;

      right: 0;

      z-index: 1000;

      /* box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); */

      transition: all 0.3s ease;

      margin: auto;

  }



  /* Compensation du flux */

  body.sticky-offset {

      padding-top: 80px;

      /* ajustez à la hauteur de votre nav */

  }

}