/* ── Reset & Variables ──────────────── */
* {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

:root {
  --bg: #ffffff;
  --s1: #ffffff;
  --s2: #f7f7f7;
  --s3: #efefef;
  --brd: #efefef;
  --tx: #1a1a1a;
  --tx2: #888888;
  --ac: #1a1a1a;
  --grn: #34d399;
  --red: #f87171;
  --amb: #fbbf24;
  --pur: #c084fc;
  --cyan: #22d3ee;
  --shell-pad: 12px;          /* padding du shell (body) — référence d'alignement */
}

/* ── Layout ────────────────────────── */
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--tx);
  display: flex;
  height: 100vh;
  overflow: hidden;
  padding: 12px;            /* marge externe serrée → carte/liste plus grandes */
}

/* ── Sidebar ───────────────────────── */
#sidebar {
  flex: 1 1 0;          /* moitié gauche (liste) — était width:380px */
  min-width: 0;
  background: var(--s1);
  border: 1px solid var(--brd);
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
}

#side-hdr {
  padding: 16px 24px 16px 24px;
}

#side-title {
  font-size: 25px;
  font-weight: 400;
  letter-spacing: -1.5px;
  color: var(--tx);
  line-height: 1.2;
}

.count { display: none; }

#search-row {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  align-items: stretch;
}

#search {
  flex: 1;
  min-width: 0;
  padding: 10px 14px;
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 12px;
  color: var(--tx);
  font-family: inherit;
  font-size: .82rem;
  outline: none;
}

#search:focus { border-color: var(--tx2); }

#filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 0 14px;
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 12px;
  color: var(--tx);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 150ms ease,
    border-color 150ms ease,
    box-shadow 150ms ease;
}

#filter-btn:hover {
  background: var(--s3);
  border-color: var(--tx2);
}

#filter-btn:active {
  background: var(--s3);
}

#filter-btn svg {
  flex-shrink: 0;
}

#filter-btn.active {
  background: var(--ac);
  color: var(--bg);
  border-color: var(--ac);
}

#filter-btn.has-filters {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--bg);
  font-weight: 600;
}

.filter-count {
  font-weight: 700;
  font-size: .75rem;
}

/* ── Filter Panel ─────────────────── */
#filter-panel {
  width: 0;
  min-width: 0;
  opacity: 0;
  overflow: hidden;
  background: var(--s1);
  border: 1px solid transparent;
  border-radius: 24px;
  display: flex;
  flex-direction: column;
  flex-shrink: 0;
  transition:
    width 350ms cubic-bezier(.4,0,.2,1),
    min-width 350ms cubic-bezier(.4,0,.2,1),
    opacity 250ms ease,
    border-color 250ms ease;
  padding: 0;
}

#filter-panel.open {
  width: 300px;
  min-width: 300px;
  opacity: 1;
  border-color: var(--brd);
  margin-left: 16px;
}

#filter-panel-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 20px 24px 12px;
  flex-shrink: 0;
}

#filter-panel-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: -0.5px;
  color: var(--tx);
  white-space: nowrap;
}

#filter-close {
  width: 28px;
  height: 28px;
  border-radius: 8px;
  border: 1px solid var(--brd);
  background: var(--s2);
  color: var(--tx2);
  font-size: 12px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all 150ms ease;
  flex-shrink: 0;
}

#filter-close:hover {
  background: var(--s3);
  color: var(--tx);
}

#filter-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 8px 24px 16px;
  scrollbar-width: none;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

#filter-panel-body::-webkit-scrollbar {
  display: none;
}

.filter-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.filter-group-title {
  font-size: .88rem;
  font-weight: 600;
  color: var(--tx);
  letter-spacing: -0.3px;
  white-space: nowrap;
}

.filter-group-desc {
  font-size: .72rem;
  color: var(--tx2);
  margin-top: -4px;
  white-space: nowrap;
}

/* ── Accordion sections ───────────── */
.filter-accordion {
  border-top: 1px solid var(--brd);
  margin: 4px -24px;
  padding: 0 24px;
}

.filter-accordion-hdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: calc(100% + 48px);
  margin-left: -24px;
  padding: 12px 24px;
  background: none;
  border: none;
  border-bottom: 1px solid var(--brd);
  cursor: pointer;
  font-family: var(--font);
  font-size: .82rem;
  font-weight: 600;
  color: var(--tx);
  letter-spacing: -0.03em;
}

.accordion-arrow {
  transition: transform 250ms ease;
  color: var(--tx2);
}

.accordion-count {
  font-weight: 400;
  color: var(--tx2);
  font-size: .78rem;
}

/* Icône de section (panneau filtres) — suit le thème. */
.acc-ic {
  display: inline-flex;
  vertical-align: -0.16em;
  margin-right: 8px;
  color: var(--tx2);
}
.filter-accordion-hdr.open .acc-ic { color: var(--tx); }

.filter-accordion-hdr.open
  .accordion-arrow {
  transform: rotate(180deg);
}

.filter-accordion-body {
  max-height: 0;
  overflow: hidden;
  transition: max-height 300ms
    cubic-bezier(.4,0,.2,1),
    opacity 200ms ease;
  opacity: 0;
  display: flex;
  flex-direction: column;
  gap: 20px;
  padding-top: 0;
}

.filter-accordion-hdr.open
  + .filter-accordion-body {
  max-height: 1200px;
  opacity: 1;
  padding-top: 20px;
  padding-bottom: 8px;
}

/* brandPill-style tag */
.filter-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 5px 14px;
  border: 1px solid var(--brd);
  border-radius: 100px;
  background: var(--s1);
  font-size: 0.78rem;
  font-weight: 500;
  color: var(--tx);
  letter-spacing: -0.02em;
  align-self: flex-start;
}

.filter-tag:has(.g-badge) {
  gap: 4px;
  padding-right: 5px;
}

/* Range display (values) */
.range-display {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: .85rem;
  font-weight: 600;
  color: var(--tx);
  letter-spacing: -0.3px;
}

.range-input-wrap {
  display: flex;
  align-items: center;
  gap: 4px;
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 8px;
  padding: 6px 10px;
}

.range-input-wrap input[type="number"] {
  width: 52px;
  border: none;
  background: none;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 600;
  color: var(--tx);
  outline: none;
  text-align: right;
  -moz-appearance: textfield;
}

.range-input-wrap
  input[type="number"]::-webkit-inner-spin-button,
.range-input-wrap
  input[type="number"]::-webkit-outer-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.range-unit {
  font-size: .78rem;
  font-weight: 500;
  color: var(--tx2);
}

.range-sep {
  color: var(--tx2);
  font-weight: 400;
}

/* Dual range slider */
.range-slider {
  position: relative;
  width: 100%;
  height: 36px;
}

.range-track {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 100%;
  height: 4px;
  background: var(--s3);
  border-radius: 2px;
  pointer-events: none;
}

.range-fill {
  position: absolute;
  height: 100%;
  background: var(--ac);
  border-radius: 2px;
}

.range-slider input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.range-slider
  input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ac);
  border: 2px solid var(--s1);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: auto;
  position: relative;
  z-index: 2;
}

.range-slider
  input[type="range"]::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--ac);
  border: 2px solid var(--s1);
  box-shadow: 0 1px 4px rgba(0,0,0,.2);
  cursor: pointer;
  pointer-events: auto;
}

/* ── Sélecteur d'options = CHIPS cliquables (multi-sélection) ──────────
   Avant : des points sur une ligne → ça ressemblait à un slider alors qu'on
   sélectionne des options discrètes. Maintenant : des chips clairs. */
.step-selector {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  padding: 4px 0 2px;
}

.step-track { display: none; } /* plus de fausse barre de slider */

.step-dot {
  display: inline-flex;
  align-items: center;
  width: auto;
  height: auto;
  border-radius: 100px;
  border: 1px solid var(--brd);
  background: var(--s1);
  color: var(--tx2);
  cursor: pointer;
  transition: border-color 150ms ease, background 150ms ease, color 150ms ease;
  padding: 7px 13px;
}

.step-dot:hover { border-color: var(--tx2); }

.step-dot.active {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--bg);
}

.step-label {
  position: static;
  transform: none;
  display: inline-flex;
  align-items: center;
  font-size: .78rem;
  font-weight: 500;
  color: inherit;
  white-space: nowrap;
  pointer-events: none;
}

.step-dot.active .step-label { color: var(--bg); font-weight: 600; }

/* Puces de statut colorées dans les chips */
.opt-dot {
  display: inline-block; width: 8px; height: 8px; border-radius: 50%;
  margin-right: 7px; vertical-align: middle; flex-shrink: 0;
}
.opt-dot.keep { background: var(--grn); }
.opt-dot.drop { background: var(--red); }
.opt-dot.mid { background: var(--amb); }

/* Variante verticale → chips pleine largeur empilés (libellés longs) */
.step-selector.vertical {
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  padding: 4px 0 2px;
}

.step-selector.vertical .step-dot { justify-content: flex-start; }

/* ── Google Badge ────────────────── */
.g-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  background: var(--s2);
  font-size: .62rem;
  font-weight: 400;
  color: var(--tx2);
  letter-spacing: -0.02em;
  vertical-align: middle;
  margin-left: 2px;
}

.g-badge img {
  flex-shrink: 0;
}

/* Badge L'Oréal : juste le wordmark (currentColor), contraste plein. */
.g-badge-loreal {
  color: var(--tx);
  background: var(--s2);
  padding: 3px 9px;
}
.g-badge-loreal svg { display: block; }

