/* =========================
   Insane Trip – Carte Sites (CSS COMPLET CLEAN)
   - Apple-like
   - Page scroll OK (footer / espace bas)
   - Map sticky (ne bouge pas)
   - Liste droite scrollable
   ========================= */

   :root{
    --it-red:#e2001a;
    --it-black:#0b0b0d;
  
    --bg:#f6f7f9;
    --card:#ffffff;
    --text:#0b0b0d;
    --muted:#6b7280;
    --line:rgba(0,0,0,.08);
  
    --shadow:0 12px 34px rgba(0,0,0,.10);
    --shadow-soft:0 10px 26px rgba(0,0,0,.08);
  
    --radius:18px;
    --radius-sm:14px;
  
    --topbar-h:64px;        /* hauteur header */
    --container:1400px;     /* largeur max */
    --sticky-gap:16px;      /* marge sticky (respiration) */
  
    --font: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI",
            Roboto, Helvetica, Arial, "Apple Color Emoji","Segoe UI Emoji";
  }
  
  *{ box-sizing:border-box; }
  html,body{
    margin:0;
    font-family:var(--font);
    color:var(--text);
    background:var(--bg);
  
    /* ✅ page scroll normal */
    height:auto;
    overflow:auto;
  }
  button,input,select{ font-family:inherit; }
  
  /* =========================
     HEADER
     ========================= */
  .topbar{
    position:sticky;
    top:0;
    z-index:1000;
  
    height:var(--topbar-h);
    display:flex;
    align-items:center;
    gap:14px;
    padding:14px 16px;
  
    background:rgba(255,255,255,.92);
    backdrop-filter: blur(18px);
    border-bottom:1px solid var(--line);
  }
  
  .brand{
    display:flex; align-items:center; gap:10px;
    font-weight:900;
    letter-spacing:-.2px;
    white-space:nowrap;
  }
  .brandDot{
    width:10px; height:10px; border-radius:999px;
    background:var(--it-red);
    box-shadow:0 0 0 6px rgba(226,0,26,.10);
  }
  
  /* =========================
     FILTERS (sticky sous header)
     ========================= */
  .filtersTopbar{
    position:sticky;
    top:var(--topbar-h);
    z-index:900;
  
    background:rgba(246,247,249,.90);
    backdrop-filter: blur(16px);
    border-bottom:1px solid var(--line);
    padding:10px 12px 12px;
  }
  
  .filtersTopInner{
    max-width:var(--container);
    margin:0 auto;
    display:flex;
    flex-direction:column;
    gap:10px;
  }
  
  .filtersLeft{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    gap:10px;
  }
  
  .filtersTitle{
    display:flex;
    flex-direction:column;
    gap:2px;
  }
  .filtersLabel{
    font-weight:900;
    letter-spacing:-.3px;
  }
  .small{
    color:var(--muted);
    font-weight:800;
    font-size:12px;
    white-space:nowrap;
  }
  
  .filtersRow{
    display:grid;
    gap:10px;
    align-items:end;
  }
  
  /* Ligne 1 : adresse + actions */
  .filtersRow:first-of-type{
    grid-template-columns: 1fr auto;
  }
  
  /* Ligne 2 : date / statut / réseau / capacité + reset */
  .filtersRow:last-of-type{
    grid-template-columns: 1.1fr 1fr 1fr .9fr auto;
  }
  
  .filtersActionsTop{
    display:flex;
    gap:10px;
    align-items:end;
    justify-content:flex-end;
    flex-wrap:wrap;
  }
  
  /* Champs */
  .field span{
    display:block;
    font-size:12px;
    font-weight:800;
    color:var(--muted);
    margin:0 0 6px 2px;
  }
  .field select,
  .field input{
    width:100%;
    height:40px;
    border-radius:12px;
    border:1px solid var(--line);
    padding:0 12px;
    background:#fff;
    outline:none;
    box-shadow:0 1px 10px rgba(0,0,0,.03);
  }
  .field select:focus,
  .field input:focus{
    border-color:rgba(226,0,26,.35);
    box-shadow:0 0 0 6px rgba(226,0,26,.10);
  }
  
  /* =========================
     BUTTONS
     ========================= */
  .btn{
    height:42px;
    padding:0 14px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    cursor:pointer;
    font-weight:800;
    box-shadow:0 2px 10px rgba(0,0,0,.04);
    transition:transform .08s ease, box-shadow .2s ease, background .2s ease, border-color .2s ease;
  
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    text-align:center;
  }
  .btn:hover{ transform:translateY(-1px); box-shadow:0 12px 24px rgba(0,0,0,.10); }
  .btn:active{ transform:translateY(0px); }
  
  .btnDark{
    background:var(--it-black);
    color:#fff;
    border-color:rgba(0,0,0,.30);
  }
  .btnDark:hover{ border-color:rgba(226,0,26,.40); }
  
  .btnGhost{
    background:transparent;
    box-shadow:none;
  }
  
  .btnPrimary{
    background:var(--it-red);
    color:#fff;
    border-color:rgba(226,0,26,.35);
  }
  .btnPrimary:hover{ box-shadow:0 14px 26px rgba(226,0,26,.22); }
  
  a.btn{ text-decoration:none; }
  
  /* =========================
     LAYOUT (page scroll)
     - map sticky
     - sidebar sticky + list scrollable
     ========================= */
  .layout{
    max-width:var(--container);
    margin:12px auto 64px;     /* ✅ espace bas type “footer” */
    padding:12px;
    display:grid;
    gap:12px;
  }
  
  .layoutRightList{
    grid-template-columns: 1fr 420px;
    align-items:start;
  }
  
  /* =========================
     MAP (sticky)
     ========================= */
  .mapWrap{
    position:sticky;
    top: calc(var(--topbar-h) + var(--sticky-gap)); /* sous header (filtres restent sticky au-dessus) */
    height: calc(100vh - var(--topbar-h) - (var(--sticky-gap) * 2));
    min-height: 520px;
  
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow-soft);
  }
  
  #map{ width:100%; height:100%; }
  
  /* ✅ Leaflet: éviter les z-index qui passent au-dessus */
  .leaflet-container{ z-index:auto !important; }
  .leaflet-popup-pane{ z-index: 999 !important; }
  .leaflet-control{ z-index: 800 !important; }
  
  .mapOverlay{
    position:absolute;
    left:14px;
    bottom:14px;
    pointer-events:none;
  }
  .pill{
    pointer-events:none;
    padding:10px 12px;
    border-radius:999px;
    background:rgba(255,255,255,.90);
    border:1px solid var(--line);
    box-shadow:0 12px 26px rgba(0,0,0,.14);
    font-weight:900;
    color:var(--muted);
  }
  
  /* =========================
     SIDEBAR (sticky) + LIST (scroll)
     ========================= */
  .sidebar{
    position:sticky;
    top: calc(var(--topbar-h) + var(--sticky-gap));
    height: calc(100vh - var(--topbar-h) - (var(--sticky-gap) * 2));
    min-height: 520px;
  
    background:rgba(255,255,255,.70);
    border:1px solid var(--line);
    border-radius:var(--radius);
    box-shadow:var(--shadow-soft);
    overflow:hidden;
  
    display:flex;
    flex-direction:column;
  }
  
  /* ✅ Seule la liste scrolle */
  .sitesList{
    flex:1 1 auto;
    min-height:0;
    overflow:auto;
    -webkit-overflow-scrolling: touch;
    padding:12px;
  }
  
  /* =========================
     CARDS
     ========================= */
  .siteCard{
    background:var(--card);
    border:1px solid var(--line);
    border-radius:var(--radius);
    padding:14px;
    box-shadow:0 10px 24px rgba(0,0,0,.06);
    cursor:pointer;
    transition:transform .08s ease, box-shadow .2s ease, border-color .2s ease;
    margin-bottom:12px;
  }
  .siteCard:hover{
    transform:translateY(-1px);
    box-shadow:0 18px 36px rgba(0,0,0,.10);
    border-color:rgba(226,0,26,.18);
  }
  
  .siteCardHeader{
    display:flex;
    align-items:flex-start;
    justify-content:space-between;
    gap:14px;
  }
  
  .siteCardTitle{ min-width:0; flex:1 1 auto; }
  
  .siteName{
    font-size:20px;
    font-weight:900;
    letter-spacing:-.2px;
    line-height:1.05;
    margin:0;
  }
  
  .siteAddr{
    margin-top:6px;
    color:var(--muted);
    font-weight:800;
    font-size:13px;
    line-height:1.25;
  }
  
  .badges{
    display:flex;
    flex-wrap:wrap;
    gap:8px;
    justify-content:flex-end;
    align-items:center;
    max-width: 240px;
  }
  .badge{
    font-size:12px;
    font-weight:900;
    padding:6px 10px;
    border-radius:999px;
    border:1px solid var(--line);
    background:#fff;
    color:var(--text);
    white-space:nowrap;
  }
  
  .badgeType{ border-color:rgba(0,0,0,.10); }
  
  .badgeCap{
    border-color:rgba(226,0,26,.18);
    background:rgba(226,0,26,.06);
  }
  
  .badgeKm{
    border-color: rgba(0,0,0,.10);
    background: rgba(0,0,0,.04);
    color:#111;
  }
  
  .badgeSourceInsane{
    border-color: rgba(226,0,26,.18);
    background: rgba(226,0,26,.06);
    color:#b10b1c;
  }
  .badgeSourceConcurrent{
    border-color:#111827;
    background:#111827;
    color:#fff;
  }
  
  /* Statuts */
  .badgeStatusDispo{
    border-color:rgba(34,197,94,.25);
    background:rgba(34,197,94,.10);
    color:#065f46;
  }
  .badgeStatusIndispo{
    border-color:rgba(239,68,68,.25);
    background:rgba(239,68,68,.10);
    color:#7f1d1d;
  }
  .badgeStatusReserve{
    background:#ffe8ea;
    border:1px solid #ffb8bf;
    color:#b10b1c;
  }
  .badgeStatusNego{
    background:#fff2e0;
    border:1px solid #ffd2a3;
    color:#a24b00;
  }
  .badgeStatusConcurrent{
    background:#111827;
    border:1px solid #111827;
    color:#fff;
  }
  
  /* Capacité ligne */
  .siteCapLine{ margin:10px 0 0; font-weight:900; }
  .siteCapValue{ font-weight:900; color:#111; }
  
  /* =========================
     POINTS FORTS (accordion Apple-like)
     ========================= */
  .itDetails{
    margin-top:12px;
    border:1px solid rgba(0,0,0,.08);
    background:linear-gradient(180deg, rgba(255,255,255,.75), rgba(255,255,255,.55));
    border-radius:16px;
    overflow:hidden;
    box-shadow:0 8px 18px rgba(0,0,0,.05);
  }
  .itSummary{
    list-style:none;
    cursor:pointer;
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:12px 14px;
    font-weight:900;
    user-select:none;
  }
  .itSummary::-webkit-details-marker{ display:none; }
  
  .itSummaryLeft{
    display:flex;
    align-items:center;
    gap:10px;
    min-width:0;
  }
  .itSummary .dot{
    width:10px;height:10px;border-radius:999px;
    background:var(--it-red);
    box-shadow:0 0 0 6px rgba(226,0,26,.10);
    flex:0 0 auto;
  }
  .itCount{
    font-size:12px;
    font-weight:900;
    padding:4px 8px;
    border-radius:999px;
    border:1px solid rgba(0,0,0,.10);
    background:#fff;
    color:var(--muted);
  }
  .itChevron{
    width:10px; height:10px;
    border-right:2px solid rgba(0,0,0,.45);
    border-bottom:2px solid rgba(0,0,0,.45);
    transform:rotate(45deg);
    transition:transform .18s ease;
    margin-right:4px;
  }
  .itDetails[open] .itChevron{ transform:rotate(225deg); }
  .itDetailsBody{ padding:0 14px 12px; }
  
  .itDetails .sitePlus{
    margin:0;
    padding-left:18px;
    color:#111;
    font-weight:800;
    font-size:13px;
    line-height:1.35;
  }
  .itDetails .sitePlus li{ margin:5px 0; }
  
  /* Actions */
  .siteActions{
    display:flex;
    gap:10px;
    margin-top:12px;
    flex-wrap:wrap;
  }
  .siteActions a{ text-decoration:none; }
  
  /* ✅ Plaquette centrée */
  .siteActions a.btnPrimary,
  .siteActions .btnPrimary{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    text-align:center;
    min-width: 140px;
  }
  
  /* =========================
     MARKERS MAP (status colors)
     ========================= */
  .itMarker{
    width:18px;
    height:18px;
    border-radius:999px;
    border:3px solid #fff;
    box-shadow:0 10px 18px rgba(0,0,0,.18);
    background: var(--it-red);
  }
  .itMarker--dispo{ background:#22c55e; }
  .itMarker--indispo{ background:#ef4444; }
  .itMarker--reserve{ background: var(--it-red); }
  .itMarker--nego{ background:#f97316; }
  .itMarker--concurrent{ background:#111827; }
  
  
  /* Cluster */
  .marker-cluster-small,
  .marker-cluster-medium,
  .marker-cluster-large{
    background:rgba(226,0,26,.20) !important;
  }
  .marker-cluster-small div,
  .marker-cluster-medium div,
  .marker-cluster-large div{
    background:rgba(226,0,26,.85) !important;
    color:#fff !important;
    font-weight:900 !important;
    border-radius:999px !important;
  }
  
  /* =========================
     RESPONSIVE
     ========================= */
  @media (max-width: 1100px){
    .layoutRightList{ grid-template-columns: 1fr 380px; }
  }
  
  @media (max-width: 980px){
    .filtersRow:first-of-type{ grid-template-columns: 1fr; }
    .filtersRow:last-of-type{ grid-template-columns: 1fr 1fr; }
  
    .layoutRightList{ grid-template-columns: 1fr; }
  
    /* mobile: pas sticky, tout scroll normal */
    .mapWrap, .sidebar{
      position:relative;
      top:auto;
      height:auto;
      min-height:unset;
    }
    .mapWrap{ height:56vh; }
    .sitesList{ overflow:visible; }
  }
/* ===== Apple-like Popup ===== */
.leaflet-popup-content-wrapper{
  border-radius: 18px !important;
  box-shadow: 0 18px 50px rgba(17,24,39,.18) !important;
  border: 1px solid rgba(17,24,39,.06);
}

/* Leaflet popup sizing fix */
.leaflet-popup-content{
  width: 320px !important;     /* ✅ stable */
  max-width: 320px !important;
}

.itPopup{
  width: 100% !important;      /* ✅ au lieu de width:340px */
  max-width: 100% !important;
}
.itPopupHeader{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:10px;
  margin-bottom: 10px;
}

.itPopupTitle{
  font-weight: 900;
  font-size: 16px;
  color:#111827;
  line-height:1.1;
}

.itPopupSub{
  margin-top:6px;
  color:#6b7280;
  font-weight:700;
  font-size:12.5px;
  line-height:1.25;
}

.itPopupMeta{
  display:flex;
  flex-wrap:wrap;
  gap:8px;
  margin-top:10px;
}

.itTag{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:6px 10px;
  border-radius:999px;
  background:#f3f4f6;
  color:#111827;
  font-weight:800;
  font-size:12px;
  border:1px solid rgba(17,24,39,.06);
}
.itDot{
  width:8px;height:8px;border-radius:999px;
  background:#f23650;
}

.itDivider{
  height:1px;
  background: rgba(17,24,39,.08);
  margin: 12px 0;
}

/* Form */
.itSectionTitle{
  font-weight: 900;
  font-size: 13px;
  color:#111827;
  margin-bottom:10px;
}

.itGrid{
  display:grid;
  grid-template-columns: 1fr 1fr;
  gap:10px;
}
.itFull{ grid-column: 1 / -1; }

.itLabel{
  font-size: 11px;
  letter-spacing: .02em;
  font-weight: 900;
  color:#6b7280;
  margin-bottom:6px;
  display:block;
}

/* Apple-ish inputs */
.itControl, .itTextarea, .itSelect{
  width:100%;
  border-radius: 12px;
  padding: 10px 11px;
  font-size: 13px;
  font-weight: 700;
  color:#111827;
  background:#f3f4f6;
  border: 1px solid rgba(17,24,39,.08);
  outline:none;
}

.itTextarea{ min-height: 84px; resize: vertical; }

.itControl:focus, .itTextarea:focus, .itSelect:focus{
  background:#fff;
  border-color:#f23650;
  box-shadow: 0 0 0 4px rgba(242,54,80,.16);
}

/* Actions */
.itActions{
  display:flex;
  justify-content:flex-end;
  gap:10px;
  margin-top:12px;
}

.itBtn{
  border-radius: 999px;
  padding: 9px 12px;
  font-weight: 900;
  font-size: 13px;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  cursor:pointer;
}

.itBtnPrimary{
  background:#f23650;
  border-color:#f23650;
  color:#fff;
}

.itBtnIcon{
  width:34px;height:34px;
  border-radius: 999px;
  display:inline-flex;
  align-items:center;
  justify-content:center;
  border: 1px solid rgba(17,24,39,.10);
  background:#fff;
  color:#111827;
  font-weight:900;
}

/* Make popup not huge on small screens */
@media (max-width: 420px){
  .itPopup{ width: 300px; }
}
@media (max-width: 420px){
  .leaflet-popup-content{ width: 290px !important; max-width: 290px !important; }
}
.leaflet-popup-close-button{
  display:none !important;
}
.siteCard.isActive{
  border-color: rgba(226,0,26,.35);
  box-shadow: 0 22px 46px rgba(226,0,26,.14);
  transform: translateY(-1px);
}
.sidebarTop{
  padding: 12px;
  border-bottom: 1px solid var(--line);
  background: rgba(255,255,255,.55);
  backdrop-filter: blur(16px);
}

.sidebarSearch{
  display:flex;
  align-items:center;
  gap:10px;
  background:#fff;
  border:1px solid var(--line);
  border-radius: 14px;
  padding: 8px 10px;
  box-shadow: 0 2px 10px rgba(0,0,0,.04);
}

#listSearchInput{
  border:none;
  outline:none;
  width:100%;
  font-weight:800;
  font-size:13px;
  background:transparent;
  color:var(--text);
}

#listSearchClear{
  height: 30px;
  width: 30px;
  padding: 0;
  border-radius: 999px;
  border: 1px solid rgba(0,0,0,.08);
  background: #fff;
  box-shadow: none;
  font-weight: 900;
  line-height: 1;
  display:flex;
  align-items:center;
  justify-content:center;
  cursor:pointer;
}
.itModal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .35);
  display: flex;
  align-items: center;    /* Centre le carré verticalement */
  justify-content: center;
  padding: 20px;          /* Marge de sécurité pour pas que ça touche les bords */
  z-index: 2000;
}

.itModalCard {
  width: min(720px, 100%);
  max-height: 90vh;       /* Limite la hauteur à 90% de l'écran */
  overflow-y: auto;       /* Active le scroll vertical interne */
  background: #fff;
  border-radius: 18px;
  border: 1px solid rgba(0, 0, 0, .08);
  box-shadow: 0 30px 80px rgba(0, 0, 0, .25);
  padding: 24px;          /* Un peu plus de respiration interne */
  position: relative;
  
  /* Pour un défilement fluide sur iPhone */
  -webkit-overflow-scrolling: touch; 
}

/* Optionnel : Rendre la scrollbar plus discrète */
.itModalCard::-webkit-scrollbar {
  width: 6px;
}
.itModalCard::-webkit-scrollbar-thumb {
  background: #dbdbdb;
  border-radius: 10px;
}
.itModalHead{
  display:flex;
  align-items:flex-start;
  justify-content:space-between;
  gap:12px;
}
.itModalTitle{ font-weight:900; font-size:16px; }
.itModalSub{ color:#6b7280; font-weight:700; font-size:12px; margin-top:4px; }
.badgeBus { }