/* ================================================================
   css/nav.css — Maison Lamarque
   ── Barre langue + annonce + navigation + menu mobile + search ──
   ================================================================ */

/* ── Barre de langue / devise ────────────────────────────────── */
.lang-bar {
  background:var(--black); border-bottom:1px solid var(--border-dim);
  padding:7px 60px; display:flex; justify-content:flex-end;
  align-items:center; gap:14px;
}
.currency-select {
  background:none; border:1px solid var(--border-dim); color:var(--grey);
  font-size:10px; letter-spacing:1px; padding:3px 8px; cursor:pointer;
  transition:all .2s;
}
.currency-select:hover { border-color:var(--gold); color:var(--gold); }
.lang-sep { color:var(--border-dim); }
.lang-btn {
  background:none; border:1px solid transparent; color:var(--grey);
  font-size:10px; letter-spacing:2px; text-transform:uppercase;
  padding:4px 10px; cursor:pointer; transition:all .2s; font-weight:500;
}
.lang-btn.active { border-color:var(--gold); color:var(--gold); }
.lang-btn:hover  { color:var(--white); }

/* ── Barre d'annonce ─────────────────────────────────────────── */
.ann {
  background:var(--black); color:rgba(255,255,255,.6);
  text-align:center; padding:10px 16px;
  font-size:10px; letter-spacing:3px; text-transform:uppercase; font-weight:300;
  border-bottom:1px solid var(--border-dim);
}
.ann strong { color:var(--gold); font-weight:500; }

/* ── Navigation principale ───────────────────────────────────── */
nav {
  display: flex; 
  align-items: center; 
  justify-content: space-between;
  padding: 0 60px; 
  height: var(--nav-h); 
  background: black; 
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);

  position: fixed; 
  top: 40px; /* <--- DOIT correspondre à la hauteur de l'announcement-bar */
  left: 0;
  width: 100%;
  z-index: 1000; 

  border-bottom: 1px solid var(--border-dim);
}

/* ÉVITER QUE LE CONTENU NE PASSE SOUS LE NAV */
body {
  padding-top: var(--nav-h); 
}
.nav-links { display:flex; gap:40px; }
.nav-links a {
  color:rgba(255,255,255,.55); font-size:11px; letter-spacing:2.5px;
  text-transform:uppercase; font-weight:400; transition:color .2s;
  cursor:pointer; position:relative;
}
.nav-links a::after {
  content:''; position:absolute; bottom:-4px; left:0;
  width:0; height:1px; background:var(--gold); transition:width .3s;
}
.nav-links a:hover::after { width:100%; }
.nav-links a:hover { color:var(--white); }

/* Logo MAISON LAMARQUE — typographie Cormorant */
.logo {
  font-family:var(--font-display); font-size:22px; font-weight:300;
  letter-spacing:6px; text-transform:uppercase; color:var(--white);
  cursor:pointer; white-space:nowrap ; justify-self:center;
}
.logo .logo-sep { color:var(--gold); margin:0 2px; font-weight:300; }






/* ── Barre de recherche (slide-down depuis la nav) ───────────── */
.search-bar {
  position:absolute; top:100%; left:0; right:0;
  background:rgba(10,10,10,.98); border-bottom:1px solid var(--border-dim);
  padding:14px 60px; display:none; align-items:center; gap:12px;
  animation:fadeIn .2s both; z-index:299;
}
.search-bar.open { display:flex; }
.search-input {
  flex:1; background:rgba(255,255,255,.05); border:1px solid var(--border-dim);
  color:var(--white); padding:10px 16px; font-size:13px;
  transition:border-color .2s; font-family:var(--font-display); letter-spacing:.5px;
}
.search-input:focus { border-color:var(--gold); }
.search-input::placeholder { color:var(--grey); font-family:var(--font-body); }
.search-close { background:none; border:none; color:var(--grey); font-size:22px; cursor:pointer; }