.nw-badge {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: 100px;
  background: linear-gradient(
    135deg, #e0e7ff, #ede9fe);
  font-size: .62rem;
  font-weight: 500;
  color: #6366f1;
  letter-spacing: -0.02em;
  vertical-align: middle;
  margin-left: 2px;
}

/* ── Dual Range Sliders ─────────── */
.range-dual {
  position: relative;
  height: 28px;
  margin: 8px 0 4px;
}

.range-dual .range-track {
  position: absolute;
  top: 50%;
  left: 0;
  right: 0;
  height: 4px;
  background: var(--s3);
  border-radius: 2px;
  transform: translateY(-50%);
  pointer-events: none;
}

.range-dual .range-fill {
  position: absolute;
  height: 100%;
  background: var(--ac);
  border-radius: 2px;
}

.range-dual input[type="range"] {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  -webkit-appearance: none;
  appearance: none;
  background: none;
  pointer-events: none;
  margin: 0;
  padding: 0;
}

.range-dual input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tx);
  border: 2px solid var(--s1);
  cursor: pointer;
  pointer-events: all;
  position: relative;
  z-index: 2;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

.range-dual input::-moz-range-thumb {
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: var(--tx);
  border: 2px solid var(--s1);
  cursor: pointer;
  pointer-events: all;
  box-shadow: 0 1px 3px rgba(0,0,0,.2);
}

/* Slider de note : pouce circulaire sobre par défaut (.range-dual), comme les
   autres curseurs — plus de grosse étoile ambrée. */

.range-vals {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: .72rem;
  font-weight: 600;
  color: var(--tx);
}

.range-steps {
  display: flex;
  justify-content: space-between;
  padding: 2px 2px 0;
}

.range-steps span {
  font-size: .62rem;
  font-weight: 600;
  color: var(--tx2);
  transition: color .15s;
  text-align: center;
  min-width: 18px;
}

.range-steps span.active {
  color: var(--tx);
}

/* ── Search Filter ───────────────── */
.search-filter-wrap {
  position: relative;
}

.filter-search-input {
  width: 100%;
  padding: 8px 12px;
  border: 1.5px solid var(--s3);
  border-radius: 8px;
  font-size: .82rem;
  font-family: inherit;
  outline: none;
  transition: border 150ms ease;
  background: none;
  color: var(--tx);
  box-sizing: border-box;
}

.filter-search-input:focus {
  border-color: var(--ac);
}

.filter-autocomplete {
  position: fixed;
  background: var(--s1);
  border: 1px solid var(--s3);
  border-radius: 8px;
  max-height: 180px;
  overflow-y: auto;
  display: none;
  z-index: 9999;
  box-shadow:
    0 4px 12px rgba(0,0,0,.12);
}

.filter-autocomplete.open {
  display: block;
}

.ac-item {
  padding: 8px 12px;
  font-size: .8rem;
  cursor: pointer;
  transition: background 100ms ease;
  border-bottom: 1px solid var(--brd);
}

.ac-item:last-child {
  border-bottom: none;
}

.ac-item:hover {
  background: var(--s2);
}

.ac-item .ac-count {
  color: var(--tx2);
  font-size: .72rem;
  margin-left: 4px;
}

.filter-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.filter-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 10px;
  background: var(--tx);
  color: var(--bg);
  border-radius: 100px;
  font-size: .72rem;
  font-weight: 600;
}

.chip-x {
  cursor: pointer;
  opacity: .7;
  font-size: .8rem;
  line-height: 1;
}

.chip-x:hover {
  opacity: 1;
}

/* ── Filter Hint ─────────────────── */
.filter-hint {
  font-size: .68rem;
  color: var(--tx2);
  font-style: italic;
  margin-top: -4px;
}

/* ── Mag Selector (multi) ────────── */
.mag-selector {
  display: flex;
  gap: 8px;
}

.mag-btn {
  flex: 1;
  padding: 8px 0;
  border: 1.5px solid var(--s3);
  border-radius: 8px;
  background: none;
  font-size: .78rem;
  font-weight: 600;
  color: var(--tx2);
  cursor: pointer;
  transition: all 150ms ease;
  text-align: center;
}

.mag-btn:hover {
  border-color: var(--tx2);
}

.mag-btn.active {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--bg);
}

/* ── Star Selector ────────────────── */
.star-selector {
  display: flex;
  gap: 4px;
}

.star-btn {
  background: none;
  border: none;
  font-size: 1.4rem;
  color: var(--s3);
  cursor: pointer;
  padding: 2px;
  transition: color 120ms ease,
    transform 120ms ease;
  line-height: 1;
}

.star-btn:hover {
  transform: scale(1.15);
}

.star-btn.active {
  color: #f59e0b;
}

/* ── Toggle switches ──────────────── */
.filter-toggles-row {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 4px 0;
}

.filter-toggle {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  width: 100%;
}

.filter-toggle input {
  display: none;
}

.toggle-track {
  position: relative;
  width: 36px;
  height: 20px;
  background: var(--s3);
  border-radius: 10px;
  transition: background 200ms ease;
  flex-shrink: 0;
}

.toggle-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  background: #fff;
  border-radius: 50%;
  transition: transform 200ms ease;
  box-shadow: 0 1px 3px rgba(0,0,0,.15);
}

.filter-toggle input:checked
  + .toggle-track {
  background: var(--ac);
}

.filter-toggle input:checked
  + .toggle-track .toggle-thumb {
  transform: translateX(16px);
}

.toggle-label {
  font-size: .78rem;
  font-weight: 500;
  color: var(--tx);
  letter-spacing: -0.02em;
}

#filter-panel-footer {
  padding: 16px 24px;
  display: flex;
  gap: 8px;
  border-top: 1px solid var(--brd);
  flex-shrink: 0;
}

#filter-reset {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--brd);
  background: var(--s2);
  color: var(--tx);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

#filter-reset:hover {
  background: var(--s3);
}

#filter-apply {
  flex: 1;
  padding: 10px 0;
  border-radius: 10px;
  border: none;
  background: var(--ac);
  color: var(--bg);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
}

#filter-apply:hover {
  opacity: .85;
}

#filter-export-row {
  padding: 0 24px 16px;
  flex-shrink: 0;
}

#filter-export {
  width: 100%;
  padding: 10px 0;
  border-radius: 10px;
  border: 1px solid var(--brd);
  background: var(--s2);
  color: var(--tx);
  font-family: inherit;
  font-size: .8rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
}

#filter-export:hover {
  background: var(--s3);
}

/* ── Export Modal ─────────────────── */
.modal-bg {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.4);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 10000;
}

.modal-bg.open {
  display: flex;
}

.modal-box {
  background: var(--s1);
  border-radius: 16px;
  padding: 28px 32px;
  width: 340px;
  box-shadow:
    0 8px 32px rgba(0,0,0,.15);
  text-align: center;
}

.modal-title {
  font-size: 1.1rem;
  font-weight: 700;
  margin-bottom: 6px;
}

.modal-desc {
  font-size: .82rem;
  color: var(--tx2);
  margin-bottom: 20px;
}

.modal-btns {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-bottom: 16px;
}

.modal-opt {
  padding: 10px 16px;
  border-radius: 10px;
  border: 1.5px solid var(--s3);
  background: none;
  font-family: inherit;
  font-size: .82rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  color: var(--tx);
}

.modal-opt:hover {
  border-color: var(--tx);
}

.modal-opt.primary {
  background: var(--tx);
  border-color: var(--tx);
  color: var(--bg);
  font-weight: 600;
}

.modal-opt.primary:hover {
  opacity: .85;
}

#export-format-btns {
  display: flex;
  gap: 8px;
}

#export-format-btns .modal-opt {
  flex: 1;
}

#export-format-btns .modal-opt.active {
  background: var(--ac);
  border-color: var(--ac);
  color: var(--bg);
  font-weight: 600;
}

.modal-cancel {
  background: none;
  border: none;
  font-family: inherit;
  font-size: .78rem;
  color: var(--tx2);
  cursor: pointer;
  text-decoration: underline;
}

#version-toggle {
  display: flex;
  gap: 6px;
  margin-top: 10px;
}

.version-btn {
  flex: 1;
  padding: 6px 0;
  background: var(--s2);
  border: 1.5px solid var(--brd);
  border-radius: 8px;
  color: var(--tx2);
  font-family: inherit;
  font-size: .72rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.02em;
}

.version-btn:hover {
  border-color: var(--tx2);
}

.version-btn.active {
  background: var(--ac);
  color: #fff;
  border-color: var(--ac);
}

#source-toggle {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  margin-top: 6px;
}

#source-toggle-v2 {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 6px;
  margin-top: 6px;
}

.source-btn {
  flex: 1;
  padding: 8px 0;
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 10px;
  color: var(--tx);
  font-family: inherit;
  font-size: .75rem;
  font-weight: 500;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.02em;
}

.source-btn:hover {
  border-color: var(--tx2);
}

.source-btn.active {
  background: #1a1a1a;
  color: #fff;
  border-color: #1a1a1a;
}

#salon-list {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  padding: 0 16px 16px;
  display: grid;
  grid-template-columns:
    minmax(0, 1fr) minmax(0, 1fr);
  gap: 10px;
  scrollbar-width: none;
  -ms-overflow-style: none;
  align-content: start;
  min-width: 0;
}

#salon-list::-webkit-scrollbar {
  display: none;
}

