/* ==========================================================================
   HEADER & NAVIGATION
   Barre de navigation fixe, logo, nav desktop, menu kebab, menu utilisateur
   ========================================================================== */

/* ── Header principal ── */
.site-header {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 1000;
  height: var(--header-h);
  background: rgba(26,58,42,.96);
  backdrop-filter: blur(16px);
  border-bottom: 1px solid rgba(111,207,66,.2);
  transition: background var(--transition), box-shadow var(--transition);
}

.site-header.scrolled {
  background: rgba(20,26,34,.99);
  box-shadow: 0 4px 24px rgba(0,0,0,.3);
}

.header-inner {
  max-width: var(--max-w);
  margin-inline: auto;
  padding-inline: 16px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 0;
}

/* ── Logo ── */
.site-logo {
  display: flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
  flex-shrink: 0;
  margin-left: 20px;
}

.logo-text .name {
  font-family: var(--font-display);
  font-size: 20px;
  letter-spacing: 2px;
  color: var(--white);
  line-height: 1;
}

.logo-text .sub {
  font-size: 10px;
  font-weight: 500;
  color: rgba(255,255,255,.42);
  letter-spacing: 1px;
  text-transform: uppercase;
}

/* ── Navigation desktop ── */
.main-nav {
  margin-left: 24px;
  display: block;
}

.nav-list {
  display: flex;
  align-items: center;
  gap: 2px;
  list-style: none;
  margin: 0;
  padding: 0;
}

.nav-list > li > a {
  display: flex;
  align-items: center;
  padding: 7px 13px;
  border-radius: var(--radius-sm);
  font-size: 14px;
  font-weight: 500;
  color: rgba(255,255,255,.72);
  transition: color var(--transition), background var(--transition);
  white-space: nowrap;
  text-decoration: none;
}

.nav-list > li > a:hover,
.nav-list > li.current-menu-item > a {
  color: #fff;
  background: rgba(255,255,255,.1);
}

/* ── Icônes réseaux sociaux ── */
.jdm-social-icons {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-right: 4px;
}

.jdm-social-icon {
  display: grid;
  place-items: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  text-decoration: none;
  transition: transform var(--transition), background var(--transition), box-shadow var(--transition);
  flex-shrink: 0;
  position: relative;
}

.jdm-social-icon:hover {
  transform: translateY(-2px);
  box-shadow: 0 4px 14px rgba(0,0,0,.35);
}

.jdm-social-wa  { background: #25D366; color: #fff; }
.jdm-social-wa:hover { background: #1ebe5d; }
.jdm-social-strava  { background: #FC4C02; color: #fff; }
.jdm-social-strava:hover { background: #e03d00; }

@media (max-width: 640px) {
  .jdm-social-icons { gap: 4px; }
  .jdm-social-icon  { width: 28px; height: 28px; }

  /* Mobile vertical : cacher l'image du logo, garder le texte nom/ville */
  .site-logo img { display: none; }
}

/* ── Menu utilisateur ── */
.header-right {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-shrink: 0;
}

.user-menu {
  position: relative;
}

.user-menu-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px 6px 6px;
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.15);
  border-radius: var(--radius-pill);
  cursor: pointer;
  transition: all var(--transition);
}

.user-menu-toggle:hover {
  background: rgba(255,255,255,.14);
}

.user-avatar {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--lime-dark), var(--color-accent-lt));
  display: grid;
  place-items: center;
  font-size: 12px;
  font-weight: 700;
  color: var(--forest);
}

.user-menu-toggle .uname {
  font-size: 13px;
  font-weight: 600;
  color: rgba(255,255,255,.85);
}

.user-menu-toggle svg {
  color: rgba(255,255,255,.45);
  transition: transform var(--transition);
}

.user-menu-toggle.open svg {
  transform: rotate(180deg);
}

.user-dropdown {
  display: none;
  position: absolute;
  top: calc(100% + 8px);
  right: 0;
  min-width: 200px;
  background: var(--white);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg);
  border: 1px solid var(--smoke);
  overflow: hidden;
  z-index: 200;
}

.user-dropdown.open {
  display: block;
  animation: fadeDown .18s ease;
}

@keyframes fadeDown {
  from { opacity: 0; transform: translateY(-6px); }
  to   { opacity: 1; transform: translateY(0); }
}

.user-dropdown a,
.user-dropdown button {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 11px 16px;
  font-size: 14px;
  color: var(--ink-mid);
  transition: background var(--transition);
  text-align: left;
  border: none;
  background: none;
  font-family: var(--font);
  cursor: pointer;
}

.user-dropdown a:hover,
.user-dropdown button:hover {
  background: var(--chalk);
  color: var(--forest);
}