/* Résultats de recherche (dropdown) */
.search-results {
  position:absolute; top:100%; left:0; right:0;
  background:rgba(10,10,10,.99); border:1px solid var(--border-dim);
  max-height:400px; overflow-y:auto; display:none; z-index:398;
}
.search-results.open { display:block; }
.search-result-item {
  display:flex; gap:14px; padding:12px 60px; cursor:pointer;
  border-bottom:1px solid var(--border-dim); transition:background .2s;
}
.search-result-item:hover { background:rgba(200,160,80,.04); }
.sri-img  { width:46px; height:58px; object-fit:contain; background:#1A1000; padding:4px; flex-shrink:0; }
.sri-name { font-size:13px; font-weight:500; color:var(--white); font-family:var(--font-display); letter-spacing:.5px; }
.sri-price{ font-size:12px; color:var(--gold); margin-top:3px; }
.search-empty { padding:22px 60px; color:var(--grey); font-size:13px; font-style:italic; }

/* ── Menu compte utilisateur (dropdown) ─────────────────────── */
.user-menu { position:relative; }
.user-dropdown {
  position:absolute; top:calc(100% + 14px); right:0;
  background:#111; border:1px solid var(--border-dim);
  min-width:230px; z-index:var(--z-dropdown);
  display:none; animation:fadeIn .15s both;
}
.user-dropdown.open { display:block; }
.ud-header { padding:18px 20px; border-bottom:1px solid var(--border-dim); }
.ud-name        { font-family:var(--font-display); font-size:18px; font-weight:300; letter-spacing:.5px; color:var(--white); }
.ud-email       { font-size:11px; color:var(--grey); margin-top:3px; }
.ud-verified    { font-size:10px; color:var(--green); margin-top:5px; letter-spacing:.5px; }
.ud-unverified  { font-size:10px; color:var(--red);   margin-top:5px; cursor:pointer; }
.ud-guest-tag   { font-size:9px; letter-spacing:2px; color:var(--orange); padding:2px 8px; border:1px solid var(--orange); display:inline-block; margin-top:5px; text-transform:uppercase; }
.ud-item {
  display:flex; align-items:center; gap:10px; padding:12px 20px;
  font-size:12px; color:rgba(255,255,255,.5); cursor:pointer;
  transition:all .2s; border:none; background:none; width:100%; text-align:left;
  letter-spacing:.5px;
}
.ud-item:hover { background:rgba(200,160,80,.06); color:var(--gold); }
.ud-item svg   { width:15px; height:15px; stroke:currentColor; fill:none; stroke-width:1.5; flex-shrink:0; }
.ud-item.danger:hover { color:var(--red); background:rgba(176,80,64,.06); }
.ud-sep { height:1px; background:var(--border-dim); }

/* Force l'icône utilisateur en blanc */
#accountBtn svg {
  stroke: grey !important; /* Blanc pur */
  stroke-width: 1.8;          /* Un peu plus épais pour la visibilité */
  opacity: 1 !important;      /* Pas de transparence */
}

/* Optionnel : Elle devient dorée au survol */
#accountBtn:hover svg {
  stroke: var(--white) !important;
}
/* ── Hamburger (mobile) ──────────────────────────────────────── */


/* ── Menu mobile plein écran ─────────────────────────────────── */
.mobile-nav {
  /* On remplace display:none par display:flex en permanence */
  display: flex; 
  position: fixed; 
  inset: 0; 
  background: var(--black);
  z-index: var(--z-modal); 
  flex-direction: column; 
  align-items: center;
  justify-content: center; 
  gap: 24px;
  
  /* États par défaut : invisible et ignore les clics */
  opacity: 0; 
  visibility: hidden; 
  pointer-events: none; 
  
  /* Transition sur l'opacité ET la visibilité */
  transition: opacity var(--t) ease, visibility var(--t);
}

/* Quand le menu est ouvert */
.mobile-nav.open { 
  opacity: 1; 
  visibility: visible; 
  pointer-events: all; 
}

.mobile-nav a {
  font-family: var(--font-display); 
  font-size: 44px; 
  font-weight: 300;
  letter-spacing: 4px; 
  color: var(--white); 
  cursor: pointer; 
  text-decoration: none;
  transition: color .2s, transform .2s;
}

.mobile-nav a:hover { 
  color: var(--gold); 
  transform: scale(1.05); /* Petit effet de luxe au survol */
}

