/*
 * nav.css — source de vérité de la navbar publique (barre, burger, menu
 * Explorer, menu utilisateur, notifications, bannière cookies).
 * Copié depuis la référence home.html ; chargé par les 25 pages publiques.
 * Les couleurs/rayons passent par des variables --nv-* définies ici, pour ne
 * plus dépendre des :root (divergents) de chaque page.
 */
:root {
  --nv-void: #0b0b0c;
  --nv-ink: #141414;
  --nv-violet-b: #ff2fa0;
  --nv-t1: #f6f5f2;
  --nv-t2: rgba(246, 245, 242, 0.62);
  --nv-t3: rgba(246, 245, 242, 0.4);
  --nv-b1: rgba(255, 255, 255, 0.1);
  --nv-b2: rgba(255, 255, 255, 0.16);
  --nv-r: 20px;
  --nv-r3: 12px;
  --nv-pill: 999px;
}

/* Couleur de base posée par la nav elle-même : sans elle, le texte hérite de
   la couleur du body de chaque page (#f6f5f2 ou #f4f3ef selon la page). */
#bottom-nav,
#burger-overlay,
#cookie-banner {
  color: var(--nv-t1);
}

/* ── BOTTOM NAV ── */
.bottom-nav {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 140;
  height: 64px;
  background: rgba(11, 11, 12, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-top: none;
  border-bottom: 1px solid var(--nv-b1);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 32px;
  gap: 8px;
  transition: top 0.2s;
}
.bottom-nav-left {
  display: flex;
  align-items: center;
  gap: 4px;
}
.bottom-nav-link {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  padding: 6px 16px;
  border-radius: 999px;
  text-decoration: none;
  /* Couleur opaque (pas --t3, qui est en rgba) : les icones ont un
     fill ET un stroke en currentColor, et un ton semi-transparent
     s'additionne sur lui-meme la ou le contour chevauche le
     remplissage, ce qui produisait un anneau visiblement plus clair
     que le centre de l'icone. */
  color: #6f9096;
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 600;
  transition: all 0.2s;
  cursor: pointer;
  border: 1px solid transparent;
  background: none;
  letter-spacing: 0.04em;
}
.bottom-nav-link:hover {
  color: #ff00a8;
}
.bottom-nav-link.active {
  color: #ff00a8;
  text-shadow: 0 0 12px rgba(255, 0, 168, 0.7);
}
.bottom-nav-link.active svg {
  filter: drop-shadow(0 0 6px rgba(255, 0, 168, 0.8));
}
.bottom-nav-link .bni {
  font-size: 18px;
  line-height: 1;
}
.bottom-nav-link svg {
  width: 20px;
  height: 20px;
  stroke: currentColor;
  stroke-width: 1.8;
  transition: all 0.2s;
}
/* ── LIENS PRINCIPAUX & MENU "EXPLORER" (calqués sur le concept A :
   liens texte simples, dropdown en méga-menu sombre arrondi avec
   vignette dégradée par catégorie) ── */
.bottom-nav-maintab {
  flex-direction: row;
  padding: 8px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  color: var(--nv-t2);
}
.bottom-nav-maintab svg {
  display: none;
}
.bottom-nav-maintab:hover,
.bottom-nav-maintab.active {
  color: var(--nv-t1);
  text-shadow: none;
}
.nav-explore-wrap {
  position: relative;
}
/* Pont invisible entre le déclencheur et le menu : sans lui, les 16px
   d'espace visuel entre les deux (cf. .nav-explore-menu top) coupent
   le survol pendant la traversée et le menu se referme avant qu'on
   puisse y accéder. */
.nav-explore-wrap::after {
  content: "";
  position: absolute;
  top: 100%;
  left: 0;
  width: 400px;
  height: 16px;
}
.nav-explore-trigger {
  display: flex;
  align-items: center;
  gap: 5px;
  padding: 8px 14px;
  font-family: "Manrope", sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: var(--nv-t2);
  cursor: pointer;
}
.nav-explore-trigger svg {
  width: 13px;
  height: 13px;
  transition: transform 0.2s;
}
.nav-explore-wrap:hover .nav-explore-trigger {
  color: var(--nv-t1);
}
.nav-explore-wrap:hover .nav-explore-trigger svg {
  transform: rotate(180deg);
}
.nav-explore-menu {
  position: absolute;
  top: calc(100% + 16px);
  left: 0;
  width: 400px;
  background: var(--nv-ink);
  border: 1px solid var(--nv-b1);
  border-radius: 18px;
  padding: 10px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  opacity: 0;
  transform: translateY(6px);
  pointer-events: none;
  transition: all 0.15s;
  box-shadow: 0 30px 60px rgba(0, 0, 0, 0.5);
  z-index: 50;
}
.nav-explore-wrap:hover .nav-explore-menu {
  opacity: 1;
  transform: none;
  pointer-events: auto;
}
.nav-explore-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px;
  border-radius: 12px;
  border-bottom: none;
  text-decoration: none;
  color: var(--nv-t1);
}
.nav-explore-item:hover {
  background: rgba(255, 255, 255, 0.06);
}
.nav-explore-thumb {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  flex-shrink: 0;
  background-size: cover;
  overflow: hidden;
}
.nav-explore-name {
  font-family: "Manrope", sans-serif;
  font-weight: 700;
  font-size: 13px;
}
.nav-explore-count {
  font-family: "JetBrains Mono", monospace;
  font-size: 11px;
  color: var(--nv-t3);
  margin-top: 2px;
}
/* Barre de recherche décorative de la nav (concept A) — clic renvoie
   au répertoire, où vit la vraie recherche fonctionnelle. */
