/* Charte graphique reprise de kidinov.fr (tokens extraits du code de production). */
:root {
  --color-coral: #ff3131;
  --color-violet: #5941a9;
  --color-magenta: #bf2e84;
  --color-burgundy: #4c0631;
  --color-sand: #fed9bc;
  --color-beige: #ffecde;
  --color-mi-black: #212121;
  --color-text-dark: #2c2c2c;

  --surface-main: #ffffff;
  --surface-soft: #fff4ec;
  --bg-page: #f6f5fa;
  --text-primary: #000000;
  --text-secondary: #6f4f68;
  --border-soft: rgba(89, 65, 169, 0.18);
  --focus-ring: rgba(191, 46, 132, 0.45);

  --radius-sm: 0.5rem;
  --radius-md: 0.75rem;
  --radius-lg: 1rem;
  --radius-xl: 1.5rem;
  --shadow-soft: 0 12px 30px rgba(76, 6, 49, 0.08);
  --shadow-card: 0 8px 18px rgba(89, 65, 169, 0.12);
  --transition-fast: 180ms ease;

  /* Couleurs de marqueurs par type de structure (dérivées de la palette). */
  --t-cmpp: #5941a9;
  --t-camsp: #bf2e84;
  --t-ime: #ff3131;
  --t-mdph: #4c0631;
  --t-cra: #0f9d8f;
  --t-cpts: #d98a2b;
}

* { box-sizing: border-box; }

html, body { height: 100%; }

body {
  margin: 0;
  font-family: "Poppins", system-ui, sans-serif;
  color: var(--text-primary);
  background: var(--bg-page);
  display: flex;
  flex-direction: column;
}

a { color: var(--color-violet); }

/* --- En-tête --- */
.app-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 24px;
  background: var(--surface-main);
  border-bottom: 1px solid var(--border-soft);
  box-shadow: var(--shadow-card);
  z-index: 1200;
}
.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  text-decoration: none;
}
.brand__logo {
  width: 38px; height: 38px;
  border-radius: 10px;
  background: linear-gradient(135deg, var(--color-violet), var(--color-magenta));
  color: #fff;
  display: grid; place-items: center;
  font-weight: 800; font-size: 18px;
}
.brand__title { margin: 0; font-size: 18px; font-weight: 700; color: var(--color-burgundy); }
.brand__subtitle { margin: 0; font-size: 12px; color: var(--text-secondary); }
.app-header__spacer { flex: 1; }
.header-link {
  font-size: 14px; font-weight: 600; text-decoration: none;
  color: var(--color-violet);
  padding: 8px 14px; border-radius: var(--radius-md);
  border: 1px solid var(--border-soft);
  transition: background var(--transition-fast);
}
.header-link:hover { background: var(--surface-soft); }
.header-badge {
  font-size: 12px; font-weight: 700; color: #fff;
  background: var(--color-coral);
  padding: 4px 10px; border-radius: 999px;
}

/* --- Disposition principale --- */
.layout { flex: 1; display: flex; min-height: 0; }

.sidebar {
  width: 340px;
  flex-shrink: 0;
  background: var(--surface-main);
  border-right: 1px solid var(--border-soft);
  padding: 18px;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.map { flex: 1; min-width: 0; }
#map { width: 100%; height: 100%; }

/* --- Cartes de filtres --- */
.card {
  background: var(--surface-main);
  border: 1px solid rgba(89, 65, 169, 0.15);
  border-radius: 16px;
  box-shadow: var(--shadow-card);
  padding: 16px;
}
.card__title {
  margin: 0 0 12px;
  font-size: 13px; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; color: var(--color-burgundy);
  display: flex; align-items: center; gap: 8px;
}

/* Filtres par type */
.type-list { display: flex; flex-direction: column; gap: 6px; }
.type-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: var(--radius-md);
  cursor: pointer; transition: background var(--transition-fast);
  user-select: none;
}
.type-item:hover { background: var(--surface-soft); }
.type-item input { accent-color: var(--color-violet); width: 16px; height: 16px; }
.type-dot { width: 14px; height: 14px; border-radius: 50%; flex-shrink: 0; }
.type-name { font-size: 14px; font-weight: 600; flex: 1; }
.type-count {
  font-size: 12px; font-weight: 700; color: var(--text-secondary);
  background: var(--surface-soft); padding: 2px 8px; border-radius: 999px;
}

