/* ============================================================
   assets/css/navbar.css
   Styles navbar PC + bottom bar mobile — Éco'Mam
   ============================================================ */


/* ══════════════════════════════════════════
   VARIABLES (reprises de style.css)
   ══════════════════════════════════════════ */
:root {
  --belge:      #b5833e;
  --peche:      #eec9ae;
  --vert:       #54a66a;
  --vert-clair: #e8f5ed;
  --citron:     #fff8c9;
  --blanc:      #ffffff;
  --texte:      #4a3728;
  --gris-texte: #9a8878;
  --erreur:     #c0392b;

  --font-titre: 'Schoolbell', cursive;
  --font-texte: 'Nunito', sans-serif;

  --navbar-h:     68px;
  --bottombar-h:  68px;
}


/* ══════════════════════════════════════════
   NAVBAR PC
   ══════════════════════════════════════════ */
.navbar {
  position:   sticky;
  top:        0;
  z-index:    1000;
  width:      100%;
  height:     var(--navbar-h);
  background: var(--blanc);
  border-bottom: 1.5px solid var(--peche);
}

.navbar-inner {
  height:      100%;
  margin:      0 auto;
  padding:     0 32px;
  display:     flex;
  align-items: center;
  gap:         0;
}

/* ── Logo ── */
.nav-logo {
  font-family:     var(--font-titre);
  font-size:       1.7rem;
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             8px;
  flex-shrink:     0;
  margin-right:    auto;
}

.nav-logo-icon {
  width:           34px;
  height:          34px;
  background:      var(--vert);
  border-radius:   50% 50% 50% 10%;
  display:         flex;
  align-items:     center;
  justify-content: center;
}

.nav-logo-icon i {
  font-size: 14px;
  color:     #fff;
}

.nav-logo-eco { color: var(--belge); }
.nav-logo-mam { color: var(--vert);  }

/* ── Liens centraux ── */
.nav-links {
  display:  flex;
  align-items: center;
  gap:      20px;
  position: absolute;
  left:     50%;
  transform: translateX(-50%);
}

.nav-link {
  font-family:     var(--font-texte);
  font-size:       .84rem;
  font-weight:     600;
  color:           var(--gris-texte);
  text-decoration: none;
  padding:         8px 14px;
  border-radius:   10px;
  transition:      color .18s, background .18s;
  white-space:     nowrap;
  position:        relative;
}

.nav-link::after {
  content: "";
  position: absolute;
  width: 100%;
  height: 2px;                    
  background: var(--belge);       
  border-radius: 5px;
  bottom: 0;                     
  left: 0;
  transform: scaleX(0);       
  transition: transform .3s ease;
}

.nav-link:hover::after {
  transform: scaleX(1);
}

.nav-link.active {
  color:       var(--belge);
  background:  var(--citron);
  font-weight: 700;
}

/* ── Actions droite ── */
.nav-actions {
  display:     flex;
  align-items: center;
  gap:         10px;
  margin-left: auto;
  position:    relative;
}

/* Boutons non connecté */
.nav-btn {
  font-family:     var(--font-texte);
  font-size:       .8rem;
  font-weight:     700;
  padding:         8px 18px;
  border-radius:   10px;
  text-decoration: none;
  display:         flex;
  align-items:     center;
  gap:             6px;
  transition:      all .18s;
  cursor:          pointer;
  border:          none;
}

.nav-btn--outline {
  color:      var(--belge);
  background: transparent;
  border:     1.5px solid var(--peche);
}

.nav-btn--outline:hover {
  background:   var(--citron);
  border-color: var(--belge);
}

.nav-btn--filled {
  color:      #fff;
  background: var(--vert);
}

.nav-btn--filled:hover {
  background: #3d7a4f;
}

.nav-btn i {
  font-size: .75rem;
}

/* ── Avatar connecté ── */
.nav-avatar {
  display:         flex;
  align-items:     center;
  gap:             8px;
  padding:         6px 12px 6px 6px;
  border-radius:   12px;
  border:          1.5px solid var(--peche);
  background:      transparent;
  text-decoration: none;
  cursor:          pointer;
  transition:      all .18s;
}

.nav-avatar:hover,
.nav-avatar.open {
  background:   var(--citron);
  border-color: var(--belge);
}

.nav-avatar-initials {
  width:           34px;
  height:          34px;
  border-radius:   8px;
  background:      var(--citron);
  border:          1.5px solid var(--peche);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-family:     var(--font-titre);
  font-size:       .95rem;
  color:           var(--belge);
  flex-shrink:     0;
}