.user-dropdown .sep    { height: 1px; background: var(--smoke); margin: 4px 0; }
.user-dropdown .logout { color: #dc2626; }
.user-dropdown svg     { width: 16px; height: 16px; flex-shrink: 0; color: var(--ink-soft); }

/* ── Bouton Rejoindre ── */
.btn-join {
  padding: 9px 20px;
  border-radius: var(--radius-pill);
  background: var(--lime);
  color: var(--forest);
  font-size: 13px;
  font-weight: 700;
  display: flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  transition: all var(--transition);
  cursor: pointer;
}

.btn-join:hover {
  background: var(--lime-dark);
  transform: translateY(-1px);
  box-shadow: 0 4px 16px rgba(111,207,66,.4);
}

/* ── Hamburger mobile (supprimé — navigation unifiée sur le kebab drawer) ── */
/* .menu-toggle et .menu-toggle span supprimés en v3.9.6 :
   Le seul système de navigation mobile est le kebab panel (#kebab-btn / #kebab-panel).
   Cf. audit UX — correction critique #1. */

/* ==========================================================================
   MENU KEBAB (panneau latéral)
   ========================================================================== */

.kebab-wrap {
  position: relative;
  flex-shrink: 0;
  display: block;
}

.kebab-btn {
  width: 40px;
  height: 40px;
  border-radius: var(--radius);
  background: rgba(255,255,255,.08);
  border: 1px solid rgba(255,255,255,.14);
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  cursor: pointer;
  padding: 0;
  transition: background var(--transition);
  position: relative;
  z-index: 1002;
}

.kebab-btn:hover {
  background: rgba(255,255,255,.15);
}

.kebab-btn span {
  display: block;
  width: 18px;
  height: 2px;
  border-radius: 2px;
  background: rgba(255,255,255,.8);
}

/* Overlay sombre derrière le panneau */
.kebab-overlay {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 999;
  background: rgba(0,0,0,0);
  transition: background var(--transition);
  cursor: pointer;
}

.kebab-overlay.open {
  display: block;
  background: rgba(0,0,0,.55);
  backdrop-filter: blur(2px);
}

/* Panneau latéral */
/* ==========================================================================
   KEBAB PANEL — design moderne
   Fond sombre glass, card profil utilisateur, items aérés, couleurs actives.
   ========================================================================== */

.kebab-panel {
  position:        fixed;
  top:             0;
  left:            0;
  bottom:          0;
  z-index:         1000;
  width:           300px;
  max-width:       88vw;
  background:      rgba(10, 20, 14, 0.97);
  backdrop-filter: blur(20px);
  -webkit-backdrop-filter: blur(20px);
  box-shadow:      6px 0 40px rgba(0,0,0,.55);
  border-right:    1px solid rgba(255,255,255,.07);
  display:         none;
  flex-direction:  column;
  overflow-y:      auto;
  overflow-x:      hidden;
}

.kebab-panel.animating {
  display:    flex;
  transform:  translateX(-100%);
  transition: transform var(--transition-slow);
}

.kebab-panel.open {
  display:    flex;
  transform:  translateX(0);
  transition: transform var(--transition-slow);
}

/* ── En-tête ── */
.kebab-header {
  background:  transparent;
  padding:     env(safe-area-inset-top, 16px) 16px 0;
  padding-top: calc(env(safe-area-inset-top, 0px) + 16px);
  flex-shrink: 0;
  position:    relative;
}

/* ── Bouton fermer ── */
.kebab-close-btn {
  position:    absolute;
  top:         calc(env(safe-area-inset-top, 0px) + 14px);
  right:       14px;
  width:       32px;
  height:      32px;
  border-radius: 50%;
  background:  rgba(255,255,255,.1);
  border:      none;
  cursor:      pointer;
  display:     grid;
  place-items: center;
  transition: background var(--transition);
  flex-shrink: 0;
}
.kebab-close-btn:hover { background: rgba(255,255,255,.18); }
.kebab-close-btn svg   { color: rgba(255,255,255,.7); }

/* ── Card profil utilisateur ── */
.kebab-user-card {
  padding:       16px 16px 14px;
  border-bottom: 1px solid rgba(255,255,255,.08);
  margin-top:    8px;
}

.kebab-user-link {
  display:         flex;
  align-items:     center;
  gap:             12px;
  text-decoration: none;
  padding:         10px 12px;
  border-radius: var(--radius-md);
  background:      rgba(255,255,255,.06);
  border:          1px solid rgba(255,255,255,.09);
  transition: background var(--transition);
}
.kebab-user-link:hover { background: rgba(255,255,255,.1); }

.kebab-user-avatar {
  width:          44px;
  height:         44px;
  border-radius:  50%;
  flex-shrink:    0;
  overflow:       hidden;
  background:     var(--forest, var(--forest));
  border:         2px solid rgba(111,207,66,.4);
  display:        flex;
  align-items:    center;
  justify-content: center;
}
.kebab-user-avatar img {
  width:      100%;
  height:     100%;
  object-fit: cover;
}
.kebab-user-avatar span {
  font-family:  var(--font-display, sans-serif);
  font-size:    18px;
  font-weight:  700;
  color:        var(--lime, var(--lime-accent));
  line-height:  1;
}

.kebab-user-info {
  flex:       1;
  min-width:  0;
}
.kebab-user-info strong {
  display:       block;
  font-size:     14px;
  font-weight:   600;
  color:         #fff;
  white-space:   nowrap;
  overflow:      hidden;
  text-overflow: ellipsis;
}
.kebab-user-info span {
  font-size: 11px;
  color:     rgba(255,255,255,.4);
  margin-top: 2px;
  display:   block;
}

.kebab-user-arrow {
  color:       rgba(255,255,255,.3);
  flex-shrink: 0;
}

/* Logo + nom quand non connecté */
.kebab-header-top {
  padding:    16px 16px 14px;
  margin-top: 8px;
}
.kebab-logo-link {
  display:         flex;
  align-items:     center;
  gap:             10px;
  text-decoration: none;
}
.kebab-logo-name {
  font-family:   var(--font-display, sans-serif);
  font-size:     15px;
  letter-spacing: 1.5px;
  color:         rgba(255,255,255,.9);
  font-weight:   700;
}

/* ── Liste des items ── */
.kebab-menu-list {
  list-style: none;
  padding:    8px 10px;
  flex:       1;
  margin:     0;
}

.kebab-menu-list li {
  display: block;
}

.kebab-section-label {
  font-size:      10px;
  font-weight:    700;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color:          rgba(255,255,255,.25);
  padding:        14px 10px 6px;
}

.kebab-menu-list li a {
  display:         flex;
  align-items:     center;
  gap:             12px;
  padding:         12px 12px;
  font-size:       14px;
  font-weight:     500;
  color:           rgba(255,255,255,.72);
  transition: background var(--transition-fast), color var(--transition-fast);
  text-decoration: none;
  border-radius: var(--radius);
}

.kebab-menu-list li a:hover {
  background: rgba(255,255,255,.07);
  color:      #fff;
}

.kebab-menu-list li.current-menu-item a {
  background: rgba(111,207,66,.12);
  color:      var(--lime-accent);
  font-weight: 600;
}

.kebab-menu-list li a svg {
  width:       18px;
  height:      18px;
  color:       rgba(255,255,255,.35);
  flex-shrink: 0;
  transition: color var(--transition-fast);
}

.kebab-menu-list li a:hover svg,
.kebab-menu-list li.current-menu-item a svg {
  color: currentColor;
}

/* Séparateur entre sections */
.kebab-menu-list li + .kebab-section-label {
  border-top:  1px solid rgba(255,255,255,.06);
  margin-top:  6px;
}

/* ── Zone auth ── */
.kebab-auth {
  padding:       12px 12px calc(env(safe-area-inset-bottom, 0px) + 16px);
  border-top:    1px solid rgba(255,255,255,.07);
  display:       flex;
  gap:           8px;
  flex-shrink:   0;
}

.kebab-auth-btn {
  flex:         1;
  padding:      11px;
  border-radius: var(--radius);
  font-size:    13px;
  font-weight:  600;
  font-family:  inherit;
  cursor:       pointer;
  border:       1.5px solid rgba(255,255,255,.15);
  background:   rgba(255,255,255,.06);
  color:        rgba(255,255,255,.8);
  transition: all var(--transition);
}

.kebab-auth-btn-primary {
  background:   rgba(111,207,66,.2);
  color:        var(--lime-accent);
  border-color: rgba(111,207,66,.4);
}

.kebab-auth-btn:hover         { background: rgba(255,255,255,.12); color: #fff; }
.kebab-auth-btn-primary:hover { background: rgba(111,207,66,.3); }

/* ==========================================================================

/* ==========================================================================
   NAVIGATION SECONDAIRE — Boutons de section
   Desktop : carrés intégrés dans le header, entre logo et nav principale
   Mobile  : barre fixe sous le header, verticale (icônes seules, grandes)
   ========================================================================== */

/* ── Base bouton (partagé) ────────────────────────────────────────── */
.jdm-sec-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--p-border, rgba(255,255,255,.15));
  background: var(--p-bg, rgba(255,255,255,.06));
  color: var(--p-color, rgba(255,255,255,.6));
  font-family: var(--font);
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
  flex-shrink: 0;
  transition: filter var(--transition-fast), opacity var(--transition-fast), transform var(--transition-fast);
  border-radius: var(--radius);
}
.jdm-sec-btn-ico  { line-height: 1; }
.jdm-sec-btn-lbl  {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .4px;
  text-transform: uppercase;
}

