/* ================= HEADER ================= */
    .header{
      background: linear-gradient(to right, var(--noir), var(--gris-fonce));
      padding: 1rem 2rem;
      border-bottom: 3px solid var(--rouge);
      display:flex;
      justify-content:space-between;
      align-items:center;
      position:relative;
      z-index: 1000;
    }

    .logo{
      display:flex;
      align-items:center;
      gap:10px;
      z-index:1101;
      flex-wrap: wrap;
    }

    .logo-title-container{ display:flex; align-items:center; gap:10px; }

    .logo-image{
      width: 46px;
      height: 46px;
      border-radius: 50%;
      object-fit: cover;
      border: 2px solid var(--rouge);
    }

    .logo-text{
      font-size:1.8rem;
      font-weight:bold;
      color:var(--rouge);
      text-transform:uppercase;
      letter-spacing:2px;
    }

    /* ================= HAMBURGER ================= */
    .hamburger{
      display:none;
      flex-direction:column;
      justify-content:space-between;
      width: 34px;
      height: 26px;
      cursor:pointer;
      background:transparent;
      border:none;
      z-index: 1200;
    }

    .hamburger-line{
      width:100%;
      height:3px;
      background: var(--blanc);
      border-radius:2px;
      transition: all .3s ease;
    }

    .hamburger.active .hamburger-line:nth-child(1){ transform: rotate(45deg) translate(7px, 7px); }
    .hamburger.active .hamburger-line:nth-child(2){ opacity:0; }
    .hamburger.active .hamburger-line:nth-child(3){ transform: rotate(-45deg) translate(7px, -7px); }

    /* ================= OVERLAY ================= */
    .menu-overlay{
      display:none;
      position:fixed;
      inset:0;
      background: rgba(0,0,0,.85);
      z-index: 1150;
      opacity:0;
      transition: opacity .25s ease;
    }
    .menu-overlay.active{
      display:block;
      opacity:1;
    }

    /* ================= NAV DESKTOP ================= */
    .nav-menu{
      display:flex;
      gap:1rem;
      align-items:center;
    }

    .nav-link{
      color:var(--blanc);
      text-decoration:none;
      padding:.5rem 1rem;
      border-radius:6px;
      transition: .25s;
      position:relative;
      display:flex;
      align-items:center;
      justify-content:space-between;
      gap: 10px;
      user-select:none;
    }

    .nav-link:hover{ background: var(--rouge); color: var(--noir); }

    /* ================= DROPDOWN (DESKTOP) ================= */
    .dropdown {
      position: relative;
  }
  
  .dropdown-content {
      display: none;
      position: absolute;
      top: 100%;
      left: 0;
      background: linear-gradient(135deg, var(--gris-fonce), var(--noir));
      min-width: 250px;
      box-shadow: 0 15px 30px rgba(0, 0, 0, 0.5);
      border: 1px solid var(--rouge);
      border-radius: 10px;
      z-index: 1000;
      opacity: 0;
      transform: translateY(-10px);
      transition: opacity 0.3s, transform 0.3s;
      padding: 10px 0;
  }
  
  .dropdown:hover .dropdown-content {
      display: block;
      opacity: 1;
      transform: translateY(0);
  }
  
  .dropdown-content a {
      color: var(--blanc);
      padding: 1rem 1.5rem;
      text-decoration: none;
      display: block;
      border-bottom: 1px solid rgba(255, 255, 255, 0.05);
      transition: all 0.3s ease;
      font-weight: 500;
      position: relative;
      overflow: hidden;
  }
  
  .dropdown-content a::before {
      content: '→';
      position: absolute;
      left: 0;
      opacity: 0;
      transform: translateX(-10px);
      transition: all 0.3s ease;
  }
  
  .dropdown-content a:hover {
      background: linear-gradient(90deg, rgba(211, 47, 47, 0.2), transparent);
      color: var(--or);
      padding-left: 2.5rem;
  }
  
  .dropdown-content a:hover::before {
      opacity: 1;
      transform: translateX(10px);
  }
  
  .dropdown-toggle {
      display: flex;
      align-items: center;
      gap: 8px;
  }
  
  .dropdown-toggle::after {
      content: "▼";
      font-size: 0.7rem;
      transition: transform 0.3s;
  }
  
  .dropdown:hover .dropdown-toggle::after {
      transform: rotate(180deg);
  }

    @media (min-width: 769px){
      .dropdown:hover .dropdown-content{
        display: block;
      }
    }
    /* Chevron pour les toggles */
    .dropdown-toggle::after{
      content: "\f078";
      font-family: "Font Awesome 6 Free";
      font-weight: 900;
      font-size: .9rem;
      opacity: .9;
      transition: transform .25s ease;
    }
    .dropdown.active .dropdown-toggle::after{ transform: rotate(180deg); }