/* ═══════════════════════════════════════════════════════════════
   ATELIER ANGLE NOIR — la barre de navigation
   Trois défauts corrigés :
     · la ligne débordait, la réservation était coupée à droite ;
     · le chevron des menus déroulants passait à la ligne, ce qui
       décalait « Services » et « Estimer » vers le haut ;
     · le survol se contentait d'éclaircir le texte, sans élégance.
   Le libellé de recherche devient une loupe : cent trente pixels
   rendus à la ligne, et un geste plus net.
   ═══════════════════════════════════════════════════════════════ */

/* ── la ligne : trois blocs, aucun débordement ─────────────────── */
#nav .nav-inner{
  gap:clamp(.8rem,2vw,2rem);
  flex-wrap:nowrap;
  height:100%;
}
#nav .nav-logo{ flex:0 0 auto; white-space:nowrap; }
#nav .nav-cta{
  flex:0 0 auto; white-space:nowrap;
  display:inline-flex; align-items:center;
  line-height:1;
}
/* la rangée occupe toute la hauteur de la barre, quelle qu'elle soit :
   les pages n'ont pas toutes le même bandeau (72 px ou 64 px) */
#nav .nav-links{
  flex:0 1 auto; min-width:0;
  display:flex; align-items:stretch; align-self:stretch;
  gap:clamp(.85rem,1.75vw,2.1rem);
  flex-wrap:nowrap;
}

/* ── chaque entrée, la même boîte : les libellés s'alignent ────── */
#nav .nav-links > a,
#nav .nav-dropdown > a{
  position:relative;
  display:inline-flex; align-items:center;
  align-self:stretch;
  line-height:1;
  white-space:nowrap;
}

/* ── le chevron sort du flux : il ne peut plus passer à la ligne ── */
#nav .nav-dropdown{ display:flex; align-items:stretch; align-self:stretch; }
#nav .nav-dropdown > a{ padding-right:15px; }
#nav .nav-dropdown > a::after{
  position:absolute; right:0; top:50%;
  margin:0 !important;
  transform:translateY(-50%);
  transition:transform .3s cubic-bezier(.16,1,.3,1), border-top-color .2s;
}
#nav .nav-dropdown.open > a::after,
#nav .nav-dropdown:hover > a::after{
  border-top-color:#c8a96e;
}
#nav .nav-dropdown.open > a::after{ transform:translateY(-50%) rotate(180deg); }

/* ── le survol : un trait d'or qui naît du centre ──────────────── */
#nav .nav-links > a::before,
#nav .nav-dropdown > a::before{
  content:'';
  position:absolute; left:0; right:0;
  bottom:calc(50% - .95em);
  height:1px; background:#c8a96e;
  transform:scaleX(0); transform-origin:50% 50%;
  transition:transform .36s cubic-bezier(.16,1,.3,1);
}
#nav .nav-links > a:hover::before,
#nav .nav-dropdown:hover > a::before,
#nav .nav-links > a[aria-current="page"]::before,
#nav .nav-dropdown[data-ici] > a::before{ transform:scaleX(1); }

#nav .nav-links > a[aria-current="page"],
#nav .nav-dropdown[data-ici] > a{ color:#f5f2ec; }

/* ── la loupe remplace le mot ───────────────────────────────────── */
#nav .rc-decl{
  order:99;                      /* à droite des libellés, avant la réservation */
  margin-left:clamp(.3rem,.9vw,.8rem);
  flex:0 0 auto;
  width:34px; height:34px;
  padding:0;
  justify-content:center;
  border-color:rgba(200,169,110,.22);
  border-radius:1px;
}
#nav .rc-decl > span{ display:none; }
#nav .rc-decl svg{ width:15px; height:15px; }
#nav .rc-decl:hover{
  border-color:rgba(200,169,110,.7);
  background:rgba(200,169,110,.07);
}

/* le rappel du raccourci, seulement quand la place le permet */
#nav .rc-decl::after{
  content:'⌘K';
  display:none;
  font-family:'Outfit',system-ui,sans-serif;
  font-size:.55rem; letter-spacing:.08em;
  color:rgba(245,242,236,.3);
  margin-left:.45rem;
}
@media (min-width:1320px){
  #nav .rc-decl{ width:auto; height:32px; padding:0 .7rem; }
  #nav .rc-decl::after{ display:inline; }
}