/* ── Salon Cards (gallery) ─────────── */
.salon-card {
  border: 1px solid var(--brd);
  border-radius: 10px;
  cursor: pointer;
  transition: all .15s ease;
  background: var(--s1);
  display: flex;
  flex-direction: column;
  min-width: 0;
}

.salon-card:hover {
  box-shadow: 0 4px 16px rgba(0,0,0,.06);
  transform: translateY(-1px);
}

.salon-card.active {
  border-color: var(--tx);
  box-shadow: 0 4px 20px rgba(0,0,0,.1);
}

.salon-card-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 90px;
  object-fit: cover;
  display: block;
  flex-shrink: 0;
  border-radius: 10px 10px 0 0;
  background: linear-gradient(
    90deg,
    #e0e0e0 25%,
    #c8c8c8 37%,
    #e0e0e0 63%
  );
  background-size: 400% 100%;
  animation: shimmer 1.4s ease infinite;
}

.salon-card-img.loaded {
  animation: none;
  background: var(--s2);
}

@keyframes shimmer {
  0% { background-position: 100% 50%; }
  100% { background-position: 0 50%; }
}

.salon-card-body {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px 10px 10px;
  min-width: 0;
}

.salon-card-name {
  font-size: .78rem;
  font-weight: 600;
  color: var(--tx);
  letter-spacing: -0.2px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  line-height: 1.3;
}

.salon-card-addr {
  font-size: .68rem;
  color: var(--tx2);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.salon-card-badge {
  display: inline-block;
  padding: 2px 6px;
  font-size: 0.6rem;
  font-weight: 700;
  border-radius: 4px;
  align-self: flex-start;
  letter-spacing: 0.3px;
}

.salon-card-badges {
  display: flex;
  gap: 4px;
  flex-wrap: wrap;
  margin-top: 2px;
}

/* ── Main Panel ────────────────────── */
#main {
  flex: 1 1 0;
  display: flex;          /* volet DROIT : #ph (placeholder) XOR #ct (fiche) */
  min-width: 0;
  overflow: hidden;
  background: transparent;
  border: none;
  margin-left: 16px;
}

#main::-webkit-scrollbar {
  display: none;
}

/* ── Header / Hero ─────────────────── */
.hdr-row {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  margin-bottom: 8px;
}

.hdr-title {
  font-size: 2rem;
  font-weight: 700;
  color: var(--tx);
  letter-spacing: -1px;
  margin: 0;
}

.g-pill {
  display: inline-flex;
  align-items: center;
  padding: 6px 16px;
  border: 1px solid #efefef;
  border-radius: 100px;
  font-size: .85rem;
  color: var(--tx);
  background: #fff;
}

.hdr-addr {
  font-size: 1rem;
  color: var(--tx2);
  margin-bottom: 32px;
}

/* ── L'Oréal Base Card ─────────────── */
.loreal-base-card {
  border: 1px solid #efefef;
  border-radius: 16px;
  padding: 24px;
  background: #fff;
  margin-bottom: 32px;
}

.loreal-base-title {
  font-family: var(--font);
  font-weight: 400;
  font-size: 18px;
  letter-spacing: -0.07em;
  color: var(--tx2);
  margin-bottom: 16px;
}

.loreal-cols {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  gap: 32px 40px;
}

.loreal-col {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.loreal-col-lbl {
  font-family: var(--font);
  font-size: 14px;
  font-weight: 500;
  letter-spacing: -0.05em;
  color: var(--tx);
}

.loreal-col-val {
  font-size: 1.1rem;
  font-weight: 400;
  color: var(--tx);
  max-width: 250px;
  line-height: 1.3;
}

.confidence-badge {
  display: inline-block;
  margin-left: 6px;
  font-size: 0.65rem;
  font-weight: 600;
  padding: 3px 6px;
  border-radius: 4px;
  background: #f3f4f6;
  color: var(--tx2);
  vertical-align: middle;
  text-transform: uppercase;
}

.k-badge {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background-color: #000;
  background-image:
    url('/assets/kerastase-logo.png');
  background-size: 55% auto;
  background-position: center;
  background-repeat: no-repeat;
  margin-left: 6px;
  vertical-align: middle;
  transform: translateY(-1px);
}

/* ── Marquee ───────────────────────── */
.marquee-container {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  position: relative;
}

.marquee-content {
  display: inline-block;
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  max-width: 100%;
  transition: all 0.3s;
}

.marquee-container:hover .marquee-content {
  text-overflow: clip;
  max-width: none;
  animation: marquee 5s linear forwards;
}

@keyframes marquee {
  0% { transform: translateX(0); }
  100% {
    transform:
      translateX(calc(-100% + 200px));
  }
}

/* ── Placeholder & Content ─────────── */
#ph {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
  color: var(--tx2);
  font-size: .9rem;
  flex-direction: column;
  gap: 10px;
  text-align: center;
  padding: 24px;
  /* Volet droit « vide » → panneau carté comme la liste/carte de gauche. */
  background: var(--s1);
  border: 1px solid var(--brd);
  border-radius: 24px;
}
#ph .ph-icon { color: var(--tx2); opacity: .4; }
#ph .ph-sub { font-size: .74rem; opacity: .7; }

#ct { display: none; }

/* ── Skeleton / chargement (CSS pur, thème sombre via var) ───────────
   Remplace l'état vide et les listes périmées par un placeholder animé
   cohérent avec les cartes (gris foncé, coins arrondis). Réutilisé pour
   la liste sidebar, la grille pays et le panneau détail. */
@keyframes ww-shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
@keyframes ww-spin { to { transform: rotate(360deg); } }

.skeleton {
  background: linear-gradient(
    100deg,
    var(--s2) 30%,
    var(--s3) 50%,
    var(--s2) 70%
  );
  background-size: 200% 100%;
  animation: ww-shimmer 1.3s ease-in-out infinite;
  border-radius: 8px;
}
@media (prefers-reduced-motion: reduce) {
  .skeleton { animation: none; }
}

/* Carte salon en chargement (même gabarit que .salon-card). */
.salon-card.skeleton-card {
  border: 1px solid var(--brd);
  border-radius: 10px;
  background: var(--s1);
  overflow: hidden;
  pointer-events: none;
}
.skeleton-card .sk-img {
  width: 100%;
  aspect-ratio: 16 / 10;
  min-height: 90px;
  border-radius: 0;
}
.skeleton-card .sk-body {
  display: flex;
  flex-direction: column;
  gap: 7px;
  padding: 10px;
}
.skeleton-card .sk-line {
  height: 9px;
  border-radius: 5px;
}
.skeleton-card .sk-line.w70 { width: 70%; }
.skeleton-card .sk-line.w45 { width: 45%; }

/* Spinner centré + libellé (état vide / détail / choix pays). */
.ww-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  padding: 48px 24px;
  color: var(--tx2);
  font-size: .82rem;
  text-align: center;
}
.ww-spinner {
  width: 30px;
  height: 30px;
  border: 3px solid var(--brd);
  border-top-color: var(--tx2);
  border-radius: 50%;
  animation: ww-spin .8s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
  .ww-spinner { animation-duration: 2s; }
}

/* Carte pays / territoire en chargement (gabarit .tcard). */
.tcard.skeleton-tcard {
  border: 1px solid var(--brd);
  border-radius: 16px;
  background: var(--s1);
  pointer-events: none;
  min-height: 92px;
}
.tcard.skeleton-tcard.tcard-country { min-height: 210px; }
.skeleton-tcard .sk-line {
  height: 12px;
  border-radius: 6px;
}
.skeleton-tcard .sk-line.tall { height: 22px; }
.skeleton-tcard .sk-line.w60 { width: 60%; }
.skeleton-tcard .sk-line.w40 { width: 40%; }

/* ── Legacy Header ─────────────────── */
.hdr {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 16px;
  flex-wrap: wrap;
}

.hdr h1 {
  font-size: 1.3rem;
  font-weight: 700;
}

/* ── Badges ────────────────────────── */
.badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 100px;
  font-size: .65rem;
  font-weight: 600;
}

.b-ac {
  background: rgba(26,26,26,.08);
  color: var(--ac);
}
.b-grn {
  background: rgba(52,211,153,.12);
  color: var(--grn);
}
.b-red {
  background: rgba(248,113,113,.12);
  color: var(--red);
}
.b-amb {
  background: rgba(251,191,36,.12);
  color: var(--amb);
}
.b-pur {
  background: rgba(192,132,252,.12);
  color: var(--pur);
}
.b-cyan {
  background: rgba(34,211,238,.12);
  color: var(--cyan);
}

/* ── Ground Truth Bar ──────────────── */
.gt-bar {
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: 14px 18px;
  margin-bottom: 18px;
  display: flex;
  gap: 28px;
  flex-wrap: wrap;
}

.gt-item label {
  display: block;
  font-size: .6rem;
  font-weight: 600;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .05em;
  margin-bottom: 3px;
}

.gt-item span { font-size: .82rem; }

/* ── Gallery ───────────────────────── */
.gal-wrapper {
  position: relative;
}

.gal {
  display: flex;
  gap: 10px;
  overflow-x: auto;
  padding-bottom: 10px;
  margin-bottom: 0;
  scrollbar-width: none;
}

.gal::-webkit-scrollbar { display: none; }

.gal img {
  height: 180px;
  min-width: 260px;
  object-fit: cover;
  border-radius: 12px;
  border: 2px solid var(--brd);
  cursor: pointer;
  transition: all .15s;
  flex-shrink: 0;
  position: relative;
  z-index: 2;
}

