/* Bootstrap-first: only small custom touches. */
/*
:root {
  --primary: #111827;
  --accent: #20466a;
  --highlight: #10b981;
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --glass-border: rgba(255,255,255,0.1);
}

html, body {
  height: 100dvh;
  margin: 0;
  padding: 0;
  background: linear-gradient(135deg, var(--accent) 0%, var(--primary) 70%);
  color: var(--text);
  font-family: 'helvetica', Arial, sans-serif;
  display: flex;
  flex-direction: column;
}
*/
*{
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}
html{
  background-color: #000000;
}
body{
  min-height: 100vh;
  background: linear-gradient(135deg, #20466a, #000104);
  background-attachment: fixed;
  background-repeat: no-repeat;
  background-size: cover;
}

.hero-bg{
  /* Dark glass hero without touching page background */
  background:
    radial-gradient(1200px 650px at 15% 15%, rgba(32,70,106,.55), transparent 60%),
    radial-gradient(900px 520px at 85% 0%, rgba(16,185,129,.18), transparent 55%),
    linear-gradient(180deg, rgba(17,24,39,.70), rgba(17,24,39,.45));
  border: 1px solid rgba(255,255,255,.10);
  box-shadow: 0 20px 60px rgba(0,0,0,.45);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}


.map-frame{
  height: clamp(460px, 62vh, 760px);
  width: 100%;
  border-radius: 1rem;
}

.pickmap-frame{
  height: 360px;
  width: 100%;
}

@media (max-width: 992px){
  .map-frame{ height: 420px; }
  .pickmap-frame{ height: 320px; }
}

.leaflet-container{
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Arial, sans-serif;
}

.leaflet-marker-custom{
  background: transparent;
  border: none;
}

.circle-card{
  cursor: pointer;
  transition: transform .08s ease, box-shadow .08s ease;
}
.circle-card:hover{
  transform: translateY(-1px);
}

.badge-dot{
  width: .55rem;
  height: .55rem;
  border-radius: 50%;
  display: inline-block;
  margin-right: .5rem;
}

/* =========================================================
   Circles UI Theme – merged into style.css
   Uses LFH palette variables. Does NOT change body/html background.
   ========================================================= */

:root {
  --primary: #111827;
  --accent: #20466a;
  --highlight: #10b981;
  --text: #e5e7eb;
  --text-muted: #9ca3af;
  --glass-border: rgba(255,255,255,0.1);

  --glass-bg: rgba(17,24,39,.52);
  --glass-bg-strong: rgba(17,24,39,.66);
  --shadow-lg: 0 18px 55px rgba(0,0,0,.45);
  --shadow-md: 0 10px 30px rgba(0,0,0,.30);
  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 14px;
  --radius-pill: 999px;
}

/* ---------- Layout helpers ---------- */
.container, .container-fluid { position: relative; }
main { position: relative; }

/* ---------- Navbar (glass) ---------- */
/*
.navbar{
  background: rgba(17,24,39,.35) !important;
  border-bottom: 1px solid var(--glass-border) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}
.navbar .navbar-brand, .navbar .nav-link{
  color: var(--text) !important;
}
.navbar .nav-link:hover{ color: rgba(229,231,235,.92) !important; }
*/

.navbar {
  backdrop-filter: blur(10px);
  background-color: rgba(0, 0, 0, 0.3);
  z-index: 2;
}
.navbar-toggler{
  border: none!important;
}
.nav-link{
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
}
div.container-fluid{
  padding: 0px 20px 0px 20px;
}

/* ---------- Cards become glass panels ---------- */
.card{
  background: linear-gradient(180deg, var(--glass-bg-strong), var(--glass-bg)) !important;
  border: 1px solid var(--glass-border) !important;
  border-radius: var(--radius-lg) !important;
  box-shadow: var(--shadow-lg) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  overflow: hidden;
}
.card::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}
.card{ position: relative; }
.card-header{
  background: transparent !important;
  border-bottom: 1px solid rgba(255,255,255,.08) !important;
}
.card-body{ position: relative; }

/* ---------- Inputs ---------- */
.form-control, .input-group-text{
  background: rgba(0,0,0,.18) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
  color: var(--text) !important;
}
.form-control::placeholder{ color: rgba(229,231,235,.55) !important; }
.form-control:focus{
  border-color: rgba(16,185,129,.45) !important;
  box-shadow: 0 0 0 .20rem rgba(16,185,129,.14) !important;
}
.input-group-text{ border-right: 0 !important; }
.input-group .form-control{ border-left: 0 !important; }

/* ---------- Buttons ---------- */
.btn{ border-radius: var(--radius-md); }
.btn-primary{
  border:0 !important;
  color:#fff !important;
  background: linear-gradient(180deg, rgba(32,70,106,1), rgba(23,85,160,.95)) !important;
  box-shadow: var(--shadow-md);
  transition: transform .15s ease, opacity .15s ease;
}
.btn-primary:hover{ transform: translateY(-1px); }
.btn-primary:active{ transform: translateY(0); opacity:.96; }

