/* ── Design System — Vide-greniers V2 Classique ── */
:root {
  --bg: #f8f6f3;
  --surface: #ffffff;
  --accent: #c1793b;
  --accent-hover: #a86630;
  --accent-glow: rgba(193,121,59,.12);
  --text: #1c1b18;
  --text-muted: #7a6b5d;
  --text-light: #9a8a7a;
  --border: #efeae3;
  --border-strong: #ddd5c8;
  --green: #3a9d5c;
  --green-light: rgba(58,157,92,.08);
  --red: #d9453a;
  --red-light: rgba(217,69,58,.08);
  --gold: #f5c542;
  --gold-light: rgba(245,197,66,.12);
  --font: 'DM Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  --radius-sm: 8px;
  --radius-md: 12px;
  --radius-lg: 16px;
  --radius-xl: 24px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.04), 0 1px 4px rgba(0,0,0,.02);
  --shadow-md: 0 4px 12px rgba(0,0,0,.05), 0 2px 4px rgba(0,0,0,.02);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.07), 0 4px 8px rgba(0,0,0,.04);
  --shadow-xl: 0 16px 40px rgba(0,0,0,.1);
  --transition: .2s cubic-bezier(.4,0,.2,1);
  --transition-slow: .35s cubic-bezier(.4,0,.2,1);
}

* { box-sizing:border-box; margin:0; padding:0 }
* { -webkit-tap-highlight-color:transparent; touch-action:manipulation }
:focus-visible { outline:2px solid var(--accent); outline-offset:2px }
html { overflow-x:hidden; position:relative; width:100% }
body {
  overflow-x:hidden; position:relative;
  font-family:var(--font);
  -webkit-font-smoothing:antialiased;
  -moz-osx-font-smoothing:grayscale;
  background:var(--bg);
  background-image: radial-gradient(ellipse at 50% 0%, rgba(193,121,59,.04) 0%, transparent 60%);
  color:var(--text);
  line-height:1.6;
  padding-bottom:80px;
  width:100%;
  max-width:100vw;
  min-height:100dvh;
}

/* ── Pull-to-refresh ── */
#ptr-overlay {
  position:fixed; top:0; left:0; width:100%; z-index:9999;
  pointer-events:none;
  display:flex; flex-direction:column; align-items:center;
  justify-content:flex-end; padding-bottom:10px;
  transition:opacity .2s; opacity:0; height:0; overflow:hidden;
  background:linear-gradient(180deg,#f8f6f3 50%,transparent);
}

.container { max-width:960px; margin:0 auto; padding:0 }

/* ── Header Brocante ── */
.site-header {
  position:relative; width:100%; height:220px; overflow:hidden;
  display:flex; flex-direction:column;
  align-items:center; justify-content:center; text-align:center;
}
.site-header-img {
  position:absolute; top:0; left:0; width:100%; height:100%;
  object-fit:cover; z-index:0;
}
.site-header-overlay {
  position:absolute; top:0; left:0; width:100%; height:100%;
  z-index:1;
  background:linear-gradient(135deg, rgba(28,27,24,.82) 0%, rgba(28,27,24,.3) 100%);
}
.site-header-bg {
  position:relative; z-index:2; padding:16px 24px;
}
.site-title {
  margin:0; font-size:28px; font-weight:900; color:#fff;
  text-shadow:0 2px 16px rgba(0,0,0,.35);
  letter-spacing:-.8px; line-height:1.15;
}
.site-title span { color:var(--gold) }
.visually-hidden {
  position:absolute; width:1px; height:1px; margin:-1px;
  padding:0; overflow:hidden; clip:rect(0 0 0 0);
  white-space:nowrap; border:0;
}
.site-subtitle {
  font-size:15px; color:rgba(255,255,255,.7);
  font-weight:500; margin-top:4px; letter-spacing:-.2px;
}

