/* ═══════════════════════════════════════════════════════════════
   EXQ-GEO — SÉLECTEUR GÉOGRAPHIQUE RÉUTILISABLE — V1 (styles)
   Statut : CODED_COMPONENT (pas encore DEPLOYED).
   Scope strict : .exq-geo-scope — aucune fuite globale.

   Tokens : hérite des variables de la page hôte quand elles existent
   (--bg/--surface/--border/--ink/--red…), avec fallback palette
   EXQLAME (crème #EEE9E0, surface #FFF, rouge #C1121F, DM Sans).
   Le CSS Leaflet (chargé paresseusement) reste celui de Leaflet.
═══════════════════════════════════════════════════════════════ */

.exq-geo-scope {
  --xg-bg:        var(--bg, #EEE9E0);
  --xg-surface:   var(--surface, #FFFFFF);
  --xg-border:    var(--border, #D8D3C8);
  --xg-ink:       var(--ink, var(--text, #1A1816));
  --xg-ink2:      var(--ink2, var(--text2, #6B6560));
  --xg-red:       var(--red, #C1121F);
  --xg-red-light: var(--red-light, #FFF0F0);
  --xg-green:     var(--green, #16A34A);
  --xg-amber:     var(--amber, #D97706);
  --xg-rad:       12px;
  --xg-rad-sm:    8px;
  font-family: "DM Sans", sans-serif;
  color: var(--xg-ink);
  font-size: 13.5px;
  line-height: 1.45;
}
.exq-geo-scope, .exq-geo-scope * { box-sizing: border-box; }
.exq-geo-scope :focus-visible { outline: 2px solid var(--xg-red); outline-offset: 2px; }

.exq-geo-scope .xg-sr {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0;
}

/* ── Conteneur ─────────────────────────────────────────────────── */
.exq-geo-scope .xg {
  background: var(--xg-surface);
  border: 1px solid var(--xg-border);
  border-radius: var(--xg-rad);
  padding: 14px;
}
.exq-geo-scope .xg-loading,
.exq-geo-scope .xg-error { padding: 18px 6px; color: var(--xg-ink2); font-size: 13px; }
.exq-geo-scope .xg-error { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }

/* ── Recherche ─────────────────────────────────────────────────── */
.exq-geo-scope .xg-search-wrap { position: relative; }
.exq-geo-scope .xg-search-ico {
  position: absolute; left: 11px; top: 50%; transform: translateY(-50%);
  color: var(--xg-ink2); pointer-events: none;
}
.exq-geo-scope .xg-search-input {
  width: 100%; padding: 10px 12px 10px 33px;
  border: 1px solid var(--xg-border); border-radius: 10px;
  background: var(--xg-surface); color: var(--xg-ink);
  font-family: inherit; font-size: 13.5px;
}
.exq-geo-scope .xg-search-input::placeholder { color: var(--xg-ink2); }
.exq-geo-scope .xg-search-input:focus {
  border-color: var(--xg-red);
  box-shadow: 0 0 0 3px rgba(193, 18, 31, .10);
  outline: none;
}
.exq-geo-scope .xg-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 60;
  background: var(--xg-surface); border: 1px solid var(--xg-border);
  border-radius: 10px; box-shadow: 0 10px 26px rgba(26, 24, 22, .12);
  max-height: 300px; overflow: auto; padding: 4px;
}
.exq-geo-scope .xg-result {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 8px; cursor: pointer;
  background: transparent; color: var(--xg-ink);
  font-family: inherit; font-size: 13px; text-align: left;
}
.exq-geo-scope .xg-result:hover,
.exq-geo-scope .xg-result[aria-selected="true"] { background: var(--xg-bg); }
.exq-geo-scope .xg-result[aria-disabled="true"] { color: var(--xg-ink2); cursor: default; }
.exq-geo-scope .xg-result .xg-flag { font-size: 15px; line-height: 1; }
.exq-geo-scope .xg-result .xg-rname { flex: 1; font-weight: 500; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exq-geo-scope .xg-rtag {
  flex: none; font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--xg-ink2);
  border: 1px solid var(--xg-border); border-radius: 999px; padding: 2px 7px;
}
.exq-geo-scope .xg-noresults { padding: 10px 10px 6px; color: var(--xg-ink2); font-size: 12.5px; }
.exq-geo-scope .xg-noresults-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 4px 6px 8px; }

/* ── Onglets ───────────────────────────────────────────────────── */
.exq-geo-scope .xg-tabs {
  display: inline-flex; gap: 4px; margin: 12px 0 10px;
  background: var(--xg-bg); border-radius: 10px; padding: 3px;
}
.exq-geo-scope .xg-tab {
  border: 1px solid transparent; border-radius: 8px; padding: 7px 14px;
  background: transparent; color: var(--xg-ink2); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.exq-geo-scope .xg-tab[aria-selected="true"] {
  background: var(--xg-surface); color: var(--xg-ink);
  border-color: var(--xg-border);
}

/* ── Cascade administrative ───────────────────────────────────── */
.exq-geo-scope .xg-crumbs {
  display: flex; flex-wrap: wrap; align-items: center; gap: 2px;
  font-size: 12.5px; margin: 2px 0 8px;
}
.exq-geo-scope .xg-crumb {
  border: 0; background: transparent; padding: 3px 4px; cursor: pointer;
  font-family: inherit; font-size: 12.5px; color: var(--xg-ink2); border-radius: 6px;
}
.exq-geo-scope .xg-crumb:hover { color: var(--xg-red); }
.exq-geo-scope .xg-crumb-sep { color: var(--xg-ink2); }
.exq-geo-scope .xg-crumb-here { padding: 3px 4px; font-weight: 600; }
.exq-geo-scope .xg-level-lbl {
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--xg-ink2); margin: 8px 0 6px;
}
.exq-geo-scope .xg-target-all {
  display: block; width: 100%; margin: 6px 0 10px;
  border: 1px solid var(--xg-red); border-radius: 10px; padding: 9px 12px;
  background: transparent; color: var(--xg-red); cursor: pointer;
  font-family: inherit; font-size: 13px; font-weight: 600; text-align: center;
}
.exq-geo-scope .xg-target-all:hover { background: var(--xg-red); color: #fff; }
.exq-geo-scope .xg-list {
  list-style: none; margin: 0; padding: 0;
  border: 1px solid var(--xg-border); border-radius: 10px;
  max-height: 280px; overflow: auto; background: var(--xg-surface);
}
.exq-geo-scope .xg-li { display: flex; align-items: stretch; border-bottom: 1px solid var(--xg-border); }
.exq-geo-scope .xg-li:last-child { border-bottom: 0; }
.exq-geo-scope .xg-row-main {
  flex: 1; display: flex; align-items: center; gap: 8px; min-width: 0;
  border: 0; background: transparent; padding: 9px 12px; cursor: pointer;
  font-family: inherit; font-size: 13px; color: var(--xg-ink); text-align: left;
}
.exq-geo-scope .xg-row-main:hover { background: var(--xg-bg); }
.exq-geo-scope .xg-row-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exq-geo-scope .xg-row-sel {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .4px; color: var(--xg-green); white-space: nowrap;
}
.exq-geo-scope .xg-chevron { margin-left: auto; color: var(--xg-ink2); flex: none; }
.exq-geo-scope .xg-row-target {
  flex: none; border: 0; border-left: 1px solid var(--xg-border);
  background: transparent; color: var(--xg-red); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
  padding: 0 12px; white-space: nowrap;
}
.exq-geo-scope .xg-row-target:hover { background: var(--xg-red-light); }
.exq-geo-scope .xg-hint { font-size: 12px; color: var(--xg-ink2); margin: 8px 0 0; }

/* ── Zone message (aria-live) ─────────────────────────────────── */
.exq-geo-scope .xg-msg { font-size: 12.5px; color: var(--xg-red); margin: 8px 0 0; min-height: 0; }
.exq-geo-scope .xg-msg:empty { margin: 0; }

/* ── Carte ─────────────────────────────────────────────────────── */
.exq-geo-scope .xg-map {
  height: 320px; border: 1px solid var(--xg-border); border-radius: 10px;
  overflow: hidden; background: var(--xg-bg);
}
.exq-geo-scope .xg-map-fallback {
  border: 1px dashed var(--xg-border); border-radius: 10px; padding: 14px;
}
.exq-geo-scope .xg-map-fallback-title { font-weight: 600; font-size: 13px; margin: 0 0 8px; }
.exq-geo-scope .xg-fields {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 10px;
}
.exq-geo-scope .xg-field label {
  display: block; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .5px; color: var(--xg-ink2); margin-bottom: 4px;
}
.exq-geo-scope .xg-field input,
.exq-geo-scope .xg-field select,
.exq-geo-scope .xg-field textarea {
  width: 100%; padding: 8px 10px; border: 1px solid var(--xg-border);
  border-radius: var(--xg-rad-sm); background: var(--xg-surface);
  color: var(--xg-ink); font-family: inherit; font-size: 13px;
}
.exq-geo-scope .xg-field input:focus,
.exq-geo-scope .xg-field select:focus,
.exq-geo-scope .xg-field textarea:focus {
  border-color: var(--xg-red); outline: none;
  box-shadow: 0 0 0 3px rgba(193, 18, 31, .10);
}

/* ── Point en cours (draft) ───────────────────────────────────── */
.exq-geo-scope .xg-draft {
  margin-top: 10px; border: 1px solid var(--xg-border);
  border-radius: var(--xg-rad); padding: 12px; background: var(--xg-bg);
}
.exq-geo-scope .xg-draft-coords { font-size: 12px; color: var(--xg-ink2); margin: 0 0 10px; }
.exq-geo-scope .xg-radius-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 10px 0 8px; }
.exq-geo-scope .xg-radius-row input[type="range"] { flex: 1; min-width: 120px; accent-color: var(--xg-red); }
.exq-geo-scope .xg-radius-num {
  width: 74px; padding: 7px 8px; border: 1px solid var(--xg-border);
  border-radius: var(--xg-rad-sm); background: var(--xg-surface);
  color: var(--xg-ink); font-family: inherit; font-size: 13px;
}
.exq-geo-scope .xg-radius-conv { font-size: 12px; color: var(--xg-ink2); white-space: nowrap; }
.exq-geo-scope .xg-chiprow { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 2px; }
.exq-geo-scope .xg-chipbtn {
  border: 1px solid var(--xg-border); border-radius: 999px; padding: 4px 11px;
  background: var(--xg-surface); color: var(--xg-ink); cursor: pointer;
  font-family: inherit; font-size: 12px; font-weight: 600;
}
.exq-geo-scope .xg-chipbtn:hover { border-color: var(--xg-red); color: var(--xg-red); }
.exq-geo-scope .xg-chipbtn.is-active {
  border-color: var(--xg-red); color: var(--xg-red); background: var(--xg-red-light);
}
.exq-geo-scope .xg-draft-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }

/* ── Boutons génériques ───────────────────────────────────────── */
.exq-geo-scope .xg-btn {
  border: 1px solid var(--xg-border); border-radius: 9px; padding: 9px 13px;
  background: var(--xg-surface); color: var(--xg-ink); cursor: pointer;
  font-family: inherit; font-size: 12.5px; font-weight: 600;
}
.exq-geo-scope .xg-btn:hover { border-color: var(--xg-red); color: var(--xg-red); }
.exq-geo-scope .xg-btn.primary { background: var(--xg-red); border-color: var(--xg-red); color: #fff; }
.exq-geo-scope .xg-btn.primary:hover { background: #A80F1A; border-color: #A80F1A; color: #fff; }
.exq-geo-scope .xg-btn.ghost { background: transparent; border-style: dashed; color: var(--xg-ink2); }
.exq-geo-scope .xg-btn.ghost:hover { border-color: var(--xg-red); color: var(--xg-red); }
.exq-geo-scope .xg-btn[disabled] { opacity: .5; cursor: default; pointer-events: none; }

/* ── Sélections (chips) ───────────────────────────────────────── */
.exq-geo-scope .xg-sels { margin-top: 14px; border-top: 1px solid var(--xg-border); padding-top: 12px; }
.exq-geo-scope .xg-sels-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.exq-geo-scope .xg-sels-title { font-size: 13px; font-weight: 700; }
.exq-geo-scope .xg-counters { font-size: 11.5px; color: var(--xg-ink2); }
.exq-geo-scope .xg-counters .is-max { color: var(--xg-red); font-weight: 700; }
.exq-geo-scope .xg-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.exq-geo-scope .xg-chip {
  display: inline-flex; align-items: center; gap: 8px;
  border: 1px solid var(--xg-border); border-radius: 999px;
  background: var(--xg-surface); padding: 5px 7px 5px 7px; font-size: 12.5px;
  max-width: 100%;
}
.exq-geo-scope .xg-chip-kind {
  flex: none; font-size: 9.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .6px; color: var(--xg-ink2);
  background: var(--xg-bg); border-radius: 999px; padding: 3px 7px;
}
.exq-geo-scope .xg-chip-lbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exq-geo-scope .xg-chip-x {
  flex: none; width: 18px; height: 18px; border: 0; border-radius: 50%;
  background: transparent; color: var(--xg-ink2); cursor: pointer;
  font-size: 14px; line-height: 1; padding: 0; font-family: inherit;
}
.exq-geo-scope .xg-chip-x:hover { color: var(--xg-red); background: var(--xg-red-light); }
.exq-geo-scope .xg-empty-sels { font-size: 12.5px; color: var(--xg-ink2); }

/* ── Aperçu déduplication ─────────────────────────────────────── */
.exq-geo-scope .xg-notes { margin-top: 10px; display: grid; gap: 5px; }
.exq-geo-scope .xg-note {
  font-size: 12px; color: var(--xg-ink2);
  padding-left: 9px; border-left: 2px solid var(--xg-amber);
}
.exq-geo-scope .xg-note.is-overlap { border-left-color: var(--xg-ink2); }
.exq-geo-scope .xg-bounds { font-size: 11px; color: var(--xg-ink2); margin-top: 8px; }

/* ── Mode filter : contexte courant ───────────────────────────── */
.exq-geo-scope .xg-current {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  border: 1px solid var(--xg-border); border-radius: 10px;
  background: var(--xg-bg); padding: 8px 8px 8px 12px; margin-bottom: 10px;
}
.exq-geo-scope .xg-current-lbl { font-size: 13px; font-weight: 600; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exq-geo-scope .xg-myzone-row {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px;
}

/* ── Signalement localité absente ─────────────────────────────── */
.exq-geo-scope .xg-report { margin-top: 14px; border-top: 1px solid var(--xg-border); padding-top: 10px; }
.exq-geo-scope .xg-report summary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: var(--xg-ink2);
  list-style: none; display: inline-flex; align-items: center; gap: 6px;
}
.exq-geo-scope .xg-report summary::-webkit-details-marker { display: none; }
.exq-geo-scope .xg-report summary:hover { color: var(--xg-red); }
.exq-geo-scope .xg-report summary .xg-caret { transition: transform .15s; display: inline-block; }
.exq-geo-scope .xg-report[open] summary .xg-caret { transform: rotate(90deg); }
.exq-geo-scope .xg-report-body { margin-top: 10px; }
.exq-geo-scope .xg-report-intro { font-size: 12px; color: var(--xg-ink2); margin: 0 0 10px; }
.exq-geo-scope .xg-report-grid {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px;
}
.exq-geo-scope .xg-report-grid .xg-field-full { grid-column: 1 / -1; }
.exq-geo-scope .xg-report-actions { display: flex; align-items: center; gap: 10px; margin-top: 10px; flex-wrap: wrap; }
.exq-geo-scope .xg-report-status { font-size: 12px; }
.exq-geo-scope .xg-report-status.is-ok { color: var(--xg-green); }
.exq-geo-scope .xg-report-status.is-err { color: var(--xg-red); }
.exq-geo-scope .xg-report-pos { font-size: 11.5px; color: var(--xg-ink2); }

/* ── Responsive ───────────────────────────────────────────────── */
@media (max-width: 980px) {
  .exq-geo-scope .xg { padding: 12px; width: 100%; }
  .exq-geo-scope .xg-map { height: 260px; }
  .exq-geo-scope .xg-tabs { display: flex; }
  .exq-geo-scope .xg-tab { flex: 1; text-align: center; }
  .exq-geo-scope .xg-list { max-height: 240px; }
  .exq-geo-scope .xg-draft-actions .xg-btn { flex: 1 1 auto; text-align: center; }
}