/* Champs */
.field { display: flex; flex-direction: column; gap: 6px; }
.field + .field { margin-top: 12px; }
.field label { font-size: 12px; font-weight: 600; color: var(--text-secondary); }
.field input, .field select {
  width: 100%;
  font-family: inherit; font-size: 14px;
  padding: 9px 12px;
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-md);
  background: #fff; color: var(--text-primary);
}
.field input:focus, .field select:focus {
  outline: none;
  border-color: var(--color-magenta);
  box-shadow: 0 0 0 3px var(--focus-ring);
}

.autocomplete { position: relative; }
.autocomplete__list {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0;
  background: #fff; border: 1px solid var(--border-soft);
  border-radius: var(--radius-md); box-shadow: var(--shadow-soft);
  z-index: 1500; max-height: 220px; overflow-y: auto; display: none;
}
.autocomplete__list.open { display: block; }
.autocomplete__item { padding: 8px 12px; font-size: 13px; cursor: pointer; }
.autocomplete__item:hover, .autocomplete__item.active { background: var(--surface-soft); }

.radius-row { display: flex; align-items: center; gap: 10px; }
.radius-row input[type="range"] { flex: 1; accent-color: var(--color-coral); }
.radius-value { font-size: 13px; font-weight: 700; color: var(--color-violet); min-width: 52px; text-align: right; }

/* Boutons */
.btn {
  font-family: inherit; font-size: 14px; font-weight: 600;
  padding: 10px 14px; border-radius: var(--radius-md);
  border: none; cursor: pointer; transition: transform var(--transition-fast), filter var(--transition-fast);
}
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--color-coral); color: #fff; }
.btn--primary:hover { filter: brightness(1.05); }
.btn--ghost { background: var(--surface-soft); color: var(--color-burgundy); border: 1px solid var(--border-soft); }
.btn--block { width: 100%; }
.btn-row { display: flex; gap: 8px; }

/* Compteur de résultats */
.results-summary {
  font-size: 14px; color: var(--text-secondary);
  display: flex; align-items: baseline; gap: 6px;
}
.results-summary strong { font-size: 22px; color: var(--color-violet); font-weight: 800; }

/* Popup Leaflet aux couleurs Kidinov */
.leaflet-popup-content-wrapper { border-radius: var(--radius-md); box-shadow: var(--shadow-soft); }
.popup { font-family: "Poppins", sans-serif; min-width: 210px; }
.popup__type {
  display: inline-block; font-size: 11px; font-weight: 700; color: #fff;
  padding: 2px 8px; border-radius: 999px; margin-bottom: 6px;
}
.popup__name { font-size: 15px; font-weight: 700; color: var(--color-burgundy); margin: 0 0 6px; }
.popup__row { font-size: 13px; color: var(--text-secondary); margin: 2px 0; }
.popup__row a { font-weight: 600; }
.popup__finess { font-size: 11px; color: #999; margin-top: 6px; }

/* Légende sur la carte */
.legend {
  background: rgba(255,255,255,0.95); padding: 10px 12px;
  border-radius: var(--radius-md); box-shadow: var(--shadow-card);
  font-size: 12px; line-height: 1.6;
}
.legend__item { display: flex; align-items: center; gap: 8px; }
.legend__dot { width: 12px; height: 12px; border-radius: 50%; }

/* Bouton mobile pour ouvrir les filtres */
.filters-toggle { display: none; }

@media (max-width: 860px) {
  .layout { flex-direction: column; }
  .sidebar {
    position: fixed; inset: 56px 0 auto 0;
    max-height: calc(100% - 56px);
    width: 100%; z-index: 1400;
    transform: translateY(-120%);
    transition: transform var(--transition-fast);
    box-shadow: var(--shadow-soft);
  }
  .sidebar.open { transform: translateY(0); }
  .map { height: calc(100vh - 56px); }
  .filters-toggle {
    display: inline-flex; align-items: center; gap: 6px;
  }
}