/* ── City Tabs ── */
.city-tabs { display:flex; gap:8px; margin:14px 16px 0 }
.city-tab {
  flex:1; text-align:center; padding:12px 14px;
  border-radius:var(--radius-md); font-size:14px; font-weight:700;
  text-decoration:none; color:var(--text-muted);
  background:var(--surface); border:1.5px solid var(--border);
  transition:all var(--transition); font-family:var(--font);
}
.city-tab:active { transform:scale(.97) }
.city-tab.active { background:var(--text); color:#fff; border-color:var(--text) }
.city-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:22px; height:22px; padding:0 7px; border-radius:11px;
  background:var(--accent-glow); color:var(--accent);
  font-size:11px; font-weight:700; margin-left:5px; letter-spacing:-.3px;
}
.city-tab.active .city-count { background:rgba(255,255,255,.18); color:#fff }

/* ── Bouton d'action rapide (sous les onglets ville) ── */
.quick-btn {
  display:block; margin:12px auto 0; max-width:800px;
  padding:8px 18px; border-radius:40px; border:1.5px solid var(--border);
  background:var(--surface); font-size:13px; font-weight:600;
  cursor:pointer; font-family:var(--font); color:var(--accent);
  transition:all var(--transition);
  width:calc(100% - 32px); text-align:center;
}
.quick-btn:active { transform:scale(.97); background:var(--accent-glow); border-color:var(--accent) }
.quick-btn.active { background:var(--text); color:#fff; border-color:var(--text) }

/* ── Bannière favori annulé (révélée par JS quand un favori est annulé) ── */
.cancelled-banner {
  margin:12px 16px 0; border-radius:var(--radius-md);
  background:var(--red-light); border:1.5px solid var(--red);
  overflow:hidden;
}
.cancelled-banner[hidden] { display:none }
.cancelled-banner a {
  display:block; padding:12px 16px;
  color:var(--red); font-size:13px; font-weight:700;
  text-decoration:none; text-align:center;
}
.cancelled-banner a:active { background:var(--red); color:#fff }

/* ── Filters ── */
.filters {
  display:flex; gap:8px; padding:16px 16px 10px;
  overflow-x:auto; -webkit-overflow-scrolling:touch; scrollbar-width:none;
}
.filters::-webkit-scrollbar { display:none }

/* ── Navigation horizontale des dates (souris / desktop) ── */
.filters-wrap { position:relative; }
.filters-wrap .filters { cursor:grab; }
.filters-wrap .filters.dragging { cursor:grabbing; user-select:none; scroll-behavior:auto; }
.date-arrow {
  position:absolute; top:50%; transform:translateY(-50%);
  width:30px; height:30px; padding:0; z-index:6;
  display:flex; align-items:center; justify-content:center;
  border-radius:50%; border:1.5px solid var(--border);
  background:var(--surface); color:var(--text-muted);
  font-size:17px; line-height:1; font-family:var(--font); font-weight:700;
  cursor:pointer; box-shadow:0 2px 10px rgba(0,0,0,.14);
  transition:transform .15s, color .15s;
}
.date-arrow.left { left:4px }
.date-arrow.right { right:4px }
.date-arrow:hover { color:var(--text); transform:translateY(-50%) scale(1.1) }
.date-arrow:active { transform:translateY(-50%) scale(.9) }
.date-arrow[hidden] { display:none }
/* Sur écran tactile, le balayage natif suffit : on masque les flèches */
@media (hover:none) { .date-arrow { display:none } }

/* ── Barre de recherche (ville / nom du vide-grenier) ── */
.searchbar {
  display:flex; align-items:center; gap:8px;
  margin:0 16px 10px; padding:0 12px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:40px; transition:border-color .2s, box-shadow .2s;
}
.searchbar:focus-within { border-color:var(--accent); box-shadow:0 0 0 3px rgba(193,121,59,.10) }
.searchbar-icon { font-size:14px; opacity:.55; flex-shrink:0 }
.searchbar-input {
  flex:1; min-width:0; border:none; background:transparent; outline:none;
  font-family:var(--font); font-size:14px; color:var(--text); padding:11px 0;
}
.searchbar-input::placeholder { color:var(--text-muted) }
.searchbar-input::-webkit-search-cancel-button,
.searchbar-input::-webkit-search-decoration { -webkit-appearance:none; appearance:none; display:none }
.searchbar-clear {
  flex-shrink:0; width:22px; height:22px; padding:0; border:none; border-radius:50%;
  background:var(--border); color:var(--text-muted); font-size:11px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.searchbar-clear:active { transform:scale(.88) }
.searchbar-clear[hidden] { display:none }
.searchbar-status { margin:0 16px 8px; font-size:12.5px; color:var(--text-muted) }
.searchbar-status[hidden] { display:none }
.searchbar-empty {
  margin:0 16px 16px; padding:22px 16px; text-align:center;
  background:var(--surface); border:1.5px dashed var(--border); border-radius:var(--radius);
  color:var(--text-muted); font-size:14px;
}
.searchbar-empty[hidden] { display:none }
@media(min-width:768px) {
  .searchbar { max-width:560px; margin:0 auto 10px }
  .searchbar-status { max-width:560px; margin:0 auto 8px }
  .searchbar-empty { max-width:560px; margin:0 auto 16px }
}

/* ── Panneau « À côté de moi » (onglet 📍) ── */
.nearby-panel {
  margin:0 16px 12px; padding:14px 16px;
  background:var(--surface); border:1.5px solid var(--border);
  border-radius:var(--radius); box-shadow:0 2px 10px rgba(0,0,0,.05);
}
.nearby-panel[hidden] { display:none }
.nearby-head { display:flex; align-items:center; justify-content:space-between; gap:10px }
.nearby-title { font-size:14.5px; font-weight:800; color:var(--text) }
.nearby-close {
  width:26px; height:26px; flex-shrink:0; padding:0; border:none; border-radius:50%;
  background:var(--border); color:var(--text-muted); font-size:15px; line-height:1;
  cursor:pointer; display:flex; align-items:center; justify-content:center;
}
.nearby-close:active { transform:scale(.9) }
.nearby-sub { margin:4px 0 10px; font-size:12.5px; color:var(--text-muted) }
.nearby-list {
  list-style:none; margin:0; padding:0;
  max-height:330px; overflow-y:auto; -webkit-overflow-scrolling:touch;
}
.nearby-item { display:flex; align-items:stretch; gap:6px; margin-bottom:6px }
.nearby-link {
  display:flex; align-items:center; gap:10px; flex:1; min-width:0; text-align:left;
  padding:9px 11px; border:1.5px solid var(--border); border-radius:10px;
  background:transparent; color:var(--text); font-family:var(--font); font-size:13.5px;
  cursor:pointer; transition:border-color .15s, background .15s;
}
.nearby-link:hover { border-color:var(--accent); background:rgba(193,121,59,.05) }
/* bouton « déjà fait » sur chaque ligne de la liste */
.nearby-done {
  flex-shrink:0; width:38px; padding:0; border:1.5px solid var(--border); border-radius:10px;
  background:transparent; font-size:15px; line-height:1; cursor:pointer;
  display:flex; align-items:center; justify-content:center;
  transition:border-color .15s, background .15s;
}
.nearby-done:active { transform:scale(.92) }
.nearby-item.is-done .nearby-name { text-decoration:line-through; opacity:.5 }
.nearby-item.is-done .nearby-km { background:var(--border); color:var(--text-muted) }
.nearby-item.is-done .nearby-done { border-color:#3d9e6f; background:rgba(61,158,111,.14) }
.nearby-km {
  flex-shrink:0; min-width:58px; padding:3px 8px; border-radius:20px;
  background:var(--accent); color:#fff; font-size:11.5px; font-weight:700; text-align:center;
}
.nearby-info { min-width:0; flex:1; display:flex; flex-direction:column; gap:1px }
.nearby-name { font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis }
.nearby-meta { font-size:11.5px; color:var(--text-muted) }
.nearby-map-btn {
  width:100%; margin-top:10px; padding:11px; border:1.5px solid var(--accent);
  border-radius:10px; background:transparent; color:var(--accent);
  font-family:var(--font); font-size:13.5px; font-weight:700; cursor:pointer;
}
.nearby-map-btn:active { background:var(--accent); color:#fff }
/* badge de distance ajouté sur les cartes quand le mode est actif */
.card-dist {
  display:inline-block; margin-left:8px; padding:2px 8px; border-radius:20px;
  background:rgba(193,121,59,.12); color:var(--accent);
  font-size:11px; font-weight:700; vertical-align:middle;
}
@media(min-width:768px) { .nearby-panel { max-width:680px; margin:0 auto 12px } }

.filter-btn, .nearby-btn {
  padding:8px 20px; border-radius:40px; border:1.5px solid var(--border);
  background:var(--surface); font-size:13px; font-weight:600;
  cursor:pointer; font-family:var(--font); color:var(--text-muted);
  transition:all var(--transition); white-space:nowrap; flex-shrink:0;
  letter-spacing:-.2px;
}
.filter-btn:active, .nearby-btn:active { transform:scale(.94) }
.filter-btn.active, .nearby-btn.active { background:var(--text); color:#fff; border-color:var(--text) }
/* Couleurs par jour — chaque bulle sa couleur (ordre chronologique) */
@keyframes dbGrow { from { transform:scale(.96); opacity:.6 } to { transform:scale(1); opacity:1 } }
.filter-btn.date-btn { animation: dbGrow .25s ease both }

.filter-btn.date-btn[data-day-index="0"] { background:#b9763a; border-color:#b9763a; color:#fff; }
.filter-btn.date-btn[data-day-index="1"] { background:#3d9e6f; border-color:#3d9e6f; color:#fff; }
.filter-btn.date-btn[data-day-index="2"] { background:#2f7bb5; border-color:#2f7bb5; color:#fff; }
.filter-btn.date-btn[data-day-index="3"] { background:#8a4ec4; border-color:#8a4ec4; color:#fff; }
.filter-btn.date-btn[data-day-index="4"] { background:#d9a514; border-color:#d9a514; color:#fff; }
.filter-btn.date-btn[data-day-index="5"] { background:#d96f2e; border-color:#d96f2e; color:#fff; }
.filter-btn.date-btn[data-day-index="6"] { background:#1fa3a3; border-color:#1fa3a3; color:#fff; }
.filter-btn.date-btn[data-day-index="7"] { background:#d46a8f; border-color:#d46a8f; color:#fff; }
.filter-btn.date-btn[data-day-index="8"] { background:#5f9b41; border-color:#5f9b41; color:#fff; }
.filter-btn.date-btn[data-day-index="9"] { background:#b64545; border-color:#b64545; color:#fff; }
.filter-btn.date-btn[data-day-index="10"] { background:#5f6bad; border-color:#5f6bad; color:#fff; }
.filter-btn.date-btn[data-day-index="11"] { background:#3f8f7a; border-color:#3f8f7a; color:#fff; }
.filter-btn.date-btn[data-day-index="12"] { background:#a67c2e; border-color:#a67c2e; color:#fff; }
.filter-btn.date-btn[data-day-index="13"] { background:#3d7a9c; border-color:#3d7a9c; color:#fff; }
.filter-btn.date-btn[data-day-index="14"] { background:#8a6fd4; border-color:#8a6fd4; color:#fff; }
.filter-btn.date-btn[data-day-index="15"] { background:#d98c1a; border-color:#d98c1a; color:#fff; }
.filter-btn.date-btn[data-day-index="16"] { background:#d4553f; border-color:#d4553f; color:#fff; }
.filter-btn.date-btn[data-day-index="17"] { background:#2e9c86; border-color:#2e9c86; color:#fff; }
.filter-btn.date-btn[data-day-index="18"] { background:#3f84a3; border-color:#3f84a3; color:#fff; }
.filter-btn.date-btn[data-day-index="19"] { background:#a35f8f; border-color:#a35f8f; color:#fff; }
.filter-btn.date-btn[data-day-index="20"] { background:#8f7a3d; border-color:#8f7a3d; color:#fff; }
.filter-btn.date-btn[data-day-index="21"] { background:#2e9c8f; border-color:#2e9c8f; color:#fff; }
.filter-btn.date-btn[data-day-index="22"] { background:#6f4ec4; border-color:#6f4ec4; color:#fff; }
.filter-btn.date-btn[data-day-index="23"] { background:#c95555; border-color:#c95555; color:#fff; }
.filter-btn.date-btn[data-day-index="24"] { background:#3f8f5f; border-color:#3f8f5f; color:#fff; }
.filter-btn.date-btn[data-day-index="25"] { background:#7fa3a3; border-color:#7fa3a3; color:#fff; }
.filter-btn.date-btn[data-day-index="26"] { background:#a38a3d; border-color:#a38a3d; color:#fff; }
.filter-btn.date-btn[data-day-index="27"] { background:#3f7a9c; border-color:#3f7a9c; color:#fff; }
.filter-btn.date-btn[data-day-index="28"] { background:#a34f4f; border-color:#a34f4f; color:#fff; }
.filter-btn.date-btn[data-day-index="29"] { background:#3f7a8f; border-color:#3f7a8f; color:#fff; }
.filter-btn.date-btn[data-day-index="30"] { background:#8f4ec4; border-color:#8f4ec4; color:#fff; }
.filter-btn.date-btn[data-day-index="31"] { background:#4e8a3d; border-color:#4e8a3d; color:#fff; }
.filter-btn.date-btn[data-day-index="32"] { background:#c94f7a; border-color:#c94f7a; color:#fff; }
.filter-btn.date-btn[data-day-index="33"] { background:#3fa3a3; border-color:#3fa3a3; color:#fff; }
.filter-btn.date-btn[data-day-index="34"] { background:#a36f3d; border-color:#a36f3d; color:#fff; }
.filter-btn.date-btn[data-day-index="35"] { background:#4f4fc4; border-color:#4f4fc4; color:#fff; }
.filter-btn.date-btn[data-day-index="36"] { background:#a3a33d; border-color:#a3a33d; color:#fff; }
.filter-btn.date-btn[data-day-index="37"] { background:#3fa33f; border-color:#3fa33f; color:#fff; }
.filter-btn.date-btn[data-day-index="38"] { background:#a38f3d; border-color:#a38f3d; color:#fff; }
.filter-btn.date-btn[data-day-index="39"] { background:#55718f; border-color:#55718f; color:#fff; }
.filter-btn.date-btn[data-day-index="40"] { background:#8a3d6f; border-color:#8a3d6f; color:#fff; }
.filter-btn.date-btn[data-day-index="41"] { background:#3d8a8a; border-color:#3d8a8a; color:#fff; }
.filter-btn.date-btn[data-day-index="42"] { background:#a3633d; border-color:#a3633d; color:#fff; }
.filter-btn.date-btn[data-day-index="43"] { background:#3f8aa3; border-color:#3f8aa3; color:#fff; }
.filter-btn.date-btn[data-day-index="44"] { background:#8a7a3d; border-color:#8a7a3d; color:#fff; }
.filter-btn.date-btn[data-day-index="45"] { background:#3d7f8f; border-color:#3d7f8f; color:#fff; }
.filter-btn.date-btn[data-day-index="46"] { background:#7a3d8a; border-color:#7a3d8a; color:#fff; }
.filter-btn.date-btn[data-day-index="47"] { background:#3d7a5f; border-color:#3d7a5f; color:#fff; }
.filter-btn.date-btn[data-day-index="48"] { background:#a36f8a; border-color:#a36f8a; color:#fff; }
.filter-btn.date-btn[data-day-index="49"] { background:#4f5fa3; border-color:#4f5fa3; color:#fff; }

/* (l'ancien lien « Carte du week-end » a été retiré de l'interface — la route
   serveur /share/weekend.png reste disponible si besoin de la réactiver.) */
.filter-btn.date-btn.active {
  background: var(--text); color: #fff; border-color: var(--text);
  box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text);
}
/* Couleurs des sections de jours (jour même couleur que sa bulle de date) */
.day-header[data-day-index="0"] { border-left-color:#b9763a } .day-header[data-day-index="0"] .day-sub { background:#b9763a; box-shadow:0 2px 8px rgba(185,118,58,.3) }
.day-header[data-day-index="1"] { border-left-color:#3d9e6f } .day-header[data-day-index="1"] .day-sub { background:#3d9e6f }
.day-header[data-day-index="2"] { border-left-color:#2f7bb5 } .day-header[data-day-index="2"] .day-sub { background:#2f7bb5 }
.day-header[data-day-index="3"] { border-left-color:#8a4ec4 } .day-header[data-day-index="3"] .day-sub { background:#8a4ec4 }
.day-header[data-day-index="4"] { border-left-color:#d9a514 } .day-header[data-day-index="4"] .day-sub { background:#d9a514 }
.day-header[data-day-index="5"] { border-left-color:#d96f2e } .day-header[data-day-index="5"] .day-sub { background:#d96f2e }
.day-header[data-day-index="6"] { border-left-color:#1fa3a3 } .day-header[data-day-index="6"] .day-sub { background:#1fa3a3 }
.day-header[data-day-index="7"] { border-left-color:#d46a8f } .day-header[data-day-index="7"] .day-sub { background:#d46a8f }
.day-header[data-day-index="8"] { border-left-color:#5f9b41 } .day-header[data-day-index="8"] .day-sub { background:#5f9b41 }
.day-header[data-day-index="9"] { border-left-color:#b64545 } .day-header[data-day-index="9"] .day-sub { background:#b64545 }
.day-header[data-day-index="10"] { border-left-color:#5f6bad } .day-header[data-day-index="10"] .day-sub { background:#5f6bad }
.day-header[data-day-index="11"] { border-left-color:#3f8f7a } .day-header[data-day-index="11"] .day-sub { background:#3f8f7a }
.day-header[data-day-index="12"] { border-left-color:#a67c2e } .day-header[data-day-index="12"] .day-sub { background:#a67c2e }
.day-header[data-day-index="13"] { border-left-color:#3d7a9c } .day-header[data-day-index="13"] .day-sub { background:#3d7a9c }
.day-header[data-day-index="14"] { border-left-color:#8a6fd4 } .day-header[data-day-index="14"] .day-sub { background:#8a6fd4 }
.day-header[data-day-index="15"] { border-left-color:#d98c1a } .day-header[data-day-index="15"] .day-sub { background:#d98c1a }
.day-header[data-day-index="16"] { border-left-color:#d4553f } .day-header[data-day-index="16"] .day-sub { background:#d4553f }
.day-header[data-day-index="17"] { border-left-color:#2e9c86 } .day-header[data-day-index="17"] .day-sub { background:#2e9c86 }
.day-header[data-day-index="18"] { border-left-color:#3f84a3 } .day-header[data-day-index="18"] .day-sub { background:#3f84a3 }
.day-header[data-day-index="19"] { border-left-color:#a35f8f } .day-header[data-day-index="19"] .day-sub { background:#a35f8f }
.day-header[data-day-index="20"] { border-left-color:#8f7a3d } .day-header[data-day-index="20"] .day-sub { background:#8f7a3d }
.day-header[data-day-index="21"] { border-left-color:#2e9c8f } .day-header[data-day-index="21"] .day-sub { background:#2e9c8f }
.day-header[data-day-index="22"] { border-left-color:#6f4ec4 } .day-header[data-day-index="22"] .day-sub { background:#6f4ec4 }
.day-header[data-day-index="23"] { border-left-color:#c95555 } .day-header[data-day-index="23"] .day-sub { background:#c95555 }
.day-header[data-day-index="24"] { border-left-color:#3f8f5f } .day-header[data-day-index="24"] .day-sub { background:#3f8f5f }
.day-header[data-day-index="25"] { border-left-color:#7fa3a3 } .day-header[data-day-index="25"] .day-sub { background:#7fa3a3 }
.day-header[data-day-index="26"] { border-left-color:#a38a3d } .day-header[data-day-index="26"] .day-sub { background:#a38a3d }
.day-header[data-day-index="27"] { border-left-color:#3f7a9c } .day-header[data-day-index="27"] .day-sub { background:#3f7a9c }
.day-header[data-day-index="28"] { border-left-color:#a34f4f } .day-header[data-day-index="28"] .day-sub { background:#a34f4f }
.day-header[data-day-index="29"] { border-left-color:#3f7a8f } .day-header[data-day-index="29"] .day-sub { background:#3f7a8f }
.day-header[data-day-index="30"] { border-left-color:#8f4ec4 } .day-header[data-day-index="30"] .day-sub { background:#8f4ec4 }
.day-header[data-day-index="31"] { border-left-color:#4e8a3d } .day-header[data-day-index="31"] .day-sub { background:#4e8a3d }
.day-header[data-day-index="32"] { border-left-color:#c94f7a } .day-header[data-day-index="32"] .day-sub { background:#c94f7a }
.day-header[data-day-index="33"] { border-left-color:#3fa3a3 } .day-header[data-day-index="33"] .day-sub { background:#3fa3a3 }
.day-header[data-day-index="34"] { border-left-color:#a36f3d } .day-header[data-day-index="34"] .day-sub { background:#a36f3d }
.day-header[data-day-index="35"] { border-left-color:#4f4fc4 } .day-header[data-day-index="35"] .day-sub { background:#4f4fc4 }
.day-header[data-day-index="36"] { border-left-color:#a3a33d } .day-header[data-day-index="36"] .day-sub { background:#a3a33d }
.day-header[data-day-index="37"] { border-left-color:#3fa33f } .day-header[data-day-index="37"] .day-sub { background:#3fa33f }
.day-header[data-day-index="38"] { border-left-color:#a38f3d } .day-header[data-day-index="38"] .day-sub { background:#a38f3d }
.day-header[data-day-index="39"] { border-left-color:#55718f } .day-header[data-day-index="39"] .day-sub { background:#55718f }
.day-header[data-day-index="40"] { border-left-color:#8a3d6f } .day-header[data-day-index="40"] .day-sub { background:#8a3d6f }
.day-header[data-day-index="41"] { border-left-color:#3d8a8a } .day-header[data-day-index="41"] .day-sub { background:#3d8a8a }
.day-header[data-day-index="42"] { border-left-color:#a3633d } .day-header[data-day-index="42"] .day-sub { background:#a3633d }
.day-header[data-day-index="43"] { border-left-color:#3f8aa3 } .day-header[data-day-index="43"] .day-sub { background:#3f8aa3 }
.day-header[data-day-index="44"] { border-left-color:#8a7a3d } .day-header[data-day-index="44"] .day-sub { background:#8a7a3d }
.day-header[data-day-index="45"] { border-left-color:#3d7f8f } .day-header[data-day-index="45"] .day-sub { background:#3d7f8f }
.day-header[data-day-index="46"] { border-left-color:#7a3d8a } .day-header[data-day-index="46"] .day-sub { background:#7a3d8a }
.day-header[data-day-index="47"] { border-left-color:#3d7a5f } .day-header[data-day-index="47"] .day-sub { background:#3d7a5f }
.day-header[data-day-index="48"] { border-left-color:#a36f8a } .day-header[data-day-index="48"] .day-sub { background:#a36f8a }
.day-header[data-day-index="49"] { border-left-color:#4f5fa3 } .day-header[data-day-index="49"] .day-sub { background:#4f5fa3 }
.filter-count {
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px; padding:0 6px; border-radius:10px;
  background:var(--accent-glow); color:var(--accent);
  font-size:10px; font-weight:700; margin-left:5px;
}
.filter-btn.date-btn .filter-count {
  background:rgba(255,255,255,.28); color:#fff; box-shadow:inset 0 0 0 1px rgba(255,255,255,.35);
}
.filter-btn.active .filter-count { background:rgba(255,255,255,.2); color:#fff }

/* ── View toggle ── */
.view-toggle { display:flex; gap:8px; margin:4px 16px 12px }
.view-toggle button {
  flex:1; padding:11px; border-radius:var(--radius-md);
  border:1.5px solid var(--border); background:var(--surface);
  font-size:13px; font-weight:600; cursor:pointer;
  font-family:var(--font); color:var(--text-muted);
  transition:all var(--transition); letter-spacing:-.2px;
}
.view-toggle button.active { background:var(--text); color:#fff; border-color:var(--text) }
.view-toggle button:active { transform:scale(.97) }

/* ── Day groups ── */
.day-group { margin:24px 16px 0 }
.day-header {
  display:flex; align-items:center; gap:14px; margin-bottom:18px;
  padding:16px 20px; border-radius:var(--radius-lg);
  background:var(--surface);
  border-left:4px solid var(--accent);
  box-shadow:var(--shadow-sm);
}
.day-header .day-label { font-size:20px; font-weight:700; color:var(--text); letter-spacing:-.4px }
.day-header .day-sub {
  font-size:12px; color:#fff; font-weight:700; padding:5px 14px;
  border-radius:40px; letter-spacing:.3px; border:none;
  background:var(--accent); box-shadow:0 2px 8px rgba(193,121,59,.3);
}
.day-header .day-count {
  font-size:13px; color:var(--text-light); font-weight:600;
  margin-left:auto; background:var(--bg); padding:4px 14px;
  border-radius:40px; min-width:28px; text-align:center;
}
.day-map-btn {
  font-size:11px; color:var(--text-muted); background:var(--surface);
  border:1.5px solid var(--border); padding:6px 16px; border-radius:40px;
  font-weight:600; cursor:pointer; font-family:var(--font);
  transition:all var(--transition); white-space:nowrap;
}
.day-map-btn:active { transform:scale(.94) }
.weather-icon { font-size:20px; line-height:1 }

/* Badge « dans X jours » sur l'en-tête de jour */
.day-badge {
  font-size:11px; font-weight:800; color:#2d2a24;
  background:var(--gold); padding:3px 10px;
  border-radius:40px; white-space:nowrap; letter-spacing:-.2px;
}

/* ── Event cards ── */
.event-card {
  display:block; text-decoration:none; color:inherit;
  background:var(--surface); border-radius:var(--radius-lg);
  padding:18px; margin-bottom:12px; box-shadow:var(--shadow-sm);
  transition:all var(--transition); border:1px solid var(--border);
  position:relative;
}
.event-card:active { transform:translateY(-1px); box-shadow:var(--shadow-md); border-color:var(--border-strong) }
.event-card.fav { border-color:var(--gold); box-shadow:0 0 0 3px var(--gold-light), var(--shadow-sm) }
.event-card.done { opacity:.55; background:#f5f2ee }
.event-card.hidden-done { display:none!important }

.event-link { text-decoration:none; color:inherit; display:block; cursor:pointer; }

/* Badge « 🆕 Nouveau » : événement apparu il y a <= 14 jours (first_seen posé
   par le scraper). Positionné en haut à gauche de la carte (carte en
   position:relative), légèrement à cheval sur le bord pour ne pas recouvrir
   la ville ni les boutons favoris. z-index au-dessus du contenu de la carte. */
.new-badge {
  position:absolute; top:-9px; left:14px; z-index:5;
  background:var(--green); color:#fff;
  font-size:10px; font-weight:800; letter-spacing:.2px;
  border-radius:40px; padding:2px 8px; white-space:nowrap;
  box-shadow:0 2px 6px rgba(0,0,0,.18);
}

.annule-banner {
  background:var(--red); color:#fff; text-align:center;
  font-size:14px; font-weight:900; padding:8px;
  border-radius:14px 14px 0 0;
  margin:-18px -18px 14px -18px;
  letter-spacing:2px; text-transform:uppercase;
}

.event-top { display:flex; justify-content:space-between; align-items:center; margin-bottom:10px }
.event-city {
  font-size:13px; font-weight:800; color:var(--accent);
  background:var(--accent-glow); padding:3px 12px 3px 8px;
  border-radius:var(--radius-sm); display:flex; align-items:center;
  gap:5px; letter-spacing:-.2px;
}
.fav-btn, .done-btn {
  background:none; border:none; font-size:22px; cursor:pointer;
  padding:0 4px; transition:all var(--transition); line-height:1;
  font-family:var(--font);
}
.fav-btn:active, .done-btn:active { transform:scale(.8) }
.done-btn { opacity:.4 }
.done-btn.faved { opacity:1 }

.event-name {
  font-size:17px; font-weight:800; color:var(--text);
  margin:0 0 4px; line-height:1.3; letter-spacing:-.3px;
}
.event-address { font-size:13px; color:var(--text-muted); font-weight:500; margin-bottom:10px; line-height:1.4 }

.event-bottom { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:10px; padding-top:12px; border-top:1px dashed var(--border); }
.event-meta-tag {
  font-size:12px; color:var(--text-light); background:var(--bg);
  padding:4px 12px; border-radius:var(--radius-sm); font-weight:500;
  display:flex; align-items:center; gap:5px;
}
.event-meta-tag strong { color:var(--text) }

.route-btn, .share-btn, .note-btn, .ics-btn {
  display:inline-flex; align-items:center; gap:6px;
  font-size:12px; font-weight:600; padding:5px 14px;
  border-radius:40px; border:1.5px solid var(--border-strong);
  background:var(--surface); color:var(--text-muted);
  cursor:pointer; font-family:var(--font);
  transition:all var(--transition);
}
.route-btn { border-color:var(--accent); background:var(--accent-glow); color:var(--accent); margin-left:auto }
.route-btn:active { background:var(--accent); color:#fff; transform:scale(.94) }

/* ── Route menu (choix navigation) ── */
.route-wrapper { position:relative; display:inline-flex; margin-left:auto }
.route-menu {
  display:none; position:absolute; top:100%; right:0; z-index:100;
  background:var(--surface); border:1px solid var(--border-strong);
  border-radius:var(--radius-md); box-shadow:0 4px 20px rgba(0,0,0,.15);
  min-width:170px; overflow:hidden; margin-top:4px;
}
.route-menu.visible { display:block }

/* Carte dont le menu Itinéraire est ouvert : passe au-dessus des cartes suivantes */
.event-card.menu-open {
  z-index:500; position:relative;
  box-shadow:0 8px 28px rgba(0,0,0,.18);
}
.event-card.menu-open .route-menu { z-index:600 }
.event-card.menu-open .event-card:not(.menu-open) { position:relative }
.rm-item {
  display:block; width:100%; padding:10px 14px; border:none; background:none;
  font-size:13px; font-weight:600; font-family:var(--font); color:var(--text);
  cursor:pointer; text-align:left; transition:background var(--transition);
  line-height:1.4;
}
.rm-item:hover { background:var(--accent-glow); color:var(--accent) }
.rm-item:active { background:var(--accent); color:#fff }
.rm-item + .rm-item { border-top:1px solid var(--border) }
.share-btn:active, .note-btn:active, .ics-btn:active { background:var(--accent-glow); color:var(--accent); border-color:var(--accent); transform:scale(.94) }
.note-btn.has-note { color:var(--accent); border-color:var(--accent); background:var(--accent-glow) }
.event-note {
  font-size:13px; color:var(--text-muted); background:var(--bg);
  padding:8px 12px; border-radius:var(--radius-sm);
  margin-top:8px; line-height:1.5;
  white-space:pre-wrap; word-break:break-word;
}

/* ── Reactions ── */
.reactions-row { display:flex; gap:6px; margin-top:8px; flex-wrap:wrap }
.reaction-btn {
  background:none; border:none; font-size:14px; cursor:pointer;
  padding:3px 8px; border-radius:40px; border:1.5px solid var(--border);
  font-family:var(--font); color:var(--text-muted);
  transition:all var(--transition);
  display:inline-flex; align-items:center; gap:4px; font-weight:600; line-height:1;
}
.reaction-btn:active { transform:scale(.88) }

/* ── Map ── */
#map {
  height:360px; margin:8px 16px; border-radius:var(--radius-lg);
  overflow:hidden; display:none; box-shadow:var(--shadow-sm);
  border:1px solid var(--border);
}
#map.visible { display:block }
#map.full { display:block; height:460px }

/* ── Route info ── */
.route-info {
  display:none; background:linear-gradient(135deg,var(--accent),var(--accent-hover));
  color:#fff; padding:16px 18px; border-radius:var(--radius-md);
  margin:10px 16px 0; box-shadow:0 4px 16px rgba(193,121,59,.25);
}
.route-info.visible { display:block }
.ri-row { display:flex; align-items:center; gap:12px }
.ri-icon { font-size:20px }
.ri-details { flex:1 }
.ri-dest { font-size:12px; opacity:.7 }
.ri-close { background:none; border:none; color:#fff; font-size:18px; cursor:pointer }

/* ── Back to top ── */
.back-top {
  position:fixed; bottom:28px; right:20px; width:46px; height:46px;
  border-radius:50%; background:var(--accent); color:#fff; border:none;
  font-size:20px; cursor:pointer; box-shadow:0 4px 16px rgba(193,121,59,.35);
  opacity:0; transform:translateY(20px);
  transition:all var(--transition); z-index:1000;
  display:flex; align-items:center; justify-content:center;
}
.back-top.visible { opacity:1; transform:translateY(0) }
.back-top:active { transform:scale(.9) }

/* ── Footer ── */
.refresh { text-align:center; padding:32px 16px 48px; font-size:13px; color:var(--text-light) }
.refresh a { color:var(--accent); text-decoration:none; font-weight:600 }
.refresh a:hover { text-decoration:underline }

/* ── Footer compact (SEO) : source, mise à jour, contact, copyright ── */
.site-footer {
  text-align:center; padding:0 16px 28px; font-size:12px;
  color:var(--text-muted); line-height:1.8;
}
.site-footer .footer-line { margin:2px 0; word-wrap:break-word }
.site-footer a { color:var(--accent); text-decoration:none; font-weight:600 }
.site-footer a:hover { text-decoration:underline }

/* ═══ MODALS ═══ */
.note-popup, .subs-modal, .tour-select {
  position:fixed; top:0; left:0; right:0; bottom:0; z-index:2000;
  background:rgba(0,0,0,.35); backdrop-filter:blur(6px);
  -webkit-backdrop-filter:blur(6px);
  display:none; justify-content:center; align-items:center;
}
.note-popup.visible, .subs-modal.visible, .tour-select.visible { display:flex }

.note-panel, .subs-panel, .ts-panel {
  background:var(--surface); border-radius:var(--radius-lg);
  padding:24px; margin:16px; max-width:400px; width:100%;
  box-shadow:var(--shadow-xl);
}
.np-header { display:flex; justify-content:space-between; align-items:center; margin-bottom:14px }
.np-title { font-size:17px; font-weight:800; color:var(--text) }
.np-close, .sp-close, .ts-close {
  background:none; border:none; font-size:22px; color:var(--text-light);
  cursor:pointer; padding:4px; font-family:var(--font);
}
.np-close:active, .sp-close:active, .ts-close:active { transform:scale(.85) }
.np-city { font-size:13px; color:var(--accent); font-weight:600; margin-bottom:12px }
.note-panel textarea {
  width:100%; padding:14px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-strong); font-size:14px;
  font-family:var(--font); color:var(--text);
  resize:vertical; min-height:90px; outline:none;
  box-sizing:border-box; transition:border-color var(--transition);
}
.note-panel textarea:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow) }
.np-bottom { display:flex; gap:10px; margin-top:12px }
.np-delete {
  flex:1; padding:11px; border-radius:var(--radius-md);
  border:1.5px solid var(--red); background:var(--surface);
  color:var(--red); font-size:13px; font-weight:600;
  cursor:pointer; font-family:var(--font); transition:all var(--transition);
}
.np-delete:active { background:var(--red-light); transform:scale(.97) }
.np-save, .sp-btn, .ts-go {
  flex:2; padding:11px; border-radius:var(--radius-md);
  border:none; background:var(--accent); color:#fff;
  font-size:14px; font-weight:700; cursor:pointer;
  font-family:var(--font); transition:all var(--transition);
}
.np-save:active, .sp-btn:active, .ts-go:active { background:var(--accent-hover); transform:scale(.97) }

/* Subscription modal */
.sp-title { font-size:16px; font-weight:800; color:var(--text) }
.sp-sub { font-size:13px; color:var(--text-muted); margin-bottom:14px; line-height:1.5 }
.subs-panel input, .subs-panel select {
  width:100%; padding:12px 14px; border-radius:var(--radius-md);
  border:1.5px solid var(--border-strong); font-size:14px;
  font-family:var(--font); margin-bottom:10px; outline:none;
  transition:border-color var(--transition);
}
.subs-panel input:focus, .subs-panel select:focus { border-color:var(--accent); box-shadow:0 0 0 4px var(--accent-glow) }
.sp-msg { font-size:13px; margin-top:10px; text-align:center }

/* Tour selector */
.ts-header { font-size:16px; font-weight:800; margin-bottom:4px }
.ts-sub { font-size:12px; color:var(--text-muted); margin-bottom:14px }
.ts-bottom { display:flex; gap:10px; margin-top:14px; align-items:center }
.ts-count { font-size:13px; color:var(--text-muted); flex:1 }

/* ═══ DETAIL PAGE ═══ */
.back-bar { padding:20px; max-width:800px; margin:0 auto; font-size:13px; font-weight:600 }
.back-bar a { color:var(--accent); text-decoration:none }
.back-bar a:hover { text-decoration:underline }
.card {
  max-width:800px; margin:12px auto; padding:24px;
  background:var(--surface); border-radius:var(--radius-lg);
  border:1px solid var(--border);
}
.card .event-city { font-size:13px; color:var(--accent); font-weight:800; margin-bottom:4px; letter-spacing:-.2px }
.card .event-name { font-size:22px; font-weight:800; line-height:1.3; margin-bottom:16px; letter-spacing:-.5px; color:var(--text) }
.tags { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px }
.tag {
  padding:5px 16px; font-size:11px; font-weight:600;
  border-radius:40px; border:1.5px solid var(--border);
}
.tag.free { border-color:var(--green); color:var(--green); background:var(--green-light) }
.tag.paid { border-color:var(--red); color:var(--red); background:var(--red-light) }
.tag.km { border-color:var(--accent-glow); color:var(--accent); background:var(--accent-glow) }
.status-badge {
  display:inline-block; padding:5px 16px; font-size:11px; font-weight:700;
  border-radius:40px; border:1.5px solid var(--accent); color:var(--accent);
}
.status-badge.cancelled { border-color:var(--red); color:var(--red); background:var(--red-light) }
.section-title { font-size:14px; font-weight:700; margin-bottom:12px; letter-spacing:-.2px }
.info-row { display:flex; gap:12px; margin-bottom:12px }
.info-icon { font-size:14px; min-width:20px; color:var(--text-muted) }
.info-text { flex:1; font-size:14px }
.info-text .label-light { color:var(--text-muted); font-size:12px }
.addr-link { color:var(--accent); text-decoration:none; font-weight:600 }
.addr-link:hover { text-decoration:underline }
.nav-row { display:flex; gap:8px; margin-top:8px }
.nav-btn {
  display:inline-block; padding:6px 16px; border-radius:40px;
  font-size:12px; font-weight:600; text-decoration:none;
  background:var(--accent-glow); color:var(--accent);
  border:1.5px solid var(--accent); transition:all var(--transition);
}
.nav-btn:active { background:var(--accent); color:#fff; transform:scale(.94) }
.desc-text { font-size:14px; line-height:1.7; color:var(--text-muted) }
.btn {
  display:inline-block; padding:10px 20px; border-radius:var(--radius-md);
  font-size:13px; font-weight:600; text-align:center;
  cursor:pointer; font-family:var(--font); transition:all var(--transition);
}
.btn-orig { background:var(--accent-glow); color:var(--accent); border:1.5px solid var(--accent); text-decoration:none }
.btn-orig:active { background:var(--accent); color:#fff; transform:scale(.97) }
.react-btn {
  border:1.5px solid var(--border); background:var(--surface);
  color:var(--text-muted); transition:all var(--transition);
}
.react-btn:active { background:var(--accent-glow); color:var(--accent); border-color:var(--accent) }

/* ── Desktop ── */
/* ── Leaflet marker cluster ── */
.marker-cluster-small {
  background-color: rgba(230, 57, 70, .25) !important;
}
.marker-cluster-small div {
  background-color: #e63946 !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.marker-cluster-medium {
  background-color: rgba(230, 57, 70, .25) !important;
}
.marker-cluster-medium div {
  background-color: #c1121f !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.marker-cluster-large {
  background-color: rgba(230, 57, 70, .25) !important;
}
.marker-cluster-large div {
  background-color: #a10e1a !important;
  color: #fff !important;
  font-weight: 700 !important;
}
.vg-marker {
  background: none !important;
  border: none !important;
}
@media(min-width:768px) {
  body { background:#ede8e1; background-image:radial-gradient(ellipse at 50% 0%,rgba(193,121,59,.03) 0%,transparent 50%); padding-bottom:60px }
  .container { max-width:1100px; padding:0 32px }
  .site-header { height:260px; border-radius:0 0 28px 28px; max-width:1200px; margin:0 auto }
  .site-header-bg { padding:16px 32px }
  .site-title { font-size:34px }
  /* ⚠️ `justify-content:center` + `overflow-x` = bug flexbox : quand le contenu
     déborde (beaucoup de jours), le DÉBUT de la liste sort à gauche et devient
     inatteignable au scroll → les premiers vide-greniers (ex. le jour même)
     disparaissaient. `safe center` centre seulement si ça ne déborde pas ;
     flex-start sert de repli aux navigateurs sans `safe`. */
  .filters { justify-content:flex-start; justify-content:safe center; padding:24px 16px 16px; gap:10px }
  .filter-btn { font-size:14px; padding:10px 24px }
  .view-toggle { max-width:340px; margin:12px auto 16px }
  .view-toggle button { font-size:14px; padding:12px }
  .view-toggle button:hover { background:var(--border); color:var(--text) }
  .view-toggle button.active:hover { background:var(--text) }
  .day-group { margin:24px 0; display:grid; grid-template-columns:1fr; gap:12px }
  .day-header { grid-column:1/-1; padding:16px 24px; margin-bottom:0; border-radius:var(--radius-lg) }
  .day-header:hover { transform:translateY(-1px); box-shadow:0 2px 8px rgba(0,0,0,.06) }
  .day-header .day-label { font-size:19px }
  .event-card { padding:18px 20px; margin-bottom:0; border-radius:var(--radius-lg) }
  .event-card:hover { transform:translateY(-2px); box-shadow:var(--shadow-md); border-color:var(--border-strong) }
  .event-name { font-size:16px }
  .event-card:hover .event-name { color:var(--accent) }
  .event-bottom { gap:12px }
  .route-btn:hover, .share-btn:hover { background:var(--accent); color:#fff }
  .day-map-btn:hover { background:var(--accent); color:#fff; border-color:var(--accent) }
  #map { margin:8px auto; max-width:800px; height:440px; border-radius:var(--radius-xl) }
  #map.full { height:540px }
  .refresh { font-size:14px; padding:48px 16px }
  .route-info { max-width:800px; margin:10px auto 0 }
  .back-bar { text-align:center }
  .card { max-width:620px; margin:20px auto }
  body.detail-page { background:#ede8e1; padding-bottom:80px }
}

@media(min-width:1200px) {
  .container { max-width:1200px; padding:0 40px }
  .site-header { height:300px; max-width:1320px; border-radius:0 0 32px 32px }
  .site-title { font-size:38px }
  .day-group { grid-template-columns:repeat(auto-fill,minmax(380px,1fr)) }
  #map { max-width:900px; height:500px; border-radius:var(--radius-xl) }
  #map.full { height:580px }
  .route-info { max-width:900px }
}

/* ── Géolocalisation manuelle (bouton custom, sans plugin externe) ── */
.my-locate-ctl {
  margin-bottom: 10px;              /* espace au-dessus du contrôle de zoom */
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 2px 6px rgba(0,0,0,.3);
}
.my-locate-btn {
  display: flex !important;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  background: #fff;
  color: #1a73e8;
  line-height: 1;
}
.my-locate-btn:hover { background: #f0f4ff; color: #1558b0; }
.my-locate-btn:active { background: #dfe8ff; }
.my-locate-btn.is-loading {
  pointer-events: none;
  opacity: .6;
}
/* état désactivé après un échec : le contour du cercle devient rouge */
.my-locate-btn.is-failed { color: #d9453a; }
.my-locate-btn.is-failed svg circle[stroke-dasharray] { stroke: #d9453a; }
/* petite animation de pulsation pendant la recherche de position */
.my-locate-btn.is-loading svg circle[stroke-dasharray] { animation: mylocate-spin 1s linear infinite; transform-origin: 50% 50%; }
@keyframes mylocate-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
.leaflet-touch .my-locate-btn { width: 34px; height: 34px; }

/* ── Classes "CSP-safe" ────────────────────────────────────────────
   Remplacent les anciens attributs style="" (bloqués par style-src-attr
   sans 'unsafe-inline') et le CSS inline des popups Leaflet injectées
   via innerHTML (aussi bloqué). Le positionnement du texte des popups
   créé par el.style.* (ex. style.cssText) reste autorisé par la CSP. */

/* index.html — ligne "Tout / Rien" du sélecteur de tour */
.ts-select-row { float:right; font-size:12px; }
.ts-select-link { cursor:pointer; }

/* index.html — en-tête de la modale alerte email */
.subs-modal-head { display:flex; justify-content:space-between; align-items:center; }

/* index.html — popups Leaflet (contenu injecté via bindPopup/innerHTML) */
.vg-popup { font-family:var(--font); font-size:14px; line-height:1.4; min-width:200px; max-width:260px; }
.vg-popup-name { font-weight:700; font-size:15px; color:#1c1b18; margin-bottom:6px; }
.vg-popup-line { color:#555; margin-bottom:4px; }
.vg-popup-line-gap { color:#555; margin-bottom:8px; }
.vg-popup-btn { display:block; background:#e63946; color:#fff; text-decoration:none; padding:10px 16px; border-radius:24px; font-size:13px; font-weight:600; text-align:center; margin-top:6px; }
.vg-popup-btn:hover { background:#c1121f; color:#fff; }

/* detail.html — compact header (height 160px) */
.detail-page .site-header { height:160px; }

/* detail.html — itinéraire retiré le margin-left:auto (inline) */
.route-wrapper.route-wrapper-inline { margin-left:0; }
.route-btn.route-btn-inline { margin-left:0; }

/* detail.html — titres / cartes à marge ajustée */
.section-title-mt { margin-top:20px; }
.card-tight { margin-top:-8px; }
.card .desc-strong { font-weight:500; }

/* detail.html — rangée d'actions flex (boutons d'origine/calendrier) */
.actions-row { display:flex; gap:8px; margin-top:12px; }
.btn-flex-1 { flex:1; }
.btn-flex-05 { flex:.5; }

/* detail.html — rangée de réactions */
.react-row { display:flex; gap:10px; margin-top:10px; }
.react-btn.react-accent { flex:1; border-color:var(--accent); color:var(--accent); }

/* detail.html — footer refresh avec marge haute */
.refresh-mt { margin-top:20px; }

/* detail.html — météo du jour (masquée tant que JS n'a pas de données) */
.weather-row[hidden] { display:none!important }
.weather-row .info-icon { font-size:18px }

/* detail.html — bouton partager (même style que .btn-orig, bouton natif) */
.share-detail-btn { cursor:pointer; font-family:var(--font) }
.share-detail-btn:active { background:var(--accent); color:#fff; transform:scale(.97) }


/* ═══════════════════════════════════════════════════════════════
   Admin — page protégée /admin (statistiques visiteurs)
   ═══════════════════════════════════════════════════════════════ */
.admin-body { padding-bottom:40px; }
.admin-wrap { max-width:760px; margin:0 auto; padding:20px 16px; }
.admin-header { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:20px; }
.admin-header h1 { font-size:24px; font-weight:900; letter-spacing:-.5px; }
.admin-sub { color:var(--text-muted); font-size:13px; margin-top:2px; }
.admin-link { color:var(--accent); font-weight:700; font-size:14px; text-decoration:none; white-space:nowrap; }
.admin-link:active { opacity:.7; }

.admin-cards { display:grid; grid-template-columns:repeat(2,1fr); gap:10px; margin-bottom:20px; }
.admin-card {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-md); padding:14px 16px;
  display:flex; flex-direction:column; gap:2px; box-shadow:var(--shadow-sm);
}
.admin-num { font-size:26px; font-weight:900; letter-spacing:-1px; line-height:1.1; }
.admin-label { font-size:12px; color:var(--text-muted); font-weight:600; }

.admin-section {
  background:var(--surface); border:1px solid var(--border);
  border-radius:var(--radius-lg); padding:18px 16px; margin-bottom:16px;
  box-shadow:var(--shadow-sm);
}
.admin-section h2 { font-size:15px; font-weight:800; letter-spacing:-.2px; margin-bottom:14px; }
.admin-h2-note { font-size:12px; font-weight:600; color:var(--text-light); }

/* Barres visiteurs/jour */
.admin-bar-row { display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.admin-bar-date { width:42px; font-size:11px; color:var(--text-muted); font-weight:600; flex-shrink:0; }
.admin-bar-track {
  flex:1; height:14px; background:var(--bg); border-radius:7px;
  overflow:hidden; border:1px solid var(--border);
}
.admin-bar { height:100%; background:var(--accent); border-radius:7px; transition:width .3s ease; }
.admin-bar.bar-zero { opacity:0; }
.admin-bar-count { width:32px; text-align:right; font-size:12px; font-weight:700; flex-shrink:0; }

/* Tableaux */
.admin-table-wrap {
  width:100%;
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:var(--radius-md);
}
.admin-table { width:100%; border-collapse:collapse; font-size:13px; }
.admin-table th {
  text-align:left; font-size:11px; text-transform:uppercase; letter-spacing:.4px;
  color:var(--text-muted); padding:6px 8px; border-bottom:1px solid var(--border);
}
.admin-table td { padding:7px 8px; border-bottom:1px solid var(--border-strong); vertical-align:top; }
.admin-table tr:last-child td { border-bottom:none; }
.mono { font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace; font-size:12px; word-break:break-all; }
.muted { color:var(--text-muted); }
.small { font-size:11px; }

/* User-agents */
.admin-ua { display:flex; flex-direction:column; gap:8px; font-size:14px; }
.ua-dot { display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px; }
.ua-browser { background:var(--green); }
.ua-bot { background:var(--red); }
.ua-other { background:var(--gold); }

/* Bouton « Copier CSV » (abonnés) + message de confirmation */
.admin-csv-row { display:flex; align-items:center; gap:10px; margin-bottom:14px; }
.admin-csv-btn {
  font-size:13px; font-weight:700; color:var(--accent);
  background:var(--accent-glow); border:1.5px solid var(--accent);
  border-radius:var(--radius-sm, 10px); padding:8px 16px; cursor:pointer;
  font-family:var(--font); -webkit-appearance:none; appearance:none;
  transition:all var(--transition);
}
.admin-csv-btn:active { background:var(--accent); color:#fff; transform:scale(.97) }
.admin-csv-msg { font-size:12px; color:var(--green); font-weight:600; }
.admin-csv-msg:empty { display:none }

.admin-footer { text-align:center; color:var(--text-light); font-size:12px; margin-top:8px; line-height:1.8; }

/* Formulaire de connexion admin (remplace la popup Basic Auth, bug iPhone).
   ️100% HTML/CSS : aucun JavaScript requis, gros contrôles tactiles. */
.admin-error {
  background:var(--red-light); color:var(--red);
  border:1px solid var(--red); border-radius:var(--radius-md);
  padding:12px 14px; margin-bottom:14px; font-size:14px; font-weight:600;
}
.admin-login-form { display:flex; flex-direction:column; gap:12px; }
.admin-login-label { font-size:13px; font-weight:700; color:var(--text-muted); }
.admin-login-input {
  width:100%; box-sizing:border-box; font-size:17px; padding:14px 16px;
  border:1px solid var(--border-strong); border-radius:var(--radius-md);
  background:var(--bg); color:var(--text); -webkit-appearance:none; appearance:none;
}
.admin-login-input:focus { outline:none; border-color:var(--accent); }
.admin-login-btn {
  font-size:17px; font-weight:800; padding:15px 16px; color:#fff;
  background:var(--accent); border:none; border-radius:var(--radius-md);
  cursor:pointer; -webkit-appearance:none; appearance:none; min-height:52px;
}
.admin-login-btn:active { opacity:.85; }
.admin-logout-form { margin-top:8px; }
.admin-logout-btn {
  font-size:13px; font-weight:700; color:var(--text-muted);
  background:none; border:1px solid var(--border-strong);
  border-radius:var(--radius-sm, 10px); padding:8px 18px; cursor:pointer;
  -webkit-appearance:none; appearance:none;
}
.admin-logout-btn:active { opacity:.7; }

/* Mobile (iPhone) : tables scrollables horizontalement, texte resserré */
@media (max-width:640px) {
  /* Le header de jour (label + pill date + badge + carte + météo + count)
     déborde sur mobile : badge sur sa propre ligne, espacements réduits. */
  .day-header {
    flex-wrap: wrap;
    gap: 6px 10px;
    padding: 12px 14px;
  }
  .day-header .day-label { font-size: 16px }
  .day-header .day-sub { font-size: 11px; padding: 4px 10px }
  .day-badge { order: 10; flex-basis: 100%; width: fit-content; margin-left: 2px }
  .day-map-btn { padding: 5px 10px; font-size: 10px }
  .weather-icon { font-size: 16px }
  .day-header .day-count { padding: 3px 10px; font-size: 12px }
  .admin-table-wrap { margin:0 -4px; padding:0 4px; }
  .admin-table { font-size:13px; white-space:nowrap; }
  .admin-table th { font-size:11px; }
  .admin-table td { padding:7px 8px; }
}