.nav-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 16px;
  border: 1px solid var(--nv-b1);
  border-radius: var(--nv-pill);
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  color: var(--nv-t3);
  text-decoration: none;
  min-width: 200px;
  flex-shrink: 0;
}
.nav-search:hover {
  border-color: var(--nv-b2);
  color: var(--nv-t2);
}
.nav-search input {
  flex: 1;
  min-width: 0;
  background: none;
  border: none;
  outline: none;
  padding: 0;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  color: var(--nv-t2);
}
.nav-search input::placeholder {
  color: var(--nv-t3);
}
.nav-search:focus-within {
  border-color: var(--nv-b2);
}
@media (max-width: 1300px) {
  .nav-search {
    display: none;
  }
}
/* Icones pleines plutot que seulement au contour — Lucide sort ses
   SVG avec fill="none" en attribut de presentation (priorite CSS la
   plus basse en theorie, mais ce navigateur le respecte quand meme
   face a une regle sans !important) : on force le remplissage. */
#bottom-nav svg {
  fill: currentColor !important;
}
/* Exception : l'icone de compte (cercle + silhouette) devient un
   simple disque plein une fois rempli — plus aucun sens visuel.
   Selecteur plus specifique que #bottom-nav svg ci-dessus, sinon
   l'ID l'emporte malgre le !important des deux cotes. */
#bottom-nav .nav-ctas-mobile svg {
  fill: none !important;
}
.bottom-nav-logo {
  font-family: "Unbounded", sans-serif;
  /* Graisse explicite : sans elle, le logo prenait la graisse de la police
     Unbounded que chaque page charge (400 ou 500 selon la page). */
  font-weight: 500;
  font-size: 18px;
  color: var(--nv-t1);
  text-decoration: none;
  text-shadow:
    0 0 18px rgba(255, 255, 255, 0.4),
    0 0 36px rgba(255, 47, 160, 0.3);
  display: flex;
  align-items: center;
  gap: 2px;
  margin-right: 8px;
}
.bottom-nav-logo .bnl-text span {
  color: var(--nv-violet-b);
}
/* Boutons "Se connecter"/"Devenir talent"/"Créer un compte" : la classe
   .btn est partagée avec le hero (police Plus Jakarta Sans), mais dans
   la navbar on veut la police commune aux autres pages (Exo 2). */
.bottom-nav .btn {
  font-family: "Manrope", sans-serif;
}
.bottom-nav-logo-dot {
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--nv-violet-b);
  margin-left: 2px;
  margin-bottom: 8px;
  flex-shrink: 0;
  animation: pulse-dot 2s ease-in-out infinite;
}
/* ── MENU BURGER (mobile) ──
   Sur mobile, Accueil/Répertoire/Annonces/Messages disparaissent de la
   barre (.bottom-nav-maintab) au profit de ce bouton, qui ouvre un
   modal listant Accueil/Répertoire/Annonces/Contact. Espace Pro/Mon
   profil reste visible avec son texte (pas de classe maintab). */