.gal img:hover {
  border-color: var(--tx2);
  transform: scale(1.02);
}

.gal img.sv {
  border-color: var(--cyan);
}

.gal-item {
  position: relative;
  flex-shrink: 0;
}

.gal-tag {
  position: absolute;
  top: 8px;
  left: 8px;
  padding: 3px 8px;
  border-radius: 6px;
  font-size: 0.6rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.gal-tag.int {
  background: rgba(224,231,255,0.7);
  color: #4338ca;
}

.gal-tag.ext {
  background: rgba(254,243,199,0.7);
  color: #b45309;
}

/* ── Gallery Navigation Arrows ─────── */
.gal-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-60%);
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: rgba(255,255,255,0.92);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid var(--brd);
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 5;
  opacity: 0;
  transition: opacity 180ms ease;
  box-shadow: 0 2px 8px rgba(0,0,0,0.06);
  font-size: 16px;
  color: var(--tx);
  line-height: 1;
}

.gal-wrapper:hover .gal-nav {
  opacity: 1;
}

.gal-nav:hover {
  background: white;
  box-shadow: 0 2px 12px rgba(0,0,0,0.12);
}

.gal-nav-left { left: 8px; }
.gal-nav-right { right: 8px; }

/* ── Street View Grid ──────────────── */
.sv-grid-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  flex-shrink: 0;
}

.sv-grid {
  display: grid;
  gap: 3px;
  width: 160px;
  height: 160px;
  border-radius: 12px;
  overflow: hidden;
  cursor: pointer;
}

.sv-grid-1 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr;
}

.sv-grid-2 {
  grid-template-columns: 1fr;
  grid-template-rows: 1fr 1fr;
}

.sv-grid-3 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.sv-grid-3 img:last-child {
  grid-column: 1 / -1;
}

.sv-grid-4 {
  grid-template-columns: 1fr 1fr;
  grid-template-rows: 1fr 1fr;
}

.sv-grid img {
  width: 100%;
  height: 100%;
  min-width: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  object-fit: cover;
  transition: opacity 0.15s;
}

.sv-grid img:hover {
  opacity: 0.8;
  transform: none !important;
}

.sv-label {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
  font-size: 0.75rem;
  color: var(--tx2);
  text-align: center;
  margin-top: 6px;
  font-weight: 500;
}

.sv-label img {
  height: 14px !important;
  width: auto !important;
  min-width: 0 !important;
  border: none !important;
  border-radius: 0 !important;
  object-fit: contain !important;
}

/* ── Gallery Sections ──────────────── */
.gal-section {
  margin-bottom: 24px;
}

.gal-section:last-child {
  margin-bottom: 0;
}

.gal-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 500;
  letter-spacing: -0.04em;
  color: var(--tx);
  margin-bottom: 12px;
}

/* ── Panels ────────────────────────── */
.panels {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 18px;
}

.panel {
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 14px;
  overflow: hidden;
}

.panel-h {
  padding: 10px 16px;
  background: var(--s3);
  font-size: .75rem;
  font-weight: 600;
  border-bottom: 1px solid var(--brd);
  display: flex;
  align-items: center;
  gap: 6px;
}

.panel-b {
  padding: 16px;
  max-height: 500px;
  overflow-y: auto;
  font-size: .76rem;
  line-height: 1.6;
}

.panel-b pre {
  white-space: pre-wrap;
  word-break: break-word;
  font-family: 'JetBrains Mono', monospace;
  font-size: .7rem;
  line-height: 1.7;
}

.di {
  margin-bottom: 14px;
  border-bottom: 1px solid var(--brd);
  padding-bottom: 10px;
}

.di:last-child { border-bottom: none; }

.di-f {
  font-size: .68rem;
  font-weight: 600;
  color: #555;
  margin-bottom: 3px;
  font-family: 'JetBrains Mono', monospace;
}

.di-t {
  font-size: .74rem;
  color: var(--tx2);
  line-height: 1.5;
}

/* ── JSON Syntax ───────────────────── */
.jk { color: #555; }
.js { color: #16a34a; }
.jn { color: #d97706; }
.jb { color: #7c3aed; }
.jnull { color: var(--tx2); }

/* ── Lightbox ──────────────────────── */
#lb {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.92);
  z-index: 100;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px;
  opacity: 0;
  pointer-events: none;
  transition: opacity 200ms ease-out;
}

#lb.open {
  opacity: 1;
  pointer-events: auto;
}

/* ── Close Button ──────────────────── */
#lb-close {
  position: absolute;
  top: 20px;
  left: 20px;
  z-index: 110;
  width: 40px;
  height: 40px;
  border-radius: 50%;
  border: none;
  background: rgba(255,255,255,0.12);
  color: rgba(255,255,255,0.8);
  font-size: 18px;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}

#lb-close:hover {
  background: rgba(255,255,255,0.25);
  color: #fff;
}

/* ── Inner (3 columns) ────────────── */
#lb-inner {
  display: flex;
  gap: 16px;
  width: 90vw;
  max-height: 85vh;
  align-items: stretch;
  cursor: default;
  transform: scale(0.97);
  transition: transform 200ms ease-out;
}

#lb.open #lb-inner {
  transform: scale(1);
}

/* ── Thumbnails (left, bigger) ─────── */
#lb-thumbs {
  width: 200px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 85vh;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

#lb-thumbs::-webkit-scrollbar {
  display: none;
}

.lb-thumb {
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  opacity: 0.4;
  transition:
    opacity 0.15s,
    border-color 0.15s;
  flex-shrink: 0;
}

.lb-thumb.active {
  border-color: rgba(255,255,255,0.9);
  opacity: 1;
}

.lb-thumb:hover { opacity: 1; }

.lb-thumb img {
  width: 100%;
  height: 130px;
  object-fit: cover;
  display: block;
}

.lb-tag {
  position: absolute;
  top: 4px;
  left: 4px;
  font-size: 0.6rem;
  font-weight: 600;
  padding: 2px 6px;
  border-radius: 4px;
  z-index: 2;
  letter-spacing: 0.02em;
}

.lb-tag.ext {
  background: rgba(6,182,212,0.8);
  color: #fff;
}

.lb-tag.int {
  background: rgba(168,85,247,0.8);
  color: #fff;
}

.lb-thumb {
  position: relative;
}

.lb-cat-label {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 4px 4px;
  font-family: var(--font);
  font-size: 1.1rem;
  font-weight: 500;
  color: rgba(255,255,255,0.95);
  letter-spacing: -0.02em;
  white-space: nowrap;
}

.lb-cat-label:first-child {
  padding-top: 0;
}

/* ── Image Container (center) ──────── */
#lb-img-wrap {
  flex: 1 1 0%;
  min-width: 300px;
  height: 80vh;
  overflow: hidden;
  border-radius: 10px;
  background: #000;
  position: relative;
  cursor: zoom-in;
}

#lb-img-wrap.zoom-active {
  cursor: zoom-out;
}

#lb-img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  transition:
    transform 250ms ease,
    opacity 120ms ease;
  transform-origin: center center;
}

/* Zoom only when toggled */
#lb-img-wrap.zoom-active {
  cursor: zoom-out;
}



/* ── Description (right, narrow) ───── */
#lb-desc {
  width: 260px;
  flex-shrink: 0;
  overflow-y: auto;
  background: rgba(255,255,255,0.06);
  border-radius: 10px;
  padding: 20px;
  color: rgba(255,255,255,0.85);
  font-family: var(--font);
  font-size: 13px;
  line-height: 1.65;
  letter-spacing: -0.02em;
  white-space: pre-wrap;
  transition: opacity 120ms ease;
  scrollbar-width: none;
}

#lb-desc::-webkit-scrollbar {
  display: none;
}

#lb-desc:empty { display: none; }

/* ── Misc ──────────────────────────── */
.ld {
  color: var(--tx2);
  font-size: .82rem;
  padding: 60px;
  text-align: center;
}

.env-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 18px;
}

.env-card {
  background: var(--s2);
  border: 1px solid var(--brd);
  border-radius: 14px;
  padding: 14px;
  text-align: center;
}

.env-card .val {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--ac);
}

.env-card .lbl {
  font-size: .6rem;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .04em;
  margin-top: 4px;
}

/* ── Image Viewer ──────────────────── */
.img-viewer {
  display: flex;
  gap: 12px;
  padding: 16px;
  min-height: 420px;
}

.img-viewer-thumbs {
  width: 180px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
  overflow-y: auto;
  max-height: 520px;
  scrollbar-width: none;
  -ms-overflow-style: none;
}

.img-viewer-thumbs::-webkit-scrollbar {
  display: none;
}

.img-viewer-thumb {
  position: relative;
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  border: 2px solid transparent;
  transition:
    border-color 0.15s,
    opacity 0.15s;
  flex-shrink: 0;
  opacity: 0.5;
}

.img-viewer-thumb.active {
  border-color: #1a1a1a;
  opacity: 1;
}

.img-viewer-thumb:hover {
  opacity: 1;
}

.img-viewer-thumb img {
  width: 100%;
  height: 110px;
  object-fit: cover;
  display: block;
}

.img-viewer-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
}

#iv-main-img {
  width: 100%;
  height: 380px;
  object-fit: cover;
  border-radius: 12px;
  background: #f0f0f0;
  transition: opacity 120ms ease;
}

.img-viewer-desc {
  background: #f9fafb;
  border-radius: 12px;
  padding: 16px 20px;
  border: 1px solid #efefef;
  transition: opacity 120ms ease;
  min-height: 80px;
}

