/* ─── Bottom nav (3 boutons : Maison / Cartes / Contacts) ───────────── */
.bottom-nav{
  position:fixed;
  bottom:0;left:0;right:0;
  height:64px;
  background:#fff;
  border-top:1px solid rgba(0,0,0,0.08);
  display:flex;
  z-index:50;
  padding-bottom:env(safe-area-inset-bottom,0);
  font-family:'Outfit',sans-serif;
}
.bottom-nav-item{
  flex:1;
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:3px;
  padding:8px 4px;
  background:none;
  border:none;
  cursor:pointer;
  color:#94a3b8;
  text-decoration:none;
  font-family:inherit;
  font-size:11px;
  font-weight:600;
  transition:color 0.18s;
  position:relative;
}
.bottom-nav-item:hover{color:#475569;}
.bottom-nav-item.is-active{color:#6b1f8a;}
.bottom-nav-item.is-active::before{
  content:"";
  position:absolute;
  top:0;left:50%;
  transform:translateX(-50%);
  width:32px;height:3px;
  background:linear-gradient(135deg,#6b1f8a 0%,#c2185b 100%);
  border-radius:0 0 3px 3px;
}
.bottom-nav-item svg{width:22px;height:22px;}

/* Padding-bottom du body pour que la nav ne cache pas le contenu */
body.has-bottom-nav{padding-bottom:calc(64px + env(safe-area-inset-bottom,0));}

/* Cacher la bottom nav quand l'éditeur React plein écran est ouvert
   (.editor-overlay de app.js, mode édition étendu). */
body:has(.editor-overlay) .bottom-nav{display:none;}
body:has(.editor-overlay).has-bottom-nav{padding-bottom:0;}

/* ─── Cloche notifications + bouton ☰ Mon compte (top right) ────────── */
.notif-btn,
.account-btn{
  position:relative;
  width:40px;height:40px;
  border-radius:50%;
  background:transparent;
  border:none;
  display:flex;align-items:center;justify-content:center;
  cursor:pointer;
  color:#475569;
  transition:background 0.18s,color 0.18s;
  text-decoration:none;
}
.notif-btn:hover,
.account-btn:hover{background:rgba(0,0,0,0.05);color:#0f172a;}
.notif-btn svg,
.account-btn svg{width:22px;height:22px;}

.notif-dot{
  position:absolute;
  top:8px;right:8px;
  width:8px;height:8px;
  background:#e11d48;
  border:2px solid #fff;
  border-radius:50%;
}
.notif-dot[hidden]{display:none;}