/* Mobile : même image, cadrage un peu plus haut si besoin */
@media (max-width: 480px){
  header.site-header{
    background-position: center top;
  }
}


/* === Mobile uniquement : on rétrécit, on ne déplace rien === */
@media (max-width: 480px) {
  
  /* Header plus dense + FIXE (sinon la page devient scrollable sur iOS) */
  header.site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;

    /* Notch / safe-area */
    height: calc(var(--header-h) + env(safe-area-inset-top)) !important;
    padding-top: env(safe-area-inset-top) !important;

    gap: 8px;
    padding-left: 10px;
    padding-right: 10px;

    z-index: 6000 !important;
  }

  /* Logo + titre plus compacts (pour libérer la place des boutons) */
  .brand img { width: 48px; height: 48px; }
  .brand .name {
    font-size: 48px;
    max-width: 45vw;            /* évite que le titre mange les boutons */
    overflow: hidden; white-space: nowrap; text-overflow: ellipsis;
  }
 
  /* Boutons du header (filtre, +, amis, profil) plus petits */
  .btn {
    height: 36px;
    min-width: 36px;
    padding: 0 10px;            /* OK pour Amis/Profil (texte) */
    gap: 0px;
  }
  .btn-icon {                   /* Filtre / + (icône seule) */
    width: 36px;
    padding: 0;
  }
  .icon-lg {                    /* Icônes en trait blanc */
    width: 20px; height: 20px;
  }

  /* Pastilles vert/orange/rouge : restent rondes, plus petites */
  .chip {
    width: 24px; height: 24px;
    border-radius: 50%;
  }

/* === Mobile : sortir les pastilles du header (sans wrapper .chips) === */
  header.site-header .chip {
    position: fixed;
    top: calc(var(--header-h) + env(safe-area-inset-top) + 12px);
    z-index: 3500;           /* au-dessus de la carte, sous le header */
  }
  /* Place chaque pastille à gauche de l’écran, côte à côte */
  header.site-header .chip.green  { left: 15px; }
  header.site-header .chip.orange { left: 50px; }  
  header.site-header .chip.red    { left: 90px; }

 #btnFriends,
  #btnFriendsLocked{
    margin-left: 0 !important;       
    margin-right: 0 !important;      
    width: 36px;                     
    min-width: 36px;                 
    height: 36px;                    
    padding: 0;                      
    box-sizing: border-box;
  }

  /* Ajoute un peu d'espace entre le + et Amis */
  #btnAdd{
    margin-right: -14px !important;  
    margin-left: -6px !important;  
  }

  /* taille du bouton Filtre uniquement */
  #btnFilter{
    width: 36px;
    height: 36px;
    min-width: 36px;
    padding: 0;
  }

  /* déplace la barre de recherche */
  .search-wrapper{
    right: -5px !important; 
  }

  @media (max-width: 480px){
  #map .leaflet-top.leaflet-left{
    margin-top: 0 !important;
    top: auto !important;      
    bottom: 80px !important;   
    left: 8px !important;     
  }
}

  .calendar{
    right: 8px;         /* au bord droit */
    left: auto;         /* on annule tout left implicite */
    width: min(92vw, 300px);  /* ne dépasse pas l’écran */
    max-height: 60vh;   /* un peu plus souple en hauteur si besoin */
  }
  /* ✅ iPhone/Safari : évite le scroll page/rubber-band */
html, body{
  overflow: hidden;
  overscroll-behavior: none;
  -webkit-overflow-scrolling: auto;
}

/* 🔎 Barre de recherche + 📅 bouton agenda : FIXES sous le header */
#agendaBtn{
  position: fixed !important;
  top: calc(var(--header-h) + env(safe-area-inset-top) + 12px) !important;
  right: 12px !important;
  z-index: 5500 !important; /* sous le header (6000), au-dessus de la carte */
}

.search-wrapper{
  position: fixed !important;
  top: calc(var(--header-h) + env(safe-area-inset-top) + 12px) !important;
  left: 12px !important;
  right: 56px !important; /* place pour le bouton 📅 */
  z-index: 5500 !important;
}

/* neutralise la position absolute desktop */
.search-wrapper .search-bar{
  position: relative !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  width: 100% !important;
}

.search-wrapper #searchInput{
  width: 100% !important;
  min-width: 0 !important;
}

/* 📆 Calendrier : FIXE sous la rangée recherche/agenda */
#calendarContainer.calendar{
  position: fixed !important;
  top: calc(var(--header-h) + env(safe-area-inset-top) + 60px) !important;
  left: 12px !important;
  right: 12px !important;
  width: auto !important;
  max-height: 60vh;
  z-index: 5500 !important;
}