.btn-outline-secondary{
  border-color: rgba(255,255,255,.18) !important;
  color: rgba(229,231,235,.85) !important;
  background: rgba(0,0,0,.10) !important;
}
.btn-outline-secondary:hover{
  border-color: rgba(255,255,255,.28) !important;
  background: rgba(255,255,255,.06) !important;
}

/* Filter pills injected by JS */
[data-filters] .btn{
  border-radius: var(--radius-pill) !important;
  padding: .45rem .80rem !important;
  border: 1px solid rgba(255,255,255,.16) !important;
  background: rgba(0,0,0,.14) !important;
  color: rgba(229,231,235,.92) !important;
}
[data-filters] .btn:hover{ background: rgba(255,255,255,.06) !important; }
[data-filters] .btn.active,
[data-filters] .btn[aria-pressed="true"]{
  border-color: rgba(16,185,129,.55) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14) !important;
}

/* ---------- Badges ---------- */
.badge.text-bg-light{
  background: rgba(255,255,255,.08) !important;
  color: rgba(229,231,235,.85) !important;
  border: 1px solid rgba(255,255,255,.12);
}

/* ---------- List item cards inside [data-list] ---------- */
[data-list] .card{
  border-radius: var(--radius-md) !important;
  box-shadow: none !important;
}
[data-list] .card:hover{
  transform: translateY(-1px);
  border-color: rgba(255,255,255,.22) !important;
}

/* Selected item highlight (optional: add .is-selected in JS) */
[data-list] .card.is-selected{
  border-color: rgba(16,185,129,.55) !important;
  box-shadow: 0 0 0 3px rgba(16,185,129,.14) !important;
}

/* ---------- Map sizing ---------- */
.map-frame{
  height: clamp(420px, 62vh, 740px);
  border-radius: var(--radius-lg);
}

/* ---------- Leaflet: controls + popup glass ---------- */
.leaflet-control-zoom a{
  background: rgba(17,24,39,.72) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.14) !important;
}
.leaflet-control-zoom a:hover{ background: rgba(255,255,255,.08) !important; }

.leaflet-control-attribution{
  background: rgba(17,24,39,.55) !important;
  color: rgba(229,231,235,.70) !important;
  border-radius: 10px;
  border: 1px solid rgba(255,255,255,.10);
}

.leaflet-popup-content-wrapper,
.leaflet-popup-tip{
  background: rgba(17,24,39,.88) !important;
  color: var(--text) !important;
  border: 1px solid rgba(255,255,255,.10) !important;
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.leaflet-popup-content{ margin: 12px 14px; }
.leaflet-container a{ color: rgba(16,185,129,.95); }

/* Suggestions dropdown (if present) */
/*
[data-location-suggest]{
  max-height: 280px;
  overflow:auto;
  border-radius: var(--radius-md);
  background: rgba(17,24,39,.92);
  border: 1px solid rgba(255,255,255,.12);
}
[data-location-suggest] .list-group-item{
  background: transparent;
  color: rgba(229,231,235,.90);
  border-color: rgba(255,255,255,.08);
}
[data-location-suggest] .list-group-item:hover{ background: rgba(255,255,255,.06); }
*/

/* Alerts */
.alert{
  border-radius: var(--radius-md);
  border: 1px solid rgba(255,255,255,.12);
  background: rgba(0,0,0,.22);
  color: var(--text);
}

/* =========================================================
   Circles Theme – FORCE DARK overrides
   (keep existing background, just ensure components are dark)
   ========================================================= */

:root{
  color-scheme: dark;
}

/* Force text colors on common Bootstrap elements */
body, .container, .container-fluid, main, section{
  color: var(--text) !important;
}

a, a:visited{ color: rgba(229,231,235,.88); }
a:hover{ color: rgba(229,231,235,1); }

/* Remove Bootstrap "white" surfaces */
.bg-white{ background: transparent !important; }
.text-dark{ color: var(--text) !important; }
.border{ border-color: var(--glass-border) !important; }

/* Glass surfaces: ensure dark */
.card, .modal-content, .dropdown-menu, .offcanvas{
  color: var(--text) !important;
}

/* List group (suggestions) */
/*
.list-group, .list-group-item{
  background: transparent !important;
  color: var(--text) !important;
}
.list-group-item{
  border-color: rgba(255,255,255,.08) !important;
}
.list-group-item:hover{
  background: rgba(255,255,255,.06) !important;
}
*/

/* Table-like small elements */
hr{ border-color: rgba(255,255,255,.10) !important; opacity: 1; }

/* Badges */
.badge{
  color: rgba(229,231,235,.88) !important;
}

/* Modals */
.modal-backdrop.show{ opacity: .65; }

/* Leaflet attribution readability */
.leaflet-control-attribution a{ color: rgba(229,231,235,.80) !important; }

/* Buttons: ensure light text */
.btn, .btn *{ color: inherit; }
.btn-outline-light{
  border-color: rgba(255,255,255,.20) !important;
  color: rgba(229,231,235,.90) !important;
}

.article-header{
  position: relative;
  overflow: hidden;
  border-radius: 1.25rem;
}
.article-header::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}