.nav-burger-btn {
  display: none;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 47, 160, 0.1);
  border: 1px solid rgba(255, 47, 160, 0.3);
  color: var(--nv-t1);
  cursor: pointer;
  flex-shrink: 0;
  margin-right: 2px;
}
.nav-burger-btn svg {
  width: 18px;
  height: 18px;
  stroke-width: 1.8;
}
.burger-overlay {
  position: fixed;
  inset: 0;
  z-index: 300;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(10px);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.25s;
}
.burger-overlay.visible {
  opacity: 1;
  pointer-events: auto;
}
.burger-modal {
  background: #181113;
  border: 1px solid rgba(255, 47, 160, 0.3);
  border-top-left-radius: 24px;
  border-top-right-radius: 24px;
  width: 100%;
  max-width: 480px;
  padding: 6px 8px calc(env(safe-area-inset-bottom, 0px) + 20px);
  transform: translateY(24px);
  transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
  box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.5);
}
.burger-overlay.visible .burger-modal {
  transform: none;
}
.burger-modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 12px 10px;
}
.burger-modal-title {
  font-family: "Manrope", sans-serif;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--nv-t3);
}
.burger-close-btn {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(255, 47, 160, 0.06);
  border: 1px solid rgba(255, 47, 160, 0.1);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--nv-t2);
  cursor: pointer;
}
.burger-close-btn svg {
  width: 16px;
  height: 16px;
}
.burger-link {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 12px;
  border-radius: 999px;
  color: var(--nv-t1);
  text-decoration: none;
  font-family: "Manrope", sans-serif;
  font-size: 15px;
  font-weight: 600;
  transition: background 0.15s;
}
.burger-link:hover {
  background: rgba(255, 47, 160, 0.1);
}
.burger-link.active {
  color: var(--nv-violet-b);
  background: rgba(255, 47, 160, 0.08);
}
.burger-link svg {
  width: 20px;
  height: 20px;
  stroke-width: 1.8;
  color: var(--nv-violet-b);
  flex-shrink: 0;
  fill: currentColor !important;
}
.bottom-nav-right {
  display: flex;
  align-items: center;
  gap: 8px;
}
.nav-ctas-desktop {
  display: flex;
  align-items: center;
  gap: 8px;
}
/* Le rayon des boutons de la navbar vient de la navbar, pas du .btn de chaque
   page (annonces.html a des rayons à 0, d'autres pages 12px) : sinon les
   boutons changent de forme d'une page à l'autre. */
.nav-ctas-desktop .btn {
  border-radius: var(--nv-pill);
}
/* Un indice « déjà connecté » existe (cf. nav.js) : les boutons « déconnecté »
   ne doivent jamais apparaître, même le temps du premier affichage. */
html.nav-hint-user #nav-ctas > .nav-ctas-desktop,
html.nav-hint-user #nav-ctas > .nav-auth-wrap {
  visibility: hidden;
}
.nav-cta-links {
  display: flex;
  align-items: center;
  gap: 6px;
}
.nav-cta-link {
  display: flex;
  align-items: center;
  gap: 5px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  padding: 8px 16px;
  border-radius: var(--nv-r3);
  border: 1px solid rgba(255, 47, 160, 0.5);
  background: linear-gradient(135deg, #ff2fa0 0%, #ff2fa0 100%);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 47, 160, 0.3), 0 2px 10px rgba(0, 0, 0, 0.3);
  transition: all 0.2s;
}
.nav-cta-link svg {
  width: 12px;
  height: 12px;
  flex-shrink: 0;
  color: #fff;
}
.nav-cta-link:hover {
  box-shadow: 0 0 22px rgba(255, 47, 160, 0.45), 0 2px 12px rgba(0, 0, 0, 0.35);
  transform: translateY(-1px);
}
.nav-cta-link--accent {
  background: linear-gradient(135deg, #a8317a 0%, #ff00a8 100%);
  border-color: rgba(255, 0, 168, 0.5);
  color: #fff;
  box-shadow: 0 0 16px rgba(255, 0, 168, 0.25), 0 2px 10px rgba(0, 0, 0, 0.3);
}
.nav-cta-link--accent svg {
  color: #fff;
}
.nav-cta-link--accent:hover {
  box-shadow: 0 0 22px rgba(255, 0, 168, 0.4), 0 2px 12px rgba(0, 0, 0, 0.35);
}
.nav-ctas-mobile {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255, 47, 160, 0.1);
  border: 1px solid rgba(255, 47, 160, 0.3);
  color: var(--nv-t1);
  cursor: pointer;
}
.nav-ctas-mobile svg {
  width: 17px;
  height: 17px;
  stroke-width: 1.8;
}
.nav-auth-wrap {
  position: relative;
  display: flex;
  align-items: center;
}
.nav-auth-menu {
  position: absolute;
  top: calc(100% + 12px);
  right: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  background: #181113;
  border: 1px solid rgba(255, 47, 160, 0.25);
  border-radius: 14px;
  padding: 6px;
  min-width: 180px;
  box-shadow:
    0 8px 32px rgba(0, 0, 0, 0.5),
    0 0 24px rgba(255, 47, 160, 0.08);
  opacity: 0;
  transform: translateY(8px) scale(0.97);
  transition: all 0.2s;
  pointer-events: none;
  z-index: 200;
}
.nav-auth-menu.open {
  opacity: 1;
  transform: none;
  pointer-events: all;
}
.nav-auth-menu-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border-radius: 10px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
  color: rgba(244, 243, 239, 0.75);
  font-family: "Manrope", sans-serif;
  background: none;
  border: none;
  width: 100%;
  text-align: left;
  transition: all 0.15s;
}
.nav-auth-menu-item:hover {
  background: rgba(255, 47, 160, 0.12);
  color: #f4f3ef;
}
.nav-auth-menu-item svg {
  width: 15px;
  height: 15px;
  stroke-width: 1.8;
  flex-shrink: 0;
}
.nav-auth-menu-item--talent {
  color: var(--nv-violet-b);
}
.nav-auth-menu-item--talent:hover {
  background: rgba(255, 47, 160, 0.18);
  color: var(--nv-violet-b);
}
.nav-auth-menu-item--partner {
  color: #ff00a8;
}
.nav-auth-menu-item--partner:hover {
  background: rgba(255, 0, 168, 0.14);
  color: #ff00a8;
}
.bottom-nav-sep {
  width: 1px;
  height: 22px;
  background: var(--nv-b2);
  flex-shrink: 0;
}
/* Nav repassée en haut de page (copie du concept C) — le contenu est
   décalé vers le bas au lieu du haut désormais. */
