/* ============================================================
   geomarketing.css — Application « Géomarketing »
   Suit les tokens du HUB (thème clair). Trois couleurs de sens :
   bleu = magasin existant, ambre = zone vide, rouge = sous-exploitée.
   Rien d'autre — la carte doit rester lisible d'un coup d'œil.
   ============================================================ */

.gmk { --gmk-mag: #4a7bd0; --gmk-vide: #f0a911; --gmk-sous: #e0526e; padding-top: 4px; }

/* ---------- bandeau ---------- */
.gmk-bar {
  display: flex; align-items: flex-end; gap: 14px; flex-wrap: wrap;
  margin-bottom: 16px; padding-top: 6px;
}
.gmk-titre { font-size: 20px; font-weight: 700; letter-spacing: -.01em; color: var(--text); }
.gmk-sous { font-size: 13px; color: var(--text-3); }
.gmk-bar__actions { margin-left: auto; display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }

/* ---------- filtres ---------- */
.gmk-filtres {
  display: flex; gap: 14px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 10px 14px; margin-bottom: 12px;
  box-shadow: var(--shadow-sm);
}
.gmk-curseur { display: inline-flex; align-items: center; gap: 8px; font-size: 12.5px; color: var(--text-2); }
.gmk-curseur input[type="range"] { width: 110px; accent-color: var(--primary); }
.gmk-curseur b { color: var(--primary); font-variant-numeric: tabular-nums; min-width: 46px; font-size: 12.5px; }
.gmk-check { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-2); cursor: pointer; }
.gmk-check input { accent-color: var(--primary); }
.gmk-sel, .gmk-inp {
  background: var(--surface); border: 1px solid var(--border-2); color: var(--text);
  border-radius: var(--radius-sm); padding: 8px 11px; font: inherit; font-size: 13.5px;
}
.gmk-inp--court { width: 250px; max-width: 46vw; }
.gmk-btn {
  display: inline-flex; align-items: center; gap: 7px;
  background: var(--surface); color: var(--text-2);
  border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 8px 13px; font: inherit; font-size: 13.5px; cursor: pointer;
  transition: color .15s, border-color .15s;
}
.gmk-btn:hover { color: var(--primary); border-color: var(--primary); }

/* ---------- carte ---------- */
.gmk-carte {
  height: min(58vh, 560px); border-radius: var(--radius); overflow: hidden;
  border: 1px solid var(--border-2); box-shadow: var(--shadow-md); background: #eef1f6;
}
.gmk-carte--mini { height: 260px; margin-top: 12px; box-shadow: none; }
.gmk-legende {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  font-size: 12.5px; color: var(--text-2); padding: 10px 4px 0;
}
.gmk-p { display: inline-block; width: 11px; height: 11px; border-radius: 50%; margin-right: 6px; vertical-align: -1px; }
.gmk-cpt { margin-left: auto; font-weight: 700; color: var(--primary); }

