.header{
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  z-index: 50;

  border-bottom:1px solid var(--line);
  background: rgba(247,248,252,.75);
  backdrop-filter: blur(14px);

  transition: transform .25s ease;
}
/* État caché */
.header--hidden{
  transform: translateY(-100%);
}
.header__inner{
  height:72px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
}

/* Logo */
.logo{display:flex; align-items:center; gap:10px; width: 120px;}
.logo__mark{
  width:14px; height:14px; border-radius:4px;
  background: linear-gradient(135deg, var(--accent), var(--accent2));
  box-shadow: 0 10px 30px rgba(124,92,255,.25);
}
.logo__text{font-weight:800; letter-spacing:.08em; font-size:12px; opacity:.95}

/* Nav */
.nav{display:flex; align-items:center; gap:18px}

/* Important : le groupe du dropdown doit être relatif */
.nav__group{ position:relative; display:flex; align-items:center; }

/* Liens & trigger (Expertises) = même rendu */
.nav__link,
.nav__trigger{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;

  color: var(--text);
  font-weight: 700 !important;
  opacity: .85;
  cursor: pointer;
  transition: opacity .2s ease;
}

.nav__link:hover,
.nav__trigger:hover{ opacity:1; }

.nav__chev{opacity:.8; margin-left:6px}


/* Dropdown – version claire lisible */
.dropdown{
  position:absolute;
  left:0;
  top: calc(100% + 10px);
  width:340px;
  padding:10px;

  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);

  border:1px solid rgba(11,13,18,.12);
  border-radius:18px;
  box-shadow: 0 20px 45px rgba(10,14,25,.18);

  display:none;
  z-index:60;
  font-weight: 700 !important;
}

.dropdown__item{
  display:block;
  padding:14px;
  border-radius:14px;
  border:1px solid transparent;
  transition: background .15s ease, border-color .15s ease;
}

.dropdown__item:hover{
  background: rgba(124,92,255,.08);
  border-color: rgba(124,92,255,.18);
}

.dropdown__title{
  display:block;
  font-weight:700;
  color: var(--text);
}

.dropdown__desc{
  display:block;
  font-size:13px;
  color: var(--muted);
  margin-top:4px;
}

/* Actions (boutons à droite) */
.header__actions{
  display:flex;
  align-items:center;
  gap:14px;
}

/* Base commune pour tous les boutons (dans le header uniquement) */
.header__actions .btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  gap:10px;

  height:44px;
  padding:0 18px;
  border-radius:999px;

  font-size:14px;
  font-weight:500;
  line-height:1;
  white-space:nowrap;
}

/* Icône dans le bouton */
.header__actions .btn__icon{
  width:18px;
  height:18px;
  display:block;
  flex:0 0 18px;
}

/* Burger */
.burger{
  display:none;
  width:44px; height:44px;
  border-radius:14px;
  border:1px solid var(--line);
  background: rgba(255,255,255,.05);
}
.burger span{
  display:block;
  width:18px; height:2px;
  background: rgba(244,246,250,.85);
  margin:5px auto;
  border-radius:2px;
}

/* Mobile */
.mobile{
  display:none;
  border-top:1px solid rgba(255,255,255,.06);
  background: rgba(11,13,18,.88);
}
.mobile__inner{
  padding:18px 0 22px;
  display:grid; gap:12px;
}
.mobile__inner a{
  padding:12px 14px;
  border-radius:14px;
  background: rgba(255,255,255,.04);
  border:1px solid rgba(255,255,255,.06);
}
.mobile__cta{display:flex; gap:10px; flex-wrap:wrap; margin-top:6px}

@media (max-width:980px){
  .nav{display:none}
  .burger{display:inline-flex; align-items:center; justify-content:center}
}
/* =========================
   NAV + DROPDOWN (FIX)
   ========================= */

/* Nav */
.nav{display:flex; align-items:center; gap:18px}

/* Groupe dropdown */
.nav__group{
  position:relative;
  display:flex;
  align-items:center;
}
.nav__trigger { 
  font: inherit; 
}

.header__actions .btn {
  font: inherit;
}
/* Trigger = lien visuel (comme les autres) + chevron à côté */
.nav__trigger{
  appearance:none;
  background:transparent;
  border:0;
  padding:0;
  margin:0;

  display:inline-flex;          /* <- IMPORTANT : chevron à côté */
  align-items:center;
  gap:8px;

  color: var(--text);
  font-weight: 500;
  opacity:.85;
  cursor:pointer;
  line-height:1;               /* évite le passage à la ligne */
  white-space:nowrap;
  transition: opacity .2s ease;
}

.nav__link{
  color: var(--text);
  font-weight: 500;
  opacity:.85;
  transition: opacity .2s ease;
}

.nav__link:hover,
.nav__trigger:hover{ opacity:1; }

/* Chevron collé et jamais en dessous */
.nav__chev{
  display:inline-flex;          /* <- IMPORTANT */
  align-items:center;
  justify-content:center;
  width:12px;
  height:12px;
  opacity:.8;
  transform: translateY(1px);
  transition: transform .18s ease, opacity .18s ease;
  pointer-events:none;          /* le hover se fait sur le trigger */
}


/* ✅ FIX: “pont” invisible pour supprimer le trou de hover */
.nav__group::after{
  content:"";
  position:absolute;
  left:0;
  top:100%;
  width:340px;                  /* même largeur que le dropdown */
  height:12px;                  /* comble l’espace entre trigger et dropdown */
}

/* Hover: s’ouvre et reste ouvert quand tu vas dessus */
.nav__group:hover .dropdown{
  display:block;
}

/* Clic (JS): garde ouvert */
.nav__group.is-open .dropdown,
.dropdown.is-open{
  display:block;
}

/* Chevron tourne quand ouvert */
.nav__group:hover .nav__chev,
.nav__group.is-open .nav__chev{
  opacity:1;
  transform: translateY(1px) rotate(180deg);
}