.mn-close { 
  position: absolute; 
  top: 20px; 
  right: 24px; 
  font-size: 32px; /* Un peu plus grand pour les pouces sur mobile */
  background: none; 
  border: none; 
  cursor: pointer; 
  color: var(--grey); 
}
/* --- MODAL MFA MAISON LAMARQUE --- */
#mfaModal {
  display: none; /* Piloté par le JS */
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.85); /* Fond assombri luxueux */
  backdrop-filter: blur(8px); /* Effet de flou moderne */
  z-index: 20000;
  align-items: center;
  justify-content: center;
  padding: 20px;
  transition: all 0.3s ease;
}

#mfaModal .auth-box {
  background: var(--bg-color, #fff);
  width: 100%;
  max-width: 400px;
  padding: 40px;
  position: relative;
  border: 1px solid var(--gold-light, #e5d5b5);
  box-shadow: 0 20px 50px rgba(0,0,0,0.3);
  text-align: center;
}

#mfaTitle {
  font-family: 'Bebas Neue', sans-serif;
  font-size: 2rem;
  letter-spacing: 4px;
  color: var(--text-color, #1a1a1a);
  margin-bottom: 10px;
}

#mfaSubtitle {
  font-family: 'Jost', sans-serif;
  font-weight: 300;
  font-size: 0.9rem;
  color: #666;
  margin-bottom: 30px;
  text-transform: uppercase;
  letter-spacing: 1px;
}

#mfaCodeInput {
  width: 100%;
  height: 60px;
  border: none;
  border-bottom: 2px solid #eee;
  text-align: center;
  font-size: 2rem;
  font-family: 'Cormorant Garamond', serif;
  letter-spacing: 15px;
  color: var(--gold, #c5a059);
  background: transparent;
  transition: border-color 0.3s ease;
  margin-bottom: 10px;
}

#mfaCodeInput:focus {
  outline: none;
  border-bottom-color: var(--gold, #c5a059);
}

#mfaCodeInput::placeholder {
  letter-spacing: 2px;
  font-size: 1rem;
  color: #ccc;
  font-family: 'Jost', sans-serif;
}

#mfaBtn {
  width: 100%;
  margin-top: 20px;
  padding: 15px;
  background: var(--text-color, #1a1a1a);
  color: #fff;
  border: 1px solid var(--text-color, #1a1a1a);
  font-family: 'Jost', sans-serif;
  font-weight: 500;
  letter-spacing: 2px;
  cursor: pointer;
  transition: all 0.3s ease;
}

#mfaBtn:hover {
  background: var(--gold, #c5a059);
  border-color: var(--gold, #c5a059);
}

#mfaErr {
  color: #ff4444;
  font-size: 0.8rem;
  font-family: 'Jost', sans-serif;
  margin-top: 10px;
  min-height: 1.2rem;
}

.auth-close {
  position: absolute;
  top: 15px;
  right: 15px;
  background: none;
  border: none;
  font-size: 1.2rem;
  cursor: pointer;
  color: #999;
  transition: color 0.3s;
}

.auth-close:hover {
  color: var(--gold, #c5a059);
}
/* --- FIX NAVIGATION MOBILE MAISON LAMARQUE PANY --- */

@media (max-width: 768px) {
    body {
        padding-top: 90px !important;
    }

    .ann {
        height: auto;
        padding: 8px 15px;
        font-size: 9px;
        letter-spacing: 1.5px;
    }

    nav {
        padding: 0 15px;
        height: 60px;
        top: 30px;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .nav-links {
        display: none !important;
    }

    .logo {
        font-size: 10px !important;
        letter-spacing: 1px !important;
        position: absolute;
        left: 45%;
        transform: translateX(-50%);
        width: max-content;
        margin: 0;
    }

    .nav-right {
        gap: 10px;
        margin-left: auto;
    }

    .icon-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* Style personnalisé pour NProgress */
#nprogress .bar {
    background: #D4AF37 !important; /* Or Lamarque */
    height: 3px !important;         /* Plus visible */
    box-shadow: 0 0 10px #D4AF37;   /* Éclat lumineux */
    z-index: 999999 !important;     /* S'assure qu'elle passe au-dessus de tout */
}

/* Optionnel : changer la couleur du petit curseur au bout de la barre */
#nprogress .peg {
    box-shadow: 0 0 10px #D4AF37, 0 0 5px #D4AF37 !important;
}