/* ---------- cartons & grilles ---------- */
.gmk-carton {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 16px 18px; margin-top: 14px;
  box-shadow: var(--shadow-sm);
}
.gmk-carton h3 { font-size: 15px; font-weight: 700; color: var(--text); margin: 0 0 10px; }
.gmk-h4 { font-size: 13.5px; font-weight: 700; color: var(--text-2); margin: 14px 0 6px; }
.gmk-2col { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.gmk-grille { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; margin-top: 8px; }
.gmk-aide {
  display: inline-grid; place-items: center; width: 17px; height: 17px; border-radius: 50%;
  background: var(--primary-soft); color: var(--primary); font-size: 11px; font-weight: 700;
  cursor: help; vertical-align: 2px;
}

/* ---------- tuiles études ---------- */
.gmk-tuile {
  text-align: left; background: var(--surface); border: 1px solid var(--border-2);
  border-radius: var(--radius); padding: 14px 16px; cursor: pointer; font: inherit; color: var(--text);
  transition: transform .12s, box-shadow .12s, border-color .12s;
}
.gmk-tuile:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.gmk-tuile__nom { font-weight: 700; font-size: 15px; }
.gmk-tuile__chiffres { display: flex; align-items: baseline; gap: 8px; margin: 8px 0 2px; }
.gmk-tuile__chiffres span:first-child { font-size: 19px; font-weight: 700; color: var(--primary); }

/* ---------- tableaux ---------- */
.gmk-defile { overflow-x: auto; }
.gmk-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.gmk-table th {
  text-align: left; font-size: 11px; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-3); font-weight: 700; padding: 8px 9px; border-bottom: 1px solid var(--border-2);
  white-space: nowrap;
}
.gmk-table td { padding: 8px 9px; border-bottom: 1px solid var(--border); color: var(--text-2); vertical-align: middle; }
.gmk-table td b { color: var(--text); }
.gmk-table tbody tr { cursor: default; }
.gmk-table tbody tr[data-ll], .gmk-table tbody tr[data-c], .gmk-table tbody tr[data-code] { cursor: pointer; }
.gmk-table tbody tr:hover td { background: var(--surface-2); }
.gmk-table--serree td, .gmk-table--serree th { padding: 6px 8px; font-size: 12.5px; }
.gmk-num { text-align: right; font-variant-numeric: tabular-nums; }
.gmk-th { cursor: pointer; user-select: none; }
.gmk-th:hover { color: var(--primary); }
.gmk-th--actif { color: var(--primary); }
.gmk-mini { font-size: 11.5px; color: var(--text-3); font-weight: 400; }
.gmk-prov td { background: var(--primary-soft-2); }
.gmk-prov td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