.iv-tag {
  position: absolute;
  top: 6px;
  left: 6px;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 0.55rem;
  font-weight: 600;
  backdrop-filter: blur(6px);
  -webkit-backdrop-filter: blur(6px);
  z-index: 3;
  pointer-events: none;
  letter-spacing: 0.02em;
}

.iv-tag.int {
  background: rgba(224,231,255,0.8);
  color: #4338ca;
}

.iv-tag.ext {
  background: rgba(254,243,199,0.8);
  color: #b45309;
}

.iv-tag.sv {
  background: rgba(204,251,241,0.8);
  color: #0d9488;
}

.iv-cat-badge {
  display: inline-block;
  padding: 4px 10px;
  border-radius: 6px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  margin-bottom: 10px;
}

.iv-desc-text {
  font-size: 0.84rem;
  color: var(--tx);
  line-height: 1.65;
  white-space: pre-wrap;
  font-family: var(--font);
  letter-spacing: -0.02em;
}

/* ── Animations ────────────────────── */
@keyframes fadeSlideIn {
  from {
    opacity: 0;
    transform: translateY(16px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

.section-reveal {
  animation:
    fadeSlideIn 450ms ease-out both;
}

.section-appear {
  /* inert — animation handled by
     .section-reveal wrapper */
}

/* ── Favorites ────────────────────── */

/* Hero star button (top-right banner) */
.hero-fav-btn {
  position: absolute;
  top: 16px;
  right: 16px;
  z-index: 20;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: none;
  background: rgba(0, 0, 0, 0.35);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  color: rgba(255, 255, 255, 0.85);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition:
    background 200ms ease,
    transform 200ms ease;
}

.hero-fav-btn:hover {
  background: rgba(0, 0, 0, 0.5);
  transform: scale(1.1);
}

.hero-fav-btn:active {
  transform: scale(0.95);
}

.hero-fav-btn.active {
  background: rgba(250, 204, 21, 0.25);
}

/* Prefilter link */
#prefilter-row {
  padding: 0 0 8px;
  border-bottom: 1px solid var(--brd);
  margin-bottom: 8px;
}

#prefilter-btn {
  background: none;
  border: none;
  padding: 2px 0;
  font-family: inherit;
  font-size: .7rem;
  font-weight: 500;
  color: var(--tx2);
  cursor: pointer;
  transition: color 150ms ease;
  letter-spacing: -0.01em;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

#prefilter-btn:hover {
  color: var(--tx);
}

/* Curated favorites button */
#curated-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  margin-top: 6px;
  padding: 9px 0;
  background: var(--s2);
  border: 1.5px solid var(--brd);
  border-radius: 10px;
  color: var(--tx);
  font-family: inherit;
  font-size: .78rem;
  font-weight: 600;
  cursor: pointer;
  transition: all 150ms ease;
  letter-spacing: -0.02em;
}

#curated-btn:hover {
  border-color: #f59e0b;
  background: #fffbeb;
}

#curated-btn.active {
  background: #fef3c7;
  border-color: #f59e0b;
  color: #92400e;
}

/* Section headers in curated list */
.curated-section-hdr {
  grid-column: 1 / -1;
  padding: 10px 4px 4px;
  font-size: .72rem;
  font-weight: 700;
  color: var(--tx2);
  text-transform: uppercase;
  letter-spacing: .06em;
  border-bottom: 1px solid var(--brd);
  margin-bottom: 2px;
}

.curated-section-hdr:first-child {
  padding-top: 4px;
}

/* Gold star dot on sidebar cards */
.fav-dot {
  display: none;
  font-size: 10px;
  line-height: 1;
  color: transparent;
  margin-right: 2px;
}

.fav-dot.fav {
  display: inline;
  color: #facc15;
}

/* ── Dark mode (P1.3) — toggle via documentElement[data-theme] ───────── */
[data-theme="dark"] {
  --bg: #0a0a0a;
  --s1: #111111;
  --s2: #1a1a1a;
  --s3: #232323;
  --brd: #262626;
  --tx: #f5f5f5;
  --tx2: #9a9a9a;
  --ac: #f5f5f5;
}

/* ── Territoires : navigation par cases + bandeau historique ────────── */
/* Conteneur scrollable sous la topbar (masqué en vue résultats). */
#territory-home {
  position: fixed; top: 60px; left: 0; right: 0; bottom: 0; z-index: 90;
  display: none; overflow-y: auto; background: var(--bg);
}
#territory-home.open { display: block; }
/* CTA accueil : « Voir les salons près de moi » (géoloc → pays + carte centrée). */
#home-locate {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 28px auto 0; padding: 12px 22px;
  background: var(--tx); color: var(--bg); border: 1px solid var(--tx);
  border-radius: 100px; font: inherit; font-size: .92rem; font-weight: 600;
  cursor: pointer; box-shadow: 0 6px 20px rgba(0, 0, 0, .18);
  transition: opacity .15s ease, transform .12s ease;
}
#home-locate:hover { opacity: .88; transform: translateY(-1px); }
#home-locate:active { transform: translateY(0); }
#home-locate.loading { opacity: .55; pointer-events: none; }
.th-btn {
  display: inline-flex; align-items: center; gap: 6px;
  background: var(--s2); border: 1px solid var(--brd); color: var(--tx);
  border-radius: 9px; padding: 7px 13px; font: inherit; font-size: .82rem;
  cursor: pointer; transition: border-color .15s;
}
.th-btn:hover { border-color: var(--tx2); }
#tb-back svg { opacity: .8; }

/* Grille de cases (pays → régions → sous-régions). */
#terr-search-wrap { max-width: 1100px; margin: 0 auto; padding: 28px 32px 0; }
#terr-search {
  width: 100%; box-sizing: border-box; background: var(--s1);
  border: 1px solid var(--brd); border-radius: 12px; padding: 12px 16px;
  color: var(--tx); font: inherit; font-size: .95rem; outline: none;
  transition: border-color .15s;
}
#terr-search:focus { border-color: var(--tx2); }
#terr-search::placeholder { color: var(--tx2); }
#terr-grid { max-width: 1100px; margin: 0 auto; padding: 24px 32px 64px; }
/* Carte de sélection de région (FR, choroplèthe) — PLEIN ÉCRAN (12px de marge),
   alterne avec #terr-grid. Le bouton « près de moi » + le tag ciseaux (total
   pays) FLOTTENT en haut-centre par-dessus la carte (cf. .region-map-mode). */
#region-map {
  display: none; position: relative; margin: 0; padding: 12px;
}
#region-map-canvas {
  width: 100%; height: calc(100vh - 84px);   /* 60 topbar + 12 haut + 12 bas */
  border-radius: 24px; border: 1px solid var(--brd);
  overflow: hidden; background: var(--s2);
}
/* Bouton + tag total FLOTTANTS par-dessus la carte (haut-centre). Scopé
   .region-map-mode → la grille de cases (autres pays) garde son layout. */
#territory-home.region-map-mode #home-locate {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  margin: 0; z-index: 95;
}
#region-map-total {
  display: none; align-items: center; gap: 7px; width: fit-content;
  background: var(--s1); border: 1px solid var(--brd); border-radius: 100px;
  padding: 7px 16px; font: inherit; font-size: .86rem; font-weight: 600;
  color: var(--tx); box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
#territory-home.region-map-mode #region-map-total {
  position: absolute; top: 78px; left: 50%; transform: translateX(-50%);
  display: inline-flex; z-index: 95; pointer-events: none;
}
#region-map-total svg { flex: none; }
#region-map-label {
  /* Position posée par JS À CÔTÉ du curseur (cf. region-map.js moveLabel) →
     on lit toujours le nom de la région survolée (plus collé en haut au centre,
     caché derrière le bouton). */
  position: absolute; z-index: 5; display: none;
  background: var(--s1); border: 1px solid var(--brd);
  border-radius: 100px; padding: 8px 18px; font-weight: 600; font-size: .92rem;
  color: var(--tx); box-shadow: 0 6px 20px rgba(0, 0, 0, .15);
  pointer-events: none; white-space: nowrap;
}
.tcard-grid {
  display: grid; gap: 14px;
  grid-template-columns: repeat(auto-fill, minmax(230px, 1fr));
}
.tcard-grid-country {
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  max-width: 720px; margin: 6vh auto 0;
}
.tcard {
  display: flex; flex-direction: column; gap: 10px; text-align: left;
  background: var(--s1); border: 1px solid var(--brd); border-radius: 16px;
  padding: 18px 20px; cursor: pointer; font: inherit; color: var(--tx);
  transition: border-color .15s, transform .15s, background .15s;
}
.tcard:hover {
  border-color: var(--tx2); transform: translateY(-2px); background: var(--s2);
}
.tcard:active { transform: translateY(0); }
.tcard-name {
  font-size: 1.05rem; font-weight: 600; letter-spacing: -0.01em; line-height: 1.25;
}
.tcard-country {
  padding: 30px 24px; gap: 10px;
  align-items: center; text-align: center;
}
.tcard-country .tcard-name { font-size: 1.5rem; }
.tcard-country .tcard-count { font-size: .95rem; }
/* Silhouette du pays — centrée au-dessus du nom, suit --tx (currentColor :
   sombre en clair, claire en sombre). Source mapsicon (MIT), cf. shapes.js. */