/* ✅ Map fixée sous le header : plus de scroll de page sur iOS */
#map{
  position: fixed !important;
  top: calc(var(--header-h) + env(safe-area-inset-top)) !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  height: auto !important;
}
}
/* ✅ PATCH mobile : tout reste FIXE + layout comme desktop (pastilles | 📅 | recherche à droite) */
@media (max-width: 480px){

  /* 1) Empêche le scroll/bounce de la page (iOS/Android) */
  html, body{
    height: 100%;
    overflow: hidden;
    overscroll-behavior: none;
    -webkit-overflow-scrolling: auto;
  }

  /* 2) IMPORTANT : le header est "sticky" en desktop -> on le force en FIXED sur mobile */
  header.site-header{
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    z-index: 6000 !important;
  }

  /* 3) La carte prend tout l’écran sous le header (sinon la page peut scroller) */
  #map{
    position: fixed !important;
    top: var(--header-h) !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    height: auto !important;
  }

  /* 4) 📅 Entre les pastilles et la recherche (comme sur ordi) */
  #agendaBtn{
    position: fixed !important;
    top: calc(var(--header-h) + 12px) !important;

    /* pastilles finissent vers ~114px, on met 📅 juste après */
    left: 128px !important;
    right: auto !important;

    width: 34px !important;
    height: 34px !important;
    font-size: 36px !important;

    z-index: 5500 !important;
  }

  /* 5) 🔎 Recherche alignée à droite, sans passer sous les pastilles */
  .search-wrapper{
    position: fixed !important;
    top: calc(var(--header-h) + 12px) !important;

    /* laisse la place: pastilles + 📅 */
    left: 185px !important;
    right: 12px !important;

    z-index: 5500 !important;
  }

  /* neutralise la position absolute desktop de .search-bar */
  .search-wrapper .search-bar{
    position: relative !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
  }

  .search-wrapper #searchInput{
    width: 100% !important;
    min-width: 0 !important;
  }

  /* 6) 📆 Calendrier sous la rangée (pastilles + 📅 + search) */
  #calendarContainer.calendar{
    position: fixed !important;
    top: calc(var(--header-h) + 58px) !important;
    left: 12px !important;
    right: 12px !important;
    width: auto !important;
    max-height: 60vh;
    z-index: 5500 !important;
  }
}

 /* =========================================================
   🎟️ Badge "événement rejoint" (participation) — Mobile
   Objectif : le sortir du header et le placer sous la recherche à droite
   ========================================================= */
@media screen and (max-width: 480px){
  #eventParticipationBadge,
  .event-participation-badge{
    position: fixed !important;
    outline: 6px solid magenta !important;
    background: yellow !important;

    /* sous la rangée (pastilles + 📅 + recherche) */
    top: calc(var(--header-h) + env(safe-area-inset-top) + 12px + 34px + 14px) !important;
    right: 12px !important;
    left: auto !important;

    width: 34px !important;
    height: 34px !important; 
    border-radius: 999px !important;

    display: flex !important;
    align-items: center !important;
    justify-content: center !important;

    /* “cercle” visible */
    background: rgba(255,255,255,0.95) !important;
    border: 2px solid rgba(0,0,0,0.25) !important;
    box-shadow: 0 2px 10px rgba(0,0,0,0.25) !important;

    z-index: 5600 !important; /* au-dessus carte + search */
    pointer-events: auto !important;
  }

  /* si le badge contient une image/svg */
  #eventParticipationBadge img,
  #eventParticipationBadge svg,
  .event-participation-badge img,
  .event-participation-badge svg{
    width: 18px !important;
    height: 18px !important;
    display: block !important;
  }

  /* si c’est un emoji/texte */
  #eventParticipationBadge,
  .event-participation-badge{
    font-size: 18px !important;
    line-height: 1 !important;
  }
  #eventParticipationBadge,
.event-participation-badge{
  outline: 4px solid rgb(255, 255, 255) !important;
  }

  /* Le spacer crée de la “place vide” : on le désactive sur mobile */
  header.site-header .spacer{
    display: none !important;
  }

  /* La marque prend l’espace disponible et peut shrink si besoin */
  header.site-header .brand{
    flex: 1 1 auto !important;
    min-width: 0 !important;
  }

  /* Le titre utilise la vraie place dispo (et ellipsis seulement si ça ne rentre pas) */
  header.site-header .brand .name{
    flex: 1 1 auto !important;
    min-width: 0 !important;
    max-width: none !important; /* <- enlève la limite 45vw */
    overflow: visible !important;
    white-space: nowrap !important;
    text-overflow: nowrap !important;
  }

  .brand .name{ max-width:none !important; overflow:visible !important; text-overflow:clip !important; }
  .brand{ min-width:0 !important; 
    max-width: none !important;
    overflow: visible !important;
    text-overflow: clip !important;
  }
}