/* ── la réservation : le seul élément plein de la barre ─────────── */
#nav .nav-cta{
  padding:.6rem 1.35rem;
  position:relative; overflow:hidden;
  isolation:isolate;
  transition:color .28s, border-color .28s;
}
#nav .nav-cta::before{
  content:''; position:absolute; inset:0;
  background:#c8a96e;
  transform:translateY(101%);
  transition:transform .38s cubic-bezier(.16,1,.3,1);
  z-index:-1;
}
#nav .nav-cta:hover{
  color:#0e0e0c; border-color:#c8a96e;
  background:transparent;
}
#nav .nav-cta:hover::before{ transform:translateY(0); }

/* ── le déroulant : il glisse au lieu d'apparaître ──────────────── */
#nav .dropdown-menu{
  top:100%; left:-1.1rem;
  margin-top:-1px;
  padding:.35rem 0;
  box-shadow:0 18px 54px rgba(0,0,0,.55);
  display:flex !important;
  opacity:0; visibility:hidden;
  transform:translateY(-7px);
  transition:opacity .24s ease, transform .3s cubic-bezier(.16,1,.3,1),
             visibility .24s;
  pointer-events:none;
}
#nav .nav-dropdown.open .dropdown-menu{
  opacity:1; visibility:visible;
  transform:translateY(0);
  pointer-events:auto;
}

/* ── à la souris, le menu s'ouvre au survol ─────────────────────── */
@media (hover:hover) and (min-width:1025px){
  #nav .nav-dropdown:hover .dropdown-menu{
    opacity:1; visibility:visible;
    transform:translateY(0);
    pointer-events:auto;
  }
  /* la cascade des entrées, reprise du comportement au clic */
  #nav .nav-dropdown:hover .dropdown-menu a{
    opacity:1;
    -webkit-transform:translate3d(0,0,0); transform:translate3d(0,0,0);
  }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(1){ transition-delay:.03s }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(2){ transition-delay:.06s }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(3){ transition-delay:.09s }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(4){ transition-delay:.12s }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(5){ transition-delay:.15s }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(6){ transition-delay:.18s }
  #nav .nav-dropdown:hover .dropdown-menu a:nth-child(7){ transition-delay:.21s }
}
#nav .dropdown-menu > a{
  padding:.68rem 1.35rem;
  transition:color .2s, padding-left .26s cubic-bezier(.16,1,.3,1),
             background .2s;
}
#nav .dropdown-menu > a:hover{
  color:#f5f2ec;
  padding-left:1.65rem;
  background:rgba(200,169,110,.06);
}

/* ── au-dessous de 1024 px, la barre passe au menu plein écran ─── */
@media (max-width:1024px){
  /* .nav-links n'est pas masquée ici : mobile.css la transforme en
     panneau plein écran, et c'est lui qui commande son affichage */
  #nav .nav-cta{ display:none !important; }
  #nav .burger{ display:flex !important; }
  #nav .rc-decl{ display:none !important; }
  #nav .rc-mob{ display:block !important; }
  /* ── le panneau reprend entièrement la main ─────────────────
     Tout ce que la barre du bureau impose est annulé ici : la
     colonne, les intitulés de groupe et le chevron sous le libellé
     sont ceux du téléphone, inchangés. */
  #nav .nav-links{ align-self:auto; align-items:stretch; gap:0; }
  #nav .nav-dropdown{ display:block; align-self:auto; }
  #nav .nav-links > a,
  #nav .nav-dropdown > a{
    display:flex; align-self:auto; line-height:inherit;
  }
  #nav .nav-dropdown > a{ padding-right:26px; }
  #nav .nav-dropdown > a::after{
    position:static; right:auto; top:auto;
    transform:none;
    margin:5px 0 0 !important;
  }
  #nav .nav-dropdown.open > a::after{ transform:rotate(180deg); }
  #nav .nav-links > a::before,
  #nav .nav-dropdown > a::before{ display:none; }
  #nav .dropdown-menu{ margin-top:0; }
}

/* le menu déroulant reprend sa place dans le panneau du téléphone */
@media (max-width:1024px){
  html.menu-open #nav .dropdown-menu{
    opacity:1 !important; visibility:visible !important;
    transform:none !important; pointer-events:auto !important;
  }
}

@media (prefers-reduced-motion:reduce){
  #nav .nav-links > a::before,
  #nav .nav-dropdown > a::before,
  #nav .nav-cta::before,
  #nav .dropdown-menu{ transition:none !important; }
}