/* === HEADER LAYOUT COMMUN ===================================== */
header{background:#fff;box-shadow:0 2px 4px rgba(0,0,0,.1);z-index:1000;position:relative}
.header-container{max-width:1200px;margin:0 auto;padding:15px 20px;display:flex;justify-content:space-between;align-items:center}
.logo-container{display:flex;align-items:center;gap:20px}
.logo-img{max-width:180px;transition:max-width .3s}

/* === NAV DESKTOP ============================================== */
.navbar ul{display:flex;gap:20px;list-style:none;margin:0;padding:0}
.navbar a{color:#333;font-weight:500;text-decoration:none;padding:6px 10px;transition:color .2s}
.navbar a:hover{color:#4CAF50}

/* —— Reste du header inchangé (layout, nav desktop) —— */

/* display:block par défaut pour être cliquable */
.menu-toggle{
  display:block;                 /* ? Était “none” */
  cursor:pointer;padding:10px;z-index:1001
}
.menu-toggle .bar{width:26px;height:3px;margin:5px 0;background:#333;transition:.3s}
.menu-toggle.active .bar:nth-child(1){transform:translateY(8px) rotate(45deg)}
.menu-toggle.active .bar:nth-child(2){opacity:0}
.menu-toggle.active .bar:nth-child(3){transform:translateY(-8px) rotate(-45deg)}

/* —— Mobile ? 768 px : on cache seulement la LISTE —— */
@media (max-width:768px){
  .logo-img{max-width:150px}
  .navbar ul{display:none;flex-direction:column;position:fixed;top:0;left:0;width:100%;height:100vh;background:#fff;align-items:center;padding:90px 20px 20px;gap:15px;overflow-y:auto;z-index:999}
  .navbar ul.active{display:flex}
  .navbar a{font-size:1.2rem;width:100%;text-align:center;padding:15px 0;border-bottom:1px solid #eee}
  .member-link{margin-top:20px;border-top:1px solid #eee;padding-top:20px}
  .header-container.menu-open{position:fixed;width:100%;background:#fff;box-shadow:0 2px 10px rgba(0,0,0,.1)}
}

/* —— Desktop ? 769 px —— */
@media (min-width:769px){
  .menu-toggle{display:none}     /* on le masque seulement en large écran */
  .navbar ul{display:flex}       /* nav toujours visible */
}