/* Menu commun à toutes les pages : mêmes rubriques partout, et bouton
   « Espace client » identique (filet or, pictogramme, survol or plein).
   Chargé APRÈS les styles propres à chaque page pour avoir le dernier mot. */

.nav-links, .nav-liens { align-items: center; }
/* Même taille de liens sur toutes les pages (l'accueil était un cran au-dessus). */
.nav-links > li > a:not(.nav-compte),
.nav-liens > li > a:not(.nav-compte) { font-size: 0.78rem; font-weight: 500; letter-spacing: 0.06em; text-transform: uppercase; }

.nav-links a.nav-compte,
.nav-liens a.nav-compte {
  display: inline-flex; align-items: center; gap: 0.55rem;
  padding: 0.6rem 1.05rem 0.6rem 0.85rem;
  border: 1px solid #B8975A; border-radius: 2px;
  background: rgba(184, 151, 90, 0.07);
  color: #2A2A2A;
  font-family: 'Inter', sans-serif; font-size: 0.7rem; font-weight: 600;
  letter-spacing: 0.14em; text-transform: uppercase; line-height: 1;
  text-decoration: none; white-space: nowrap;
  transition: background 0.25s, color 0.25s, box-shadow 0.25s, transform 0.2s;
}
.nav-compte-ico {
  width: 16px; height: 16px; flex: none;
  fill: none; stroke: #B8975A; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round;
  transition: stroke 0.25s;
}
.nav-links a.nav-compte:hover, .nav-links a.nav-compte:focus-visible,
.nav-liens a.nav-compte:hover, .nav-liens a.nav-compte:focus-visible {
  background: #B8975A; color: #FFFFFF;
  box-shadow: 0 6px 18px rgba(184, 151, 90, 0.28);
  transform: translateY(-1px);
}
.nav-links a.nav-compte:hover .nav-compte-ico, .nav-links a.nav-compte:focus-visible .nav-compte-ico,
.nav-liens a.nav-compte:hover .nav-compte-ico, .nav-liens a.nav-compte:focus-visible .nav-compte-ico { stroke: #FFFFFF; }
.nav-links a.nav-compte:focus-visible, .nav-liens a.nav-compte:focus-visible { outline: 2px solid #2A2A2A; outline-offset: 2px; }
/* Page Espace client ouverte : bouton plein, comme un onglet actif. */
.nav-links a.nav-compte[aria-current], .nav-liens a.nav-compte[aria-current] { background: #B8975A; color: #FFFFFF; }
.nav-links a.nav-compte[aria-current] .nav-compte-ico, .nav-liens a.nav-compte[aria-current] .nav-compte-ico { stroke: #FFFFFF; }

/* ---- Écrans intermédiaires (tablette, petit portable) : menu resserré pour
   que les 6 rubriques + Espace client tiennent sur une ligne. ---- */
@media (min-width: 761px) and (max-width: 1180px) {
  body > nav, header.nav { padding-left: 3% !important; padding-right: 3% !important; }
  .nav-links, .nav-liens { gap: 1.15rem !important; }
  .nav-links > li > a:not(.nav-compte),
  .nav-liens > li > a:not(.nav-compte) { font-size: 0.7rem; letter-spacing: 0.04em; }
}
@media (min-width: 761px) and (max-width: 960px) {
  .nav-links, .nav-liens { gap: 0.9rem !important; }
  /* Espace client : icône seule, comme sur téléphone. */
  .nav-compte-txt { display: none; }
  .nav-links a.nav-compte, .nav-liens a.nav-compte { width: 38px; height: 38px; padding: 0; justify-content: center; }
}

/* ---- Téléphone : ☰ à gauche, logo au centre, espace client à droite ----
   Le bouton ☰ et le panneau sont créés par assets/nav.js. */
.nav-burger, .nav-tiroir, .nav-voile { display: none; }

@media (max-width: 760px) {
  body > nav, header.nav {
    display: grid !important; grid-template-columns: 44px 1fr 44px; align-items: center;
    padding-left: 0.75rem !important; padding-right: 0.75rem !important; gap: 0 !important;
  }
  body > nav .nav-logo, header.nav .nav-logo { grid-column: 2; justify-self: center; font-size: 1.3rem !important; }
  .nav-links, .nav-liens { grid-column: 3; justify-self: end; display: flex !important; gap: 0 !important; margin: 0; padding: 0; }
  .nav-links > li:not(.nav-li-compte),
  .nav-liens > li:not(.nav-li-compte) { display: none !important; }
  /* Espace client : icône seule dans son cadre or, pour garder le logo centré. */
  .nav-compte-txt { display: none; }
  .nav-links a.nav-compte, .nav-liens a.nav-compte { width: 40px; height: 40px; padding: 0; justify-content: center; }
  .nav-compte-ico { width: 18px; height: 18px; }

  .nav-burger { display: flex; grid-column: 1; grid-row: 1; flex-direction: column; justify-content: center; gap: 5px;
    width: 44px; height: 44px; padding: 0 10px; margin-left: -6px; background: none; border: 0; cursor: pointer; }
  .nav-burger span { display: block; height: 1.5px; width: 22px; background: #2A2A2A; transition: transform .25s, opacity .2s; }
  .nav-ouvert .nav-burger span:nth-child(1) { transform: translateY(6.5px) rotate(45deg); }
  .nav-ouvert .nav-burger span:nth-child(2) { opacity: 0; }
  .nav-ouvert .nav-burger span:nth-child(3) { transform: translateY(-6.5px) rotate(-45deg); }

  .nav-voile { display: block; position: fixed; left: 0; right: 0; top: var(--nav-bas, 64px); bottom: 0; z-index: 998;
    background: rgba(42, 42, 42, 0.35); opacity: 0; pointer-events: none; transition: opacity .25s; }
  .nav-tiroir { display: flex; flex-direction: column; position: fixed; left: 0; top: var(--nav-bas, 64px); bottom: 0; z-index: 999;
    width: min(82vw, 330px); padding: 0.75rem 1.5rem 1.5rem; background: #FFFFFF; border-right: 1px solid #E4DBC8;
    overflow-y: auto; transform: translateX(-102%); transition: transform .3s ease; visibility: hidden; }
  .nav-ouvert .nav-voile { opacity: 1; pointer-events: auto; }
  .nav-ouvert .nav-tiroir { transform: none; visibility: visible; }
  .nav-ouvert { overflow: hidden; }
  body > nav, header.nav { z-index: 1000 !important; }

  .nav-tiroir-liens { display: flex; flex-direction: column; }
  .nav-tiroir-liens a { font-family: 'Playfair Display', Georgia, serif; font-size: 1.25rem; color: #2A2A2A; text-decoration: none;
    padding: 0.95rem 0; border-bottom: 1px solid #F0EBE1; }
  .nav-tiroir-liens a[aria-current] { color: #B8975A; }
  .nav-tiroir-compte { margin-top: 1.5rem; display: flex; align-items: center; justify-content: center; gap: 0.55rem;
    background: #B8975A; color: #FFFFFF; text-decoration: none; padding: 1rem; font-family: 'Inter', sans-serif;
    font-size: 0.75rem; font-weight: 600; letter-spacing: 0.14em; text-transform: uppercase; }
  .nav-tiroir-compte .nav-compte-ico { stroke: #FFFFFF; }
}
@media (prefers-reduced-motion: reduce) { .nav-tiroir, .nav-voile, .nav-burger span { transition: none; } }