.gmk-score {
  display: inline-block; min-width: 34px; text-align: center; font-weight: 700;
  background: var(--warning-soft); color: #9a6a05; border-radius: 999px; padding: 3px 8px; font-size: 12.5px;
}
.gmk-ind { display: inline-block; min-width: 30px; text-align: center; border-radius: 999px; padding: 2px 7px; font-size: 12px; background: var(--surface-2); color: var(--text-2); }
.gmk-ind--haut { background: var(--success-soft); color: #12784a; font-weight: 700; }
.gmk-ind--bas { background: var(--danger-soft); color: #b13650; font-weight: 700; }

/* ---------- simulateur ---------- */
.gmk-sim { display: grid; grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); gap: 14px; align-items: start; }
.gmk-lab { display: block; font-size: 12.5px; color: var(--text-2); margin: 12px 0 5px; }
.gmk-inp, .gmk-range { width: 100%; }
.gmk-range { accent-color: var(--primary); }
.gmk-sim__emp { font-size: 13px; font-weight: 700; color: var(--primary); margin-top: 4px; }
.gmk-sim__res { position: sticky; top: 10px; }
.gmk-sim__gros { font-size: 32px; font-weight: 800; letter-spacing: -.02em; color: var(--primary); line-height: 1.1; }
.gmk-ligne { display: flex; justify-content: space-between; gap: 12px; font-size: 13.5px; padding: 7px 0; border-bottom: 1px solid var(--border); color: var(--text-2); }
.gmk-ligne span:last-child { font-weight: 600; color: var(--text); text-align: right; font-variant-numeric: tabular-nums; }
.gmk-alerte {
  background: var(--warning-soft); border: 1px solid #f3a71240; color: #8a5c04;
  border-radius: var(--radius-sm); padding: 9px 12px; font-size: 13px; margin-bottom: 10px;
}

/* ---------- recherche de territoire (simulateur) ---------- */
.gmk-sugg-hote { position: relative; }
.gmk-sugg {
  position: absolute; top: calc(100% + 4px); left: 0; right: 0; z-index: 1200;
  background: var(--surface); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  box-shadow: var(--shadow-lg); max-height: 320px; overflow-y: auto;
}
.gmk-sugg__it {
  display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  font: inherit; font-size: 13.5px; color: var(--text); background: none; border: 0;
  border-bottom: 1px solid var(--border); padding: 9px 12px; cursor: pointer;
}
.gmk-sugg__it:last-child { border-bottom: 0; }
.gmk-sugg__it:hover { background: var(--primary-soft-2); }
.gmk-sugg__it span { font-size: 12px; color: var(--text-3); }
.gmk-sugg__vide { padding: 12px; font-size: 13px; color: var(--text-3); }

/* ---------- détail parc / KPI ---------- */
.gmk-detail__tete { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.gmk-detail__grille { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; margin-top: 10px; }
.gmk-kpi { background: var(--surface-2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 11px 13px; }
.gmk-kpi__v { font-size: 19px; font-weight: 700; color: var(--text); letter-spacing: -.01em; }
.gmk-kpi__l { font-size: 12px; color: var(--text-3); margin-top: 2px; }
.gmk-detail__spark { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.gmk-jauge { height: 8px; background: var(--surface-2); border-radius: 999px; overflow: hidden; border: 1px solid var(--border); }
.gmk-jauge i { display: block; height: 100%; background: var(--primary); border-radius: 999px; }

/* ---------- poids du score ---------- */
.gmk-poids .gmk-curseur { display: flex; margin-top: 8px; }
.gmk-poids .gmk-curseur span { flex: 1; }
.gmk-poids .gmk-curseur input { width: 180px; }

/* ---------- couches de la carte interactive (études) ---------- */
.gmk-couches { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 10px; }
.gmk-couches .gmk-check { padding: 5px 10px; border-radius: 999px; border: 1px solid var(--border-2); background: var(--surface-2); }
.gmk-couches .gmk-check input { accent-color: var(--c, var(--primary)); }

/* ---------- galerie de cartes (études) ---------- */
.gmk-galerie { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 12px; }
.gmk-vignette {
  display: flex; flex-direction: column; gap: 6px; font: inherit; text-align: left;
  background: var(--surface-2); border: 1px solid var(--border-2); border-radius: var(--radius-sm);
  padding: 8px; cursor: zoom-in; transition: transform .12s, box-shadow .12s, border-color .12s;
}
.gmk-vignette:hover { transform: translateY(-2px); box-shadow: var(--shadow-md); border-color: var(--primary); }
.gmk-vignette img { width: 100%; height: 118px; object-fit: cover; border-radius: 6px; background: #eef1f6; }
.gmk-vignette span { font-size: 12px; color: var(--text-2); line-height: 1.35; }

/* ---------- visionneuse plein écran ---------- */
.gmk-vision { position: fixed; inset: 0; z-index: 4000; background: rgba(10, 14, 24, .92); display: flex; flex-direction: column; }
.gmk-vision__bar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 18px; color: #eaf0fa; font-size: 14px; font-weight: 600;
}
.gmk-vision__btns { display: flex; gap: 8px; }
.gmk-vision__btns button {
  font: inherit; font-size: 15px; width: 38px; height: 34px; border-radius: 8px; cursor: pointer;
  background: rgba(255, 255, 255, .12); color: #fff; border: 1px solid rgba(255, 255, 255, .22);
}
.gmk-vision__btns button:hover { background: rgba(255, 255, 255, .24); }
.gmk-vision__scene { flex: 1; overflow: hidden; display: grid; place-items: center; cursor: grab; touch-action: none; }
.gmk-vision__scene:active { cursor: grabbing; }
.gmk-vision__scene img { max-width: 94vw; max-height: 84vh; transition: transform .08s linear; user-select: none; }

/* ---------- notes & attentes ---------- */
.gmk-note {
  font-size: 12.5px; color: var(--text-3); margin: 14px 2px 0; padding-left: 12px;
  border-left: 2px solid var(--border-2); line-height: 1.55;
}
.gmk-vide { text-align: center; padding: 70px 20px; color: var(--text-2); }
.gmk-vide__rond {
  width: 34px; height: 34px; margin: 0 auto 14px; border-radius: 50%;
  border: 3px solid var(--border-2); border-top-color: var(--primary);
  animation: gmk-tour .9s linear infinite;
}
@keyframes gmk-tour { to { transform: rotate(360deg); } }

/* ---------- mobile ---------- */
@media (max-width: 640px) {
  .gmk-carte { height: 46vh; }
  .gmk-inp--court { width: 100%; max-width: none; }
  .gmk-sim__res { position: static; }
}