/* ── DESKTOP : carrés dans le header ─────────────────────────────── */
.jdm-sec-inline {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: auto;   /* pousse depuis le logo */
  margin-right: auto;  /* pousse depuis les boutons droite → centré */
  flex-shrink: 0;
}

/* Sur desktop : bouton carré — icône + label empilés verticalement */
.jdm-sec-inline .jdm-sec-btn {
  flex-direction: column;
  gap: 2px;
  width: 46px;
  height: 46px;
  padding: 0;
  opacity: .65;
  border-radius: var(--radius);
}
.jdm-sec-inline .jdm-sec-btn-ico { font-size: 18px; }
.jdm-sec-inline .jdm-sec-btn-lbl {
  font-size: 7.5px;
  font-weight: 700;
  letter-spacing: .2px;
  text-transform: uppercase;
  color: inherit;
  max-width: 42px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.jdm-sec-inline .jdm-sec-btn:hover {
  filter: brightness(1.4) saturate(1.2);
  opacity: 1;
  transform: translateY(-1px);
}
.jdm-sec-inline .jdm-sec-btn--active {
  opacity: 1;
  filter: brightness(1.1);
  cursor: default;
}
.jdm-sec-inline .jdm-sec-btn--active:hover { transform: none; }

/* Bouton Profil desktop : avatar circulaire dans un carré comme les autres boutons */
.jdm-sec-inline .jdm-sec-btn .jdm-sec-btn-avatar {
  width:         22px;
  height:        22px;
  border-radius: 50%;
  object-fit:    cover;
  border:        1.5px solid rgba(255,255,255,.3);
  display:       block;
}
.jdm-sec-inline .jdm-sec-btn-initial {
  width:           22px;
  height:          22px;
  border-radius:   50%;
  background:      rgba(100,116,139,.35);
  border:          1.5px solid rgba(148,163,184,.4);
  display:         flex;
  align-items:     center;
  justify-content: center;
  font-size:       11px;
  font-weight:     700;
  color:           #94a3b8;
  line-height:     1;
}
.jdm-section-nav {
  position: fixed;
  top: var(--header-h, 70px);
  left: 0;
  right: 0;
  z-index: 990;
  height: 52px;
  background: rgba(10, 16, 24, 0.97);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--sec-border, rgba(255,255,255,.1));
  transition: border-color var(--transition-slow);
  display: none; /* caché sur desktop */
}