/* --- Spacing: fixed-top navbar should not overlap hero --- */
:root{
  --nav-offset: 76px; 
}/* adjust if your navbar height differs */


.navbar.fixed-top{
  box-shadow: 0 12px 40px rgba(0,0,0,.35);
}

.navbar.fixed-top + main{
  padding-top: calc(var(--nav-offset) + 1.25rem) !important;
}



/* --- Buttons polish --- */
.btn-outline-light.filter-btn{
  border-color: rgba(255,255,255,.20) !important;
  background: rgba(0,0,0,.12) !important;
  color: rgba(229,231,235,.92) !important;
}
.btn-outline-light.filter-btn:hover{
  background: rgba(255,255,255,.06) !important;
  border-color: rgba(255,255,255,.28) !important;
}


/* ===== Modal: dark glass ===== */
.modal-backdrop.show{
  opacity: .70; /* plus ciné */
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

.modal-content{
  background: linear-gradient(180deg, rgba(17,24,39,.92), rgba(17,24,39,.70)) !important;
  border: 1px solid rgba(255,255,255,.12) !important;
  border-radius: 22px !important;
  box-shadow: 0 24px 80px rgba(0,0,0,.55) !important;
  color: var(--text) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  overflow: hidden;
}

.modal-content::before{
  content:"";
  position:absolute;
  inset:0;
  pointer-events:none;
  border-radius: inherit;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.08);
}

.modal-header{
  border-bottom: 1px solid rgba(255,255,255,.10) !important;
}
.modal-footer{
  border-top: 1px solid rgba(255,255,255,.10) !important;
}

.modal .btn-close{
  filter: invert(1);
  opacity: .85;
}
.modal .btn-close:hover{ opacity: 1; }

/* ===== Map + List same height ===== */
:root{
  --panel-h: clamp(460px, 62vh, 760px); /* même logique que la map */
}

/* map */
.map-frame{
  height: var(--panel-h) !important;
}

/* list card should match map height and scroll inside */
.circles-list-card{
  height: var(--panel-h) !important;
  display: flex;
  flex-direction: column;
}

.circles-list-card .card-header{
  flex: 0 0 auto;
}

.circles-list-card .card-body{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .5rem; /* laisse respirer la scrollbar */
}

/* scrollbar dark (Chrome/Edge) */
.circles-list-card .card-body::-webkit-scrollbar{
  width: 10px;
}
.circles-list-card .card-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.circles-list-card .card-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.20);
}


/* --- Map + list same height --- */
:root{
  /* même logique que ta map */
  --panel-h: clamp(460px, 62vh, 760px);
}

/* carte */
.map-frame{
  height: var(--panel-h) !important;
}

/* liste : même hauteur + scroll interne */
.circles-list-card{
  height: var(--panel-h) !important;
  display: flex;
  flex-direction: column;
}

.circles-list-card .card-header{
  flex: 0 0 auto;
}

.circles-list-card .card-body{
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  padding-right: .5rem; /* espace pour la scrollbar */
}

/* scrollbar dark (Chrome/Edge) */
.circles-list-card .card-body::-webkit-scrollbar{ width: 10px; }
.circles-list-card .card-body::-webkit-scrollbar-thumb{
  background: rgba(255,255,255,.14);
  border-radius: 999px;
  border: 2px solid rgba(0,0,0,.25);
}
.circles-list-card .card-body::-webkit-scrollbar-thumb:hover{
  background: rgba(255,255,255,.20);
}


/* FAQ */
#faqAccordion .accordion-item {
  background: transparent;
  border: 1px solid rgba(255, 255, 255, 0.12);
}

#faqAccordion .accordion-button {
  background: rgba(255, 255, 255, 0.04);
  color: inherit;
  box-shadow: none;
}

#faqAccordion .accordion-button:not(.collapsed) {
  background: rgba(255, 255, 255, 0.08);
  color: inherit;
}

#faqAccordion .accordion-button::after {
  filter: invert(1);
  opacity: 0.8;
}

#faqAccordion .accordion-body {
  background: rgba(255, 255, 255, 0.02);
  color: rgba(255, 255, 255, 0.8);
}

#faqAccordion ul,
#faqAccordion li,
.article-body ul,
.article-body li{
  font-family: "helvetica-neue-lt-pro", sans-serif;
  font-weight: 300;
  font-style: normal;
  color: #ffffff;
}

#faqAccordion li,
.article-body li{
  margin-bottom: 0.5rem;
}

.navbar-nav,
.navbar-nav li,
.navbar-nav .nav-item{
  margin-bottom: 0 !important;
}