.tcard-shape {
  width: 96px; height: 96px; color: var(--tx);
  display: flex; align-items: center; justify-content: center;
  margin-bottom: 2px; transition: transform .15s;
}
.tcard-shape svg { width: 100%; height: 100%; display: block; }
.tcard-country:hover .tcard-shape { transform: scale(1.05); }
.tcard-meta, .tcard-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
}
.tcard-row { justify-content: space-between; }
.tcard-count { font-size: .86rem; color: var(--tx2); font-weight: 500; }
.tcard-sub { font-size: .78rem; color: var(--tx2); opacity: .8; }
.tcard-code {
  font-size: .78rem; font-weight: 700; color: var(--tx2); background: var(--s3);
  border: 1px solid var(--brd); border-radius: 7px; padding: 2px 8px;
}
.tcard-empty { color: var(--tx2); padding: 40px; text-align: center; }
/* Compte pays en cours de chargement (cold start) : discret + pulsation. */
.tcard-count-loading { opacity: .5; animation: ww-pulse 1.2s ease-in-out infinite; }
@keyframes ww-pulse { 50% { opacity: .25; } }
@media (prefers-reduced-motion: reduce) {
  .tcard-count-loading { animation: none; }
}

/* Bandeau du territoire sélectionné (historique des runs) */
#territory-bar {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 12px 20px; border-bottom: 1px solid var(--brd);
  background: var(--s1); flex-shrink: 0;
}
#tb-back {
  display: inline-flex; align-items: center; gap: 6px; background: var(--s2);
  border: 1px solid var(--brd); color: var(--tx); border-radius: 9px;
  padding: 7px 12px; font: inherit; font-size: .82rem; cursor: pointer;
  transition: border-color .15s;
}
#tb-back:hover { border-color: var(--tx2); }
/* Bouton retour = flèche seule (desktop + mobile). Le label (#tb-back-label,
   « Monde »/territoire) reste dans le DOM — territories.js l'écrit — mais masqué. */
#tb-back-label { display: none; }
#tb-crumb { font-size: .95rem; font-weight: 600; color: var(--tx); }
#tb-crumb .sep { color: var(--tx2); opacity: .5; margin: 0 2px; font-weight: 400; }
.terr-code-inline {
  font-size: .7rem; font-weight: 700; color: var(--tx2); background: var(--s3);
  border: 1px solid var(--brd); border-radius: 6px; padding: 1px 6px;
  margin-left: 6px; vertical-align: middle; line-height: 1.4;
  display: inline-block;
}
#tb-count { font-size: .78rem; color: var(--tx2); }
.hist-empty {
  color: var(--tx2); font-size: .9rem; padding: 40px 0; text-align: center;
}

/* ── Topbar persistante (chrome unique : monde → pays → … → résultats) ── */
/* Décale le contenu sous la barre fixe (60 px) + 12 px d'air (marge header). */
body { padding-top: 72px; }
#topbar {
  position: fixed; top: 0; left: 0; right: 0; height: 60px; z-index: 95;
  display: flex; align-items: center; gap: 14px; padding: 0 28px;
  background: var(--bg); border-bottom: 1px solid var(--brd);
}
#tb-logos {
  display: flex; align-items: center; gap: 14px; flex-shrink: 0;
  cursor: pointer; border-radius: 8px; padding: 4px 6px; margin-left: -6px;
  transition: opacity .18s ease, background .18s ease;
}
#tb-logos:hover { opacity: .65; }
#tb-logos:focus-visible { outline: 2px solid var(--tx2); outline-offset: 2px; }
#tb-logos .logo-wgs { height: 22px; width: auto; display: block; }
#tb-logos .logo-loreal {
  height: 11px; width: auto; display: block; color: var(--tx); opacity: .85;
}
#tb-logos .logo-sep {
  width: 1px; height: 16px; background: var(--brd); display: block;
}
#tb-back { flex-shrink: 0; }
#tb-crumb-wrap {
  display: flex; flex-direction: column; gap: 1px; min-width: 0;
  line-height: 1.2;
}
#tb-crumb {
  font-size: .98rem; font-weight: 600; color: var(--tx); line-height: 1.5;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
#tb-crumb .sep { color: var(--tx2); opacity: .5; margin: 0 4px; font-weight: 400; }
#tb-sub {
  font-size: .74rem; color: var(--tx2);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* R5 : rangée de chips territoires (régions / départements / limitrophes) dans
   la topbar résultats — scroll horizontal, masquée hors mode résultats. */
#tb-chips {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 6px;
  overflow-x: auto; overflow-y: hidden; scrollbar-width: thin; padding: 4px 2px;
}
#tb-chips::-webkit-scrollbar { height: 5px; }
#tb-chips::-webkit-scrollbar-thumb { background: var(--brd); border-radius: 3px; }
body:not(.results) #tb-chips { display: none; }
.tb-chip {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  max-width: 190px; padding: 5px 11px; border-radius: 100px;
  border: 1px solid var(--brd); background: var(--s1); color: var(--tx);
  font-size: .8rem; font-weight: 500; cursor: pointer; white-space: nowrap;
  transition: border-color .15s ease, opacity .15s ease;
}
.tb-chip:hover { border-color: var(--tx2); }
.tb-chip.active { background: var(--tx); color: var(--bg); border-color: var(--tx); }
.tb-chip-name { overflow: hidden; text-overflow: ellipsis; }
.tb-chip-n { font-size: .7rem; font-weight: 600; opacity: .55; }
.tb-chip.active .tb-chip-n { opacity: .8; }
.tb-chip-all { font-weight: 600; border-style: dashed; }
#tb-right {
  margin-left: auto; display: flex; align-items: center; gap: 10px;
  flex-shrink: 0;
}
#tb-runs {
  display: flex; gap: 8px; flex-wrap: nowrap; align-items: center;
  margin-left: 0; overflow: hidden;
}

/* ── Carte des salons — intégrée au panneau résultats (#main-map) ─────── */
#main { position: relative; }
#map-btn {
  display: none;                       /* desktop : carte toujours visible */
  align-items: center; gap: 6px; flex-shrink: 0;
  background: var(--s2); border: 1px solid var(--brd); color: var(--tx);
  border-radius: 10px; padding: 0 12px; height: 38px; font: inherit;
  font-size: .85rem; font-weight: 500; cursor: pointer;
  transition: border-color .15s, background .15s;
}
#map-btn:hover { border-color: var(--tx2); background: var(--s3); }

/* ── Layout 2 volets : GAUCHE = liste XOR carte · DROITE = fiche XOR invite ──
   #sidebar (liste) et #main-map (carte) partagent le MÊME volet gauche, alterné
   par body.show-map / .show-list (bascule pilule topbar). #main (droite) montre
   le placeholder #ph, ou la fiche #ct quand un salon est ouvert (#ph passe en
   display:none INLINE → signal lu par :has()). La sélection d'un salon ne touche
   QUE le volet droit ; la bascule carte/liste ne touche QUE le volet gauche. */
#main-map {
  position: relative; flex: 1 1 0; min-width: 0; z-index: 1; overflow: hidden;
  border-radius: 24px; border: 1px solid var(--brd); background: var(--s2);
}
#ct { display: none; }
body:has(#ph[style*="none"]) #ct {
  display: block; flex: 1 1 0; min-width: 0; overflow-y: auto;
  padding: 8px 2px 40px;     /* gutter : ne pas coller le contenu aux bords */
}
#main-map-close { display: none; }     /* mobile uniquement (carte plein écran) */

/* Recherche d'accueil retirée ; la recherche carte (#main-map-search) est
   RÉACTIVÉE en recherche SALONS (input local nom/ville/rue/CP, zoom fitBounds). */
#terr-search-wrap { display: none !important; }

/* Bascule des volets GAUCHE — desktop/tablette (≥641px). Le volet droit (#main)
   reste toujours affiché ; seul le gauche alterne (jamais carte + liste). */
@media (min-width: 641px) {
  #main-map { display: none; }                 /* défaut = liste (show-list) */
  body.show-map #sidebar { display: none; }
  body.show-map #main-map { display: block; }
}

#main-map-canvas { width: 100%; height: 100%; }
#main-map-search {
  position: absolute; top: 14px; left: 14px; z-index: 13; width: min(300px, 40%);
}
#main-map-search input {
  width: 100%; box-sizing: border-box; padding: 9px 14px;
  background: var(--s1); border: 1px solid var(--brd); border-radius: 12px;
  color: var(--tx); font: inherit; font-size: .82rem; outline: none;
  box-shadow: 0 4px 16px rgba(0, 0, 0, .14);
}
#main-map-search input:focus { border-color: var(--tx2); }
/* Pill ciseaux : TOTAL du périmètre, centré en haut au-dessus de la carte. */
#main-map-count {
  position: absolute; top: 14px; left: 50%; transform: translateX(-50%);
  z-index: 7; display: inline-flex; align-items: center; gap: 6px;
  background: var(--s1); color: var(--tx); border: 1px solid var(--brd);
  border-radius: 100px; padding: 6px 14px; font-size: .78rem; font-weight: 600;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
}
#main-map-count svg { flex: none; }
/* expand/close/dock = enfants flex de #main-map-controls (taille/style gérés là). */

/* Salon ouvert (#ph passe en display:none INLINE) → carte en VIGNETTE en bas
   à droite (réouvrable via le bouton agrandir), la fiche (#ct) prend la place. */
/* (ancien popover vignette retiré — la carte reste en flex ½ quand un salon
   est ouvert, modèle Airbnb 2 régions.) */
/* Recherche + compteur de la carte : visibles en permanence (modèle 2 régions,
   la carte reste ½ même fiche ouverte → recherche/switch FR⇄DE toujours dispo). */

