/* v3-clubs.css — page /clubs : carte des dojangs + liste.
   Chargée par clubs.html et re-posée par js/clubs-live.js en navigation SPA
   (gk-spa ne rejoue pas les <link> de la page d'arrivée).

   Les tuiles Stamen Watercolor sont peintes en clair : sur le fond #0B0E1A du
   site elles hurlent. On les ramène à un lavis d'encre par filtre CSS, comme
   sur tkd-wiki-web. */

.gk-clubs .gkb-head { margin: 14px 0 0; }
.gk-clubs .gkb-head h1.display { margin: 0; font-size: clamp(30px, 4vw, 46px); color: #F2F4FA; }
.gk-clubs .gkb-sub { margin: 8px 0 0; max-width: 60ch; font: 400 13.5px/1.6 Inter, sans-serif; color: rgba(255,255,255,.6); }

/* ── carte ─────────────────────────────────────────────────────────────── */
.clb-map {
  position: relative; margin-top: 18px; height: clamp(460px, calc(100vh - 330px), 780px);
  background: #0B0E1A;
  box-shadow: inset 0 0 0 1px rgba(200,170,110,.34);
  clip-path: polygon(22px 0, 100% 0, 100% calc(100% - 22px), calc(100% - 22px) 100%, 0 100%, 0 22px);
}
.clb-map .leaflet-container { width: 100%; height: 100%; background: #0B0E1A; font-family: Inter, sans-serif; }
/* Le lavis d'encre ne s'applique qu'à l'AQUARELLE (mode clair) : le fond
   sombre classique est déjà à la bonne valeur, le filtrer le noierait. */
.clb-map.is--aquarelle .leaflet-tile { filter: grayscale(.62) sepia(.2) brightness(.6) contrast(1.08); }
.clb-map .leaflet-control-attribution {
  background: rgba(8,12,22,.78); color: rgba(255,255,255,.5); font-size: 10px; border: 0;
}
.clb-map .leaflet-control-attribution a { color: #C8AA6E; }
.clb-map .leaflet-bar a {
  background: rgba(10,15,28,.9); color: #F2F4FA; border-color: rgba(255,255,255,.14);
}
.clb-map .leaflet-bar a:hover { background: rgba(200,170,110,.28); }

/* ── Points et paquets, code couleur de carte ────────────────────────────────
   Un point = un club, en orange. Un paquet = plusieurs clubs au même endroit :
   il porte le TOTAL, et sa taille comme sa couleur montent avec la densité,
   de l'orange au rouge. En zoomant, markercluster défait les paquets tout seul
   jusqu'aux points individuels (plus aucun paquet au zoom 15). */
.clb-pin i {
  display: block; width: 11px; height: 11px; border-radius: 50%;
  background: #F97316;
  box-shadow: 0 0 0 2px rgba(11,14,26,.9), 0 0 8px rgba(249,115,22,.55);
}

.clb-map .marker-cluster,
.clb-map .marker-cluster div,
.clb-map .marker-cluster span { background: none; border: 0; margin: 0; }
/* ⚠ la couleur de densité passe par une VARIABLE, pas par `currentColor` :
   `background: currentColor` sur un élément qui déclare aussi sa propre
   `color` prend SA couleur à lui, pas celle du parent. Les pastilles
   sortaient toutes en brun sombre. */
.clb-cl {
  --c: #F97316;
  position: relative; display: grid; place-items: center;
  color: #180A04; font: 700 12px Inter, sans-serif; font-variant-numeric: tabular-nums;
}
/* le halo : c'est lui qui donne l'assise du paquet sur la carte */
.clb-cl .hl {
  position: absolute; inset: 0; border-radius: 50%;
  background: var(--c); opacity: .3;
}
.clb-cl .nb {
  position: relative; display: grid; place-items: center;
  width: 68%; height: 68%; border-radius: 50%;
  background: var(--c);
  box-shadow: 0 2px 10px rgba(0,0,0,.45), 0 0 0 1px rgba(11,14,26,.5);
}
.clb-cl--s  { --c: #FBBF24; }
.clb-cl--m  { --c: #F97316; }
.clb-cl--l  { --c: #EF4444; color: #FFF3EC; }
.clb-cl--xl { --c: #DC2626; color: #FFF3EC; font-size: 13px; }

.clb-map .leaflet-popup-content-wrapper {
  background: #0E1424; color: #F2F4FA; border-radius: 0;
  box-shadow: 0 10px 34px rgba(0,0,0,.55), inset 0 0 0 1px rgba(200,170,110,.4);
}
.clb-map .leaflet-popup-tip { background: #0E1424; }
.clb-map .leaflet-popup-content { margin: 13px 16px; }
.clb-pop b { display: block; font: italic 700 15px 'GT Sectra Display', Georgia, serif; color: #F2EEE4; }
.clb-pop span { display: block; margin-top: 4px; font: 400 12px/1.5 Inter, sans-serif; color: rgba(255,255,255,.6); }
.clb-pop em { display: block; margin-top: 6px; font: 700 8.5px Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; font-style: normal; color: #C8AA6E; }
.clb-pop a { display: inline-block; margin-top: 8px; font: 600 11px Inter, sans-serif; color: #C8AA6E; }

/* ── liste ─────────────────────────────────────────────────────────────── */
.clb-filtres { display: flex; gap: 10px; margin-top: 18px; flex-wrap: wrap; }
.clb-champ {
  position: relative; isolation: isolate; flex: 1 1 320px; min-width: 0;
  display: flex; align-items: center; gap: 11px; padding: 13px 20px;
  background: linear-gradient(115deg, #8A6A2F 0 18%, #F7EFDC 34%, #C8AA6E 52%, #E4CE9B 74%, #8A6A2F 92%);
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
}
.clb-champ::before {
  content: ''; position: absolute; inset: 1.5px; z-index: -1; background: #0E1424;
  clip-path: polygon(13.8px 0, calc(100% - 13.8px) 0, 100% 50%, calc(100% - 13.8px) 100%, 13.8px 100%, 0 50%);
}
.clb-champ i { font-size: 17px; color: #C8AA6E; }
.clb-champ input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; font: 500 14px Inter, sans-serif; color: #F2F4FA; }
.clb-champ input::placeholder { color: rgba(255,255,255,.34); }
.clb-select {
  flex: 0 0 auto; padding: 13px 18px; font: 500 13px Inter, sans-serif; color: #F2F4FA;
  background: rgba(255,255,255,.06); border: 0; outline: 0; cursor: pointer;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.18);
  clip-path: polygon(13px 0, calc(100% - 13px) 0, 100% 50%, calc(100% - 13px) 100%, 13px 100%, 0 50%);
}
.clb-select option { background: #0E1424; color: #F2F4FA; }

.clb-count { margin: 16px 0 8px; font: 700 9px Inter, sans-serif; letter-spacing: .2em; text-transform: uppercase; color: #C8AA6E; }
.clb-list { display: flex; flex-direction: column; }
.clb-row {
  display: flex; align-items: center; gap: 16px; padding: 13px 4px;
  border-bottom: 1px solid rgba(255,255,255,.07);
}
.clb-row:hover { background: rgba(255,255,255,.035); }
.clb-row .tx { flex: 1; min-width: 0; }
.clb-row .tx b { display: block; font: 600 14px Inter, sans-serif; color: #F2F4FA; }
.clb-row .tx span { display: block; margin-top: 2px; font: 400 12px/1.45 Inter, sans-serif; color: rgba(255,255,255,.5); }
.clb-row .py { flex: 0 0 auto; font: 700 9px Inter, sans-serif; letter-spacing: .16em; text-transform: uppercase; color: #8A93AD; }
.clb-row .ax { flex: 0 0 auto; display: flex; gap: 6px; }
.clb-row .lk {
  display: flex; align-items: center; justify-content: center; width: 30px; height: 26px;
  color: rgba(255,255,255,.75); text-decoration: none; background: rgba(255,255,255,.07);
  clip-path: polygon(7px 0, calc(100% - 7px) 0, 100% 50%, calc(100% - 7px) 100%, 7px 100%, 0 50%);
}
.clb-row .lk:hover { color: #0B0E1A; background: linear-gradient(115deg, #F7EFDC, #C8AA6E 60%, #8A6A2F); }
.clb-row .lk i { font-size: 13px; }

.clb-empty { padding: 40px 0; text-align: center; font: 500 13px Inter, sans-serif; color: var(--muted, #8A93AD); }

@media (max-width: 640px) {
  .clb-map { height: 62vh; }
  .clb-row .py { display: none; }
}

/* ── Liste déroulante maison (filtre par pays) ───────────────────────────────
   Un <select> natif ne se style pas : la liste est dessinée par le système,
   hors du site. D'où un bouton + un panneau. Le BOUTON garde le biseau de la
   charte, le PANNEAU reste un rectangle : un hexagone sur une liste ne se lit
   pas. La flèche a sa place réservée par le padding, elle ne touche plus le
   biseau (retours Jason 25/08). */
.clb-sel { position: relative; flex: 0 0 auto; }
.clb-sel-b {
  position: relative; isolation: isolate; display: flex; align-items: center; gap: 12px;
  height: 100%; min-height: 46px; padding: 0 22px 0 20px; cursor: pointer; border: 0;
  font: 500 13px Inter, sans-serif; color: #F2F4FA;
  background: linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.16) 45%, rgba(255,255,255,.3));
  clip-path: polygon(15px 0, calc(100% - 15px) 0, 100% 50%, calc(100% - 15px) 100%, 15px 100%, 0 50%);
}
.clb-sel-b::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: #0E1424;
  clip-path: polygon(14.2px 0, calc(100% - 14.2px) 0, 100% 50%, calc(100% - 14.2px) 100%, 14.2px 100%, 0 50%);
}
.clb-sel-b .lb { white-space: nowrap; }
.clb-sel-b i { font-size: 13px; color: #C8AA6E; transition: transform .16s; }
.clb-sel.is--ouvert .clb-sel-b i { transform: rotate(180deg); }
.clb-sel-b:hover { background: linear-gradient(150deg, #F7EFDC, #C8AA6E 50%, #8A6A2F); }

.clb-sel-p {
  position: absolute; z-index: 40; top: calc(100% + 6px); right: 0; min-width: 240px;
  max-height: 340px; overflow: auto; padding: 4px;
  background: #0E1424; box-shadow: 0 18px 40px rgba(0,0,0,.5), inset 0 0 0 1px rgba(200,170,110,.34);
}
.clb-sel-p[hidden] { display: none; }
.clb-sel-o {
  display: flex; align-items: center; justify-content: space-between; gap: 14px; width: 100%;
  padding: 9px 14px; border: 0; background: none; cursor: pointer; text-align: left;
  font: 500 13px Inter, sans-serif; color: rgba(255,255,255,.78);
}
.clb-sel-o em { font: 700 italic 11px 'Inter Tight', Inter, sans-serif; font-style: italic; color: #8A93AD; }
.clb-sel-o:hover { background: rgba(255,255,255,.06); color: #F2F4FA; }
.clb-sel-o.is--on { color: #0B0E1A; background: linear-gradient(115deg, #F7EFDC, #C8AA6E 55%, #8A6A2F); }
.clb-sel-o.is--on em { color: rgba(11,14,26,.7); }

/* La recherche prend la même hauteur que le bouton, et son input ne dessine
   rien : c'est le contenant qui porte le trait. */
.clb-filtres { align-items: stretch; }
.clb-champ { min-height: 46px; }
/* Une SEULE ligne et une hauteur STRICTEMENT identique : le sélecteur
   passait à la ligne sous la recherche (flex-wrap) et gardait 5 px de plus
   (retour Jason 31/08). */
.clb-filtres { flex-wrap: nowrap; margin-bottom: 14px; }
.clb-champ { flex: 1 1 auto; height: 48px; min-height: 0; padding-top: 0; padding-bottom: 0; }
.clb-sel { height: 48px; }
.clb-sel-b { height: 100%; min-height: 0; }
/* le panneau des pays doit passer AU-DESSUS de tout. ⚠ .clb-filtres a un
   z-index:1 (contexte d'empilement) : le 1100 du panneau restait LOCAL à la
   barre, et la carte (contexte frère plus tard dans le DOM) passait devant
   (retour Jason 31/08 soir, vérifié par elementFromPoint). C'est donc la
   BARRE entière qui monte. ⚠ spécificité : `.main.mhero > *` (hextech) pose
   z-index:1 à (0,2,0), une simple classe ne le bat pas. */
.content.gk-clubs .clb-filtres { z-index: 1200; }
.clb-sel { z-index: 1200; }
.clb-sel-p { z-index: 1100; }
/* le champ de saisie du panneau (retour Jason 31/08 : trop de pays à
   scroller, on tape les premières lettres) : collé en tête, le reste défile.
   Le champ lui-même est un MINI HEXAGONE comme les autres recherches du site,
   pour bien le séparer de la liste des pays (retour Jason 31/08 soir). */
.clb-sel-f {
  position: sticky; top: -4px; z-index: 2; margin: -4px -4px 6px;
  display: block; padding: 10px 10px 9px;
  background: #0E1424; box-shadow: inset 0 -1px 0 rgba(255,255,255,.12);
}
.clb-sel-f .fx {
  position: relative; isolation: isolate;
  display: flex; align-items: center; gap: 9px; padding: 8px 15px;
  background: linear-gradient(150deg, rgba(255,255,255,.42), rgba(255,255,255,.16) 45%, rgba(255,255,255,.3));
  clip-path: polygon(11px 0, calc(100% - 11px) 0, 100% 50%, calc(100% - 11px) 100%, 11px 100%, 0 50%);
}
.clb-sel-f .fx::before {
  content: ''; position: absolute; inset: 1px; z-index: -1; background: #0B101E;
  clip-path: polygon(10.4px 0, calc(100% - 10.4px) 0, 100% 50%, calc(100% - 10.4px) 100%, 10.4px 100%, 0 50%);
}
.clb-sel-f i { font-size: 14px; color: #C8AA6E; }
.clb-sel-f input {
  flex: 1; min-width: 0; background: none; border: 0; outline: 0;
  font: 500 13px Inter, sans-serif; color: #F2F4FA;
}
.clb-sel-f input::placeholder { color: rgba(255,255,255,.34); }
.clb-sel-o[hidden] { display: none; }
.clb-champ input, .clb-sel-b { -webkit-appearance: none; appearance: none; }

/* Fiches trop incomplètes pour la carte : trouvables par la recherche, posées
   en dessous des résultats, et signalées comme telles. Volontairement en
   retrait (gris, pas or) : ce sont des fiches à compléter, pas des vedettes. */
.clb-count--pauvre { margin-top: 22px; color: #8A93AD; }
.clb-count--pauvre::before {
  content: ""; display: block; height: 1px; margin: 0 0 12px;
  background: rgba(255,255,255,.10);
}
.clb-list.is--pauvre { opacity: .72; }
.clb-list.is--pauvre .clb-row .tx b { color: rgba(242,244,250,.82); }