/* =====================================================================
   main-nav.css – navbar responsive + boutons étirés
   version 10-10-2025
   ===================================================================== */

/* ---------- Variables globales ---------- */
:root{
  --beige   : #f1e9dc;
  --gold    : #b58e4f;
  --text    : #2e2e2e;

  /* Hauteurs dynamiques (mises à jour par le JS) */
  --social-h : 60px;   /* barre sociale                        */
  --toggle-h : 44px;   /* hauteur .nav-wrapper                 */
  --combo-h  : 92px;   /* hauteur de .combo-bar (ul + sub-bar) */
}

/* ---------------------------------------------------------------------
   1. NAVBAR VISUELLE (boutons)
   --------------------------------------------------------------------- */

/* Conteneur du menu */
.main-nav{
  background: var(--beige);
  margin: 0;
  box-shadow: 0 4px 10px rgba(0,0,0,.06);
}

/* Liste d’onglets */
.main-nav ul,
.combo-bar ul{
  display: flex;
  flex-wrap: wrap;                 /* retour à la ligne auto */
  justify-content: center;         /* centrage */
  gap: .5rem;                      /* espacement homogène */
  list-style: none;
  margin: 0;
  padding: .6rem;
}

/* Éléments de liste → largeur égale */
.main-nav li,
.combo-bar li{
  flex: 1 1 200px;                 /* chaque bouton min 200px, s’étire */
  display: flex;
  justify-content: center;
}

/* Dernier bouton (ex: Contact) → pleine largeur */
.main-nav li:last-child,
.combo-bar li:last-child{
  flex: 1 1 100%;
}

/* Liens (boutons) */
.main-nav a,
.combo-bar a{
  display: block;
  width: 100%;                     /* prend toute la largeur de son li */
  padding: .6rem 1rem;
  border: 2px solid var(--gold);
  border-radius: 50px;
  background: #fff;
  font-weight: 600;
  text-align: center;
  white-space: nowrap;
  color: var(--text);
  text-decoration: none;
  transition: background .3s, color .3s;
  box-sizing: border-box;
}

/* Hover / focus */
.main-nav a:hover,
.combo-bar a:hover,
.main-nav a:focus,
.combo-bar a:focus{
  background: var(--gold);
  color: #fff;
}

/* ---------------------------------------------------------------------
   2. RESPONSIVE
   --------------------------------------------------------------------- */
@media (max-width: 1024px){
  .main-nav li,
  .combo-bar li{
    flex: 1 1 160px;               /* réduit la largeur mini */
  }
  .main-nav a,
  .combo-bar a{
    padding: .5rem 1rem;
    font-size: 0.95rem;
  }
}
@media (max-width: 768px){
  .main-nav li,
  .combo-bar li{
    flex: 1 1 140px;
  }
  .main-nav a,
  .combo-bar a{
    padding: .45rem .9rem;
    font-size: 0.9rem;
  }
}
@media (max-width: 480px){
  .main-nav li,
  .combo-bar li{
    flex: 1 1 120px;
  }
  .main-nav a,
  .combo-bar a{
    padding: .4rem .7rem;
    font-size: 0.85rem;
  }
}
@media (max-width: 360px){
  .main-nav li,
  .combo-bar li{
    flex: 1 1 100px;
  }
  .main-nav a,
  .combo-bar a{
    padding: .35rem .6rem;
    font-size: 0.8rem;
  }
}

/* ---------------------------------------------------------------------
   3. COMBO-BAR (sticky sous bande noire)
   --------------------------------------------------------------------- */
.combo-bar{
  position: sticky;
  top: calc(var(--social-h) + var(--toggle-h));
  z-index: 950;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0,0,0,.06);
}

.combo-bar.hidden{
  position: static !important;
  box-shadow: none;
}

.combo-bar #sub-bar{
  padding: .5rem 0;
  text-align: center;
  font-weight: 600;
  border-top: 1px solid var(--gold);
}

/* ---------------------------------------------------------------------
   4. Décalage du contenu quand nav ouverte
   --------------------------------------------------------------------- */
body.nav-open{
  padding-top: var(--combo-h);
}

/* ---------------------------------------------------------------------
   5. Combo-bar collée sous bande noire quand nav ouverte
   --------------------------------------------------------------------- */
body.nav-open .combo-bar{
  position: fixed;
  top: calc(var(--social-h) + var(--toggle-h));
  left: 0;
  right: 0;
  z-index: 2950;
}