body {
  padding-top: 64px;
}

@media (max-width: 1400px) {
  .nav-ctas-desktop {
    display: none;
  }
  .nav-ctas-mobile {
    display: flex;
  }
}
@media (max-width: 768px) {
  .logo-fixed {
    display: none;
  }
  .bottom-nav-logo .bnl-text,
  .bottom-nav-logo-dot {
    display: none;
  }
  .bottom-nav-sep {
    display: none;
  }
  .nav-burger-btn {
    display: flex;
  }
  .bottom-nav-maintab {
    display: none !important;
  }
  .nav-explore-wrap {
    display: none !important;
  }
  .bottom-nav-logo img {
    height: 36px !important;
  }
  .bottom-nav {
    left: 0;
    right: 0;
    top: 0;
    bottom: auto;
    padding: 0 12px;
    border-radius: 999px;
    border-top: none;
    border-bottom: 2px solid var(--nv-b2);
    background: var(--nv-void);
    justify-content: space-between;
  }
  body {
    /* Place pour la barre d'onglets du bas (--tabbar-h, cf. plus bas). */
    padding-bottom: var(--tabbar-h);
    padding-top: 60px;
  }
  /* Logo à gauche ; cloche, messages puis burger à droite. Les onglets
     principaux sont dans la barre du bas, plus dans la barre du haut. */
  .bottom-nav-left {
    display: contents;
  }
  .bottom-nav-logo {
    order: 0;
  }
  .bottom-nav-right {
    order: 1;
    margin-left: auto;
  }
  .nav-burger-btn {
    order: 2;
    margin-left: 8px;
  }
  .nav-auth-wrap,
  .nav-ctas-mobile,
  #nav-user {
    display: none !important;
  }
  .nav-msg-btn {
    display: flex;
  }
  .bottom-nav-logo,
  .bottom-nav-link {
    flex-shrink: 0;
  }
  /* Logo isolé à gauche, séparé du burger/onglets par un vrai espace. */
  .bottom-nav-logo {
    margin-right: 14px;
  }
  .bottom-nav-link {
    padding: 4px 10px;
    font-size: 10px;
    gap: 2px;
    min-height: 44px;
    justify-content: center;
  }
  .bottom-nav-link svg {
    width: 18px;
    height: 18px;
  }
}

@media (max-width: 480px) {
  .bottom-nav-link span:not(.bni) {
    display: none;
  }
  .bottom-nav-link.active span:not(.bni) {
    display: block;
    font-size: 9px;
    margin-top: 1px;
  }
  .bottom-nav-link {
    padding: 6px 8px;
    min-height: 44px;
    justify-content: center;
  }
  .bottom-nav {
    padding: 0 6px;
  }
  .bottom-nav-left {
    gap: 0;
  }
  .bottom-nav-logo {
    margin-right: 8px;
  }
  .bottom-nav-logo img {
    margin-right: 0 !important;
  }
}

/* ── RECHERCHE NAVBAR MOBILE (visiteur non connecté) ──
   Comble le vide entre le burger et l'icône de connexion sur mobile.
   Masqué en desktop (assez de place ailleurs) et masqué en JS dès
   qu'une session est détectée (updateNav). */