/* Markers : pilule nommée (zoom ≥ 13) / pastille (dézoomé). Couleurs fixes
   (sur les tuiles Maps claires), indépendantes du thème de l'app. */
.map-pill {
  display: inline-flex; align-items: center; max-width: 180px;
  padding: 4px 10px; border-radius: 100px; border: 1.5px solid #fff;
  font-family: 'Outfit', sans-serif; font-size: 12px; font-weight: 600;
  white-space: nowrap; overflow: hidden;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .28); cursor: pointer;
  transition: transform .12s ease;
}
.map-pill-txt {
  display: inline-block; max-width: 100%; overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap;
}
.map-pill:hover { transform: scale(1.06); }
/* R8 : nom trop long → défilement marquee droite→gauche au survol. Au repos (et
   en prefers-reduced-motion) la pilule garde l'ellipsis statique. JS pose la
   classe .marquee + la var --mq (px à parcourir) sur les seules pilules qui
   débordent, et l'animation-duration inline (proportionnelle au débordement). */
.map-pill.marquee:hover .map-pill-txt {
  max-width: none; overflow: visible; text-overflow: clip;
  animation: poi-marquee 5s ease-in-out infinite;
}
@keyframes poi-marquee {
  0%, 12% { transform: translateX(0); }
  50% { transform: translateX(calc(-1 * var(--mq, 0px))); }
  88%, 100% { transform: translateX(0); }
}
@media (prefers-reduced-motion: reduce) {
  .map-pill.marquee:hover .map-pill-txt {
    animation: none; max-width: 100%; overflow: hidden; text-overflow: ellipsis;
  }
}
/* Couleurs EXPLICITES : OR = compte L'Oréal (client) · VERT = nouveau prospect
   (non-client) · ROUGE = éliminé (rare). */
.map-pill.client { background: #c9881f; color: #fff; }
.map-pill.prospect { background: #1f8f5f; color: #fff; }
.map-pill.elimine { background: #c2453b; color: #fff; }
.map-dot {
  width: 12px; height: 12px; border-radius: 50%; border: 2px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .35); cursor: pointer;
}
.map-dot.client {
  background: #c9881f;
  box-shadow: 0 0 0 1px rgba(150, 100, 10, .55), 0 1px 3px rgba(0, 0, 0, .35);
}
.map-dot.prospect { background: #1f8f5f; }
.map-dot.elimine { background: #c2453b; }
/* Marqueur SÉLECTIONNÉ : halo blanc qui tourne autour (anneau lumineux, façon
   chargement) + liseré blanc. Posé par map.js (classe .selected). */
.map-dot.selected, .map-pill.selected { position: relative; z-index: 50; }
.map-dot.selected {
  box-shadow: 0 0 0 3px #fff, 0 0 0 7px rgba(31, 143, 95, .40);
}
.map-dot.selected::after, .map-pill.selected::after {
  content: ""; position: absolute; inset: -7px; border-radius: inherit;
  padding: 3px; pointer-events: none;
  background: conic-gradient(from 0deg, transparent 0 55%, #fff 78%,
    transparent 100%);
  -webkit-mask: linear-gradient(#000 0 0) content-box,
    linear-gradient(#000 0 0);
  -webkit-mask-composite: xor; mask-composite: exclude;
  animation: sel-spin 1.1s linear infinite;
}
@keyframes sel-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .map-dot.selected::after, .map-pill.selected::after {
    animation: none; background: none;
  }
}
/* Bulle de cluster (dézoom) : compteur, taille selon le nombre de salons. */
.map-cluster {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; color: #fff; font-family: 'Outfit', sans-serif;
  font-weight: 700; border: 2px solid #fff; cursor: pointer;
  background: #2b6cb0; box-shadow: 0 2px 10px rgba(0, 0, 0, .3);
  transition: filter .12s ease;
}
.map-cluster:hover { filter: brightness(1.08); }
.map-cluster.sm { width: 30px; height: 30px; font-size: 12px; }
.map-cluster.md { width: 40px; height: 40px; font-size: 13px; }
.map-cluster.lg { width: 50px; height: 50px; font-size: 14px; }
/* Marqueur « vous êtes ici » (géolocalisation). */
.map-user-dot {
  width: 16px; height: 16px; border-radius: 50%; background: #2563eb;
  border: 3px solid #fff; box-shadow: 0 0 0 4px rgba(37, 99, 235, .25);
}

/* ── Chrome de la carte intégrée ─────────────────────────────────────── */
/* Pile de contrôles (haut-droite) : me localiser, suivi, ancrer, agrandir, fermer. */
#main-map-controls {
  position: absolute; top: 14px; right: 14px; z-index: 7;
  display: flex; flex-direction: column; gap: 8px; align-items: flex-end;
}
#main-map-controls > button {
  width: 38px; height: 38px; border-radius: 10px; cursor: pointer; flex: none;
  background: var(--s1); border: 1px solid var(--brd); color: var(--tx);
  display: none; align-items: center; justify-content: center;
  box-shadow: 0 2px 8px rgba(0, 0, 0, .15); transition: background .15s;
}
#main-map-controls > button:hover { background: var(--s2); }
/* Me localiser : TOUJOURS visible (grande, vignette popover, ancrée). */
#main-map-locate { display: inline-flex !important; }
/* Chips segments (carte) — collés SOUS la barre de recherche (top 14 + ~38). */
#main-map-filters {
  position: absolute; top: 60px; left: 14px; z-index: 6;
  display: flex; gap: 8px; flex-wrap: wrap; max-width: min(460px, 78%);
}
.qf-chip {
  background: var(--s1); border: 1px solid var(--brd); color: var(--tx);
  border-radius: 100px; padding: 6px 14px; font: inherit; font-size: .78rem;
  font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  white-space: nowrap;
  transition: border-color .15s, background .15s, color .15s;
}
.qf-chip:hover { border-color: var(--tx2); }
.qf-chip.loading { opacity: .55; cursor: wait; pointer-events: none; }
.qf-chip.loading::after {
  content: ""; width: 11px; height: 11px; margin-left: 7px; display: inline-block;
  vertical-align: -1px; border: 2px solid currentColor; border-right-color: transparent;
  border-radius: 50%; animation: qf-spin .7s linear infinite;
}
@keyframes qf-spin { to { transform: rotate(360deg); } }
.qf-chip.active {
  background: var(--tx); color: var(--bg); border-color: var(--tx);
}
/* Chips SEGMENTS (carte) — display-only (clic = no-op tant que `segment` n'est
   pas en DB). Même look que les chips filtres, sans état actif câblé. */
.seg-chip {
  background: var(--s1); border: 1px solid var(--brd); color: var(--tx);
  border-radius: 100px; padding: 6px 14px; font: inherit; font-size: .78rem;
  font-weight: 600; cursor: pointer; box-shadow: 0 2px 8px rgba(0, 0, 0, .12);
  white-space: nowrap; transition: border-color .15s, background .15s;
}
.seg-chip:hover { border-color: var(--tx2); }
/* Petit « i » d'info à côté d'un tag : popup au survol / focus clavier. */
.info-tip {
  display: inline-flex; align-items: center; justify-content: center;
  width: 15px; height: 15px; margin-left: 4px; border-radius: 50%;
  font: 700 italic 10px/1 Georgia, "Times New Roman", serif;
  background: rgba(0, 0, 0, .14); color: inherit; cursor: help;
  position: relative; flex: none; user-select: none;
}
.info-tip .info-pop {
  display: none; position: absolute; left: 50%; top: 150%;
  transform: translateX(-50%); z-index: 40; width: max-content; max-width: 230px;
  padding: 8px 12px; background: var(--tx); color: var(--bg);
  border-radius: 8px; font: 400 normal .72rem/1.45 inherit; text-align: left;
  white-space: normal; box-shadow: 0 6px 20px rgba(0, 0, 0, .28);
  pointer-events: none;
}
.info-tip:hover .info-pop, .info-tip:focus .info-pop { display: block; }
/* Barre de filtres rapides dans le SIDE PANEL (sous la recherche) — les chips
   WRAPPENT (tous visibles, pas de scroll horizontal qui les coupe). */
#quick-filters {
  display: flex; gap: 8px; padding: 10px 24px 2px; flex-wrap: wrap;
  flex-shrink: 0;
}
/* (Docking/vignette/slider/bouton-masquer/pilule « Carte » + @property gradient
   RETIRÉS avec la refonte Airbnb 2 régions — la carte est désormais en flex ½,
   cf. plus haut. Filtres rapides de la carte : visibles en permanence.) */

/* ═══════════════════ RESPONSIVE (tablette & mobile) ═══════════════════
   Desktop (>1024) = layout d'origine : 3 colonnes (sidebar | filtres | détail),
   body height:100vh + overflow:hidden. À chaque palier, le scroll vertical est
   confié à un enfant (#salon-list / #main / #filter-panel-body), JAMAIS au body
   (sinon, body figé, le pane du bas deviendrait inatteignable). */

/* ── Tablette (≤1024) : filtres en overlay, paddings resserrés ───────── */
@media (max-width: 1024px) {
  :root { --shell-pad: 12px; }
  body { padding: 12px; padding-top: 72px; }
  #topbar { padding: 0 16px; }
  #sidebar { flex: 1 1 0; min-width: 0; }
  /* Le panneau filtres ne prend plus une 3ᵉ colonne (trop étroit) : il glisse
     en overlay plein-hauteur au-dessus du détail. */
  #filter-panel {
    position: fixed; top: 0; right: 0; height: 100dvh;
    border-radius: 0; z-index: 120; margin-left: 0;
  }
  #filter-panel.open {
    width: min(380px, 92vw); min-width: min(380px, 92vw); margin-left: 0;
    box-shadow: -10px 0 36px rgba(0, 0, 0, .18);
  }
}

