nav {font-size: 16px;}
nav ul.desktop-menu {list-style: none; display: flex; align-items: center; gap: 29px; text-align: center; line-height: 1.3; position: relative;}
nav a {-webkit-tap-highlight-color: transparent; text-decoration: none; text-transform: uppercase; color: var(--text-color); font-weight: 500; transition: color 0.3s; padding: 1rem 0;}
nav a:hover {color: var(--primary-color);}
nav a.contact {display: inline-block; background-color: var(--primary-color); color: white; padding: 0 0.6rem; line-height: 2.4rem; border-radius: 4px;}
nav a.contact:hover {background-color: var(--secondary-color); transition: 0.3s;}
nav a.tel {display: inline-flex; font-size: 1.1rem; font-weight: 600; border: 1px solid var(--primary-color); padding: 0 0.6rem; line-height: 2.4rem; border-radius: 4px; position: relative; align-items: center; gap: 0.5rem;}
nav a.tel::before {content: ''; display: inline-block; width: 1.3em; height: 1.3em; background-image: url('/img/telephone1.svg'); background-size: contain; background-repeat: no-repeat; background-position: center; flex-shrink: 0;}

nav ul li a .dropdown-icon {vertical-align: -4px; padding-left: 0px;}

nav ul ul {position:absolute;left:-9999px; top: 45px; display: block; overflow: hidden; border-top: 3px solid var(--primary-color); background-color: white; box-shadow: rgba(0, 0, 0, .20) 0 3px 5px; border-radius: 3px;}
nav li:hover > ul{left:auto}
nav ul ul li {text-align: left;}
nav ul ul li a {display: inline-block; padding: 0.6rem 0.9rem;}


/* Burger et menu mobile */
.menu-btn {
  display:none;
  font-size:28px;
  background:none;
  border:none;
  cursor:pointer;
  z-index:1100;
  position:relative;
  -webkit-tap-highlight-color: transparent;
}

.toggle-sub {display: none;}

#menu-button-croix {display: none;}

/* Mobile */
@media screen and (max-width:1024px) {
	
	nav ul ul {position: relative;left:auto; top: 8px;}
	.toggle-sub {display: inline;}
	.dropdown-icon {display: none;}
	
	nav a.contact {padding: 0 0.9rem;}

	nav ul ul {box-shadow: none; background-color: var(--light-bg);}
	
	#menu-button-croix {
	    position: absolute;
	    top: 10px;
	    right: 10px;
	}

	/* Quand le menu est actif, la croix se place à droite du menu */
	#menu.active + #menu-button-croix {
	    right: 10px;            /* à droite du menu ouvert */
	}

  /* Burger visible */
  .menu-btn { 
      display:block; 
      font-size:28px; 
      background:none; 
      border:none; 
      cursor:pointer; 
      z-index:1100; 
      position:relative; 
  }

  /* Menu mobile */
  #menu {
      display:flex;
      flex-direction:column;
      position:fixed;
      top:0;
      left:-260px;
      width:260px;
      height:100%;
      background:white;
      padding:30px;
      gap:23px;
      transition:left 0.3s ease;
      z-index:1000;
      border-top: 4px solid var(--primary-color);
  }
  #menu.active { left:0; box-shadow: 0 0 12px rgba(0, 0, 0, 0.08); }

  /* Sous-menu mobile */
  #menu li.has-sub > ul {
      max-height:0;
      overflow:hidden;
      transition: max-height 0.3s ease;
      flex-direction:column;
      list-style-type: none;
      text-align: center;
  }
	
	nav ul ul {border: none;}
	nav ul ul li {text-align: center;}

  #menu li.has-sub.open > ul {
      max-height:1000px; /* assez grand pour tout le contenu */
  }

  /* + / - toggle */
  .toggle-sub {
      font-weight:bold;
      cursor:pointer;
      margin-left:5px;
  }

  #menu li.has-sub.open > a .toggle-sub {
      content: "-";
  }

  /* Masquer menu desktop horizontal */
  nav ul.desktop-menu { display:none; }
  
  nav ul ul li a {width: 220px;}
}