/* Mighty Hub — pages publiques du répertoire.
   Réutilise les composants et variables du thème Mighty Pickleball (page-hero, section, btn…). */

.mh-wrap { max-width: var(--max-w, 1280px); margin: 0 auto; }
.mh-muted { color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); font-size: .85em; font-weight: 400; }
.mh-h2 { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: clamp(1.7rem, 3.2vw, 2.3rem); letter-spacing: .04em; margin: 8px 0 20px; font-weight: 400; }
.mh-empty { color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); padding: 24px 0; }
.mh-empty a, .mh-more a, .mh-prose a, .mh-facts a, .mh-note a { color: var(--gold, #FFFFFF); }
.mh-more { margin-top: 22px; }

/* Aperçu des brouillons (éditeurs connectés seulement) */
.mh-preview-bar { position: fixed; z-index: 9998; left: 0; right: 0; bottom: 0; padding: 10px 16px; background: #f59e0b; color: #1f1300; text-align: center; font-size: .9rem; }
.mh-preview-bar a { color: #1f1300; font-weight: 600; text-decoration: underline; }

/* Fil d'Ariane */
.mh-breadcrumbs { margin: 0 0 28px; font-size: .85rem; }
.mh-breadcrumbs ol { list-style: none; display: flex; flex-wrap: wrap; gap: 4px 0; margin: 0; padding: 0; }
.mh-breadcrumbs li + li::before { content: '›'; margin: 0 9px; color: var(--text-dim, rgba(var(--fg-rgb, 255,255,255),.32)); }
.mh-breadcrumbs a { color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); text-decoration: none; }
.mh-breadcrumbs a:hover { color: var(--gold, #FFFFFF); }
.mh-breadcrumbs [aria-current] { color: var(--white, #FFFFFF); }

/* En-têtes */
.mh-stats { list-style: none; display: flex; flex-wrap: wrap; justify-content: center; gap: 10px 28px; margin: 26px 0 0; padding: 0; color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); }
.mh-stats strong { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 1.6rem; color: var(--white, #FFFFFF); font-weight: 400; margin-right: 4px; }
.mh-stats a { color: inherit; text-decoration: none; }
.mh-stats a:hover strong { color: var(--gold, #FFFFFF); }
.mh-intro { max-width: 680px; margin: 0 auto; color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); }
.mh-single-hero .sec-eyebrow a { color: inherit; text-decoration: none; }
.mh-lead { font-size: 1.2rem; color: var(--white, #FFFFFF) !important; }
.mh-actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; margin-top: 28px; }
.mh-actions .btn { padding: 12px 26px; font-size: .95rem; }

/* Régions et villes */
.mh-regions { display: grid; grid-template-columns: repeat(auto-fill, minmax(290px, 1fr)); gap: 18px; align-items: start; }
.mh-region { padding: 20px 22px 16px; background: var(--card-bg, rgba(24,35,15,.7)); border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: var(--radius, 12px); }
.mh-region__name { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 1.5rem; font-weight: 400; letter-spacing: .04em; margin: 0 0 12px; }
.mh-region:not(:has(.mh-chips)) .mh-region__name { margin-bottom: 0; }
.mh-region__name .mh-muted { white-space: nowrap; flex-shrink: 0; }
.mh-region__name a { color: var(--white, #FFFFFF); text-decoration: none; }
.mh-region__name a:hover { color: var(--gold, #FFFFFF); }
.mh-chips, .mh-filters { list-style: none; display: flex; flex-wrap: wrap; gap: 10px; margin: 0 0 8px; padding: 0; }
.mh-chips a, .mh-filters a { display: inline-block; padding: 8px 18px; border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: 30px; color: var(--white, #FFFFFF); text-decoration: none; font-size: .92rem; transition: all .2s; }
.mh-chips a:hover, .mh-filters a:hover, .mh-filters a.is-active { background: var(--gold-dim, rgba(var(--fg-rgb, 255,255,255),.12)); border-color: rgba(var(--fg-rgb, 255,255,255),.55); color: var(--gold, #FFFFFF); }
.mh-filters { margin-bottom: 32px; }

/* Sections et grilles de cartes */
.mh-block { margin-bottom: 56px; }
.mh-block__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.mh-block__head .btn { padding: 8px 20px; font-size: .85rem; }
.mh-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 20px; }
.mh-card { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 22px 18px; background: var(--card-bg, rgba(24,35,15,.7)); border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: var(--radius, 12px); transition: border-color .2s, transform .2s, box-shadow .2s; }
.mh-card:hover, .mh-card:focus-within { border-color: rgba(var(--fg-rgb, 255,255,255),.6); transform: translateY(-2px); box-shadow: 0 8px 30px rgba(var(--fg-rgb, 255,255,255),.15); }
.mh-card__eyebrow { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: .78rem; letter-spacing: .22em; color: var(--gold, #FFFFFF); text-transform: uppercase; }
.mh-card__title { margin: 0; font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 1.55rem; font-weight: 400; letter-spacing: .03em; line-height: 1.15; }
.mh-card__link { color: var(--white, #FFFFFF); text-decoration: none; }
.mh-card__link::after { content: ''; position: absolute; inset: 0; border-radius: inherit; } /* toute la carte est cliquable */
.mh-card__link:focus-visible { outline: 2px solid var(--gold, #FFFFFF); outline-offset: 6px; }
.mh-card__line { margin: 0; color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); font-size: .92rem; }
.mh-verified { margin-top: auto; font-size: .8rem; color: #4ade80; }

/* Étiquettes */
.mh-badges { list-style: none; display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 0; padding: 0; }
.mh-badges--center { justify-content: center; margin-top: 18px; }
.mh-badges li { padding: 3px 11px; border-radius: 20px; font-size: .78rem; background: var(--gold-dim, rgba(var(--fg-rgb, 255,255,255),.12)); border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); color: #ddd8cf; }

/* Pagination */
.mh-pagination { display: flex; align-items: center; justify-content: center; gap: 22px; margin-top: 36px; }
.mh-pagination a { color: var(--gold, #FFFFFF); text-decoration: none; padding: 8px 18px; border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: 30px; }
.mh-pagination a:hover { background: var(--gold-dim, rgba(var(--fg-rgb, 255,255,255),.12)); }
.mh-pagination__status { color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); }

/* Fiches */
.mh-single { max-width: 860px; }
.mh-prose { margin-bottom: 36px; font-size: 1.05rem; line-height: 1.75; color: rgba(var(--fg-rgb, 255,255,255),.88); }
.mh-facts { display: grid; grid-template-columns: minmax(110px, 170px) 1fr; gap: 0; margin: 0 0 28px; border-top: 1px solid rgba(var(--fg-rgb, 255,255,255),.15); }
.mh-facts dt, .mh-facts dd { margin: 0; padding: 14px 4px; border-bottom: 1px solid rgba(var(--fg-rgb, 255,255,255),.15); }
.mh-facts dt { color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); font-size: .9rem; text-transform: uppercase; letter-spacing: .08em; }
.mh-facts dd { word-break: break-word; }
.mh-note { margin: 0 0 8px; padding: 14px 18px; border-radius: var(--radius, 12px); background: rgba(var(--fg-rgb, 255,255,255),.04); color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); font-size: .92rem; }
.mh-note--ok { color: #86efac; background: rgba(74,222,128,.07); }

@media (max-width: 640px) {
  .mh-facts { grid-template-columns: 1fr; }
  .mh-facts dt { border-bottom: 0; padding-bottom: 0; }
  .mh-facts dd { padding-top: 4px; }
  .mh-grid { grid-template-columns: 1fr; }
  .mh-actions .btn { width: 100%; justify-content: center; }
  .mh-pagination { gap: 10px; flex-wrap: wrap; }
}

/* ───────────── Carte « Trouver où jouer » ───────────── */
.mh-hero-cta { margin: 22px 0 0; }
/* L'attribut hidden doit gagner contre les display: du thème (btn, inline-flex…). */
.mh-wrap [hidden] { display: none !important; }
.mh-map, .mh-minimap { position: relative; z-index: 0; isolation: isolate; border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: var(--radius, 12px); overflow: hidden; background: #14111a; }
.mh-map { height: 640px; }
.mh-minimap { height: 340px; margin-bottom: 14px; }
.leaflet-container { font-family: var(--font-body, 'Inter', sans-serif); }
.mh-map__error { margin: 0; padding: 40px 24px; text-align: center; color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); }

/* Formulaire de filtres */
.mh-filters-form { display: grid; grid-template-columns: repeat(auto-fit, minmax(210px, 1fr)); gap: 16px 20px; align-items: end; margin-bottom: 18px; }
.mh-field label, .mh-flags legend { display: block; margin-bottom: 6px; font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); }
.mh-field select, .mh-field input { width: 100%; padding: 11px 14px; border-radius: var(--radius, 12px); border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); background: rgba(var(--fg-rgb, 255,255,255),.05); color: var(--white, #FFFFFF); font: inherit; }
.mh-field select option { background: var(--black, #fff); color: var(--white, #FFFFFF); }
.mh-field select:focus-visible, .mh-field input:focus-visible { outline: 2px solid var(--gold, #FFFFFF); outline-offset: 2px; }
.mh-flags { grid-column: 1 / -1; display: flex; flex-wrap: wrap; gap: 8px 10px; border: 0; margin: 0; padding: 0; }
.mh-flags legend { width: 100%; padding: 0; }
.mh-flag { position: relative; cursor: pointer; }
.mh-flag input { position: absolute; opacity: 0; inset: 0; width: 100%; height: 100%; margin: 0; cursor: pointer; }
.mh-flag span { display: inline-block; padding: 8px 18px; border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: 30px; color: var(--white, #FFFFFF); font-size: .92rem; transition: all .2s; }
.mh-flag:hover span { background: var(--gold-dim, rgba(var(--fg-rgb, 255,255,255),.12)); }
.mh-flag input:checked + span { background: var(--gold, #FFFFFF); border-color: var(--gold, #FFFFFF); color: var(--on-gold, #fff); }
.mh-flag input:focus-visible + span { outline: 2px solid var(--gold, #FFFFFF); outline-offset: 2px; }
.mh-near { grid-column: 1 / -1; display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.mh-near .btn { padding: 11px 26px; font-size: .95rem; }
.mh-field--inline { display: inline-flex; align-items: center; gap: 10px; }
.mh-field--inline label { margin: 0; }
.mh-field--inline select { width: auto; }
.mh-link { background: none; border: 0; padding: 0; color: var(--gold, #FFFFFF); font: inherit; font-size: .9rem; text-decoration: underline; cursor: pointer; }
.mh-link:hover { color: var(--white, #FFFFFF); }
.mh-mapapp__count { margin: 0 0 4px; font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 1.25rem; letter-spacing: .05em; }
.mh-mapapp__msg { min-height: 1.4em; margin: 0 0 12px; color: #B9BEB8; font-size: .92rem; }

/* Carte + liste */
.mh-mapapp__body { display: grid; grid-template-columns: minmax(0, 1.7fr) minmax(300px, 1fr); gap: 20px; align-items: start; }
.mh-mapapp__list { display: flex; flex-direction: column; gap: 12px; }
.mh-results { list-style: none; margin: 0; padding: 0 4px 0 0; max-height: 640px; overflow-y: auto; }
.mh-result { display: grid; gap: 6px; padding: 14px 16px; margin-bottom: 10px; background: var(--card-bg, rgba(24,35,15,.7)); border: 1px solid var(--gold-border, rgba(var(--fg-rgb, 255,255,255),.25)); border-radius: var(--radius, 12px); }
.mh-result.is-active { border-color: var(--gold, #FFFFFF); box-shadow: 0 0 0 1px var(--gold, #FFFFFF), 0 6px 24px rgba(var(--fg-rgb, 255,255,255),.2); }
.mh-result__name { font-family: var(--font-display, 'Bebas Neue', sans-serif); font-size: 1.3rem; letter-spacing: .03em; color: var(--white, #FFFFFF); text-decoration: none; line-height: 1.15; }
.mh-result__name:hover { color: var(--gold, #FFFFFF); }
.mh-result__meta { color: var(--text-muted, rgba(var(--fg-rgb, 255,255,255),.55)); font-size: .88rem; }
.mh-result__actions { display: flex; flex-wrap: wrap; gap: 8px 18px; font-size: .9rem; }
.mh-result__actions a { color: var(--gold, #FFFFFF); }
.mh-bycity { margin-top: 56px; }

/* Marqueurs */
.mh-pin span { display: block; width: 26px; height: 26px; margin: 2px; border-radius: 50% 50% 50% 0; background: #0F5A43; border: 3px solid #fff; transform: rotate(-45deg); box-shadow: 0 3px 8px rgba(0,0,0,.55); }
.mh-pin span::after { content: ''; position: absolute; top: 50%; left: 50%; width: 8px; height: 8px; margin: -4px 0 0 -4px; border-radius: 50%; background: #fff; }
.mh-pin--draft span { background: #9ca3af; }
.mh-pin--me span { background: #22c55e; border-radius: 50%; transform: none; width: 18px; height: 18px; margin: 8px 6px; }
.mh-pin--me span::after { display: none; }
.mh-pin:focus-visible span { outline: 3px solid #B9BEB8; outline-offset: 3px; }

/* Fenêtres contextuelles (fond blanc de Leaflet) */
.mh-popup { min-width: 200px; color: #1f1b24; }
.mh-popup__title { display: block; margin-bottom: 4px; font-size: 1.05rem; color: #111; }
.mh-popup__meta { font-size: .85rem; color: #555; }
.mh-popup .mh-badges li { background: #efece6; border-color: #ddd8cf; color: #0F5A43; }
.mh-popup__actions { display: flex; gap: 14px; margin-top: 10px; font-size: .9rem; }
.mh-popup__actions a { color: #0F5A43; font-weight: 600; }

@media (max-width: 900px) {
  .mh-mapapp__body { grid-template-columns: 1fr; }
  .mh-map { height: 400px; }
  .mh-results { max-height: none; overflow: visible; }
  .mh-minimap { height: 280px; }
}
@media (prefers-reduced-motion: reduce) { .mh-card, .mh-flag span { transition: none; } }

/* ───── Mode Google (recherche en temps réel) ───── */
.mh-mapwrap { position: relative; }
.mh-zone { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 5; box-shadow: 0 4px 16px rgba(0,0,0,.45); }
.mh-mapapp__gnote { min-height: 1.2em; margin: 0 0 8px; color: var(--muted, #b9b2c4); font-size: .88rem; }
.mh-result-group { list-style: none; margin: 14px 0 8px; font-size: .78rem; letter-spacing: .06em; text-transform: uppercase; color: var(--muted, #b9b2c4); }
.mh-result--google { border-style: dashed; }
.mh-result__name--plain { font-weight: 700; color: inherit; }
.mh-gpin { width: 22px; height: 22px; border-radius: 50%; border: 3px solid #fff; box-shadow: 0 3px 8px rgba(0,0,0,.55); background: #4285f4; }
.mh-gpin--mighty { background: #0F5A43; width: 28px; height: 28px; }
.mh-gpin--draft { background: #9ca3af; width: 28px; height: 28px; }
.mh-gpin--google { background: #4285f4; }
.mh-popup__src { margin-top: 8px; font-size: .75rem; color: #777; }

/* ───── Autres lieux (hors secteur recherché) ───── */
.mh-pin--other span { background: #665544; opacity: .75; }
.mh-gpin--other { background: #665544; opacity: .75; width: 20px; height: 20px; }
.mh-result--other { opacity: .88; }

/* ───── Tuiles de résultats cliquables ───── */
.mh-result--click { cursor: pointer; transition: border-color .15s, box-shadow .15s; }
.mh-result--click:hover { border-color: var(--gold, #FFFFFF); }
.mh-result--click.is-active { border-color: var(--gold, #FFFFFF); box-shadow: 0 0 0 1px var(--gold, #FFFFFF), 0 6px 24px rgba(var(--fg-rgb, 255,255,255),.2); }