/* Bouton « ← Liste » mobile (single-pane) : masqué partout sauf en mobile
   quand une fiche est ouverte (cf. media query plus bas). */
#mobile-back {
  display: none; position: fixed; top: 60px; left: 8px; z-index: 60;
  align-items: center; gap: 6px; padding: 7px 13px;
  background: var(--s1); color: var(--tx); font: inherit; font-size: .82rem;
  font-weight: 600; border: 1px solid var(--brd); border-radius: 999px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .14); cursor: pointer;
}

/* ── Mobile (≤640) : single-pane (liste ⇆ fiche), topbar condensée ───── */
@media (max-width: 640px) {
  body {
    flex-direction: column; gap: 8px;
    padding: 8px; padding-top: 68px;
  }
  #topbar { height: 52px; padding: 0 12px; gap: 8px; }
  #tb-logos { display: none; }           /* gagne de la place sur l'écran étroit */
  #territory-home { top: 52px; }
  /* Single-pane : la liste prend tout l'écran ; ouvrir un salon (→ #ph passe
     en display:none INLINE via le JS) bascule sur la fiche plein écran + le
     bouton « ← Liste ». `:has()` lit ce signal — aucun toggle JS de classe. */
  #sidebar { width: 100%; flex: 1 1 auto; min-height: 0; margin-left: 0; }
  #main {
    width: 100%; flex: 1 1 auto; min-height: 0; margin-left: 0; display: none;
  }
  body:has(#ph[style*="none"]) #sidebar { display: none; }
  body:has(#ph[style*="none"]) #main { display: block; }
  body:has(#ph[style*="none"]) #mobile-back { display: inline-flex; }
  #filter-panel.open { width: 100vw; min-width: 100vw; }
  /* Grilles fluides : cartes salon, grille territoires et grilles de fiche. */
  #salon-list { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  #terr-grid { padding: 16px 12px 48px; }
  #region-map { padding: 8px; }
  #region-map-canvas { height: 64vh; }
  #terr-search-wrap { padding: 16px 12px 0; }
  .env-grid { grid-template-columns: repeat(2, 1fr); }
  /* Fiche : gutter horizontal (les titres de section 1.5rem n'ont pas de padding
     propre → collaient au bord) + colonnes d'analyse resserrées. */
  #ct { padding: 0 6px; }
  .loreal-cols { gap: 22px 18px; }
  /* Prix & Employés : colonnes L'Oréal | estimation EMPILÉES (l'une sous
     l'autre) au lieu de côte à côte — gain de place en étroit. */
  .lr-compare { flex-direction: column; }
  .lr-chevron { transform: rotate(90deg); align-self: center; }
  /* Filtres rapides du side panel : un peu plus serrés en mobile. */
  #quick-filters { padding: 8px 12px 2px; }
  /* Mobile single-pane : pas de carte intégrée ; le bouton « Carte » l'ouvre
     en plein écran. */
  #map-btn { display: inline-flex; }
  #main-map { display: none; }
  #main-map.fullscreen {
    display: block; position: fixed; inset: 8px; z-index: 260;
    width: auto; height: auto; border-radius: 16px;
  }
  #main-map.fullscreen #main-map-close { display: inline-flex; }
  /* #main-map est désormais un frère de #main (volet plein), pas son enfant :
     en plein écran mobile il se pose en position:fixed et couvre tout, aucune
     règle sur #main n'est nécessaire. */
}

/* ── Bascule Carte / Liste (topbar) : volet GAUCHE, visible en résultats ── */
#pane-toggle { display: none; }
body.results #pane-toggle {
  display: inline-flex; align-items: center; gap: 1px;
  height: 30px; padding: 2px; box-sizing: border-box;
  background: var(--s2); border: 1px solid var(--brd); border-radius: 8px;
}
#pane-toggle .pane-opt {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  color: var(--tx2); font: 600 11px/1 "Outfit", system-ui, sans-serif;
  letter-spacing: .02em; padding: 0 10px; height: 24px;
  border-radius: 6px; cursor: pointer; transition: color .15s, background .15s;
}
#pane-toggle .pane-opt:hover { color: var(--tx); }
#pane-toggle .pane-opt.active {
  color: var(--tx); background: var(--bg); box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}
@media (max-width: 640px) {
  #pane-toggle, body.results #pane-toggle { display: none !important; }
}

/* ── Sélecteur de langue (topbar, à gauche du toggle thème) ───────── */
#lang-switch {
  display: inline-flex; align-items: center; gap: 1px;
  height: 30px; padding: 2px; box-sizing: border-box;
  background: var(--s2); border: 1px solid var(--brd);
  border-radius: 8px;
}
#lang-switch .lang-opt {
  appearance: none; -webkit-appearance: none; border: 0; background: transparent;
  color: var(--tx2); font: 600 11px/1 "Outfit", system-ui, sans-serif;
  letter-spacing: .03em; padding: 0 7px; height: 24px;
  border-radius: 6px; cursor: pointer;
  transition: color .15s, background .15s;
}
#lang-switch .lang-opt:hover { color: var(--tx); }
#lang-switch .lang-opt.active {
  color: var(--tx); background: var(--bg);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .10);
}
@media (max-width: 560px) {
  #lang-switch .lang-opt { padding: 0 5px; font-size: 10px; }
}

/* ── Bouton Feedback (bas-gauche, permanent, non obstruant) + popover ───── */
/* Popover feedback (déclenché depuis la fiche, plus de bouton permanent) :
   modale centrée + voile. */
#fb-pop { position: fixed; inset: 0; z-index: 1399; background: rgba(0, 0, 0, .3); }
#fb-pop[hidden] { display: none; }
.fb-card {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%, -50%);
  width: 340px; max-width: calc(100vw - 32px);
  background: var(--s1); border: 1px solid var(--brd); border-radius: 14px;
  box-shadow: 0 16px 50px rgba(0, 0, 0, .32); overflow: hidden;
  font-family: "Outfit", sans-serif; color: var(--tx);
  animation: fb-in .16s cubic-bezier(.32, .72, 0, 1);
}
@keyframes fb-in { from { opacity: 0; } to { opacity: 1; } }
.fb-hd {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid var(--brd);
  font-size: 14px; font-weight: 600;
}
.fb-hd button { background: none; border: 0; color: var(--tx2); font-size: 20px; line-height: 1; cursor: pointer; }
.fb-bd { padding: 12px 14px; display: flex; flex-direction: column; gap: 5px; }
.fb-l { font-size: 11px; font-weight: 600; color: var(--tx2); margin-top: 4px; letter-spacing: .02em; }
.fb-types { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-type {
  border: 1px solid var(--brd); background: var(--s2); color: var(--tx2);
  border-radius: 999px; padding: 4px 10px; font: 500 11.5px "Outfit", sans-serif;
  cursor: pointer; transition: background .12s, color .12s, border-color .12s;
}
.fb-type.active { background: var(--tx); color: var(--bg); border-color: var(--tx); }
#fb-msg, #fb-email {
  width: 100%; box-sizing: border-box; border: 1px solid var(--brd);
  background: var(--s2); color: var(--tx); border-radius: 8px;
  padding: 8px 10px; font: 400 13px "Outfit", sans-serif; resize: vertical;
}
#fb-msg:focus, #fb-email:focus { outline: none; border-color: var(--tx2); }
.fb-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; }
#fb-status { font-size: 11.5px; }
#fb-status.ok { color: #059669; }
#fb-status.err { color: #e11d48; }
.fb-send {
  border: 0; background: var(--tx); color: var(--bg); border-radius: 8px;
  padding: 8px 16px; font: 600 13px "Outfit", sans-serif; cursor: pointer;
}
.fb-send:disabled { opacity: .6; cursor: default; }
.fb-attach { display: flex; flex-direction: column; gap: 8px; margin-top: 2px; }
.fb-attach-btns { display: flex; flex-wrap: wrap; gap: 6px; }
.fb-attach-btn {
  display: inline-flex; align-items: center; gap: 6px;
  border: 1px solid var(--brd); background: var(--s2); color: var(--tx2);
  border-radius: 8px; padding: 6px 10px;
  font: 600 12px "Outfit", sans-serif; cursor: pointer;
  transition: color .12s, border-color .12s;
}
.fb-attach-btn:hover { color: var(--tx); border-color: var(--tx2); }
.fb-attach-btn svg { width: 14px; height: 14px; flex: none; }
.fb-attach-btn[hidden] { display: none; }
.fb-thumb { position: relative; width: max-content; max-width: 100%; }
.fb-thumb[hidden] { display: none; }
.fb-thumb img {
  display: block; max-width: 180px; max-height: 120px;
  border: 1px solid var(--brd); border-radius: 8px;
}
.fb-thumb-x {
  position: absolute; top: -7px; right: -7px; width: 20px; height: 20px;
  display: flex; align-items: center; justify-content: center;
  border: 0; border-radius: 50%; background: var(--tx); color: var(--bg);
  font-size: 14px; line-height: 1; cursor: pointer;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .3);
}
@media (max-width: 560px) {
  .fb-card { left: 12px; right: 12px; top: 50%; transform: translateY(-50%); width: auto; }
}