.nav-avatar-name {
  font-size:   .82rem;
  font-weight: 700;
  color:       var(--texte);
  font-family: var(--font-texte);
}

.nav-avatar-chevron {
  font-size:  .65rem;
  color:      var(--gris-texte);
  transition: transform .2s;
}

.nav-avatar.open .nav-avatar-chevron {
  transform: rotate(180deg);
}

/* ── Dropdown ── */
.nav-dropdown {
  position:      absolute;
  top:           calc(100% + 10px);
  right:         0;
  background:    var(--blanc);
  border:        1.5px solid var(--peche);
  border-radius: 16px;
  padding:       8px;
  min-width:     200px;
  opacity:       0;
  pointer-events: none;
  transform:     translateY(-6px);
  transition:    opacity .2s, transform .2s;
  z-index:       100;
}

.nav-dropdown.open {
  opacity:        1;
  pointer-events: auto;
  transform:      translateY(0);
}

.nav-dropdown-item {
  display:         flex;
  align-items:     center;
  gap:             10px;
  padding:         10px 14px;
  border-radius:   10px;
  font-size:       .84rem;
  font-weight:     600;
  color:           var(--texte);
  text-decoration: none;
  font-family:     var(--font-texte);
  transition:      background .15s, color .15s;
}

.nav-dropdown-item:hover {
  background: var(--citron);
  color:      var(--belge);
}

.nav-dropdown-item i {
  width:     16px;
  text-align: center;
  color:      var(--gris-texte);
  font-size:  .82rem;
}

.nav-dropdown-item--danger {
  color: var(--erreur);
}

.nav-dropdown-item--danger:hover {
  background-color: #c0392b;
  color: #fff;
}

.nav-dropdown-item--danger i {
  color: var(--erreur);
}

.nav-dropdown-item--danger:hover i {
  color: #fff;
}

.nav-dropdown-sep {
  height:     1px;
  background: var(--peche);
  margin:     6px 8px;
  opacity:    .5;
}


/* ══════════════════════════════════════════
   BOTTOM BAR MOBILE
   Masquée par défaut, visible < 768px
   ══════════════════════════════════════════ */
.bottom-bar {
  display:    none; /* masquée sur PC */
}

@media (max-width: 950px) {

  /* Cache la navbar PC */
  .navbar {
    display: none;
  }

  /* Affiche la bottom bar */
  .bottom-bar {
    display:         flex;
    align-items:     center;
    justify-content: space-around;
    position:        fixed;
    bottom:          0;
    left:            0;
    right:           0;
    height:          var(--bottombar-h);
    background:      var(--blanc);
    border-top:      1.5px solid var(--peche);
    padding:         0 8px env(safe-area-inset-bottom);
    z-index:         1000;
  }

  /* Décalage du contenu pour ne pas être caché sous la barre */
  body {
    padding-bottom: var(--bottombar-h);
  }

  /* Item */
  .bot-item {
    display:         flex;
    flex-direction:  column;
    align-items:     center;
    justify-content: center;
    gap:             3px;
    text-decoration: none;
    flex:            1;
    max-width:       72px;
    padding:         6px 0;
    border-radius:   12px;
    transition:      background .15s;
  }

  /* Icône */
  .bot-icon {
    width:           40px;
    height:          40px;
    border-radius:   12px;
    display:         flex;
    align-items:     center;
    justify-content: center;
    font-size:       17px;
    color:           var(--gris-texte);
    transition:      all .18s;
  }

  /* Label */
  .bot-lbl {
    font-size:   9.5px;
    font-weight: 600;
    color:       var(--gris-texte);
    font-family: var(--font-texte);
    white-space: nowrap;
  }

  /* État actif */
  .bot-item.active .bot-icon {
    background: var(--citron);
    color:      var(--belge);
  }

  .bot-item.active .bot-lbl {
    color:       var(--belge);
    font-weight: 700;
  }

  /* Bouton central proéminent (Contact) */
  .bot-item--center .bot-icon {
    width:      44px;
    height:     44px;
    background: var(--belge);
    color:      #fff;
    font-size:  19px;
    border-radius: 14px;
  }

  .bot-item--center .bot-lbl {
    color:       var(--belge);
    font-weight: 700;
  }

  /* Avatar initiales dans la bottom bar */
  .bot-icon--avatar {
    background:  var(--citron) !important;
    border:      1.5px solid var(--peche);
    font-family: var(--font-titre);
    font-size:   14px !important;
    color:       var(--belge) !important;
  }

}