.jdm-section-nav-inner {
  max-width: var(--max-w, 1200px);
  margin-inline: auto;
  padding-inline: 10px;
  height: 100%;
  display: flex;
  align-items: center;
  gap: 6px;
  overflow-x: auto;
  scrollbar-width: none;
}
.jdm-section-nav-inner::-webkit-scrollbar { display: none; }

/* Décalage héros géré par chaque template via style inline */

/* ── MOBILE ≤ 767px portrait uniquement ──────────────────────────── */
@media (max-width: 767px) and (orientation: portrait) {
  /* Cacher la nav inline du header */
  .jdm-sec-inline { display: none !important; }

  /* Afficher la barre mobile */
  .jdm-section-nav { display: block; }

  /* Boutons mobiles : carrés, icône seule, grande */
  .jdm-sec-btn {
    width: 44px;
    height: 44px;
    padding: 0;
    border-radius: var(--radius);
    opacity: .75;
    flex-direction: column;
    gap: 0;
  }
  .jdm-sec-btn-ico { font-size: 22px; }
  .jdm-sec-btn-lbl { display: none; }
  .jdm-sec-btn--active { opacity: 1; }
  .jdm-sec-btn:hover { filter: brightness(1.3); opacity: 1; transform: none; }

  /* Décalage héros géré par chaque template via style inline */
}

/* En PWA standalone : pas de 52px (nav en bas) */
@media (display-mode: standalone) {
  body.has-section-nav .jdm-ann-search-bar,
  body .jdm-ann-search-bar {
    top: calc(var(--header-h, 70px) + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Anciens sélecteurs neutralisés */
.jdm-sec-divider,
.jdm-sec-current,
.jdm-sec-pill,
.jdm-sec-home { display: none !important; }