.bnav-search {
  display: none;
}
@media (max-width: 768px) {
  .bnav-search {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    flex: 1;
    min-width: 0;
  }
  .bnav-search .nav-cta-link {
    flex: 1;
    justify-content: center;
    height: 36px;
    padding: 0 8px;
    font-size: 12px;
    gap: 5px;
    border-radius: 999px;
  }
  .bnav-search .nav-cta-link svg {
    width: 13px;
    height: 13px;
  }
  .bnav-search input {
    width: 100%;
    background: rgba(255, 47, 160, 0.05);
    border: 1px solid var(--nv-b2);
    border-radius: 999px;
    padding: 8px 14px;
    color: var(--nv-t1);
    font-family: "Manrope", sans-serif;
    font-size: 12.5px;
    outline: none;
    transition: border-color 0.15s;
  }
  .bnav-search input::placeholder {
    color: var(--nv-t3);
  }
  .bnav-search input:focus {
    border-color: var(--nv-violet-b);
  }
}

/* ── MENU UTILISATEUR / NOTIFICATIONS (ex-CSS injecté par NavAuth) ── */
    .nav-user { position:relative; display:flex; align-items:center; }
    .nav-user-btn {
      display:flex; align-items:center; gap:10px;
      background:rgba(255,47,160,.1); border:1px solid rgba(255,47,160,.3);
      border-radius: 999px; padding:6px 14px 6px 6px;
      cursor:pointer; transition:all .2s; font-family:'Manrope', sans-serif;
    }
    .nav-user-btn:hover { background:rgba(255,47,160,.18); border-color:rgba(255,47,160,.5); }
    .nav-user-avatar {
      width:30px; height:30px; border-radius:50%;
      background-color:#ff2fa0;
      background-size:cover; 
      background-position:center;
      display:flex; align-items:center; justify-content:center;
      font-size:12px; font-weight:700; color:#fff; flex-shrink:0;
      box-shadow:0 0 10px rgba(255,47,160,.4);
    }
    .nav-user-name { font-size:13px; font-weight:600; color:#f4f3ef; max-width:120px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
    .nav-user-role { font-size:10px; color:rgba(255,47,160,.9); font-weight:700; letter-spacing:.06em; }
    .nav-user-chevron { font-size:10px; color:rgba(244,243,239,.4); margin-left:2px; transition:transform .2s; }
    .nav-user-btn.open .nav-user-chevron { transform:rotate(180deg); }
    .nav-dropdown {
      position:absolute; top:calc(100% + 10px); right:0;
      background:#181113; border:1px solid rgba(255,47,160,.25);
      border-radius: 16px; padding:8px; min-width:200px;
      box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 24px rgba(255,47,160,.08);
      opacity:0; transform:translateY(-8px) scale(.97);
      transition:all .2s; pointer-events:none; z-index:200;
    }
    .nav-dropdown.open { opacity:1; transform:none; pointer-events:all; }
    .nav-dropdown-header {
      padding:10px 12px 12px; border-bottom:1px solid rgba(255,47,160,.06); margin-bottom:6px;
    }
    .nav-dropdown-fullname { font-size:14px; font-weight:700; color:#f4f3ef; font-family:'Manrope', sans-serif; }
    .nav-dropdown-email { font-size:11px; color:rgba(244,243,239,.35); margin-top:2px; }
    .nav-dropdown-badge {
      display:inline-block; margin-top:6px; padding:2px 9px; border-radius: 999px;
      font-size:10px; font-weight:700; font-family:'Manrope', sans-serif; letter-spacing:.06em;
    }
    .badge-user  { background:rgba(52,211,153,.1); border:1px solid rgba(52,211,153,.3); color:#34d399; }
    .badge-pro   { background:rgba(255,47,160,.1); border:1px solid rgba(255,47,160,.3); color:#ff2fa0; }
    .badge-admin { background:rgba(255,69,96,.1);  border:1px solid rgba(255,69,96,.3);  color:#ff4560; }
    .nav-dropdown-item {
      display:flex; align-items:center; gap:10px;
      padding:9px 12px; border-radius: 10px; cursor:pointer;
      font-size:13px; color:rgba(244,243,239,.7); font-family:'Manrope', sans-serif; font-weight:500;
      transition:all .15s; text-decoration:none; width:100%; background:none; border:none; text-align:left;
    }
    .nav-dropdown-item:hover { background:rgba(255,47,160,.1); color:#f4f3ef; }
    .nav-dropdown-item.danger:hover { background:rgba(255,69,96,.1); color:#ff4560; }
    .nav-dropdown-item .item-icon { font-size:15px; width:20px; text-align:center; }
    .nav-dropdown-divider { height:1px; background:rgba(255,47,160,.06); margin:6px 0; }
    .notif-bell-btn {
      position: relative; width:36px; height:36px; border-radius:50%;
      background:rgba(255,47,160,.1); border:1px solid rgba(255,47,160,.3);
      color:#f4f3ef; display:flex; align-items:center; justify-content:center;
      cursor:pointer; transition:all .2s; flex-shrink:0;
    }
    .notif-bell-btn:hover { background:rgba(255,47,160,.18); border-color:rgba(255,47,160,.5); }
    .notif-bell-btn svg { width:17px; height:17px; stroke-width:1.8; }
    .notif-bell-btn.has-unread { animation:notif-shake 3s ease-in-out infinite; }
    @keyframes notif-shake {
      0%, 92%, 100% { transform:rotate(0); }
      93% { transform:rotate(-12deg); }
      94% { transform:rotate(10deg); }
      95% { transform:rotate(-8deg); }
      96% { transform:rotate(6deg); }
      97% { transform:rotate(0); }
    }
    @media (prefers-reduced-motion: reduce) {
      .notif-bell-btn.has-unread { animation:none; }
    }
    .notif-badge {
      position:absolute; top:-2px; right:-2px; min-width:16px; height:16px; padding:0 3px;
      border-radius: 999px; background:#ff4560; color:#fff; font-size:9px; font-weight:800;
      display:flex; align-items:center; justify-content:center;
      font-family:'Manrope', sans-serif; border:1.5px solid #050508;
    }
    .notif-panel {
      position:absolute; top:calc(100% + 12px); right:0;
      width:min(320px, calc(100vw - 40px)); max-height:420px; overflow-y:auto;
      background:#181113; border:1px solid rgba(255,47,160,.25);
      border-radius: 16px; padding:8px;
      box-shadow:0 8px 32px rgba(0,0,0,.5),0 0 24px rgba(255,47,160,.08);
      opacity:0; transform:translateY(-8px) scale(.97);
      transition:all .2s; pointer-events:none; z-index:200;
    }
    .notif-panel.open { opacity:1; transform:none; pointer-events:all; }
    .notif-panel-header {
      display:flex; align-items:center; justify-content:space-between;
      padding:8px 8px 10px; margin-bottom:4px; border-bottom:1px solid rgba(255,47,160,.06);
      font-size:13px; font-weight:700; color:#f4f3ef; font-family:'Manrope', sans-serif;
    }
    .notif-markread-btn {
      background:none; border:none; color:#ff2fa0; font-size:11px; font-weight:600;
      cursor:pointer; font-family:'Manrope', sans-serif; padding:2px;
    }
    .notif-markread-btn:hover { text-decoration:underline; }
    .notif-empty {
      padding:28px 12px; text-align:center; font-size:12.5px; color:rgba(244,243,239,.35);
      font-family:'Manrope', sans-serif;
    }
    .notif-item {
      display:flex; align-items:flex-start; gap:10px; padding:9px 8px; border-radius: 10px;
      cursor:pointer; transition:background .15s;
    }
    .notif-item:hover { background:rgba(255,47,160,.08); }
    .notif-item.unread { background:rgba(255,47,160,.06); }
    .notif-item-icon {
      width:28px; height:28px; border-radius:50%; flex-shrink:0;
      background:rgba(255,47,160,.12); color:#ff2fa0;
      display:flex; align-items:center; justify-content:center;
    }
    .notif-item-icon svg { width:14px; height:14px; stroke-width:2; }
    .notif-item-body { min-width:0; }
    .notif-item-title { font-size:12.5px; font-weight:600; color:#f4f3ef; font-family:'Manrope', sans-serif; line-height:1.4; }
    .notif-item.unread .notif-item-title { color:#fff; }
    .notif-item-text { font-size:11.5px; color:rgba(244,243,239,.45); margin-top:2px; line-height:1.4; }
    .notif-item-time { font-size:10px; color:rgba(244,243,239,.3); margin-top:4px; font-family:'Manrope', sans-serif; }
    @media (max-width: 768px) {
      .notif-panel {
        position: fixed;
        top: 74px;
        left: 10px;
        right: 10px;
        bottom: auto;
        width: auto;
      }
    }

/* ── BANDEAU COOKIES ── */
.cookie-banner {
  position: fixed;
  left: 16px;
  right: 16px;
  bottom: calc(16px + var(--tabbar-h));
  z-index: 400;
  max-width: 480px;
  margin: 0 auto;
  background: #181113;
  border: 1px solid rgba(255, 47, 160, 0.3);
  border-radius: var(--nv-r);
  padding: 18px 20px;
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.5);
  display: flex;
  flex-direction: column;
  gap: 14px;
  transform: translateY(140%);
  opacity: 0;
  pointer-events: none;
  transition:
    transform 0.35s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.3s;
}
.cookie-banner.visible {
  transform: none;
  opacity: 1;
  pointer-events: auto;
}
.cookie-banner-text {
  font-size: 12.5px;
  color: var(--nv-t2);
  line-height: 1.6;
}
.cookie-banner-text a {
  color: var(--nv-violet-b);
  text-decoration: underline;
}
.cookie-banner-actions {
  display: flex;
  gap: 10px;
}
.cookie-banner-actions button {
  flex: 1;
  padding: 10px 14px;
  border-radius: 999px;
  font-family: "Manrope", sans-serif;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
  transition: all 0.15s;
}
.cookie-btn-reject {
  background: transparent;
  border: 1px solid var(--nv-b2);
  color: var(--nv-t2);
}
.cookie-btn-reject:hover {
  border-color: var(--nv-t3);
  color: var(--nv-t1);
}
.cookie-btn-accept {
  background: linear-gradient(135deg, #ff2fa0, #ff2fa0);
  border: 1px solid rgba(255, 47, 160, 0.5);
  color: #fff;
}
.cookie-btn-accept:hover {
  box-shadow: 0 0 20px rgba(255, 47, 160, 0.4);
}
@media (max-width: 768px) {
  .cookie-banner {
    left: 10px;
    right: 10px;
    bottom: calc(84px + env(safe-area-inset-bottom, 0px));
  }
}

/* ── Vignettes du menu Explorer (copie limitée à la nav : les pages gardent
   leurs propres .ph pour leurs cartes) ── */
.nav-explore-thumb.ph { position: relative; background: #0b0b0c; }
.nav-explore-thumb.ph::before { content: ""; position: absolute; inset: 0; }
.nav-explore-thumb.ph-1::before { background: linear-gradient(155deg, #3a0f28 0%, #0b0b0c 62%); }
.nav-explore-thumb.ph-2::before { background: linear-gradient(155deg, #241a3a 0%, #0b0b0c 62%); }
.nav-explore-thumb.ph-3::before { background: linear-gradient(155deg, #1a2a30 0%, #0b0b0c 62%); }
.nav-explore-thumb.ph-5::before { background: linear-gradient(155deg, #2a0f30 0%, #0b0b0c 62%); }

/* ── BARRE D'ONGLETS MOBILE (≤768px) ───────────────────────────────────────
   Façon application : Accueil · Explorer · Créer/Rejoindre · Annonces ·
   Profil. Le contenu est rendu par NavTabs (nav.js) selon la session ; le
   balisage statique du partial est la version visiteur, affichée sans attendre
   le JavaScript. --tabbar-h sert aussi aux éléments fixes des pages (bandeau
   cookies, boutons flottants) pour se poser au-dessus de la barre. */
:root {
  --tabbar-h: 0px;
}
.tabbar,
.tab-sheet-overlay {
  display: none;
}
.nav-msg-btn {
  display: none;
}
button.burger-link {
  background: none;
  border: 0;
  width: 100%;
  text-align: left;
  cursor: pointer;
}
.burger-sep {
  height: 1px;
  background: rgba(255, 47, 160, 0.1);
  margin: 6px 12px;
}
.burger-link--quiet {
  color: var(--nv-t2);
  font-weight: 500;
  font-size: 14px;
  padding: 11px 12px;
}
.burger-link--quiet svg {
  color: var(--nv-t3);
}
/* Un indice « déjà connecté » existe : on n'affiche pas la barre visiteur
   le temps que NavTabs dessine la bonne (cf. nav.js). */
html.nav-hint-user #tabbar {
  visibility: hidden;
}
@media (max-width: 768px) {
  :root {
    --tabbar-h: calc(64px + env(safe-area-inset-bottom, 0px));
  }
  .tabbar {
    display: grid;
    grid-template-columns: 1fr 1fr 78px 1fr 1fr;
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 140;
    height: var(--tabbar-h);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    background: rgba(11, 11, 12, 0.94);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid var(--nv-b1);
    font-family: "Manrope", sans-serif;
  }
  /* Après la règle par défaut (display:none) plus haut dans ce fichier. */
  .nav-msg-btn {
    display: flex;
  }
  .tabbar.no-fab {
    grid-template-columns: repeat(4, 1fr);
  }
  .tabbar .tab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    min-width: 0;
    border: 0;
    background: transparent;
    color: var(--nv-t3);
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .tab svg {
    width: 23px;
    height: 23px;
    stroke-width: 1.8;
    fill: none !important;
  }
  .tabbar .tab span {
    font-size: 10.5px;
    font-weight: 600;
    white-space: nowrap;
  }
  .tabbar .tab[aria-current="page"] {
    color: var(--nv-violet-b);
  }
  .tabbar .tab[aria-current="page"]::before {
    content: "";
    position: absolute;
    bottom: 4px;
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--nv-violet-b);
  }
  .tabbar .tab-avatar {
    width: 25px;
    height: 25px;
    border-radius: 50%;
    background: radial-gradient(70% 70% at 30% 25%, #ff8fc8, #a8186a) center / cover;
    font-size: 10px;
    font-weight: 700;
    color: #fff;
    display: grid;
    place-items: center;
    border: 2px solid transparent;
  }
  .tabbar .tab[aria-current="page"] .tab-avatar {
    border-color: var(--nv-violet-b);
  }
  .tabbar .tab-fab {
    position: relative;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-end;
    border: 0;
    background: transparent;
    cursor: pointer;
    color: var(--nv-violet-b);
    font: inherit;
    padding: 0 0 8px;
    -webkit-tap-highlight-color: transparent;
  }
  .tabbar .tab-fab .disc {
    position: absolute;
    top: -22px;
    width: 54px;
    height: 54px;
    border-radius: 50%;
    background: linear-gradient(135deg, #ff2fa0, #ff00a8);
    box-shadow: 0 0 0 5px var(--nv-void), 0 8px 24px rgba(255, 47, 160, 0.5);
    display: grid;
    place-items: center;
    color: #fff;
  }
  .tabbar .tab-fab .disc svg {
    width: 26px;
    height: 26px;
    stroke-width: 2;
    fill: none !important;
  }
  .tabbar .tab-fab > span:last-child {
    font-size: 10.5px;
    font-weight: 700;
  }

  /* Feuille du bas (Explorer, Créer, Rejoindre) */
  .tab-sheet-overlay {
    position: fixed;
    inset: 0;
    z-index: 310;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    background: rgba(0, 0, 0, 0.7);
    backdrop-filter: blur(8px);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s;
  }
  .tab-sheet-overlay.visible {
    opacity: 1;
    pointer-events: auto;
  }
  .tab-sheet {
    width: 100%;
    max-width: 480px;
    background: #181113;
    border: 1px solid rgba(255, 47, 160, 0.3);
    border-bottom: 0;
    border-radius: 24px 24px 0 0;
    padding: 8px 8px calc(env(safe-area-inset-bottom, 0px) + 20px);
    transform: translateY(24px);
    transition: transform 0.3s cubic-bezier(0.22, 1, 0.36, 1);
    box-shadow: 0 -12px 48px rgba(0, 0, 0, 0.5);
    font-family: "Manrope", sans-serif;
    color: var(--nv-t1);
  }
  .tab-sheet-overlay.visible .tab-sheet {
    transform: none;
  }
  .tab-sheet-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 12px 8px;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--nv-t3);
  }
  .tab-sheet-item {
    display: flex;
    align-items: center;
    gap: 14px;
    width: 100%;
    padding: 12px;
    border: 0;
    border-radius: 16px;
    background: transparent;
    color: var(--nv-t1);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    font: inherit;
    transition: background 0.15s;
  }
  .tab-sheet-item:hover,
  .tab-sheet-item:focus-visible {
    background: rgba(255, 47, 160, 0.1);
  }
  .tab-sheet-item .ic {
    width: 40px;
    height: 40px;
    flex: none;
    border-radius: 12px;
    display: grid;
    place-items: center;
    background: rgba(255, 47, 160, 0.12);
    color: var(--nv-violet-b);
  }
  .tab-sheet-item .ic svg {
    width: 20px;
    height: 20px;
    stroke-width: 1.8;
    fill: none !important;
  }
  .tab-sheet-item .tx {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
  }
  .tab-sheet-item .tx small {
    display: block;
    margin-top: 1px;
    font-size: 12px;
    font-weight: 500;
    color: var(--nv-t3);
  }
  .tab-sheet-item .ct {
    font-size: 11.5px;
    font-weight: 600;
    color: var(--nv-t3);
  }
  .tab-sheet-link {
    display: block;
    width: 100%;
    margin-top: 4px;
    padding: 12px;
    border: 0;
    background: none;
    color: var(--nv-t2);
    font: inherit;
    font-size: 13.5px;
    text-align: center;
    cursor: pointer;
  }
  .tab-sheet-link b {
    color: var(--nv-violet-b);
  }
}
@media (prefers-reduced-motion: reduce) {
  .tab-sheet-overlay,
  .tab-sheet {
    transition: none;
  }
}