/* =========================================================
   Radar Bons Coups — design system
   Adapté du Garage Call CRM (D:\Garage-Call-CRM\)
   Palette : navy sidebar / orange CTA / soft slate cards
   ========================================================= */

:root {
  --gc-navy: #0f172a;
  --gc-navy-soft: #1e293b;
  --gc-navy-border: #1e293b;
  /* Bandeau KPI signature (lot 2) */
  --gc-kpi-navy: #0f1a2e;
  --gc-kpi-navy-2: #13203a;
  --gc-kpi-navy-border: #243049;
  --gc-accent-orange: #ea580c;
  --gc-accent-orange-hover: #c2410c;
  --gc-accent-orange-hi: #f97316;
  --gc-accent-orange-soft: #fff7ed;
  --gc-bg: #eef1f6;
  --gc-bg-deep: #e7ebf2;
  --gc-surface: #ffffff;
  --gc-surface-2: #f7f9fc;
  --gc-border: #dce2ec;
  --gc-border-strong: #c6cfdd;
  --gc-border-soft: #e6ebf3;
  --gc-text: #0f172a;
  --gc-text-muted: #5b6b82;
  --gc-text-subtle: #8a98ac;
  /* Échelle d'élévation neutre (3 paliers) — remplace l'ombre bleutée.
     --gc-el-1 est consommé à partir du lot 2 (toolbar/popovers). */
  --gc-el-1: 0 1px 2px rgba(15, 23, 42, 0.05);
  --gc-el-2: 0 1px 2px rgba(15, 23, 42, 0.05), 0 10px 26px -16px rgba(15, 23, 42, 0.28);
  --gc-el-3: 0 2px 4px rgba(15, 23, 42, 0.06), 0 18px 40px -18px rgba(15, 23, 42, 0.34);
  --gc-card-shadow: var(--gc-el-2);
  --gc-card-shadow-hover: var(--gc-el-3);
  --gc-mono: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;

  --gc-success: #15803d;
  --gc-success-bg: #ecfdf3;
  --gc-success-border: #9ce3bd;
  --gc-warning: #b45309;
  --gc-warning-bg: #fffbeb;
  --gc-warning-border: #fde68a;
  --gc-danger: #b91c1c;
  --gc-danger-bg: #fef2f2;
  --gc-danger-border: #fecaca;
  --gc-info: #1d4ed8;
  --gc-info-bg: #eff6ff;
}

html, body {
  background: var(--gc-bg);
  color: var(--gc-text);
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Inter, system-ui, sans-serif;
  font-feature-settings: "cv02", "cv03", "cv04", "cv11";
  -webkit-font-smoothing: antialiased;
}

/* Chiffres alignés (prix, scores, deltas) — signal "terminal".
   Distinct du legacy .gc-mono (tabular-nums sur <code>, sans
   font-family) : .gc-num force la pile mono sur des <span> chiffrés.
   Consolidation éventuelle reportée au balayage lot 6. */
.gc-num {
  font-family: var(--gc-mono);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.01em;
}

* {
  -webkit-tap-highlight-color: transparent;
}

/* =========================================================
   Layout shell
   ========================================================= */

.gc-shell {
  display: flex;
  min-height: 100vh;
}

.gc-main {
  position: relative;
  flex: 1;
  min-width: 0;
  background: var(--gc-bg);
  overflow-x: hidden;
}

.gc-main::before {
  content: "";
  position: fixed;
  bottom: 0;
  right: 0;
  width: 720px;
  height: 720px;
  background-image: url("/static/assets/Image_Moteur.png");
  background-repeat: no-repeat;
  background-size: contain;
  background-position: bottom right;
  opacity: 0.18;
  pointer-events: none;
  z-index: 0;
}

.gc-main > * {
  position: relative;
  z-index: 1;
}

.gc-page-header {
  position: sticky;
  top: 0;
  z-index: 20;
  height: 6rem;
  padding: 0 2.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
  border-bottom: 1px solid rgba(229, 231, 235, 0.6);
}

.gc-page-body {
  padding: 2.5rem;
  flex: 1;
}

.gc-page-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--gc-text);
  letter-spacing: -0.015em;
  line-height: 1.1;
}

.gc-page-subtitle {
  margin-top: 0.25rem;
  font-size: 0.875rem;
  color: var(--gc-text-muted);
}

/* =========================================================
   Sidebar
   ========================================================= */

.gc-sidebar {
  width: 16rem;
  /* #16223b : navy un cran plus clair que --gc-navy (#0f172a) pour la
     profondeur haut→bas ; pas de token (one-off sidebar). */
  background: linear-gradient(180deg, #16223b 0%, var(--gc-navy) 55%);
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  position: sticky;
  top: 0;
  height: 100vh;
  z-index: 30;
  box-shadow: 1px 0 0 rgba(255, 255, 255, 0.04), 0 24px 48px -16px rgba(0, 0, 0, 0.45);
  flex-shrink: 0;
}

.gc-sidebar-brand {
  height: 5rem;
  display: flex;
  align-items: center;
  padding: 0 1.5rem;
  border-bottom: 1px solid var(--gc-navy-border);
  gap: 0.75rem;
}

.gc-sidebar-brand-icon {
  width: 2rem;
  height: 2rem;
  color: var(--gc-accent-orange-hi);
  flex-shrink: 0;
}

.gc-sidebar-brand-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #ffffff;
  letter-spacing: 0.01em;
  line-height: 1.1;
}

.gc-sidebar-brand-tagline {
  font-size: 0.7rem;
  color: var(--gc-text-subtle);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-top: 0.15rem;
}

.gc-sidebar-nav {
  padding: 1rem;
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}

.gc-sidebar-section-label {
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #64748b;
  padding: 1rem 1rem 0.5rem;
}

.gc-nav-item {
  position: relative;
  display: flex;
  align-items: center;
  padding: 0.7rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #cbd5e1;
  transition: background-color 0.15s, color 0.15s;
  text-decoration: none;
}

.gc-nav-item:hover {
  background: var(--gc-navy-soft);
  color: #ffffff;
}

.gc-nav-item-active {
  background: rgba(249, 115, 22, 0.10);
  color: #ffffff;
  box-shadow: inset 0 0 0 1px rgba(249, 115, 22, 0.18);
}

.gc-nav-item.gc-nav-item-active:hover {
  background: rgba(249, 115, 22, 0.16);
}

.gc-nav-item-active::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  width: 4px;
  height: 100%;
  background: var(--gc-accent-orange-hi);
  border-top-right-radius: 9999px;
  border-bottom-right-radius: 9999px;
}

.gc-nav-icon {
  width: 1.25rem;
  height: 1.25rem;
  margin-right: 0.75rem;
  opacity: 0.7;
  flex-shrink: 0;
}

.gc-nav-item-active .gc-nav-icon {
  opacity: 1;
  color: var(--gc-accent-orange-hi);
}

.gc-nav-badge {
  margin-left: auto;
  padding: 0.1rem 0.5rem;
  border-radius: 9999px;
  background: var(--gc-accent-orange);
  color: white;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

.gc-sidebar-bottom {
  padding: 1.5rem;
  position: relative;
}

.gc-sidebar-car {
  position: absolute;
  bottom: 9rem;
  left: 50%;
  transform: translateX(-50%);
  width: 12rem;
  pointer-events: none;
  opacity: 0.45;
}

.gc-sidebar-profile {
  display: flex;
  align-items: center;
  position: relative;
  z-index: 1;
}

.gc-sidebar-avatar {
  width: 2rem;
  height: 2rem;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--gc-accent-orange), #f97316);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #ffffff;
  margin-right: 0.75rem;
  flex-shrink: 0;
  box-shadow: 0 2px 6px rgba(234, 88, 12, 0.4);
}

.gc-sidebar-profile-name {
  font-size: 0.875rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.gc-sidebar-profile-role {
  font-size: 0.7rem;
  opacity: 0.6;
  margin-top: 0.125rem;
}

.gc-sidebar-status {
  margin-top: 1rem;
  padding: 0.75rem;
  background: rgba(255, 255, 255, 0.04);
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 0.5rem;
  font-size: 0.7rem;
  color: #cbd5e1;
}

.gc-sidebar-status-label {
  font-size: 0.65rem;
  color: var(--gc-text-subtle);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gc-sidebar-status-value {
  margin-top: 0.3rem;
  font-weight: 600;
  color: #fff;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

/* =========================================================
   Sidebar — menu réductible (icônes seules) + bouton de bascule
   ========================================================= */
.gc-sidebar { transition: width 0.18s ease; }

.gc-sidebar-toggle {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  width: calc(100% - 2rem);
  margin: 0.5rem 1rem 0;
  padding: 0.45rem 0.7rem;
  border: 0;
  border-radius: 0.5rem;
  background: rgba(255, 255, 255, 0.04);
  color: #94a3b8;
  font-size: 0.75rem;
  font-weight: 600;
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}
.gc-sidebar-toggle:hover { background: var(--gc-navy-soft); color: #fff; }
.gc-sidebar-toggle-icon { width: 1rem; height: 1rem; flex-shrink: 0; transition: transform 0.18s ease; }

/* Mode RÉDUIT — appliqué UNIQUEMENT sur écrans larges. Le mobile garde sa règle dédiée
   (@media max-width:768px -> .gc-sidebar{display:none}), donc on ne la contrarie pas. */
@media (min-width: 769px) {
  html.sidebar-collapsed .gc-sidebar { width: 4.5rem; }
  html.sidebar-collapsed .gc-sidebar-brand { padding: 0; justify-content: center; }
  html.sidebar-collapsed .gc-sidebar-brand > div { display: none; }
  html.sidebar-collapsed .gc-sidebar-section-label { font-size: 0; padding: 0.6rem 0 0.2rem; }
  html.sidebar-collapsed .gc-sidebar-nav { padding: 0.5rem; }
  html.sidebar-collapsed .gc-nav-item { justify-content: center; font-size: 0; padding: 0.7rem 0; }
  html.sidebar-collapsed .gc-nav-icon { margin-right: 0; }
  html.sidebar-collapsed .gc-nav-badge { display: none; }
  html.sidebar-collapsed .gc-sidebar-toggle { justify-content: center; width: auto; margin: 0.5rem 0.5rem 0; font-size: 0; }
  html.sidebar-collapsed .gc-sidebar-toggle-icon { transform: rotate(180deg); }
  html.sidebar-collapsed .gc-sidebar-status,
  html.sidebar-collapsed .rv-sidebar-legal,
  html.sidebar-collapsed .gc-sidebar-bottom .mt-3 { display: none; }
  html.sidebar-collapsed .gc-sidebar-bottom { padding: 0.75rem 0.5rem; }
  html.sidebar-collapsed .gc-sidebar-bottom form button { font-size: 0; padding: 0.5rem 0; }
  html.sidebar-collapsed .gc-sidebar-bottom form button::before { content: "\23CF"; font-size: 1rem; }
}

/* =========================================================
   Cards & containers
   ========================================================= */

.gc-card {
  background: var(--gc-surface);
  border: 1px solid var(--gc-border);
  border-radius: 0.75rem;
  box-shadow: var(--gc-card-shadow);
  overflow: hidden;
}

.gc-card-hover {
  transition: box-shadow 0.15s, transform 0.15s, border-color 0.15s;
}

.gc-card-hover:hover {
  box-shadow: var(--gc-card-shadow-hover);
  border-color: var(--gc-border-strong);
}

.gc-card-header {
  padding: 1rem 1.5rem;
  border-bottom: 1px solid var(--gc-border-soft);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}

.gc-card-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gc-text);
}

.gc-card-subtitle {
  font-size: 0.8rem;
  color: var(--gc-text-muted);
  margin-top: 0.15rem;
}

.gc-card-body {
  padding: 1.5rem;
}

.gc-card-body-compact {
  padding: 1rem 1.5rem;
}

/* KPI cards (action immédiate sur dashboard) */
.gc-kpi {
  background: white;
  border: 1px solid var(--gc-border-soft);
  border-radius: 0.75rem;
  padding: 1.25rem 1.5rem;
  box-shadow: var(--gc-card-shadow);
  transition: box-shadow 0.15s, transform 0.15s;
}

.gc-kpi:hover {
  box-shadow: var(--gc-card-shadow-hover);
  transform: translateY(-1px);
}

.gc-kpi-icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  margin-bottom: 0.6rem;
}

.gc-kpi-icon-orange { background: var(--gc-accent-orange-soft); color: var(--gc-accent-orange); }
.gc-kpi-icon-blue   { background: var(--gc-info-bg); color: var(--gc-info); }
.gc-kpi-icon-green  { background: var(--gc-success-bg); color: var(--gc-success); }
.gc-kpi-icon-purple { background: #faf5ff; color: #6b21a8; }
.gc-kpi-icon-slate  { background: #f1f5f9; color: #334155; }
.gc-kpi-icon-red    { background: var(--gc-danger-bg); color: var(--gc-danger); }

.gc-kpi-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
}

.gc-kpi-value {
  font-size: 1.85rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--gc-text);
  margin-top: 0.1rem;
  line-height: 1;
}

.gc-kpi-meta {
  margin-top: 0.4rem;
  font-size: 0.75rem;
  color: var(--gc-text-muted);
  display: flex;
  align-items: center;
  gap: 0.25rem;
}

.gc-kpi-trend-up    { color: var(--gc-success); }
.gc-kpi-trend-down  { color: var(--gc-danger); }
.gc-kpi-trend-flat  { color: var(--gc-text-subtle); }

/* =========================================================
   Buttons
   ========================================================= */

.gc-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gc-accent-orange);
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.2);
  transition: background-color 0.15s, transform 0.1s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.gc-btn-primary:hover { background: var(--gc-accent-orange-hover); }
.gc-btn-primary:active { transform: scale(0.98); }
.gc-btn-primary:disabled { background: #9ca3af; box-shadow: none; cursor: not-allowed; }

.gc-btn-danger {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #dc2626;
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(220, 38, 38, 0.2);
  transition: background-color 0.15s, transform 0.1s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.gc-btn-danger:hover:not(:disabled) { background: #b91c1c; }
.gc-btn-danger:active { transform: scale(0.98); }
.gc-btn-danger:disabled { background: #9ca3af; box-shadow: none; cursor: not-allowed; }

/* Bouton d'action POSITIVE (réactiver / activer) — vert, miroir de .gc-btn-danger. */
.gc-btn-success {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: #16a34a;
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  box-shadow: 0 1px 2px rgba(22, 163, 74, 0.2);
  transition: background-color 0.15s, transform 0.1s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.gc-btn-success:hover:not(:disabled) { background: #15803d; }
.gc-btn-success:active { transform: scale(0.98); }
.gc-btn-success:disabled { background: #9ca3af; box-shadow: none; cursor: not-allowed; }

/* Variante compacte — utilisée dans les tableaux denses (moniteur de
   processus, etc.). Override padding + font-size en gardant la couleur. */
.gc-btn-xs {
  padding: 0.25rem 0.55rem !important;
  font-size: 0.7rem !important;
  border-radius: 0.35rem !important;
  font-weight: 600;
}

.gc-btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  background: var(--gc-navy-soft);
  color: #ffffff;
  padding: 0.625rem 1.25rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s;
  border: none;
  cursor: pointer;
  text-decoration: none;
}

.gc-btn-secondary:hover { background: #334155; }

.gc-btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  background: #ffffff;
  color: var(--gc-text);
  padding: 0.55rem 0.9rem;
  border: 1px solid var(--gc-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  transition: background-color 0.15s, border-color 0.15s;
  cursor: pointer;
  text-decoration: none;
}

.gc-btn-ghost:hover { background: #f8fafc; border-color: #cbd5e1; }

.gc-btn-sm { padding: 0.4rem 0.75rem; font-size: 0.8rem; }
.gc-btn-lg { padding: 0.85rem 1.5rem; font-size: 0.95rem; }

.gc-btn-icon {
  width: 2.25rem;
  height: 2.25rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: white;
  border: 1px solid var(--gc-border);
  border-radius: 0.5rem;
  color: var(--gc-text-muted);
  cursor: pointer;
  transition: background-color 0.15s, color 0.15s;
}

.gc-btn-icon:hover { background: #f8fafc; color: var(--gc-text); }

/* =========================================================
   Form controls
   ========================================================= */

.gc-input, .gc-select {
  width: 100%;
  padding: 0.6rem 0.9rem;
  border: 1px solid var(--gc-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: #ffffff;
  color: var(--gc-text);
  font-family: inherit;
  transition: border-color 0.15s, box-shadow 0.15s;
}

.gc-input::placeholder { color: #9ca3af; }

.gc-input:focus, .gc-select:focus {
  outline: none;
  border-color: var(--gc-navy);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.gc-select {
  appearance: none;
  padding-right: 2.5rem;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='%2364748b' viewBox='0 0 20 20'%3E%3Cpath d='M9.293 12.95l.707.707L15.657 8l-1.414-1.414L10 10.828 5.757 6.586 4.343 8z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.7rem center;
  background-size: 1rem;
  cursor: pointer;
}

.gc-search { position: relative; }

.gc-search-input {
  width: 100%;
  padding: 0.6rem 0.9rem 0.6rem 2.4rem;
  border: 1px solid var(--gc-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  background: #ffffff;
}

.gc-search-input::placeholder { color: #9ca3af; }

.gc-search-input:focus {
  outline: none;
  border-color: var(--gc-navy);
  box-shadow: 0 0 0 3px rgba(15, 23, 42, 0.08);
}

.gc-search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  width: 1.1rem;
  height: 1.1rem;
  color: var(--gc-text-subtle);
  pointer-events: none;
}

.gc-checkbox {
  width: 1rem;
  height: 1rem;
  border: 1px solid var(--gc-border);
  border-radius: 0.25rem;
  accent-color: var(--gc-accent-orange);
}

.gc-form-label {
  font-size: 0.75rem;
  font-weight: 600;
  color: var(--gc-text-muted);
  margin-bottom: 0.3rem;
  display: block;
  letter-spacing: 0.02em;
}

.gc-filter-group {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}

.gc-filter-cell {
  display: flex;
  flex-direction: column;
  min-width: 8rem;
}

/* =========================================================
   Tables
   ========================================================= */

.gc-table {
  width: 100%;
  border-collapse: separate;
  border-spacing: 0;
  text-align: left;
}

.gc-table thead tr {
  background: rgba(248, 250, 252, 0.65);
  border-bottom: 1px solid var(--gc-border-soft);
}

.gc-table thead th {
  padding: 0.85rem 1.25rem;
  font-size: 0.7rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--gc-text-muted);
  white-space: nowrap;
}

.gc-table tbody td {
  padding: 0.85rem 1.25rem;
  border-bottom: 1px solid var(--gc-border-soft);
  color: var(--gc-text);
  font-size: 0.875rem;
  vertical-align: middle;
}

.gc-table tbody tr:last-child td { border-bottom: 0; }

.gc-table tbody tr {
  transition: background-color 0.12s;
}

.gc-table tbody tr:hover {
  background: rgba(248, 250, 252, 0.6);
}

.gc-table-row-clickable { cursor: pointer; }
.gc-table-row-flagged { background: rgba(254, 242, 242, 0.4); }
.gc-table-row-flagged:hover { background: rgba(254, 226, 226, 0.5); }

.gc-th-num { text-align: right; font-variant-numeric: tabular-nums; }
.gc-td-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Photo thumbnail in table cell */
.gc-thumb {
  width: 3.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  background: #f1f5f9;
  object-fit: cover;
  border: 1px solid var(--gc-border-soft);
  flex-shrink: 0;
}

.gc-thumb-placeholder {
  width: 3.5rem;
  height: 2.5rem;
  border-radius: 0.4rem;
  background: linear-gradient(135deg, #f1f5f9, #e2e8f0);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--gc-text-subtle);
  font-size: 0.6rem;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  flex-shrink: 0;
}

.gc-row-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 9999px;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  color: #475569;
  font-weight: 600;
  font-size: 0.8rem;
  flex-shrink: 0;
}

/* =========================================================
   Badges
   ========================================================= */

.gc-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
}

.gc-badge-square {
  display: inline-flex;
  align-items: center;
  padding: 0.15rem 0.5rem;
  border-radius: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  border: 1px solid transparent;
  white-space: nowrap;
}

.gc-badge-blue    { background: var(--gc-info-bg); color: var(--gc-info); }
.gc-badge-purple  { background: #faf5ff; color: #6b21a8; }
.gc-badge-orange  { background: var(--gc-accent-orange-soft); color: var(--gc-accent-orange); }
.gc-badge-slate   { background: #f1f5f9; color: #334155; }
.gc-badge-neutral { background: #f9fafb; color: #374151; }
.gc-badge-success { background: var(--gc-success-bg); color: var(--gc-success); }
.gc-badge-warning { background: var(--gc-warning-bg); color: var(--gc-warning); border: 1px solid var(--gc-warning-border); }
.gc-badge-danger  { background: var(--gc-danger-bg); color: var(--gc-danger); border: 1px solid var(--gc-danger-border); }

.gc-badge-red     { background: var(--gc-danger-bg); color: var(--gc-danger); border-color: var(--gc-danger-border); }
.gc-badge-amber   { background: #fffbeb; color: #b45309; border-color: #fde68a; }
.gc-badge-emerald { background: var(--gc-success-bg); color: var(--gc-success); border-color: var(--gc-success-border); }
.gc-badge-gray    { background: #f9fafb; color: #374151; border-color: #e5e7eb; }

/* Discount badge — large, prominent */
.gc-discount-badge {
  display: inline-flex;
  align-items: baseline;
  gap: 0.15rem;
  padding: 0.25rem 0.7rem;
  border-radius: 0.5rem;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.gc-discount-strong {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  box-shadow: 0 2px 6px rgba(22, 163, 74, 0.25);
}

.gc-discount-mid {
  background: var(--gc-success-bg);
  color: var(--gc-success);
  border: 1px solid var(--gc-success-border);
}

.gc-discount-light {
  background: var(--gc-bg);
  color: var(--gc-text-muted);
}

/* Verdict pill (great_deal / good_deal / market / above_market) */
.gc-verdict-great_deal {
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gc-verdict-good_deal {
  background: var(--gc-success-bg);
  color: var(--gc-success);
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gc-verdict-market {
  background: #f1f5f9;
  color: #475569;
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

.gc-verdict-above_market {
  background: var(--gc-warning-bg);
  color: var(--gc-warning);
  padding: 0.18rem 0.55rem;
  border-radius: 9999px;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
}

/* Animated dot */
.gc-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 9999px;
  display: inline-block;
}

.gc-dot-blue { background: #3b82f6; animation: gc-pulse 1.8s ease-in-out infinite; }
.gc-dot-green { background: #22c55e; animation: gc-pulse 1.8s ease-in-out infinite; }
.gc-dot-orange { background: var(--gc-accent-orange); animation: gc-pulse 1.8s ease-in-out infinite; }
.gc-dot-red { background: #ef4444; animation: gc-pulse 1.8s ease-in-out infinite; }
.gc-dot-gray { background: #94a3b8; }

@keyframes gc-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.35; }
}

/* =========================================================
   Hero / spotlight cards (top deals)
   ========================================================= */

.gc-spotlight {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 1rem;
}

.gc-spotlight-card {
  background: linear-gradient(160deg, #ffffff 0%, #f0fdf4 100%);
  border: 1px solid #bbf7d0;
  border-radius: 0.85rem;
  padding: 1.1rem 1.2rem;
  position: relative;
  overflow: hidden;
  transition: transform 0.18s, box-shadow 0.18s;
  text-decoration: none;
  display: block;
}

.gc-spotlight-card::after {
  content: "";
  position: absolute;
  top: -40%;
  right: -20%;
  width: 60%;
  height: 180%;
  background: radial-gradient(circle, rgba(34, 197, 94, 0.08) 0%, transparent 70%);
  pointer-events: none;
}

.gc-spotlight-card:hover {
  transform: translateY(-2px);
  box-shadow: 0 8px 24px -8px rgba(22, 163, 74, 0.2);
}

.gc-spotlight-image {
  width: 100%;
  height: 8rem;
  border-radius: 0.5rem;
  object-fit: cover;
  background: #f1f5f9;
  margin-bottom: 0.75rem;
}

.gc-spotlight-discount {
  position: absolute;
  top: 0.85rem;
  right: 0.85rem;
  background: linear-gradient(135deg, #16a34a, #15803d);
  color: white;
  padding: 0.25rem 0.7rem;
  border-radius: 0.5rem;
  font-size: 1.05rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  box-shadow: 0 2px 8px rgba(22, 163, 74, 0.35);
  z-index: 2;
}

.gc-spotlight-title {
  font-size: 0.92rem;
  font-weight: 600;
  color: var(--gc-text);
  line-height: 1.25;
  margin-bottom: 0.3rem;
}

.gc-spotlight-meta {
  font-size: 0.75rem;
  color: var(--gc-text-muted);
  margin-bottom: 0.4rem;
}

.gc-spotlight-price {
  font-size: 1.1rem;
  font-weight: 700;
  color: var(--gc-text);
}

.gc-spotlight-vs {
  font-size: 0.7rem;
  color: var(--gc-text-muted);
  margin-top: 0.15rem;
}

/* =========================================================
   Scan progress (HTMX polled fragment)
   ========================================================= */

.gc-scan-card {
  background: linear-gradient(135deg, #fff7ed 0%, #ffffff 100%);
  border: 1px solid #fed7aa;
  border-radius: 0.85rem;
  padding: 1.25rem 1.5rem;
  position: relative;
  overflow: hidden;
}

.gc-scan-card-running {
  background: linear-gradient(135deg, #fff7ed 0%, #fef3c7 100%);
  border-color: #fdba74;
}

.gc-scan-card-completed {
  background: linear-gradient(135deg, #f0fdf4 0%, #ffffff 100%);
  border-color: #bbf7d0;
}

.gc-scan-card-failed {
  background: linear-gradient(135deg, #fef2f2 0%, #ffffff 100%);
  border-color: #fecaca;
}

.gc-scan-title {
  font-size: 1rem;
  font-weight: 600;
  color: var(--gc-text);
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}

.gc-scan-meta {
  font-size: 0.8rem;
  color: var(--gc-text-muted);
  margin-bottom: 0.85rem;
}

.gc-scan-meta strong {
  color: var(--gc-text);
  font-weight: 600;
}

.gc-progress-track {
  width: 100%;
  height: 0.5rem;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}

.gc-progress-bar {
  height: 100%;
  background: linear-gradient(90deg, var(--gc-accent-orange), #f97316);
  border-radius: 9999px;
  transition: width 0.4s ease-out;
  position: relative;
}

.gc-progress-bar::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, transparent 0%, rgba(255, 255, 255, 0.4) 50%, transparent 100%);
  animation: gc-shimmer 1.6s linear infinite;
}

@keyframes gc-shimmer {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(100%); }
}

/* Accordéon Maintenance — chaque carte devient un <details> repliable.
   On masque le triangle natif du navigateur et on rend un chevron qui
   pivote en mode ouvert. Le summary est cliquable plein-largeur. */
.gc-card-accordion > summary {
  list-style: none;
}
.gc-card-accordion > summary::-webkit-details-marker {
  display: none;
}
.gc-card-accordion-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.85rem 1.25rem;
  cursor: pointer;
  user-select: none;
  border-radius: 0.75rem;
  transition: background 0.12s ease-out;
}
.gc-card-accordion-summary:hover {
  background: rgba(15, 23, 42, 0.025);
}
.gc-card-accordion-summary::before {
  content: "›";
  font-size: 1.1rem;
  line-height: 1;
  color: var(--gc-accent-orange);
  transition: transform 0.18s ease-out;
  flex-shrink: 0;
}
.gc-card-accordion[open] > .gc-card-accordion-summary::before {
  transform: rotate(90deg);
}
.gc-card-accordion[open] > .gc-card-accordion-summary {
  border-bottom: 1px solid rgba(15, 23, 42, 0.06);
  border-bottom-left-radius: 0;
  border-bottom-right-radius: 0;
}

/* Barre de progression INDÉTERMINÉE — pour les jobs sans signal de % :
   un "shimmer" orange glisse en boucle sur un rail neutre.
   Utilisé sous chaque action Maintenance pendant qu'elle tourne. */
.gc-progress-track-indeterminate {
  width: 100%;
  height: 4px;
  background: rgba(15, 23, 42, 0.06);
  border-radius: 9999px;
  overflow: hidden;
  position: relative;
}
.gc-progress-track-indeterminate::after {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: 40%;
  background: linear-gradient(
    90deg, transparent, var(--gc-accent-orange), transparent
  );
  border-radius: 9999px;
  animation: gc-progress-slide 1.4s ease-in-out infinite;
}
@keyframes gc-progress-slide {
  0%   { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

.gc-scan-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 0.75rem;
  margin-top: 1rem;
}

.gc-scan-stat {
  background: rgba(255, 255, 255, 0.7);
  border: 1px solid rgba(15, 23, 42, 0.06);
  border-radius: 0.5rem;
  padding: 0.55rem 0.75rem;
  backdrop-filter: blur(4px);
}

.gc-scan-stat-label {
  font-size: 0.65rem;
  color: var(--gc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gc-scan-stat-value {
  font-size: 1.05rem;
  font-weight: 700;
  color: var(--gc-text);
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

/* =========================================================
   Empty / loading states
   ========================================================= */

.gc-empty {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--gc-text-muted);
}

.gc-empty-illustration {
  width: 8rem;
  height: 8rem;
  margin: 0 auto 1rem;
  opacity: 0.5;
}

.gc-empty-title {
  font-size: 0.95rem;
  font-weight: 600;
  color: var(--gc-text);
  margin-bottom: 0.4rem;
}

.gc-empty-text {
  font-size: 0.85rem;
  margin-bottom: 1.25rem;
}

.gc-skeleton {
  background: linear-gradient(90deg, #f1f5f9 0%, #e2e8f0 50%, #f1f5f9 100%);
  background-size: 200% 100%;
  animation: gc-skeleton 1.5s ease-in-out infinite;
  border-radius: 0.4rem;
}

@keyframes gc-skeleton {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* =========================================================
   Sparkline column tweaks
   ========================================================= */

.gc-sparkline {
  display: inline-block;
  vertical-align: middle;
  cursor: pointer;
  padding: 0.15rem 0.3rem;
  border-radius: 0.3rem;
  transition: background-color 0.12s;
}

.gc-sparkline:hover {
  background: var(--gc-bg);
}

/* =========================================================
   Toast notifications (fixed top-right)
   ========================================================= */

.gc-toast-host {
  position: fixed;
  top: 1.5rem;
  right: 1.5rem;
  z-index: 50;
  display: flex;
  flex-direction: column;
  gap: 0.6rem;
  pointer-events: none;
}

.gc-toast {
  pointer-events: auto;
  background: white;
  border: 1px solid var(--gc-border);
  border-left: 4px solid var(--gc-accent-orange);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  box-shadow: 0 8px 24px -8px rgba(15, 23, 42, 0.18);
  font-size: 0.85rem;
  max-width: 22rem;
  animation: gc-toast-in 0.25s ease-out;
}

.gc-toast-success { border-left-color: var(--gc-success); }
.gc-toast-error { border-left-color: var(--gc-danger); }

@keyframes gc-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* =========================================================
   Misc utilities
   ========================================================= */

.gc-divider {
  height: 1px;
  background: var(--gc-border-soft);
  margin: 1.5rem 0;
}

.gc-section-label {
  font-size: 0.7rem;
  font-weight: 600;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--gc-text-muted);
  margin-bottom: 0.75rem;
}

.gc-link {
  color: var(--gc-info);
  font-weight: 500;
  text-decoration: none;
  transition: color 0.12s;
}

.gc-link:hover {
  color: var(--gc-accent-orange);
  text-decoration: underline;
}

.gc-mono { font-variant-numeric: tabular-nums; font-feature-settings: "tnum"; }

.gc-focusable:focus {
  outline: 2px solid var(--gc-accent-orange);
  outline-offset: 2px;
  border-radius: 0.3rem;
}

/* =========================================================
   Live scan log (terminal-style streaming feed)
   ========================================================= */

.gc-log-host {
  background: #0b1220;
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  font-family: "SF Mono", "JetBrains Mono", "Cascadia Code", "Consolas", "Monaco", monospace;
  font-size: 0.78rem;
  line-height: 1.55;
  max-height: 28rem;
  overflow-y: auto;
  border: 1px solid #1f2937;
  box-shadow: inset 0 2px 8px rgba(0, 0, 0, 0.35);
  scroll-behavior: smooth;
}

.gc-log-host::-webkit-scrollbar { width: 8px; }
.gc-log-host::-webkit-scrollbar-track { background: transparent; }
.gc-log-host::-webkit-scrollbar-thumb {
  background: rgba(148, 163, 184, 0.25);
  border-radius: 4px;
}

.gc-log-line {
  display: flex;
  gap: 0.65rem;
  padding: 0.15rem 0;
  white-space: pre-wrap;
  word-break: break-word;
}

.gc-log-time {
  color: #64748b;
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}

.gc-log-msg {
  flex: 1;
  min-width: 0;
}

.gc-log-info    .gc-log-msg { color: #cbd5e1; }
.gc-log-success .gc-log-msg { color: #6ee7b7; font-weight: 500; }
.gc-log-warning .gc-log-msg { color: #fbbf24; }
.gc-log-error   .gc-log-msg { color: #fca5a5; font-weight: 500; }

.gc-log-empty {
  color: #475569;
  text-align: center;
  padding: 1.5rem 0;
  font-style: italic;
}

/* Counters strip above the live log */
.gc-counter-strip {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.gc-counter {
  background: white;
  border: 1px solid var(--gc-border-soft);
  border-radius: 0.6rem;
  padding: 0.85rem 1rem;
  display: flex;
  align-items: center;
  gap: 0.85rem;
}

.gc-counter-icon {
  width: 2.25rem;
  height: 2.25rem;
  border-radius: 0.5rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.gc-counter-info {
  min-width: 0;
}

.gc-counter-label {
  font-size: 0.65rem;
  color: var(--gc-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.05em;
}

.gc-counter-value {
  font-size: 1.4rem;
  font-weight: 700;
  color: var(--gc-text);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  margin-top: 0.1rem;
}

/* HTMX indicator: hide loaders while idle, show during request */
.gc-htmx-indicator { display: none; }
.htmx-request .gc-htmx-indicator { display: inline-flex; }
.htmx-request.gc-htmx-indicator { display: inline-flex; }

.gc-spinner {
  width: 1rem;
  height: 1rem;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: 50%;
  animation: gc-spin 0.7s linear infinite;
  display: inline-block;
}

@keyframes gc-spin {
  to { transform: rotate(360deg); }
}

/* Small mobile collapse */
@media (max-width: 768px) {
  .gc-sidebar { display: none; }
  .gc-page-header, .gc-page-body { padding: 1rem; }
}

/* =====================================================================
   Deals v3 — Premium client-facing layout
   ===================================================================== */

/* ---- Header recap (savings cumulative) ---- */
.gc-deals-recap {
  display: flex;
  flex-wrap: wrap;
  gap: 1.5rem;
  align-items: center;
  padding: 1.5rem 1.75rem;
  background: linear-gradient(135deg, #ecfdf5 0%, #d1fae5 100%);
  border: 1px solid #6ee7b7;
  border-radius: 16px;
  margin-bottom: 1.5rem;
  box-shadow: 0 4px 16px rgba(5, 150, 105, 0.08);
}
.gc-deals-recap-label {
  font-size: 0.72rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #047857;
  font-weight: 700;
  margin-bottom: 0.25rem;
}
.gc-deals-recap-value {
  font-size: 1.9rem;
  font-weight: 800;
  color: #047857;
  letter-spacing: -0.02em;
  line-height: 1;
}
.gc-deals-recap-meta {
  font-size: 0.82rem;
  color: #065f46;
  margin-left: auto;
  max-width: 28ch;
  line-height: 1.45;
}

/* ---- KPI strip (clickable, premium) ---- */
.gc-kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
.gc-kpi-clickable {
  display: block;
  position: relative;
  padding: 1.25rem 1.4rem;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 14px;
  text-decoration: none;
  color: inherit;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
  transition:
    transform 0.18s ease,
    border-color 0.18s ease,
    box-shadow 0.18s ease,
    background 0.18s ease;
  overflow: hidden;
}
.gc-kpi-clickable::before {
  content: "";
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 3px;
  background: transparent;
  transition: background 0.18s ease;
}
.gc-kpi-clickable:hover {
  border-color: #cbd5e1;
  transform: translateY(-2px);
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.10);
}
.gc-kpi-active {
  border-color: #ea580c;
  background: linear-gradient(180deg, #fff7ed 0%, #fff 60%);
  box-shadow: 0 8px 24px rgba(234, 88, 12, 0.18);
}
.gc-kpi-active::before { background: #ea580c; }
.gc-kpi-active::after {
  content: "ACTIF";
  position: absolute;
  top: 0.6rem;
  right: 0.65rem;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.08em;
  color: #ea580c;
  background: #fff;
  padding: 0.15rem 0.45rem;
  border-radius: 4px;
  border: 1px solid #fed7aa;
}
.gc-kpi-icon {
  font-size: 0.7rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 600;
  margin-bottom: 0.55rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
  color: #64748b;
}
.gc-kpi-icon-top    { color: #047857; }
.gc-kpi-icon-savings{ color: #1d4ed8; }
.gc-kpi-icon-new    { color: #0891b2; }
.gc-kpi-icon-press  { color: #b45309; }
.gc-kpi-clickable-value {
  font-size: 2rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.025em;
  line-height: 1;
}
.gc-kpi-clickable-hint {
  font-size: 0.75rem;
  color: #94a3b8;
  margin-top: 0.55rem;
  line-height: 1.4;
}
.gc-kpi-delta-positive {
  color: #047857;
  font-weight: 600;
}

/* ---- Filter bar (sticky) ---- */
.gc-filter-bar {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  padding: 0.85rem 1.1rem;
  background: rgba(255, 255, 255, 0.92);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border: 1px solid var(--gc-border);
  border-radius: 14px;
  margin-bottom: 1.25rem;
  box-shadow: 0 4px 14px rgba(15, 23, 42, 0.05);
}
.gc-filter-label {
  font-size: 0.66rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-weight: 700;
  color: #94a3b8;
}
.gc-filter-divider {
  width: 1px;
  background: var(--gc-border);
  align-self: stretch;
  margin: 0 0.25rem;
}
.gc-filter-spacer { flex: 1 1 auto; }
.gc-preset-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.4rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 500;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid transparent;
  border-radius: 9999px;
  text-decoration: none;
  transition: all 0.14s ease;
}
.gc-preset-pill:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.gc-preset-pill-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.gc-filter-bar select.gc-filter-mini,
.gc-filter-bar input.gc-filter-mini {
  height: 2rem;
  padding: 0 0.6rem;
  font-size: 0.85rem;
  border-radius: 8px;
  border: 1px solid var(--gc-border-strong);
  background: var(--gc-surface);
  color: var(--gc-text);
  transition: border-color 0.14s ease;
}
.gc-filter-bar select.gc-filter-mini:focus,
.gc-filter-bar input.gc-filter-mini:focus {
  outline: none;
  border-color: var(--gc-accent-orange);
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.12);
}
.gc-filter-drawer-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  padding: 0.45rem 0.95rem;
  font-size: 0.85rem;
  font-weight: 600;
  color: var(--gc-text);
  background: var(--gc-surface);
  border: 1px solid var(--gc-border-strong);
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.14s ease;
}
.gc-filter-drawer-btn:hover {
  background: #f8fafc;
  border-color: #0f172a;
}
.gc-filter-drawer-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 1.25rem;
  height: 1.25rem;
  padding: 0 0.4rem;
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--gc-surface);
  background: var(--gc-accent-orange);
  border-radius: 9999px;
}

/* ---- KPI strip — variante 2 métriques (radar) ---- */
.gc-kpi-grid-duo {
  grid-template-columns: repeat(2, minmax(220px, 320px));
  justify-content: start;
}

/* ---- Bandeau KPI signature (lot 2′) — sombre "terminal".
   Tout est scopé sous .gc-kpi-band : aucune autre page utilisant
   .gc-kpi-grid (dashboard 4-col) n'est impactée. Dark/glow limités
   à ce bandeau uniquement. ---- */
.gc-kpi-grid.gc-kpi-band {
  grid-template-columns: 1fr 1fr 1fr;
  gap: 0;
  background: linear-gradient(180deg, var(--gc-kpi-navy-2), var(--gc-kpi-navy));
  border: 1px solid var(--gc-kpi-navy-border);
  border-radius: 14px;
  box-shadow: var(--gc-el-2);
  overflow: hidden;
  position: relative;
}
.gc-kpi-band::before {
  content: "";
  position: absolute;
  left: 0; right: 0; top: 0;
  height: 2px;
  background: linear-gradient(90deg, var(--gc-accent-orange-hi), transparent 62%);
}
.gc-kpi-band .gc-kpi-clickable {
  padding: 1.05rem 1.4rem;
  background: transparent;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  color: inherit;
}
.gc-kpi-band .gc-kpi-clickable + .gc-kpi-clickable {
  border-left: 1px solid var(--gc-kpi-navy-border);
}
.gc-kpi-band .gc-kpi-clickable::before { display: none; }
.gc-kpi-band a.gc-kpi-clickable:hover {
  background: rgba(249, 115, 22, 0.07);
  transform: none;
  box-shadow: none;
}
.gc-kpi-band .gc-kpi-active {
  background: rgba(249, 115, 22, 0.10);
  border: 0;
  box-shadow: none;
}
.gc-kpi-band .gc-kpi-active::before { display: none; }
.gc-kpi-band .gc-kpi-active::after {
  content: "ACTIF";
  top: 0.7rem; right: 0.8rem;
  color: var(--gc-accent-orange-hi);
  background: transparent;
  border: 0;
  padding: 0;
}
.gc-kpi-band .gc-kpi-icon { color: var(--gc-accent-orange-hi); }
.gc-kpi-band .gc-kpi-icon-new { color: #38bdf8; }
.gc-kpi-band .gc-kpi-icon-context { color: #7c8aa3; }
.gc-kpi-band .gc-kpi-clickable-value { color: #ffffff; font-weight: 700; }
.gc-kpi-band .gc-kpi-context .gc-kpi-clickable-value { color: #cbd5e1; }
.gc-kpi-band .gc-kpi-clickable-hint { color: #7c8aa3; }
.gc-kpi-band .gc-kpi-delta-positive { color: #34d399; }
.gc-kpi-band .gc-kpi-context { cursor: default; }
.gc-kpi-band .gc-kpi-context:hover {
  transform: none;
  box-shadow: none;
}
@media (max-width: 768px) {
  .gc-kpi-grid.gc-kpi-band {
    display: grid;
    grid-template-columns: 1fr;
    overflow: visible;
  }
  .gc-kpi-band .gc-kpi-clickable + .gc-kpi-clickable {
    border-left: 0;
    border-top: 1px solid var(--gc-kpi-navy-border);
  }
}

/* ---- Filter bar — toggles premium + champs libellés ---- */
.gc-filter-toggles {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.gc-filter-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 0.45rem;
  padding: 0.42rem 0.9rem;
  font-size: 0.82rem;
  font-weight: 600;
  color: #475569;
  background: #f1f5f9;
  border: 1px solid var(--gc-border);
  border-radius: 9999px;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease,
    border-color 0.15s ease, box-shadow 0.15s ease;
}
.gc-filter-toggle:hover {
  background: #e2e8f0;
  color: #0f172a;
}
.gc-filter-toggle input {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  pointer-events: none;
}
.gc-filter-toggle-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 9999px;
  background: currentColor;
  opacity: 0.4;
  transition: opacity 0.15s ease;
}
.gc-filter-toggle[aria-pressed="true"],
.gc-filter-toggle.gc-filter-toggle-active {
  background: #0f172a;
  color: #fff;
  border-color: #0f172a;
  box-shadow: 0 4px 12px rgba(15, 23, 42, 0.18);
}
.gc-filter-toggle-accent.gc-filter-toggle-active {
  background: linear-gradient(135deg, #ea580c 0%, #f97316 100%);
  border-color: #ea580c;
  box-shadow: 0 4px 14px rgba(234, 88, 12, 0.30);
}
.gc-filter-toggle[aria-pressed="true"] .gc-filter-toggle-dot,
.gc-filter-toggle.gc-filter-toggle-active .gc-filter-toggle-dot {
  opacity: 1;
}
.gc-filter-toggle:focus-within {
  outline: none;
  box-shadow: 0 0 0 3px rgba(234, 88, 12, 0.18);
}
.gc-filter-field {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
}
.gc-filter-field-cap {
  font-size: 0.6rem;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  font-weight: 700;
  color: #94a3b8;
  padding-left: 0.15rem;
}
.gc-client-filter-empty {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-top: 1rem;
  padding: 0.85rem 1.1rem;
  font-size: 0.88rem;
  color: #64748b;
  background: #fff;
  border: 1px dashed #cbd5e1;
  border-radius: 14px;
}

/* ---- Deal cards — premium polish ---- */
.gc-deal-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.gc-deal-card {
  position: relative;
  display: grid;
  grid-template-columns: 200px 1fr minmax(280px, 340px);
  gap: 1.25rem;
  align-items: stretch;
  padding: 0.95rem 1.15rem 0.95rem 1.4rem;
  background: #ffffff;
  border: 1px solid var(--gc-border-soft);
  border-radius: 0.75rem;
  box-shadow: var(--gc-card-shadow);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* Barre d'accent gauche — palier de hiérarchie, sobre (tokens du site) */
.gc-deal-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  border-radius: 0.75rem 0 0 0.75rem;
  background: transparent;
  transition: background 0.15s ease;
}
.gc-deal-card[data-opportunity-tier="exceptional"]::before {
  background: var(--gc-success);
  /* rgba littéral de --gc-success (#15803d). Glow réservé au desktop :
     volontairement rogné en ≤768px par overflow:hidden de la carte
     empilée (radar desktop-first, mobile = chemin secondaire). */
  box-shadow: 0 0 16px -1px rgba(21, 128, 61, 0.55);
}
.gc-deal-card[data-opportunity-tier="good"]::before {
  background: var(--gc-success-border);
}
.gc-deal-card[data-opportunity-tier="fair"]::before {
  background: var(--gc-border);
}
.gc-deal-card:hover {
  border-color: var(--gc-border);
  box-shadow: var(--gc-card-shadow-hover);
}
.gc-deal-card-exceptional {
  border-color: var(--gc-success-border);
}
.gc-deal-card-expiring {
  border-color: var(--gc-warning-border);
}

/* Image — ratio ~4:3, overlay discret (photos + fraîcheur) */
.gc-deal-image-wrap {
  position: relative;
  width: 196px;
  height: 142px;
  border-radius: 0.5rem;
  overflow: hidden;
  background: var(--gc-navy);
  flex-shrink: 0;
}
.gc-deal-image {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.gc-deal-image-overlay {
  position: absolute;
  inset: auto 0 0 0;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem;
  background: linear-gradient(180deg, transparent, rgba(15, 23, 42, 0.55));
}
.gc-deal-img-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.66rem;
  font-weight: 600;
  color: #ffffff;
  background: rgba(15, 23, 42, 0.6);
  backdrop-filter: blur(4px);
  padding: 0.16rem 0.45rem;
  border-radius: 0.3rem;
  white-space: nowrap;
}
.gc-deal-image-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
  width: 100%;
  height: 100%;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}
.gc-deal-image-placeholder svg {
  width: 40px;
  height: 40px;
  opacity: 0.55;
}
/* Hotlink Leboncoin cassé (/deals only) : l'img onerror masque l'image et
   ajoute .is-img-broken au wrap. Placeholder rendu ici, en 1 règle, sans
   markup par carte (reprend la typo mutée de .gc-deal-image-placeholder
   sur le fond navy déjà porté par .gc-deal-image-wrap). */
.gc-deal-image-wrap.is-img-broken::after {
  content: "Image indisponible";
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 0.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 0.45);
  font-size: 0.68rem;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* Infos column — dense, 5 lignes */
.gc-deal-info {
  min-width: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.5rem;
}
.gc-deal-tier-tag {
  align-self: flex-start;
  display: inline-flex;
  align-items: center;
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 0.16rem 0.5rem;
  border-radius: 0.3rem;
}
.gc-deal-tier-exceptional {
  color: var(--gc-success);
  background: var(--gc-success-bg);
  border: 1px solid var(--gc-success-border);
}
.gc-deal-tier-good {
  color: var(--gc-success);
  background: var(--gc-success-bg);
}
.gc-deal-tier-fair {
  color: var(--gc-text-muted);
  background: #f1f5f9;
}
.gc-deal-title {
  font-size: 1.18rem;
  font-weight: 700;
  color: var(--gc-text);
  letter-spacing: -0.01em;
  line-height: 1.2;
  margin: 0;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-deal-finition {
  font-size: 0.8rem;
  color: var(--gc-text-subtle);
  font-weight: 500;
  line-height: 1.25;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-deal-subline {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.85rem;
  color: var(--gc-text-muted);
  font-weight: 500;
  line-height: 1.3;
}
.gc-deal-subline > span:first-child {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.gc-deal-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.gc-deal-market-line {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.86rem;
  color: #475569;
}
.gc-deal-market-strike {
  color: #94a3b8;
  text-decoration: line-through;
  font-weight: 500;
}
.gc-deal-market-arrow { color: #cbd5e1; }
.gc-deal-market-price {
  font-weight: 700;
  color: var(--gc-text);
  font-size: 1rem;
}
.gc-deal-market-disc {
  font-weight: 700;
  font-size: 0.78rem;
  color: var(--gc-success);
  background: var(--gc-success-bg);
  border: 1px solid var(--gc-success-border);
  padding: 0.05rem 0.4rem;
  border-radius: 0.3rem;
}
.gc-deal-market-na {
  font-size: 0.78rem;
  color: var(--gc-text-subtle);
  font-style: italic;
}
.gc-deal-verdict {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.78rem;
  color: var(--gc-text-muted);
  font-weight: 500;
}
.gc-deal-verdict strong { color: var(--gc-text); font-weight: 600; }
.gc-deal-verdict-dot {
  width: 0.45rem;
  height: 0.45rem;
  border-radius: 50%;
  flex-shrink: 0;
}
.gc-deal-verdict-good    { background: var(--gc-success); }
.gc-deal-verdict-neutral { background: var(--gc-text-subtle); }
.gc-deal-verdict-bad     { background: var(--gc-danger); }
.gc-deal-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 0.6rem;
  align-items: center;
  font-size: 0.7rem;
  color: #94a3b8;
}
.gc-deal-meta-item { color: var(--gc-text-muted); font-weight: 500; }
.gc-deal-meta-link {
  color: var(--gc-accent-orange);
  text-decoration: none;
  font-weight: 600;
  transition: color 0.14s ease;
}
.gc-deal-meta-link:hover { color: var(--gc-accent-orange-hover); text-decoration: underline; }
.gc-deal-seller-pill {
  display: inline-flex;
  align-items: center;
  font-size: 0.68rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  padding: 0.1rem 0.5rem;
  border-radius: 0.3rem;
  letter-spacing: 0.02em;
  flex-shrink: 0;
}

/* Bloc droit — économie sobre (tokens --gc-success*) + CTA solide */
.gc-deal-trio {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--gc-border);
  justify-content: center;
}
/* Bloc clé:valeur — "cadran" léger (emprunt B), 1-3 lignes, pas un
   mini-dashboard : label discret + valeur mono, rythme aéré. */
.gc-deal-kv {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.gc-deal-kv-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.75rem;
  font-size: 0.78rem;
}
.gc-deal-kv-k {
  color: var(--gc-text-subtle);
  font-weight: 600;
  letter-spacing: 0.01em;
}
.gc-deal-kv-v {
  color: var(--gc-text);
  font-weight: 700;
}
.gc-deal-kv-conf-reliable { color: var(--gc-success); }
.gc-deal-kv-conf-risky    { color: var(--gc-danger); }
.gc-deal-kv-conf-unknown  { color: var(--gc-warning); }
.gc-deal-signal-chip {
  align-self: flex-start;
  margin-top: 0.15rem;
  font-size: 0.68rem;
  font-weight: 700;
  color: var(--gc-info);
  background: var(--gc-info-bg);
  padding: 0.12rem 0.45rem;
  border-radius: 0.3rem;
}
.gc-deal-savings {
  padding: 0.65rem 0.85rem;
  border-radius: 0.5rem;
  background: var(--gc-success-bg);
  border: 1px solid var(--gc-success-border);
}
.gc-deal-savings-label {
  font-size: 0.61rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-success);
  opacity: 0.85;
  margin-bottom: 0.15rem;
}
.gc-deal-savings-amount {
  font-size: 1.45rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1;
  color: var(--gc-success);
}
.gc-deal-savings-pct {
  font-size: 0.74rem;
  font-weight: 600;
  margin-top: 0.2rem;
  color: var(--gc-success);
}
.gc-deal-price-fallback-label {
  font-size: 0.61rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--gc-text-subtle);
  font-weight: 700;
}
.gc-deal-price-fallback {
  font-size: 1.15rem;
  font-weight: 700;
  color: var(--gc-text);
  letter-spacing: -0.01em;
}
/* Double rôle : notice "marché en estimation" (italique) ET wrapper du
   fallback prix vendeur — les enfants price-fallback resettent l'italique. */
.gc-deal-savings-na {
  padding: 0.5rem 0.7rem;
  font-size: 0.76rem;
  color: var(--gc-text-muted);
  background: #f8fafc;
  border: 1px dashed var(--gc-border);
  border-radius: 0.5rem;
  font-style: italic;
}
.gc-deal-savings-na .gc-deal-price-fallback-label,
.gc-deal-savings-na .gc-deal-price-fallback {
  font-style: normal;
}

/* CTA — bouton plein, identique au .gc-btn-primary du site */
.gc-deal-cta {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  width: 100%;
  height: 2.5rem;
  padding: 0 1rem;
  font-size: 0.875rem;
  font-weight: 600;
  color: #ffffff;
  background: var(--gc-accent-orange);
  border-radius: 0.5rem;
  text-decoration: none;
  box-shadow: 0 1px 2px rgba(234, 88, 12, 0.2);
  transition: background-color 0.15s ease;
}
.gc-deal-cta:hover { background: var(--gc-accent-orange-hover); }
.gc-deal-cta:active { transform: scale(0.98); }

/* === MVP marchand v6 — colonne droite (pricing + confiance + CTAs) ====
   Remplace progressivement .gc-deal-trio. Classes additives : .gc-deal-trio
   reste utilisé par le bloc debug Stage 2 et les anciennes pages (rétro-
   compat). Toutes les valeurs reprennent les tokens --gc-*. */
.gc-deal-side {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
  padding-left: 1.25rem;
  border-left: 1px solid var(--gc-border);
  justify-content: center;
  min-width: 0;
}
/* --- Zone 3 : bloc Pricing hiérarchique (Prix vendeur > Marché > Économie) */
.gc-deal-pricing {
  display: flex;
  flex-direction: column;
  gap: 0.25rem;
}
.gc-deal-pricing-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  line-height: 1.2;
}
.gc-deal-pricing-label {
  font-size: 0.72rem;
  color: var(--gc-text-subtle);
  font-weight: 600;
  letter-spacing: 0.005em;
}
.gc-deal-pricing-value {
  color: var(--gc-text);
  font-weight: 700;
  font-size: 0.95rem;
  white-space: nowrap;
}
/* Hero : prix vendeur — taille + gras + couleur principale */
.gc-deal-pricing-seller .gc-deal-pricing-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.62rem;
  font-weight: 700;
  color: var(--gc-text-muted);
}
.gc-deal-pricing-seller .gc-deal-pricing-value {
  font-size: 1.35rem;
  font-weight: 800;
  letter-spacing: -0.015em;
  color: var(--gc-text);
}
/* Marché : référence discrète (label + valeur même taille) */
.gc-deal-pricing-market .gc-deal-pricing-value {
  font-weight: 600;
  color: var(--gc-text-muted);
}
/* Économie : panneau vert succès — verdict positif */
.gc-deal-pricing-savings {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  margin-top: 0.35rem;
  padding: 0.45rem 0.7rem;
  background: var(--gc-success-bg);
  border: 1px solid var(--gc-success-border);
  border-radius: 0.4rem;
}
.gc-deal-pricing-savings-label {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-success);
}
.gc-deal-pricing-savings-value {
  font-size: 1.05rem;
  font-weight: 800;
  color: var(--gc-success);
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.gc-deal-pricing-savings-pct {
  font-size: 0.82rem;
  font-weight: 700;
  opacity: 0.85;
}
.gc-deal-pricing-na {
  padding: 0.4rem 0.6rem;
  font-size: 0.74rem;
  color: var(--gc-text-muted);
  background: #f8fafc;
  border: 1px dashed var(--gc-border);
  border-radius: 0.4rem;
  font-style: italic;
  margin-top: 0.25rem;
}

/* --- Zone 4 : Confiance (score + verdict global) */
.gc-deal-confidence {
  display: flex;
  flex-direction: column;
  gap: 0.18rem;
}
.gc-deal-confidence-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
  font-size: 0.76rem;
  line-height: 1.2;
}
.gc-deal-confidence-k {
  color: var(--gc-text-subtle);
  font-weight: 600;
}
.gc-deal-confidence-v {
  color: var(--gc-text);
  font-weight: 700;
}
.gc-deal-confidence-reliable { color: var(--gc-success); }
.gc-deal-confidence-risky    { color: var(--gc-danger); }
.gc-deal-confidence-unknown  { color: var(--gc-warning); }

/* --- Zone 5 : Actions (CTA primary + secondary) */
.gc-deal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
}
.gc-deal-cta-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.3rem;
  width: 100%;
  height: 2.1rem;
  padding: 0 0.85rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--gc-text);
  background: #f8fafc;
  border: 1px solid var(--gc-border);
  border-radius: 0.45rem;
  text-decoration: none;
  transition: background-color 0.14s ease, border-color 0.14s ease;
}
.gc-deal-cta-secondary:hover {
  background: #ffffff;
  border-color: var(--gc-accent-orange);
  color: var(--gc-accent-orange);
}

/* --- Chips signaux dans la zone centrale (Avis Radar + baisse + dup …) */
.gc-deal-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
  margin-top: 0.1rem;
}
.gc-deal-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.12rem 0.48rem;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 0.3rem;
  letter-spacing: 0.005em;
  line-height: 1.25;
  white-space: nowrap;
}
/* Verdict qualité */
.gc-deal-chip-clean   { color: var(--gc-success); background: var(--gc-success-bg); border: 1px solid var(--gc-success-border); }
.gc-deal-chip-caution { color: #92400e;           background: #fffbeb;             border: 1px solid #fde68a; }
.gc-deal-chip-risky   { color: #991b1b;           background: #fef2f2;             border: 1px solid #fecaca; }
.gc-deal-chip-reject  { color: #ffffff;           background: var(--gc-danger);    border: 1px solid var(--gc-danger); }
/* Signaux complémentaires */
.gc-deal-chip-info    { color: #1e40af;           background: #dbeafe;             border: 1px solid #93c5fd; }
.gc-deal-chip-neutral { color: var(--gc-text-muted); background: #f1f5f9;           border: 1px solid var(--gc-border); }
/* Signalement PureTech — point d'attention achat/revente (visuel only). */
.gc-deal-chip-puretech { color: #9a3412;          background: #ffedd5;             border: 1px solid #fdba74; }

/* Équipements signalés par le vendeur (section LBC « Équipements »).
   Mini-chips discrets, sur un ou deux rangs, sous les chips de verdict. */
.gc-deal-equipment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 6px;
}
.gc-deal-equip-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  padding: 0.1rem 0.42rem;
  font-size: 0.68rem;
  font-weight: 500;
  color: var(--gc-text-muted);
  background: #f8fafc;
  border: 1px solid var(--gc-border);
  border-radius: 0.3rem;
  white-space: nowrap;
}
.gc-deal-equip-more {
  align-self: center;
  font-size: 0.66rem;
  font-weight: 600;
  color: var(--gc-text-muted);
}

/* Lot A — ligne "raison du verdict" sous la pastille. Pastille couleur
   (traffic-light) selon la gravité : info (vert) / warn (ambre) / incoherence
   (rouge). Discrète, une ligne, le détail complet va dans le title (tooltip). */
.gc-verdict-reason {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-top: 5px;
  font-size: 12px;
  line-height: 1.3;
  color: var(--gc-text-muted);
  cursor: default;
}
.gc-verdict-reason-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  flex: none;
}
.gc-verdict-reason-info .gc-verdict-reason-dot        { background: var(--gc-success); }
.gc-verdict-reason-warn .gc-verdict-reason-dot        { background: #d97706; }
.gc-verdict-reason-incoherence .gc-verdict-reason-dot { background: var(--gc-danger); }
.gc-verdict-reason-incoherence .gc-verdict-reason-text { color: #991b1b; }

/* ============================================================
   V2.1 — "Outil marchand" : score hero + chips contextuelles +
   blocs "Pourquoi" et "Risques". Toutes les classes sont
   additives — le MVP fonctionne sans elles. Activées par le
   flag RADAR_DEALS_V2 côté template.
   ============================================================ */

/* --- V2.2 : rééquilibrage grille (côté V2 uniquement, via data-v2="1").
   L'image reste à gauche, la colonne centrale prend plus de place pour
   absorber le wrapper "evidence" (Pourquoi + Risques côte à côte), la
   colonne droite est compactée pour laisser la lecture naturelle se
   faire de gauche à droite. MVP (sans data-v2) inchangé. */
.gc-deal-card[data-v2="1"] {
  grid-template-columns: 180px 1fr minmax(240px, 280px);
  gap: 1rem;
  padding: 0.85rem 1rem 0.85rem 1.3rem;
}
.gc-deal-card[data-v2="1"] .gc-deal-image-wrap {
  width: 176px;
  height: 126px;
}
.gc-deal-card[data-v2="1"] .gc-deal-side {
  padding-left: 1rem;
  gap: 0.55rem;
}

/* --- V2.2 final : micro-hiérarchie premium (subtile, jamais flashy).
   Le panneau "side" reçoit un fond légèrement teinté et une bordure
   intérieure pour se détacher visuellement de la colonne centrale.
   Le bloc actions est isolé du pricing par une fine séparation.
   La card globale gagne une ombre douce (1 px) pour décoller du fond
   sans tomber dans le glow / shadow lourd. Aucun gradient agressif. */
.gc-deal-card[data-v2="1"] {
  background: #fdfdfe;
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 2px 4px rgba(15, 23, 42, 0.02);
}
.gc-deal-card[data-v2="1"]:hover {
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
              0 4px 10px rgba(15, 23, 42, 0.04);
}
.gc-deal-card[data-v2="1"] .gc-deal-side {
  background: #f8fafc;
  border-radius: 0.45rem;
  padding: 0.7rem 0.85rem;
  border-left: 1px solid var(--gc-border-soft);
}
.gc-deal-card[data-v2="1"] .gc-deal-actions {
  margin-top: 0.15rem;
  padding-top: 0.45rem;
  border-top: 1px dashed var(--gc-border-soft);
}
/* Score hero plus compact en V2.2 : il existait déjà mais paraissait
   isolé du pricing. Réduction des paddings + alignement plus serré. */
.gc-deal-card[data-v2="1"] .gc-deal-score-hero {
  padding: 0.4rem 0.6rem;
  gap: 0.55rem;
}
.gc-deal-card[data-v2="1"] .gc-deal-score-hero-value {
  font-size: 1.25rem;
}
.gc-deal-card[data-v2="1"] .gc-deal-score-hero-tier-label {
  font-size: 0.66rem;
}
.gc-deal-card[data-v2="1"] .gc-deal-score-hero-tier-sub {
  font-size: 0.52rem;
}

/* --- Chips contextuelles (Crit'Air, 1ère main) — palette tons doux */
.gc-deal-ctx-chip {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 600;
  padding: 0.12rem 0.48rem;
  border-radius: 0.3rem;
  line-height: 1.25;
  white-space: nowrap;
  background: #f1f5f9;
  color: #334155;
  border: 1px solid var(--gc-border-soft);
}
.gc-deal-ctx-chip-critair-1,
.gc-deal-ctx-chip-critair-2 {
  background: #ecfdf5;
  color: #047857;
  border-color: var(--gc-success-border);
}
.gc-deal-ctx-chip-critair-3 {
  background: #fffbeb;
  color: #92400e;
  border-color: #fde68a;
}
.gc-deal-ctx-chip-critair-4,
.gc-deal-ctx-chip-critair-5 {
  background: #fee2e2;
  color: #991b1b;
  border-color: #fecaca;
}
.gc-deal-ctx-chip-firstowner {
  background: #eff6ff;
  color: #1e40af;
  border-color: #93c5fd;
}

/* --- V2.2 : Wrapper "evidence" — Pourquoi + Risques.
   Layout adaptatif piloté par data-risk-count :
   - 0 risque       → grid 1 col (Pourquoi pleine largeur)
   - 1 risque       → 1 col empilé (Risques compact dessous, voir
                      .gc-deal-risks-list-compact). Évite le demi-vide
                      horizontal des cards moyennes.
   - 2+ risques    → 2 cols côte à côte (cas riche).
   :only-child gère aussi le cas Risques seul. */
.gc-deal-evidence {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0.4rem;
  margin-top: 0.15rem;
}
.gc-deal-evidence[data-risk-count="2"],
.gc-deal-evidence[data-risk-count="3"],
.gc-deal-evidence[data-risk-count="4"] {
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
}
.gc-deal-evidence > :only-child {
  grid-column: 1 / -1;
}

/* --- Bloc "Pourquoi ce bon coup" (désaturé selon validation V2 §5) :
   titre vert + icône verte + texte gris pour ne pas saturer la zone
   verte du pricing. V2.2 : compacté (gap, padding réduits). */
.gc-deal-why {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.6rem;
  background: #f8fafc;
  border: 1px solid #e2e8f0;
  border-left: 3px solid var(--gc-success);
  border-radius: 0.4rem;
  min-width: 0;
}
.gc-deal-why-title {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-success);
  margin-bottom: 0.1rem;
}
.gc-deal-why-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.74rem;
  line-height: 1.3;
}
.gc-deal-why-icon {
  color: var(--gc-success);
  font-weight: 700;
  flex-shrink: 0;
}
.gc-deal-why-text {
  color: #334155;
  font-weight: 500;
}

/* --- V2.2 : Bloc "Risques / vigilance" passé en bullets verticaux
   (alignés sur "Pourquoi") plutôt que chips horizontales. Plus dense,
   plus lisible, plus outil métier. Palette ambre douce, jamais rouge
   agressif. */
.gc-deal-risks-list {
  display: flex;
  flex-direction: column;
  gap: 0.12rem;
  padding: 0.45rem 0.6rem;
  background: #fffbeb;
  border: 1px solid #fde68a;
  border-left: 3px solid var(--gc-warning);
  border-radius: 0.4rem;
  min-width: 0;
}
.gc-deal-risks-list-title {
  font-size: 0.58rem;
  font-weight: 700;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: var(--gc-warning);
  margin-bottom: 0.1rem;
}
.gc-deal-risks-list-row {
  display: flex;
  align-items: baseline;
  gap: 0.35rem;
  font-size: 0.74rem;
  line-height: 1.3;
}
.gc-deal-risks-list-icon {
  color: var(--gc-warning);
  font-weight: 700;
  flex-shrink: 0;
}
.gc-deal-risks-list-text {
  color: #78350f;
  font-weight: 500;
}

/* V2.2 final — mode compact (1 seul risque) : on aligne titre + bullet
   sur une seule ligne, padding réduit. Permet d'afficher le risque sans
   laisser une bande verticale ambre démesurée sous la Pourquoi pleine
   largeur. */
.gc-deal-risks-list-compact {
  flex-direction: row;
  align-items: baseline;
  gap: 0.6rem;
  padding: 0.32rem 0.55rem;
  flex-wrap: wrap;
}
.gc-deal-risks-list-compact .gc-deal-risks-list-title {
  margin-bottom: 0;
  flex-shrink: 0;
}
.gc-deal-risks-list-compact .gc-deal-risks-list-row {
  min-width: 0;
}

/* --- Score hero fusionné (tier + score) : remplace le tier_tag central
   + la ligne "Score radar X/100" du panneau MVP. Fond dégradé subtil
   pour rester sobre, accent indexé sur le tier. */
.gc-deal-score-hero {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.5rem 0.75rem;
  background: linear-gradient(180deg, #f8fafc 0%, #ffffff 80%);
  border: 1px solid var(--gc-border-soft);
  border-radius: 0.4rem;
}
.gc-deal-score-hero-exceptional {
  background: linear-gradient(180deg, #ecfdf5 0%, #ffffff 80%);
  border-color: var(--gc-success-border);
}
.gc-deal-score-hero-good {
  background: linear-gradient(180deg, #f0fdf4 0%, #ffffff 80%);
  border-color: #bbf7d0;
}
.gc-deal-score-hero-fair {
  background: linear-gradient(180deg, #fffbeb 0%, #ffffff 80%);
  border-color: #fde68a;
}
.gc-deal-score-hero-tier {
  display: flex;
  flex-direction: column;
  line-height: 1.15;
  min-width: 0;
}
.gc-deal-score-hero-tier-label {
  font-size: 0.7rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--gc-success);
}
.gc-deal-score-hero-exceptional .gc-deal-score-hero-tier-label {
  color: var(--gc-success);
}
.gc-deal-score-hero-good .gc-deal-score-hero-tier-label {
  color: #047857;
}
.gc-deal-score-hero-fair .gc-deal-score-hero-tier-label {
  color: var(--gc-warning);
}
.gc-deal-score-hero-tier-sub {
  font-size: 0.55rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--gc-text-subtle);
  opacity: 0.85;
}
.gc-deal-score-hero-value {
  font-size: 1.4rem;
  font-weight: 800;
  color: var(--gc-text);
  letter-spacing: -0.02em;
  margin-left: auto;
  white-space: nowrap;
}
.gc-deal-score-hero-suffix {
  font-size: 0.7rem;
  color: var(--gc-text-subtle);
  font-weight: 600;
}

/* Subline : ligne dense year · km · fuel · gearbox · power · location */
.gc-deal-subline-line {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Variant pro pour le pill vendeur */
.gc-deal-seller-pill-pro {
  background: #fef3c7;
  color: #92400e;
}

/* ---- Badge families v3 ---- */
.gc-badge-v3 {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.28rem 0.65rem;
  font-size: 0.74rem;
  font-weight: 600;
  border-radius: 6px;
  white-space: nowrap;
  line-height: 1.2;
}
.gc-badge-v3-hero {
  padding: 0.38rem 0.85rem;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.005em;
  box-shadow: 0 2px 6px rgba(5, 150, 105, 0.18);
}
.gc-badge-v3-sm {
  padding: 0.18rem 0.5rem;
  font-size: 0.68rem;
  font-weight: 500;
}
.gc-badge-v3-xs {
  padding: 0.12rem 0.42rem;
  font-size: 0.62rem;
  font-weight: 500;
  letter-spacing: 0.02em;
  opacity: 0.92;
}
/* Family 1 — Opportunity */
.gc-badge-opp-exceptional { background: #d1fae5; color: #047857; border: 1px solid #6ee7b7; }
.gc-badge-opp-good        { background: #ecfdf5; color: #047857; border: 1px solid #a7f3d0; }
.gc-badge-opp-fair        { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
.gc-badge-opp-weak        { background: #f1f5f9; color: #475569; border: 1px solid #e2e8f0; }
/* Family 2 — Price drop */
.gc-badge-pricedrop       { background: #dbeafe; color: #1e40af; border: 1px solid #93c5fd; }
/* Family 3 — Confidence */
.gc-badge-conf-reliable   { background: #f0fdf4; color: #047857; border: 1px solid #bbf7d0; }
.gc-badge-conf-verify     { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }
.gc-badge-conf-risky      { background: #fef2f2; color: #991b1b; border: 1px solid #fecaca; }
.gc-badge-urgent          { background: #fee2e2; color: #991b1b; border: 1px solid #fca5a5; box-shadow: 0 2px 6px rgba(220, 38, 38, 0.15); }
/* Family 4 — Pressure */
.gc-badge-pressure        { background: #fef3c7; color: #92400e; border: 1px solid #fde68a; }
/* Family 5 — Freshness */
.gc-badge-fresh-new       { background: #ecfeff; color: #155e75; border: 1px solid #a5f3fc; }

/* ---- Filter drawer (<dialog>) ---- */
.gc-filter-drawer {
  width: min(580px, 92vw);
  max-height: 90vh;
  padding: 0;
  border: none;
  border-radius: 16px;
  box-shadow: 0 25px 60px rgba(15, 23, 42, 0.30);
  background: #fff;
}
.gc-filter-drawer::backdrop {
  background: rgba(15, 23, 42, 0.42);
  backdrop-filter: blur(2px);
}
.gc-filter-drawer-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 1rem 1.25rem;
  border-bottom: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 16px 16px 0 0;
}
.gc-filter-drawer-title {
  font-size: 1.05rem;
  font-weight: 700;
  color: #0f172a;
}
.gc-filter-drawer-close {
  font-size: 1.2rem;
  background: none;
  border: none;
  color: #64748b;
  cursor: pointer;
  padding: 0.2rem 0.5rem;
  border-radius: 6px;
  transition: background 0.14s ease;
}
.gc-filter-drawer-close:hover { background: var(--gc-border); color: var(--gc-text); }
.gc-filter-drawer-body {
  padding: 1.25rem;
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 1rem;
  max-height: calc(90vh - 8rem);
  overflow-y: auto;
}
.gc-filter-drawer-body .gc-filter-cell-full { grid-column: 1 / -1; }
.gc-filter-drawer-footer {
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
  padding: 1rem 1.25rem;
  border-top: 1px solid #e2e8f0;
  background: #f8fafc;
  border-radius: 0 0 16px 16px;
}

/* ---- Responsive ---- */
@media (max-width: 1024px) {
  .gc-deal-card {
    grid-template-columns: 176px 1fr minmax(240px, 300px);
    gap: 0.95rem;
    padding: 0.8rem 0.95rem 0.8rem 1.35rem;
  }
  .gc-deal-image-wrap { width: 168px; height: 122px; }
  .gc-deal-title { font-size: 1.16rem; }
  .gc-deal-savings-amount { font-size: 1.35rem; }
  .gc-deal-pricing-seller .gc-deal-pricing-value { font-size: 1.25rem; }
}
@media (max-width: 768px) {
  .gc-kpi-grid {
    display: flex;
    overflow-x: auto;
    gap: 0.75rem;
    padding-bottom: 0.5rem;
    scroll-snap-type: x mandatory;
    margin: 0 -1rem 1.25rem;
    padding-left: 1rem;
    padding-right: 1rem;
  }
  .gc-kpi-clickable {
    flex: 0 0 220px;
    scroll-snap-align: start;
  }
  .gc-filter-bar {
    overflow-x: auto;
    flex-wrap: nowrap;
  }
  .gc-deal-card,
  .gc-deal-card[data-v2="1"] {
    grid-template-columns: 1fr;
    padding: 0;
    overflow: hidden;
    min-height: auto;
  }
  /* V2.2 — en mobile, on revient à un empilement vertical pour l'evidence
     (Pourquoi puis Risques). Le grid 2 cols devient illisible à 375 px. */
  .gc-deal-card[data-v2="1"] .gc-deal-evidence {
    grid-template-columns: 1fr;
    gap: 0.4rem;
  }
  .gc-deal-card[data-v2="1"] .gc-deal-image-wrap {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
  }
  .gc-deal-card::before { border-radius: 0; }
  .gc-deal-image-wrap {
    width: 100%;
    height: 0;
    padding-top: 56.25%;
    border-radius: 16px 16px 0 0;
  }
  .gc-deal-image, .gc-deal-image-placeholder {
    position: absolute; top: 0; left: 0; height: 100%;
  }
  .gc-deal-info, .gc-deal-trio, .gc-deal-side {
    padding: 0.95rem 1.1rem;
    border-left: none;
  }
  .gc-deal-info { gap: 0.4rem; }
  .gc-deal-trio, .gc-deal-side {
    border-top: 1px solid #eef2f6;
    padding-top: 0.95rem;
  }
  .gc-deal-title { font-size: 1.22rem; white-space: normal; }
  .gc-deal-savings-amount { font-size: 1.6rem; }
  .gc-deal-pricing-seller .gc-deal-pricing-value { font-size: 1.45rem; }
  /* A3 V1.1 — override total nowrap + ellipsis : sans ces 2 propriétés
     remises à neutre, le département (Vitrolles (13)) saute à l'ellipsis
     en mobile car overflow:hidden clippe la 2e ligne du wrap. La 2e
     règle reprend `.gc-deal-subline > span:first-child` exactement
     parce que sa spécificité (1 classe + 1 élément + 1 pseudo > 1 classe
     seule) override ce que ferait .gc-deal-subline-line seul. */
  .gc-deal-subline-line,
  .gc-deal-subline > span:first-child {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
  }
  .gc-filter-drawer-body { grid-template-columns: 1fr; }
  .gc-deals-recap { padding: 1rem 1.25rem; }
  .gc-deals-recap-value { font-size: 1.6rem; }
  .gc-deals-recap-meta { margin-left: 0; }
}

/* =================================================================
 * === Cockpit scan (refonte v2, 2026-05-13) ===
 * Section dédiée à la page /scan. Reuse strictly the gc-* tokens —
 * une seule variable nouvelle pour le terminal de logs.
 * ================================================================= */

:root {
  --gc-terminal-bg: #0f172a;        /* slate-900 */
  --gc-terminal-fg: #cbd5e1;        /* slate-300 */
  --gc-terminal-info: #cbd5e1;
  --gc-terminal-debug: #64748b;
  --gc-terminal-warn: #fb923c;      /* orange-400 */
  --gc-terminal-error: #f87171;     /* red-400 */
}

/* ---- Header sticky de statut système ---- */
.gc-scan-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: rgba(244, 246, 248, 0.88);
  backdrop-filter: saturate(180%) blur(8px);
  -webkit-backdrop-filter: saturate(180%) blur(8px);
  border-bottom: 1px solid rgb(226 232 240);
  margin: -1rem -1.25rem 1rem -1.25rem;
  padding: 0.75rem 1.25rem;
}
.gc-scan-header-inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
}
.gc-scan-header-left {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
  flex: 1;
}
.gc-scan-header-text {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
}
.gc-scan-header-status {
  font-size: 0.7rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: rgb(71 85 105);
}
.gc-scan-header-summary {
  font-size: 0.875rem;
  color: rgb(30 41 59);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 56vw;
}
.gc-scan-header-right {
  display: flex;
  align-items: center;
  gap: 1rem;
}
.gc-scan-header-meta {
  display: flex;
  flex-direction: column;
  gap: 0.125rem;
  text-align: right;
  font-size: 0.75rem;
}
.gc-scan-header-meta-row {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  justify-content: flex-end;
}
.gc-scan-header-meta-label {
  text-transform: uppercase;
  font-size: 0.65rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  color: rgb(100 116 139);
}
.gc-scan-header-meta-value {
  font-weight: 600;
  color: rgb(30 41 59);
}

/* ---- Tabs ---- */
.gc-tabs {
  display: flex;
  gap: 0.25rem;
  border-bottom: 1px solid rgb(226 232 240);
  margin: 0 0 1.25rem 0;
  overflow-x: auto;
  scrollbar-width: thin;
}
.gc-tab {
  appearance: none;
  background: transparent;
  border: none;
  padding: 0.625rem 1rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: rgb(71 85 105);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color 120ms ease-out, border-color 120ms ease-out, background 120ms ease-out;
  white-space: nowrap;
}
.gc-tab:hover {
  color: rgb(15 23 42);
  background: rgba(248, 250, 252, 0.6);
}
.gc-tab[aria-selected="true"] {
  color: rgb(234 88 12);
  border-bottom-color: rgb(234 88 12);
  font-weight: 600;
}
.gc-tab[aria-selected="true"]:hover {
  color: rgb(194 65 12);
  background: rgba(255, 247, 237, 0.5);
}
.gc-tab:focus-visible {
  outline: 2px solid rgb(234 88 12);
  outline-offset: 2px;
  border-radius: 4px;
}

/* Hide non-active tab panels (also handled by [hidden] attribute) */
[data-tab-panel][hidden] { display: none; }

/* ---- Tags marque (Task 5) ---- */
.gc-tag-brand {
  display: inline-flex;
  align-items: center;
  padding: 0.3rem 0.7rem;
  border-radius: 999px;
  font-size: 0.8125rem;
  font-weight: 500;
  background: rgb(241 245 249);
  color: rgb(51 65 85);
  cursor: pointer;
  user-select: none;
  border: 1px solid transparent;
  transition: transform 150ms ease-out, background 150ms ease-out,
              color 150ms ease-out, box-shadow 150ms ease-out;
}
.gc-tag-brand:hover {
  transform: translateY(-1px);
  box-shadow: 0 1px 3px rgba(15, 23, 42, 0.1);
  background: rgb(226 232 240);
}
.gc-tag-brand[data-selected="true"] {
  background: rgb(234 88 12);
  color: white;
}
.gc-tag-brand[data-selected="true"]:hover {
  background: rgb(194 65 12);
}
.gc-tag-brand:focus-visible {
  outline: 2px solid rgb(234 88 12);
  outline-offset: 2px;
}

/* ---- Accordéon "Paramètres avancés" ---- */
.gc-accordion {
  border: 1px solid rgb(226 232 240);
  border-radius: 0.5rem;
  overflow: hidden;
  background: white;
}
.gc-accordion-toggle {
  width: 100%;
  text-align: left;
  padding: 0.75rem 1rem;
  background: rgb(248 250 252);
  border: none;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-weight: 600;
  color: rgb(30 41 59);
  list-style: none;
}
.gc-accordion-toggle::-webkit-details-marker { display: none; }
.gc-accordion-toggle::after {
  content: "▼";
  font-size: 0.625rem;
  color: rgb(100 116 139);
  transition: transform 150ms ease-out;
}
.gc-accordion[open] .gc-accordion-toggle::after {
  transform: rotate(180deg);
}
.gc-accordion-toggle:hover {
  background: rgb(241 245 249);
}
.gc-accordion-body {
  padding: 1rem;
  border-top: 1px solid rgb(226 232 240);
}

/* ---- Carte repliable (<details> stylé en gc-card) ---- */
/* Utilisée pour les cartes "Session courante" et "Historique persistant"
   de l'onglet /scan → Historique : fermées par défaut, dépliage au clic
   sur le header. Sépare le pattern de gc-accordion qui sert aux blocs
   "Paramètres avancés" denses. */
details.gc-collapsible > summary {
  list-style: none;
  cursor: pointer;
  user-select: none;
}
details.gc-collapsible > summary::-webkit-details-marker { display: none; }
.gc-collapsible-summary {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  transition: background-color 120ms ease-out;
}
.gc-collapsible-summary:hover {
  background: rgb(248 250 252);
}
.gc-collapsible-chevron {
  flex-shrink: 0;
  font-size: 0.625rem;
  color: rgb(148 163 184);
  transition: transform 150ms ease-out;
  display: inline-block;
}
details.gc-collapsible[open] .gc-collapsible-chevron {
  transform: rotate(180deg);
}

/* ---- Terminal de logs (Task 6) ---- */
.gc-terminal {
  background: var(--gc-terminal-bg);
  color: var(--gc-terminal-fg);
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, Consolas, monospace;
  font-size: 0.8125rem;
  line-height: 1.5;
  padding: 0.75rem 1rem;
  border-radius: 0 0 0.5rem 0.5rem;
  height: calc(100vh - 320px);
  min-height: 360px;
  overflow-y: auto;
  scroll-behavior: smooth;
}
.gc-terminal-line {
  display: flex;
  gap: 0.75rem;
  align-items: baseline;
  padding: 0.125rem 0;
}
.gc-terminal-line .t {
  color: rgb(100 116 139);
  flex-shrink: 0;
  font-variant-numeric: tabular-nums;
}
.gc-terminal-line .lvl {
  display: inline-block;
  min-width: 3.25rem;
  font-weight: 600;
  flex-shrink: 0;
  font-size: 0.7rem;
  letter-spacing: 0.04em;
}
.gc-terminal-line .lvl-info  { color: var(--gc-terminal-info); }
.gc-terminal-line .lvl-debug { color: var(--gc-terminal-debug); }
.gc-terminal-line .lvl-warn  { color: var(--gc-terminal-warn); }
.gc-terminal-line .lvl-error { color: var(--gc-terminal-error); }
.gc-terminal-line .msg {
  white-space: pre-wrap;
  word-break: break-word;
  flex: 1;
}
.gc-terminal-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  background: rgb(248 250 252);
  border: 1px solid rgb(226 232 240);
  border-bottom: none;
  border-radius: 0.5rem 0.5rem 0 0;
  flex-wrap: wrap;
}
.gc-terminal-toolbar [data-active="false"] {
  opacity: 0.42;
}
.gc-terminal-toolbar [data-active="true"] {
  opacity: 1;
}

/* ---- Drawer (Détail historique, Task 9) ---- */
.gc-drawer {
  border: none;
  padding: 0;
  background: transparent;
  max-width: none;
  max-height: none;
}
.gc-drawer[open] {
  position: fixed;
  inset: 0;
  width: 100vw;
  height: 100vh;
}
.gc-drawer::backdrop {
  background: rgba(15, 23, 42, 0.45);
}
.gc-drawer-panel {
  position: absolute;
  top: 0;
  right: 0;
  height: 100vh;
  width: min(480px, 100vw);
  background: white;
  box-shadow: -8px 0 24px rgba(15, 23, 42, 0.12);
  overflow-y: auto;
  padding: 1.5rem;
}
.gc-drawer.is-expanded .gc-drawer-panel {
  width: min(1120px, calc(100vw - 1.5rem));
}
.planning-log-console {
  max-height: min(58vh, 34rem);
}
.gc-drawer.is-expanded .planning-log-console {
  max-height: calc(100vh - 15rem);
}

/* ---- Phase 2 (boutons / cartes désactivés pédagogiquement) ---- */
.gc-phase2 {
  position: relative;
}
.gc-phase2-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 0.25rem;
  background: rgb(254 215 170);
  color: rgb(154 52 18);
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
button.gc-phase2[disabled],
.gc-phase2 button[disabled] {
  cursor: not-allowed;
  opacity: 0.55;
}

/* ---- Dot pulse (Task 10 — utilisé au démarrage de scan) ---- */
.gc-dot-pulse {
  animation: gc-dot-pulse 1.4s ease-in-out 2;
}
@keyframes gc-dot-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(234, 88, 12, 0.55); }
  50%      { box-shadow: 0 0 0 8px rgba(234, 88, 12, 0); }
}

/* ---- Responsive < lg ---- */
@media (max-width: 1023.98px) {
  .gc-scan-header-summary { max-width: 40vw; }
  .gc-scan-header-meta { display: none; }
  .gc-terminal { height: calc(100vh - 260px); min-height: 280px; }
}


/* ---- Maintenance : badges renforcés et état loading ---- */
[data-test="maintenance-healthcheck"] .gc-badge {
  /* OK / WARNING / ERROR — contraste élevé sur les badges de probe */
  font-weight: 700;
  font-size: 0.7rem;
  padding: 0.2rem 0.5rem;
}
.maintenance-action-btn:disabled {
  cursor: progress;
  opacity: 0.7;
}
[data-maintenance-status] {
  min-height: 1.4em;   /* évite le flicker quand on passe de "running" à "ok" */
}

/* Flash visuel quand un badge healthcheck vient d'être actualisé.
   La classe est posée par scan-cockpit.js puis retirée après l'anim. */
[data-test="maintenance-healthcheck"] .gc-health-flash {
  animation: gc-health-flash 700ms ease-out 1;
}
@keyframes gc-health-flash {
  0%   { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0.65); }
  60%  { box-shadow: 0 0 0 6px rgba(59, 130, 246, 0); }
  100% { box-shadow: 0 0 0 0 rgba(59, 130, 246, 0); }
}

/* ---- Sondes healthcheck — layout par carte ------------------------- */
.gc-health-probe {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  padding: 0.6rem 0.75rem;
  background: #ffffff;
  transition: border-color 120ms ease, background 120ms ease;
}
.gc-health-probe-name {
  font-size: 0.95rem;
  font-weight: 600;
  color: #0f172a;
}
.gc-health-detail {
  font-size: 0.85rem;
  color: #1e293b;     /* presque noir — on a besoin que ça se voie */
  line-height: 1.4;
}
.gc-health-detail::before {
  /* Petite barre verticale pour ancrer visuellement le détail à gauche
     du nom et le rendre tangiblement "actif", même quand tout va bien. */
  content: "";
  display: inline-block;
  width: 3px;
  height: 0.9em;
  vertical-align: -2px;
  margin-right: 0.45rem;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
}
.gc-health-probe[data-status="ok"]      .gc-health-detail::before { background: #059669; opacity: 0.9; }
.gc-health-probe[data-status="warning"] .gc-health-detail::before { background: #b45309; opacity: 0.9; }
.gc-health-probe[data-status="error"]   .gc-health-detail::before { background: #b91c1c; opacity: 0.9; }
.gc-health-probe[data-status="warning"] { border-color: #fde68a; background: #fffbeb; }
.gc-health-probe[data-status="error"]   { border-color: #fecaca; background: #fef2f2; }

/* Recommandation : volontairement très visible (border-left épais,
   icône, fond contrasté) parce que c'est la seule info "action requise". */
.gc-health-reco {
  display: flex;
  gap: 0.5rem;
  align-items: flex-start;
  font-size: 0.82rem;
  font-weight: 500;
  line-height: 1.4;
  padding: 0.5rem 0.65rem;
  border-radius: 0.35rem;
  border-left: 4px solid #b45309;
  background: #fef3c7;
  color: #78350f;
}
.gc-health-reco::before {
  content: "⚠";
  font-size: 1rem;
  line-height: 1;
  flex: none;
  margin-top: 0.1em;
}
.gc-health-probe[data-status="error"] .gc-health-reco {
  border-left-color: #b91c1c;
  background: #fee2e2;
  color: #7f1d1d;
}

/* Skeleton — placeholders d'attente, JAMAIS le caractère "—" pour les sondes OK.
   Pulse subtile pour signaler "en cours". */
.gc-health-skeleton-badge {
  background: #e2e8f0 !important;
  color: #475569 !important;
  animation: gc-health-skeleton-pulse 1.2s ease-in-out infinite;
}
.gc-health-skeleton-line {
  color: #94a3b8 !important;
  font-style: italic;
  animation: gc-health-skeleton-pulse 1.2s ease-in-out infinite;
}
@keyframes gc-health-skeleton-pulse {
  0%, 100% { opacity: 1; }
  50%      { opacity: 0.55; }
}

/* Loading global de la carte : applique le skeleton-look sur tout. */
[data-test="maintenance-healthcheck"][data-loading="true"] [data-health-probe] {
  border-style: dashed;
}
[data-test="maintenance-healthcheck"][data-loading="true"] [data-health-badge],
[data-test="maintenance-healthcheck"][data-loading="true"] [data-health-detail] {
  animation: gc-health-skeleton-pulse 1.0s ease-in-out infinite;
}

/* Résumé global haut-de-carte — 3 sec, l'utilisateur doit lire l'état. */
.gc-health-summary {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.75rem;
  border-radius: 0.4rem;
  border: 1px solid transparent;
  font-size: 0.9rem;
  font-weight: 600;
  line-height: 1.3;
}
.gc-health-summary-icon {
  font-size: 1.05rem;
  line-height: 1;
  flex: none;
}
.gc-health-summary-text {
  flex: 1;
}
.gc-health-summary-loading {
  border-color: #cbd5e1;
  background: #f1f5f9;
  color: #475569;
}
.gc-health-summary-ok {
  border-color: #a7f3d0;
  background: #ecfdf5;
  color: #047857;
}
.gc-health-summary-warning {
  border-color: #fde68a;
  background: #fffbeb;
  color: #b45309;
}
.gc-health-summary-error {
  border-color: #fecaca;
  background: #fef2f2;
  color: #b91c1c;
}

/* ---- Badges d'exposition réseau (Maintenance) ----
   - INTERNE          : 100 % DB / FS local — vert
   - INTERNET POSSIBLE: peut sortir vers Leboncoin (CDN) — ambre
   - RISQUE ANTI-BOT  : ouvre des pages détail/SERP → DataDome — rouge

   Ces badges sont volontairement distincts des badges de statut
   (success/warning/error) pour ne pas créer d'ambiguïté visuelle. */
.gc-net-badge {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.15rem 0.55rem;
  border-radius: 0.3rem;
  font-size: 0.65rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border: 1px solid transparent;
  white-space: nowrap;
}
.gc-net-badge::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: currentColor;
  flex: none;
}
.gc-net-internal {
  background: #ecfdf5;
  color: #047857;
  border-color: #a7f3d0;
}
.gc-net-online {
  background: #fffbeb;
  color: #b45309;
  border-color: #fde68a;
}
.gc-net-antibot {
  background: #fef2f2;
  color: #b91c1c;
  border-color: #fecaca;
}

/* KPIs cliquables — raccourci vers une carte Maintenance. Reset le style
   button du navigateur et applique le même hover doux que les accordions. */
.gc-kpi-jumpto {
  display: block;
  width: 100%;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 0.5rem;
  padding: 0.25rem 0.5rem;
  cursor: pointer;
  transition: background 0.12s ease-out, border-color 0.12s ease-out;
  font: inherit;
  color: inherit;
}
.gc-kpi-jumpto:hover {
  background: rgba(15, 23, 42, 0.04);
  border-color: rgba(15, 23, 42, 0.08);
}
.gc-kpi-jumpto:focus-visible {
  outline: 2px solid var(--gc-accent-orange);
  outline-offset: 1px;
}

/* === Fin cockpit scan === */

/* ===== Calendrier opérationnel (onglet Planification) ===== */
.cal-wrap{background:#fff;border:1px solid var(--gc-border);border-radius:.75rem;overflow:hidden}
.cal-toolbar{display:flex;align-items:center;gap:12px;padding:12px 16px;border-bottom:1px solid var(--gc-border)}
.cal-title{font-size:15px;font-weight:600;color:var(--gc-navy)}
.cal-spacer{flex:1}
.cal-seg{display:flex;border:1px solid var(--gc-border);border-radius:7px;overflow:hidden}
.cal-seg button{border:0;background:#fff;padding:6px 14px;font-size:13px;cursor:pointer;color:var(--gc-text-muted)}
.cal-seg button.on{background:var(--gc-navy);color:#fff;font-weight:600}
.cal-grid{display:grid;grid-template-columns:54px repeat(7,1fr);max-height:560px;overflow-y:auto;position:relative}
.cal-grid.day-mode{grid-template-columns:54px 1fr}
.cal-colhead{position:sticky;top:0;z-index:3;background:#fff;border-bottom:1px solid var(--gc-border);padding:8px 6px;text-align:center;font-size:12px}
.cal-colhead .dow{color:var(--gc-text-muted);text-transform:uppercase;font-size:10px}
.cal-colhead .dnum{font-size:16px;font-weight:600;color:var(--gc-navy);margin-top:2px}
.cal-colhead.today .dnum{background:var(--gc-accent-orange);color:#fff;border-radius:50%;width:26px;height:26px;line-height:26px;display:inline-block}
.cal-colhead.wknd,.cal-col.wknd{background:#fafbfc}
.cal-gut{position:sticky;left:0;z-index:2;background:#fff;border-right:1px solid var(--gc-border-soft)}
.cal-hour{height:46px;border-bottom:1px solid var(--gc-border-soft);font-size:10px;color:var(--gc-text-muted);text-align:right;padding:2px 6px 0 0}
.cal-col{position:relative;border-right:1px solid var(--gc-border-soft)}
.cal-col.today{background:linear-gradient(180deg, rgba(249,115,22,.10) 0%, rgba(249,115,22,.06) 100%)}
.cal-col.today::before{content:"";position:absolute;top:0;bottom:0;left:0;right:0;border-left:2px solid rgba(249,115,22,.45);border-right:2px solid rgba(249,115,22,.20);pointer-events:none;z-index:0}
.cal-col.today .cal-cell{background:transparent}
.cal-cell{height:46px;border-bottom:1px solid var(--gc-border-soft)}
.cal-now{position:absolute;left:0;right:0;height:0;border-top:2px solid var(--gc-accent-orange);z-index:1;pointer-events:none}
.cal-now::before{content:"";position:absolute;left:-4px;top:-4px;width:8px;height:8px;border-radius:50%;background:var(--gc-accent-orange);box-shadow:0 0 0 2px #fff}
.cal-blk{position:absolute;left:4px;right:4px;border-radius:7px;padding:5px 7px;font-size:11px;overflow:hidden;cursor:pointer;box-shadow:0 1px 2px rgba(15,23,42,.08)}
.cal-blk .bt,.cal-blk .bm,.cal-blk .bb{position:relative;z-index:2}
.cal-blk .bt{font-weight:600;line-height:1.15;margin-bottom:2px}
.cal-blk .bm{opacity:.85;font-size:10px}
.cal-blk .bb{display:inline-block;margin-top:4px;font-size:9px;padding:1px 5px;border-radius:999px;font-weight:600}
.cal-blk-sched{background:var(--gc-accent-orange-soft);border:1px solid #fdba74;color:#9a3412}
.cal-blk-run{background:var(--gc-success-bg);border:1px solid #6ee7b7;color:#065f46}
.cal-blk-done{background:#f8fafc;border:1px solid var(--gc-border);color:var(--gc-text-muted)}
.cal-blk-past{background:#e5e7eb;border:1px solid #cbd5e1;color:#475569}
.cal-blk-past::before{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:#94a3b8}
.cal-blk-past .bb{background:#cbd5e1;color:#334155}
.cal-blk-skip{background:var(--gc-warning-bg);border:1px dashed #f59e0b;color:#92400e}
.cal-blk-conf{background:var(--gc-danger-bg);border:2px solid #f87171;color:#991b1b}
.cal-blk-sys{background:var(--gc-navy);border:1px solid var(--gc-navy);color:#cbd5e1}
.cal-blk-worker{background:#dbeafe;border:1px solid #93c5fd;color:#1d4ed8}
.cal-blk-worker .bb{background:#bfdbfe;color:#1e3a8a}
.cal-blk-delta{position:absolute;left:0;right:0;border-radius:0;z-index:1;pointer-events:none}
.cal-blk-delta.early{background:rgba(16,185,129,.45)}
.cal-blk-delta.late{background:rgba(239,68,68,.50)}
.cal-nowline{position:absolute;left:0;right:0;height:2px;background:var(--gc-accent-orange);z-index:4}
.cal-legend{display:flex;flex-wrap:wrap;gap:14px;padding:10px 16px;border-top:1px solid var(--gc-border);font-size:11px;color:var(--gc-text-muted)}
.cal-legend span{display:flex;align-items:center;gap:5px}
.cal-legend .sw{width:11px;height:11px;border-radius:3px;display:inline-block}
#schedule-modal #sched-campaign-form-submit{display:none}
/* Panneau d'actions au clic sur un bloc planifié (remplace prompt natif) */
.cal-panel{width:min(420px,92vw);padding:0;border:none;border-radius:14px;box-shadow:0 24px 60px rgba(15,23,42,.28);background:#fff;color:var(--gc-text)}
.cal-panel::backdrop{background:rgba(15,23,42,.42);backdrop-filter:blur(2px)}
.cal-panel-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;padding:16px 18px;border-bottom:1px solid var(--gc-border)}
.cal-panel-title{font-size:15px;font-weight:700;color:var(--gc-navy);line-height:1.25}
.cal-panel-sub{font-size:11px;text-transform:uppercase;letter-spacing:.04em;color:var(--gc-text-muted);margin-top:3px}
.cal-panel-body{padding:16px 18px}
.cal-panel-meta{display:grid;grid-template-columns:1fr 1fr;gap:10px 16px;margin:0}
.cal-panel-meta>div{min-width:0}
.cal-panel-meta dt{font-size:10px;text-transform:uppercase;letter-spacing:.04em;color:var(--gc-text-muted)}
.cal-panel-meta dd{margin:2px 0 0;font-size:13px;font-weight:600;color:var(--gc-text);overflow-wrap:anywhere}
.cal-past-only{border:1px solid var(--gc-border);background:#f8fafc;border-radius:10px;padding:14px}
.cal-past-kicker{font-size:10px;text-transform:uppercase;letter-spacing:.08em;color:var(--gc-text-muted);font-weight:700}
.cal-past-title{margin-top:4px;font-size:16px;font-weight:800;color:var(--gc-navy)}
.cal-past-text{margin-top:6px;font-size:13px;line-height:1.45;color:var(--gc-text-muted)}
.cal-panel-edit{margin-top:16px;padding-top:14px;border-top:1px solid var(--gc-border)}
.cal-panel-edit-title{font-size:12px;font-weight:700;color:var(--gc-navy);text-transform:uppercase;letter-spacing:.04em}
.cal-panel-msg{margin-top:12px;font-size:12px;color:var(--gc-text-muted);min-height:1em}
.cal-panel-msg.err{color:#b91c1c}
.cal-panel-msg.ok{color:#047857}
.cal-panel-foot{display:flex;align-items:center;gap:8px;padding:14px 18px;border-top:1px solid var(--gc-border);background:#f8fafc;border-radius:0 0 14px 14px}
.cal-panel-meta.hidden,.cal-panel-edit.hidden,.cal-panel-foot.hidden,.cal-past-only.hidden,.cal-panel [hidden]{display:none!important}
.cal-panel-foot-spacer{flex:1}
.cal-panel-del{border:1px solid transparent;background:none;color:#b91c1c;font-size:13px;padding:7px 12px;border-radius:7px;cursor:pointer;transition:background .14s ease,border-color .14s ease}
.cal-panel-del:hover{background:var(--gc-danger-bg);border-color:#fca5a5}
.cal-panel-del.confirm{background:#dc2626;color:#fff;font-weight:600;border-color:#dc2626}
/* Bloc hygiène anti-bot — neutre/bleuté, distinct des scans */
.cal-blk-hyg{background:#eef2f7;border:1px solid #94a3b8;color:#334155}
.cal-blk-hyg .bb{background:#cbd5e1;color:#1e293b}

/* Menu de création rapide au clic sur un créneau du calendrier */
.cal-newpop {
  position: fixed;
  z-index: 60;
  min-width: 184px;
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  box-shadow: 0 10px 30px rgba(15, 23, 42, 0.18);
  padding: 8px;
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.cal-newpop[hidden] { display: none; }
.cal-newpop-head {
  font-size: 12px;
  color: #64748b;
  font-weight: 600;
  padding: 2px 4px 4px;
}
.cal-newpop button { width: 100%; justify-content: flex-start; }

/* === a-confirmer PR4 — palette purple sobre + nouvelles classes === */

/* Override palette ancienne brillante → sobre/technique */
.gc-card--confirmable               { border-left-color: #7c3aed !important; }
.gc-confirmable-tags .gc-badge-purple { background:#ede9fe; color:#6b21a8; }

/* Badge type d'hypothèse promu (palier 2) */
.gc-badge-hypothesis-kind {
  display: inline-flex; align-items: center;
  padding: 0.3rem 0.7rem;
  font-size: 0.95rem; font-weight: 700;
  letter-spacing: 0.04em;
  background: #ede9fe; color: #6b21a8;
  border-radius: 6px;
  text-transform: uppercase;
}

/* Badge comparables coloré selon densité */
.gc-badge-amber { background:#fef3c7; color:#78350f; }
.gc-badge-blue  { background:#dbeafe; color:#1e40af; }
.gc-badge-green { background:#dcfce7; color:#166534; }

/* Badge fraîcheur ultra compact */
.gc-confirmable-fresh {
  display: inline-block; padding: 0.2rem 0.5rem;
  font-size: 0.75rem; font-weight: 500;
  background: #f1f5f9; color: #475569;
  border-radius: 4px;
}

/* Bloc « Pourquoi ici » dominant */
.gc-confirmable-why {
  margin: 0.7rem 0;
  padding: 0.7rem 0.9rem;
  background: #f8fafc;
  border-left: 3px solid #7c3aed;
  border-radius: 0 6px 6px 0;
}
.gc-confirmable-why-label {
  font-size: 0.7rem; font-weight: 700;
  letter-spacing: 0.08em;
  color: #6b21a8; margin-bottom: 0.3rem;
}
.gc-confirmable-why-evidence {
  font-size: 0.92rem; font-weight: 600;
  color: #0f172a; margin: 0.2rem 0;
}
.gc-confirmable-why-hypo {
  font-size: 0.85rem; color: #334155;
  margin: 0.2rem 0;
}
.gc-confirmable-why-hypo strong {
  background: #ede9fe; padding: 0 0.3rem;
  border-radius: 3px; font-weight: 600;
}
.gc-confirmable-why-tail {
  font-size: 0.8rem; color: #15803d;
  font-style: italic; margin: 0.3rem 0 0;
}

/* Layout carte : image gauche 1:1 + corps droit */
.gc-card--confirmable {
  display: grid;
  grid-template-columns: 140px 1fr;
  gap: 1rem;
}
.gc-card--confirmable .gc-banner-warning {
  grid-column: 1 / -1;
}
.gc-card--confirmable .gc-confirmable-image-wrap {
  width: 140px; height: 140px;
  background: #f1f5f9; border-radius: 6px;
  overflow: hidden;
  display: flex; align-items: center; justify-content: center;
}
.gc-card--confirmable .gc-confirmable-image-wrap img {
  width: 100%; height: 100%; object-fit: cover;
}

/* Ligne marché subordonnée (palier 5c) */
.gc-confirmable-market {
  font-size: 0.85rem; color: #334155;
  margin: 0.4rem 0;
}
.gc-confirmable-market-disc {
  font-size: 0.9rem; font-weight: 700;
  color: #15803d;
}

/* Bouton « Valider la piste » primary purple sobre */
.gc-btn-primary--confirmable {
  background: #7c3aed; color: #fff;
  border: none; padding: 0.45rem 0.9rem;
  border-radius: 6px; font-weight: 600;
  cursor: pointer;
}
.gc-btn-primary--confirmable:hover { background: #6d28d9; }

@media (max-width: 600px) {
  .gc-card--confirmable {
    grid-template-columns: 1fr;
  }
  .gc-card--confirmable .gc-confirmable-image-wrap {
    width: 100%; height: 200px;
  }
}

/* === a-confirmer PR4 — polish premium (KPI strip centring + card breath) === */

/* KPI strip : centrage parfait des 3 cellules + hiérarchie aérée.
   Scope strict sous .gc-kpi-band pour ne pas impacter le dashboard 4-col. */
.gc-kpi-band .gc-kpi-clickable {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 1.6rem 1.4rem;
  gap: 0.55rem;
}
.gc-kpi-band .gc-kpi-icon {
  justify-content: center;       /* le flex interne icon+label centré */
  margin-bottom: 0;              /* l'aération vient du gap parent */
}
.gc-kpi-band .gc-kpi-clickable-value {
  font-size: 2.4rem;             /* +0.4rem : présence du chiffre */
  line-height: 1.05;
}
.gc-kpi-band .gc-kpi-clickable-hint {
  margin-top: 0;                 /* l'aération vient du gap parent */
  font-size: 0.78rem;
}

/* Card confirmable : image aérée à gauche + spacing interne premium.
   Padding card + neg-margin banner = banner flush, contenu inset. */
.gc-card--confirmable {
  padding: 0 1.2rem 1.25rem;
  gap: 1.2rem;
}
.gc-card--confirmable .gc-banner-warning {
  margin: 0 -1.2rem 0.5rem;
}
.gc-card--confirmable .gc-confirmable-image-wrap {
  align-self: center;            /* centrage vertical par rapport au corps */
}
.gc-card--confirmable .gc-confirmable-why {
  margin: 0.9rem 0;              /* aération avant/après bloc dominant */
  padding: 0.85rem 1rem;
}
.gc-card--confirmable .gc-card-actions {
  margin-top: 0.9rem;             /* respire avant les boutons */
}


/* ===========================================================================
   Phase 4 Palier 1 — Debug Stage 2 (shadow lecture seule).
   Visible UNIQUEMENT quand ?debug_stage2=1. Discret, sans casser le design
   premium. Aucun impact en mode normal.
   =========================================================================== */
.gc-debug-v2-banner {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0.75rem 0 1rem;
  padding: 0.6rem 1rem;
  background: #fff7ed;
  border: 1px dashed #fb923c;
  border-radius: 0.5rem;
  color: #7c2d12;
  font-size: 0.875rem;
}
.gc-debug-v2-badge {
  display: inline-block;
  padding: 0.15rem 0.55rem;
  background: #ea580c;
  color: #fff;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}
.gc-debug-v2-text { line-height: 1.4; }

.gc-debug-v2-block {
  margin-top: 0.75rem;
  padding: 0.6rem 0.75rem;
  background: #f8fafc;
  border: 1px dashed #cbd5e1;
  border-radius: 0.5rem;
  font-size: 0.78rem;
  color: #334155;
}
.gc-debug-v2-title {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 0.4rem;
}
.gc-debug-v2-badge-sm {
  padding: 0.08rem 0.4rem;
  font-size: 0.65rem;
}
.gc-debug-v2-sub {
  color: #64748b;
  font-size: 0.7rem;
  font-style: italic;
}
.gc-debug-v2-grid {
  width: 100%;
  border-collapse: collapse;
  table-layout: fixed;
}
.gc-debug-v2-grid th,
.gc-debug-v2-grid td {
  padding: 0.2rem 0.35rem;
  vertical-align: top;
  text-align: left;
}
.gc-debug-v2-grid th {
  color: #64748b;
  font-weight: 500;
  width: 22%;
}
.gc-debug-v2-grid td { color: #0f172a; font-weight: 600; }
.gc-debug-v2-grid tr + tr th,
.gc-debug-v2-grid tr + tr td { border-top: 1px solid #e2e8f0; }

/* ====================================================================== *
 *  CARTE /deals — « fiche de décision » v7 (refonte rendu, append final)  *
 *  Placée en fin de fichier pour gagner la cascade sur les règles MVP/V2. *
 *  Palette maquette : vert économie #166534/#dcfce7/#86efac, bleu marché  *
 *  #2563eb, orange action #ff5a00, vigilance #c2410c/#fff7ed/#fdba74.     *
 * ====================================================================== */

/* Grille 4 colonnes : image | infos | prix | score+actions. */
.gc-deal-card,
.gc-deal-card[data-v2="1"] {
  grid-template-columns: 200px minmax(0, 1fr) 232px 186px;
  gap: 1rem;
  align-items: stretch;
  padding: 0.9rem 1rem 0.9rem 1.3rem;
  background: #ffffff;
  border: 1px solid #e5e7eb;
  border-radius: 0.9rem;
}

/* Séparateurs verticaux légers entre centre|prix et prix|actions. */
.gc-deal-card .gc-deal-pricing,
.gc-deal-card .gc-deal-side {
  border-left: 1px solid #e5e7eb;
  padding-left: 1rem;
}

/* ---- Colonne 1 : image + badges sombres semi-transparents ---- */
.gc-deal-card .gc-deal-image-wrap,
.gc-deal-card[data-v2="1"] .gc-deal-image-wrap {
  width: 200px;
  height: 146px;
  border-radius: 0.6rem;
  align-self: center;
}
.gc-deal-card .gc-deal-img-chip {
  font-size: 0.7rem;
  background: rgba(15, 23, 42, 0.72);
  border-radius: 0.5rem;
  padding: 0.22rem 0.46rem;
}

/* ---- Colonne 2 : infos ---- */
.gc-deal-card .gc-deal-info {
  gap: 0.4rem;
  justify-content: flex-start;
  padding-top: 0.1rem;
}
/* Badge opportunité — toujours visible (vert maquette). */
.gc-deal-opp-badge {
  align-self: flex-start;
  display: inline-block;
  text-transform: uppercase;
  font-size: 0.66rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 0.22rem 0.5rem;
  border-radius: 0.4rem;
  color: #166534;
  background: #dcfce7;
  border: 1px solid #86efac;
}
.gc-deal-opp-badge-good { color: #15803d; background: #f0fdf4; border-color: #bbf7d0; }
.gc-deal-opp-badge-fair { color: #1d4ed8; background: #eff6ff; border-color: #bfdbfe; }
.gc-deal-card .gc-deal-title {
  font-size: 1.2rem;
  font-weight: 800;
  color: #0f172a;
  line-height: 1.15;
  margin: 0;
}
.gc-deal-card .gc-deal-finition {
  font-size: 0.8rem;
  font-weight: 600;
  color: #64748b;
}

/* Mini-chips caractéristiques à pictos. */
.gc-deal-specs {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0.1rem;
}
.gc-deal-spec-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #e2e8f0;
  border-radius: 0.4rem;
  padding: 0.18rem 0.42rem;
  white-space: nowrap;
}
.gc-spec-ico { font-size: 0.78rem; line-height: 1; filter: saturate(0.85); }

/* Localisation + vendeur. */
.gc-deal-meta-line {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.76rem;
  color: #64748b;
  font-weight: 600;
}
.gc-deal-loc { display: inline-flex; align-items: center; gap: 0.2rem; }
.gc-deal-card .gc-deal-seller-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.2rem;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 0.12rem 0.46rem;
  border-radius: 999px;
  color: #5b21b6;
  background: #ede9fe;
  border: 1px solid #ddd6fe;
}
.gc-deal-card .gc-deal-seller-pill-pro {
  color: #c2410c;
  background: #ffedd5;
  border-color: #fdba74;
}

/* Blocs « Équipements » / « Points de vigilance » avec micro-caption. */
.gc-deal-block { margin-top: 0.15rem; }
.gc-deal-block-cap {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #94a3b8;
  margin-bottom: 0.22rem;
}
.gc-deal-card .gc-deal-equipment {
  display: flex;
  flex-wrap: wrap;
  gap: 0.3rem;
  margin-top: 0;
}
.gc-deal-card .gc-deal-equip-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  color: #334155;
  background: #f1f5f9;
  border: 1px solid #cbd5e1;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
  white-space: nowrap;
}
.gc-equip-check { color: #16a34a; font-weight: 800; }
.gc-deal-card .gc-deal-equip-more {
  display: inline-flex;
  align-items: center;
  font-size: 0.7rem;
  font-weight: 700;
  color: #475569;
  background: #e2e8f0;
  border-radius: 999px;
  padding: 0.16rem 0.5rem;
}
.gc-deal-vigilance { display: flex; flex-wrap: wrap; gap: 0.3rem; }
.gc-deal-vigilance-ok {
  font-size: 0.72rem;
  font-weight: 600;
  color: #16a34a;
}
/* Chip PureTech — orange vigilance (maquette). */
.gc-deal-chip-puretech {
  color: #c2410c;
  background: #fff7ed;
  border: 1px solid #fdba74;
  border-radius: 999px;
}

/* ---- Colonne 3 : prix / marché / économie ---- */
.gc-deal-card .gc-deal-pricing {
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
  justify-content: center;
}
.gc-deal-card .gc-deal-pricing-seller .gc-deal-pricing-label {
  text-transform: uppercase;
  letter-spacing: 0.04em;
  font-size: 0.6rem;
  font-weight: 700;
  color: #94a3b8;
}
.gc-deal-card .gc-deal-pricing-seller .gc-deal-pricing-value {
  font-size: 1.3rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
}
.gc-deal-card .gc-deal-pricing-market .gc-deal-pricing-label { color: #2563eb; }
.gc-deal-card .gc-deal-pricing-market .gc-deal-pricing-value {
  font-size: 1.02rem;
  font-weight: 800;
  color: #2563eb;
}
.gc-deal-card .gc-deal-pricing-savings {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.15rem;
  margin-top: 0.35rem;
  padding: 0.55rem 0.65rem;
  background: #dcfce7;
  border: 1px solid #86efac;
  border-radius: 0.6rem;
}
.gc-deal-pricing-savings-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.gc-deal-card .gc-deal-pricing-savings-label {
  font-size: 0.58rem;
  font-weight: 800;
  letter-spacing: 0.07em;
  text-transform: uppercase;
  color: #166534;
}
.gc-deal-pricing-savings-trend { font-size: 0.82rem; }
.gc-deal-card .gc-deal-pricing-savings-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #166534;
  letter-spacing: -0.01em;
}
.gc-deal-card .gc-deal-pricing-savings-pct { font-size: 0.85rem; font-weight: 700; }

/* ---- Colonne 4 : score + confiance + fraîcheur + actions ---- */
.gc-deal-card[data-v2="1"] .gc-deal-side,
.gc-deal-card .gc-deal-side {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.55rem;
  background: transparent;
  border-radius: 0;
  padding: 0 0 0 1rem;
}
.gc-deal-card .gc-deal-score-hero {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.4rem;
  padding: 0.4rem 0.55rem;
  border-radius: 0.5rem;
  background: #f8fafc;
  border: 1px solid #e5e7eb;
  border-left: 3px solid #cbd5e1;
}
.gc-deal-card .gc-deal-score-hero-exceptional { border-left-color: #16a34a; background: #f0fdf4; }
.gc-deal-card .gc-deal-score-hero-good { border-left-color: #4ade80; }
.gc-deal-card .gc-deal-score-hero-fair { border-left-color: #60a5fa; }
.gc-deal-score-hero-cap {
  font-size: 0.62rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
}
.gc-deal-card .gc-deal-score-hero-value {
  font-size: 1.15rem;
  font-weight: 800;
  color: #0f172a;
}
.gc-deal-card .gc-deal-score-hero-suffix { font-size: 0.78rem; font-weight: 700; color: #94a3b8; }
.gc-deal-side-meta { display: flex; flex-direction: column; gap: 0.2rem; }
.gc-deal-side-meta-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.5rem;
  font-size: 0.74rem;
}
.gc-deal-side-meta-k { color: #94a3b8; font-weight: 600; }
.gc-deal-side-meta-v { color: #334155; font-weight: 700; }
.gc-deal-conf-reliable { color: #16a34a; }
.gc-deal-conf-risky { color: #dc2626; }
.gc-deal-conf-unknown { color: #d97706; }

/* CTA orange Leboncoin + secondaire orange discret. */
.gc-deal-card .gc-deal-actions {
  display: flex;
  flex-direction: column;
  gap: 0.35rem;
  margin-top: 0.1rem;
  border-top: none;
  padding-top: 0;
}
.gc-deal-card .gc-deal-cta {
  height: 2.35rem;
  font-weight: 800;
  background: #ff5a00;
  border-radius: 0.5rem;
  box-shadow: 0 1px 2px rgba(255, 90, 0, 0.25);
}
.gc-deal-card .gc-deal-cta:hover { background: #e64f00; }
.gc-deal-card .gc-deal-cta-secondary {
  height: 1.95rem;
  font-size: 0.76rem;
  font-weight: 700;
  color: #ff5a00;
  background: #ffffff;
  border: 1px solid #ffe0cc;
}
.gc-deal-card .gc-deal-cta-secondary:hover {
  background: #fff7ed;
  border-color: #fdba74;
  color: #e64f00;
}

/* ---- Responsive : ≤1200px on repasse en flex-wrap propre ---- */
@media (max-width: 1200px) {
  .gc-deal-card,
  .gc-deal-card[data-v2="1"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .gc-deal-card .gc-deal-image-wrap { flex: 0 0 auto; }
  .gc-deal-card .gc-deal-info { flex: 1 1 340px; min-width: 260px; }
  .gc-deal-card .gc-deal-pricing { flex: 1 1 210px; }
  .gc-deal-card .gc-deal-side { flex: 1 1 190px; }
}
@media (max-width: 720px) {
  .gc-deal-card .gc-deal-pricing,
  .gc-deal-card .gc-deal-side {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.6rem;
  }
}

/* ====================================================================== *
 *  CARTE /deals — polish v7.1 (append final, post-2026-06-02)              *
 *  Objectif : se rapprocher de la maquette "fiche de décision marchand"    *
 *  — relief carte (shadow + hover), score allégé (label/valeur sans cadre  *
 *  encadré), marché estimé typo +18px, evidence compact (cap +N).          *
 *  Aucune classe nouvelle hors *-more, contrat tests préservé.             *
 * ====================================================================== */

/* Relief carte — ombre douce + lift au survol. */
.gc-deal-card,
.gc-deal-card[data-v2="1"] {
  box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04),
              0 2px 6px rgba(15, 23, 42, 0.05);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.gc-deal-card:hover,
.gc-deal-card[data-v2="1"]:hover {
  transform: translateY(-1px);
  box-shadow: 0 2px 4px rgba(15, 23, 42, 0.06),
              0 6px 14px rgba(15, 23, 42, 0.08);
}

/* Bordure gauche colorée selon tier — épaissie pour bien marquer la
   priorité (exceptional = vert vif, good = vert clair, fair = bleu). */
.gc-deal-card::before {
  width: 4px !important;
}

/* Score : on retire l'encadré gris du score-hero pour aligner visuellement
   sur Confiance / Fraîcheur (label gris + valeur grasse). La couleur du
   tier passe sur la VALEUR (vert exceptionnel / bleu fair). */
.gc-deal-card .gc-deal-score-hero,
.gc-deal-card .gc-deal-score-hero-exceptional,
.gc-deal-card .gc-deal-score-hero-good,
.gc-deal-card .gc-deal-score-hero-fair {
  background: transparent;
  border: none;
  border-left: none;
  padding: 0;
  align-items: baseline;
}
.gc-deal-card .gc-deal-score-hero-cap { color: #94a3b8; }
.gc-deal-card .gc-deal-score-hero-value {
  font-size: 1.35rem;
  font-weight: 800;
  color: #0f172a;
  letter-spacing: -0.015em;
}
.gc-deal-card .gc-deal-score-hero-exceptional .gc-deal-score-hero-value { color: #15803d; }
.gc-deal-card .gc-deal-score-hero-good .gc-deal-score-hero-value         { color: #16a34a; }
.gc-deal-card .gc-deal-score-hero-fair .gc-deal-score-hero-value         { color: #2563eb; }
.gc-deal-card .gc-deal-score-hero-suffix {
  font-size: 0.85rem;
  font-weight: 700;
  color: #94a3b8;
  margin-left: 0.05rem;
}

/* Marché estimé : typo plus présente (18 px) — la valeur reste bleue. */
.gc-deal-card .gc-deal-pricing-market .gc-deal-pricing-value {
  font-size: 1.12rem;
}

/* Evidence (Pourquoi / Risques) — indicateur "+N autre(s)" compact. */
.gc-deal-why-more,
.gc-deal-risks-list-more {
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: #64748b;
  margin-top: 0.18rem;
  cursor: help;
}
.gc-deal-why-more { color: #15803d; }
.gc-deal-risks-list-more { color: #b45309; }

/* CTA secondaire — version "lien" comme la maquette : moins encadré,
   plus aérien. La bordure reste pour conserver la zone cliquable propre. */
.gc-deal-card .gc-deal-cta-secondary {
  height: 1.85rem;
  border-color: transparent;
  background: transparent;
}
.gc-deal-card .gc-deal-cta-secondary:hover {
  background: #fff7ed;
  border-color: #fdba74;
}

/* ====================================================================== *
 *  CARTE /deals — v7.2 : Équipements + Vigilance en colonnes dédiées       *
 *  Grille 6 colonnes : image | infos | prix | équip | vigilance | actions  *
 *  Objectif : alléger le centre, combler le blanc à droite.                *
 * ====================================================================== */
.gc-deal-card,
.gc-deal-card[data-v2="1"] {
  grid-template-columns:
    190px minmax(200px, 1fr) 182px 146px 146px 168px;
}

/* Colonnes Équipements / Vigilance : centrées, séparateur vertical gauche. */
.gc-deal-card .gc-deal-equip-col,
.gc-deal-card .gc-deal-vigilance-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 0.3rem;
  min-width: 0;
  border-left: 1px solid #e5e7eb;
  padding-left: 0.85rem;
}
/* Dans une colonne étroite, les chips équipement s'empilent verticalement. */
.gc-deal-card .gc-deal-equip-col .gc-deal-equipment {
  flex-direction: column;
  align-items: flex-start;
  gap: 0.28rem;
}
.gc-deal-card .gc-deal-equip-col .gc-deal-equip-chip {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
}
.gc-deal-card .gc-deal-vigilance-col .gc-deal-vigilance {
  flex-direction: column;
  align-items: flex-start;
}
.gc-deal-col-empty {
  font-size: 0.72rem;
  font-style: italic;
  color: #94a3b8;
}
/* CTA principal : tient sur une ligne dans la colonne actions plus étroite. */
.gc-deal-card .gc-deal-cta {
  font-size: 0.8rem;
  padding: 0 0.6rem;
  gap: 0.25rem;
}

/* Responsive : bascule flex-wrap plus tôt (6 colonnes = plus large). */
@media (max-width: 1340px) {
  .gc-deal-card,
  .gc-deal-card[data-v2="1"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .gc-deal-card .gc-deal-image-wrap { flex: 0 0 auto; }
  .gc-deal-card .gc-deal-info { flex: 1 1 300px; min-width: 240px; }
  .gc-deal-card .gc-deal-pricing { flex: 1 1 180px; }
  .gc-deal-card .gc-deal-equip-col { flex: 1 1 150px; }
  .gc-deal-card .gc-deal-vigilance-col { flex: 1 1 150px; }
  .gc-deal-card .gc-deal-side { flex: 1 1 180px; }
}
@media (max-width: 720px) {
  .gc-deal-card .gc-deal-equip-col,
  .gc-deal-card .gc-deal-vigilance-col {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.55rem;
  }
}

/* ====================================================================== *
 *  CARTE /deals — v8 : cible maquette « fiche de décision »               *
 *  MVP (flag off) : 4 colonnes   image | infos | prix | score            *
 *  V2  (flag on)  : 6 colonnes   image | infos | Pourquoi | Risques |     *
 *                                 prix | score+étoiles                    *
 *  (équipements reviennent dans la colonne infos ; Pourquoi/Risques       *
 *   alimentés par services.deal_reasons / deal_risks, PureTech inclus.)   *
 * ====================================================================== */

/* MVP — 4 colonnes (annule la grille v7.2 6-col pour le mode sans flag). */
.gc-deal-card {
  grid-template-columns: 196px minmax(0, 1fr) 200px 182px;
}
/* V2 — 6 colonnes : image | infos | Pourquoi | Risques | prix | score. */
.gc-deal-card[data-v2="1"] {
  grid-template-columns:
    188px minmax(200px, 1fr) 152px 152px 178px 168px;
}

/* Séparateurs verticaux entre Infos|Pourquoi|Risques|Prix|Score. */
.gc-deal-card[data-v2="1"] .gc-deal-reasons-col,
.gc-deal-card[data-v2="1"] .gc-deal-risks-col,
.gc-deal-card[data-v2="1"] .gc-deal-pricing,
.gc-deal-card[data-v2="1"] .gc-deal-side {
  border-left: 1px solid #e5e7eb;
  padding-left: 0.85rem;
}

/* Colonnes Pourquoi / Risques : centrées verticalement. */
.gc-deal-card .gc-deal-reasons-col,
.gc-deal-card .gc-deal-risks-col {
  display: flex;
  flex-direction: column;
  justify-content: center;
  min-width: 0;
}
/* En-têtes de colonne (Pourquoi / Risques) — micro-caption grise. */
.gc-deal-col-cap,
.gc-deal-card .gc-deal-risks-list-title,
.gc-deal-card .gc-deal-why-title {
  display: block;
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #94a3b8;
  margin: 0 0 0.32rem 0;
}
/* Lignes Pourquoi / Risques — denses, une icône + texte. */
.gc-deal-card .gc-deal-why,
.gc-deal-card .gc-deal-risks-list {
  display: flex;
  flex-direction: column;
  gap: 0.16rem;
}
.gc-deal-card .gc-deal-why-row,
.gc-deal-card .gc-deal-risks-list-row {
  display: flex;
  align-items: flex-start;
  gap: 0.3rem;
  font-size: 0.72rem;
  line-height: 1.3;
}
.gc-deal-card .gc-deal-why-icon { color: #16a34a; font-weight: 800; flex: none; }
.gc-deal-card .gc-deal-risks-list-icon { color: #d97706; flex: none; }
.gc-deal-card .gc-deal-why-text,
.gc-deal-card .gc-deal-risks-list-text { color: #334155; }
/* PureTech surligné en orange dans la colonne Risques. */
.gc-deal-card .gc-deal-risks-list-icon.gc-risk-puretech,
.gc-deal-card .gc-deal-risks-list-text.gc-risk-puretech { color: #c2410c; font-weight: 700; }
.gc-deal-card .gc-deal-why-more { color: #15803d; font-size: 0.66rem; font-weight: 700; margin-top: 0.18rem; cursor: help; }
.gc-deal-card .gc-deal-risks-list-more { color: #b45309; font-size: 0.66rem; font-weight: 700; margin-top: 0.18rem; cursor: help; }

/* Étoiles de score (col 6, sous le score). */
.gc-deal-stars {
  font-size: 0.82rem;
  letter-spacing: 1.5px;
  line-height: 1;
  margin-top: -0.1rem;
}
.gc-deal-stars-on { color: #f59e0b; }
.gc-deal-stars-off { color: #e2e8f0; }

/* Responsive : flex-wrap propre dès ≤1380px (6 colonnes = large). */
@media (max-width: 1380px) {
  .gc-deal-card,
  .gc-deal-card[data-v2="1"] {
    display: flex;
    flex-wrap: wrap;
    align-items: stretch;
  }
  .gc-deal-card .gc-deal-image-wrap { flex: 0 0 auto; }
  .gc-deal-card .gc-deal-info { flex: 1 1 300px; min-width: 240px; }
  .gc-deal-card .gc-deal-reasons-col { flex: 1 1 160px; }
  .gc-deal-card .gc-deal-risks-col { flex: 1 1 160px; }
  .gc-deal-card .gc-deal-pricing { flex: 1 1 180px; }
  .gc-deal-card .gc-deal-side { flex: 1 1 175px; }
}
@media (max-width: 760px) {
  .gc-deal-card[data-v2="1"] .gc-deal-reasons-col,
  .gc-deal-card[data-v2="1"] .gc-deal-risks-col,
  .gc-deal-card[data-v2="1"] .gc-deal-pricing,
  .gc-deal-card[data-v2="1"] .gc-deal-side {
    border-left: none;
    padding-left: 0;
    border-top: 1px solid #e5e7eb;
    padding-top: 0.55rem;
  }
}

/* ===================================================================== */
/* /bons-coups — topbar (total + bouton Filtres), chips fraîcheur, modale */
/* ===================================================================== */
.bc-topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 0.75rem; flex-wrap: wrap; margin: 0.25rem 0 0.6rem;
}
.bc-topbar-title { display: flex; align-items: baseline; gap: 0.4rem; color: #64748b; font-size: 0.95rem; }
.bc-topbar-count { font-size: 1.7rem; font-weight: 800; line-height: 1; color: #0f172a; }
.bc-topbar-tag { font-size: 0.72rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; color: #ea580c; }
.bc-filters-btn { display: inline-flex; align-items: center; gap: 0.4rem; }
.bc-filters-btn svg { width: 1rem; height: 1rem; }
.bc-filter-badge {
  display: inline-flex; align-items: center; justify-content: center;
  min-width: 1.2rem; height: 1.2rem; padding: 0 0.35rem; border-radius: 999px;
  background: #ea580c; color: #fff; font-size: 0.72rem; font-weight: 700; line-height: 1;
}

.bc-chips { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 1rem; }
.bc-chip {
  appearance: none; cursor: pointer; border: 1px solid #e2e8f0; background: #fff;
  color: #475569; border-radius: 999px; padding: 0.35rem 0.8rem;
  font-size: 0.82rem; font-weight: 600; transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.bc-chip:hover { border-color: #cbd5e1; background: #f8fafc; }
.bc-chip-active { background: #ea580c; border-color: #ea580c; color: #fff; }
.bc-chip-active:hover { background: #ea580c; border-color: #ea580c; color: #fff; }
.bc-chips-legend { font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
                   color: #6b7280; margin-right: 6px; align-self: center; }
.bc-chip-count { display: inline-block; margin-left: 6px; padding: 0 5px; border-radius: 8px;
                 background: rgba(0,0,0,.08); font-size: 11px; font-variant-numeric: tabular-nums; }

/* Overlay plein écran : `margin: auto` sur la carte la centre (H+V) tout en restant insensible au
   débordement (pas de coupe en haut, contrairement à `align-items: center`). Le padding 5vh + le
   `overflow-y: auto` garantissent une marge visible et un repli scrollable sur écran très court. */
.bc-modal-backdrop {
  position: fixed; inset: 0; z-index: 60; background: rgba(15, 23, 42, 0.45);
  backdrop-filter: blur(2px); -webkit-backdrop-filter: blur(2px);
  display: flex; justify-content: center; padding: 5vh 1rem; overflow-y: auto;
}
.bc-modal-backdrop[hidden] { display: none; }
.bc-modal {
  background: #fff; border-radius: 14px; box-shadow: 0 20px 50px rgba(2, 6, 23, 0.25);
  width: 100%; max-width: 640px; max-height: 90vh; margin: auto;   /* 90vh + 2×5vh padding = 100vh -> tient */
  display: flex; flex-direction: column; overflow: hidden;
}
.bc-modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1rem 1.25rem; border-bottom: 1px solid #e2e8f0; flex-shrink: 0;   /* en-tête toujours visible */
}
.bc-modal-close {
  appearance: none; border: none; background: transparent; font-size: 1.05rem; line-height: 1;
  color: #94a3b8; cursor: pointer; padding: 0.25rem 0.5rem; border-radius: 8px;
}
.bc-modal-close:hover { background: #f1f5f9; color: #334155; }
/* `flex: 1 1 auto; min-height: 0` = le corps prend la place restante ET peut descendre sous la
   hauteur de son contenu -> c'est LUI qui scrolle (sinon le contenu pousse et le footer est coupé). */
.bc-modal-body { padding: 1.1rem 1.25rem; overflow-y: auto; flex: 1 1 auto; min-height: 0; }
.bc-modal-foot {
  display: flex; align-items: center; justify-content: flex-end; gap: 0.6rem;
  padding: 0.9rem 1.25rem; border-top: 1px solid #e2e8f0; background: #f8fafc;
  flex-shrink: 0;   /* « Réinitialiser / Appliquer » toujours accessibles */
}
.bc-field-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0.75rem; margin-bottom: 0.9rem; }
.bc-field-grid-3 { display: grid; grid-template-columns: 1fr; gap: 0.75rem; margin-bottom: 0.9rem; }
@media (min-width: 560px) {
  .bc-field-grid { grid-template-columns: 1fr 1fr 1fr 1fr; }
  .bc-field-grid-3 { grid-template-columns: 1fr 1fr 1fr; }
}
.bc-section-cap {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 700; margin: 0.5rem 0 0.5rem;
}
.bc-seller-opts { display: flex; gap: 1.25rem; flex-wrap: wrap; margin-bottom: 0.6rem; }
.bc-modal-dates { display: flex; flex-wrap: wrap; gap: 0.4rem; }
/* Variante LARGE pour la fiche détail annonce (l'actuel 640px est trop étroit pour 2 colonnes). */
.bc-modal--lg { max-width: 960px; }

/* ============================ FICHE DÉTAIL ANNONCE ============================ */
/* Corps partagé par la page /listings/{id} et la modale au clic carte. */
.rv-detail-actions {
  display: flex; flex-wrap: wrap; gap: 0.5rem; justify-content: flex-end;
  margin-bottom: 0.75rem;
}
.rv-detail-badges { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-bottom: 0.5rem; }
/* Bandeau « annonce retirée de Leboncoin » : la fiche reste consultable (rien n'est effacé en
   base quand une annonce meurt), mais il faut dire que la page LBC, elle, a disparu. */
.rv-detail-dead {
  background: #fffbeb; border: 1px solid #fde68a; color: #92400e; border-radius: 6px;
  padding: 0.5rem 0.75rem; font-size: 0.82rem; line-height: 1.5; margin-bottom: 0.75rem;
}
.rv-detail-ids {
  font-size: 0.78rem; color: var(--gc-text-muted); margin-bottom: 0.9rem;
}
.rv-detail-ids .gc-mono { color: var(--gc-text); }
.rv-detail-media { margin-bottom: 1rem; }
.rv-detail-main {
  width: 100%; max-height: 420px; object-fit: contain; background: #0f172a08;
  border-radius: 12px; display: block;
}
.rv-detail-noimg {
  align-items: center; justify-content: center; flex-direction: column; gap: 0.5rem;
  height: 220px; background: #eef1f6; border-radius: 12px; color: #94a3b8;
}
.rv-detail-noimg svg { width: 42px; height: 42px; }
.rv-detail-thumbs { display: flex; flex-wrap: wrap; gap: 0.4rem; margin-top: 0.5rem; }
.rv-detail-thumbs img {
  width: 78px; height: 58px; object-fit: cover; border-radius: 7px; cursor: pointer;
  border: 1px solid #e2e8f0;
}
.rv-detail-thumbs img:hover { border-color: #ea580c; }
.rv-detail-tiles { margin-bottom: 1rem; }
.rv-detail-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
@media (min-width: 820px) { .rv-detail-grid { grid-template-columns: 3fr 2fr; } }
.rv-detail-col { display: flex; flex-direction: column; gap: 1rem; }
.rv-kv-grid { display: grid; grid-template-columns: 1fr; gap: 0.35rem 1rem; }
@media (min-width: 480px) { .rv-kv-grid { grid-template-columns: 1fr 1fr; } }
.rv-kv {
  display: flex; justify-content: space-between; gap: 0.75rem;
  padding: 0.3rem 0; border-bottom: 1px dashed #eef1f6; font-size: 0.86rem;
}
.rv-kv-k { color: var(--gc-text-muted); }
.rv-kv-v { color: var(--gc-text); font-weight: 600; text-align: right; }
.rv-detail-subcap {
  font-size: 0.72rem; text-transform: uppercase; letter-spacing: 0.05em;
  color: #94a3b8; font-weight: 700; margin: 0.9rem 0 0.4rem;
}
.rv-detail-desc {
  white-space: pre-line; font-size: 0.9rem; line-height: 1.5; color: var(--gc-text);
}
.rv-detail-empty { color: var(--gc-text-subtle); font-size: 0.88rem; }

/* ============================ SUPPORT / TICKETING V1 ============================ */
/* Badge compteur dans la sidebar (Tickets non vus). */
.gc-nav-badge { margin-left: auto; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px;
  background: #dc2626; color: #fff; font-size: 11px; font-weight: 700; line-height: 18px;
  text-align: center; }
/* Lien « Signaler » discret sur les cartes annonce / bon coup. */
.rv-report-link { color: #b45309; }
.rv-report-link:hover { color: #92400e; }

/* Badges de statut / priorité. */
.tkt-badge { display: inline-block; padding: 1px 8px; border-radius: 999px; font-size: 11px;
  font-weight: 700; white-space: nowrap; }
.tkt-status-new          { background: #dbeafe; color: #1e40af; }
.tkt-status-in_progress  { background: #fef3c7; color: #92400e; }
.tkt-status-waiting_user { background: #ede9fe; color: #5b21b6; }
.tkt-status-resolved     { background: #dcfce7; color: #166534; }
.tkt-status-closed       { background: #e2e8f0; color: #475569; }
.tkt-prio-low    { background: #f1f5f9; color: #64748b; }
.tkt-prio-normal { background: #e0f2fe; color: #075985; }
.tkt-prio-high   { background: #ffedd5; color: #9a3412; }
.tkt-prio-urgent { background: #fee2e2; color: #991b1b; }

.tkt-muted { color: var(--gc-text-muted, #64748b); font-size: 12px; }
.tkt-error { background: #fee2e2; border: 1px solid #fca5a5; color: #991b1b; border-radius: 8px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }
.tkt-context { background: #f8fafc; border: 1px solid var(--gc-border, #e2e8f0); border-radius: 8px;
  padding: 8px 12px; font-size: 13px; margin-bottom: 12px; }

/* Aperçu de l'annonce liée à un ticket (partials/_ticket_listing_preview.html).
   On signale une annonce au moment où elle disparaît de Leboncoin : ce bloc doit permettre de
   l'instruire sur pièces (photo, prix, specs) sans page LBC. Tout l'encart est un lien. */
.tkt-listing-cap { font-weight: 700; font-size: 12px; text-transform: uppercase;
  letter-spacing: .03em; color: var(--gc-text-muted, #64748b); margin-bottom: 6px; }
.tkt-listing { display: grid; grid-template-columns: 132px minmax(0, 1fr) auto; gap: 12px;
  align-items: start; color: inherit; text-decoration: none; border-radius: 6px; padding: 2px; }
.tkt-listing:hover { background: #f1f5f9; }
.tkt-listing:hover .tkt-listing-more { text-decoration: underline; }
.tkt-listing-media { position: relative; width: 132px; height: 99px; border-radius: 6px;
  overflow: hidden; background: #eef1f6; flex: none; }
.tkt-listing-media img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tkt-listing-noimg { position: absolute; inset: 0; display: flex; align-items: center;
  justify-content: center; text-align: center; font-size: 11px; line-height: 1.35;
  color: var(--gc-text-muted, #64748b); padding: 6px; }
.tkt-listing-title { font-weight: 600; font-size: 14px; line-height: 1.35;
  color: var(--gc-text, #0f172a); }
.tkt-listing-specs { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 5px; }
.tkt-listing-specs span { background: #eef2f7; border-radius: 4px; padding: 1px 6px; font-size: 12px;
  color: #334155; }
.tkt-listing-refs { margin-top: 6px; font-size: 11px; color: var(--gc-text-muted, #64748b); }
.tkt-listing-side { display: flex; flex-direction: column; align-items: flex-end; gap: 5px;
  text-align: right; }
.tkt-listing-price { font-weight: 700; font-size: 16px; color: var(--gc-text, #0f172a);
  white-space: nowrap; }
.tkt-listing-status { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 8px;
  background: #dcfce7; color: #166534; white-space: nowrap; }
.tkt-listing-status--dead { background: #fef3c7; color: #92400e; }
.tkt-listing-more { font-size: 12px; color: var(--gc-primary, #2563eb); white-space: nowrap; }
.tkt-listing-note { margin-top: 8px; padding-top: 8px; border-top: 1px dashed #e2e8f0;
  font-size: 12px; line-height: 1.5; color: #92400e; }
.tkt-listing-absent { font-size: 13px; color: var(--gc-text-muted, #64748b); }

@media (max-width: 640px) {
  .tkt-listing { grid-template-columns: 96px minmax(0, 1fr); }
  .tkt-listing-media { width: 96px; height: 72px; }
  .tkt-listing-side { grid-column: 1 / -1; flex-direction: row; align-items: center;
    justify-content: space-between; text-align: left; }
}

/* Filtres (chips user + barre admin). */
.tkt-filters { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 14px; }
.tkt-chip { padding: 4px 12px; border-radius: 999px; border: 1px solid var(--gc-border, #e2e8f0);
  background: #fff; color: var(--gc-text-muted, #64748b); font-size: 12px; font-weight: 600;
  text-decoration: none; }
.tkt-chip.on { background: var(--gc-navy, #1e293b); color: #fff; border-color: var(--gc-navy, #1e293b); }
.tkt-adminfilters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 14px; }
.tkt-adminfilters select, .tkt-adminfilters input { border: 1px solid #cbd5e1; border-radius: 6px;
  padding: 5px 8px; font-size: 13px; }
.tkt-adminfilters input[type=text] { min-width: 200px; }

/* Tableau de tickets. */
.tkt-table-wrap { overflow-x: auto; border: 1px solid var(--gc-border, #e2e8f0); border-radius: 10px; }
.tkt-table { width: 100%; border-collapse: collapse; font-size: 13px; background: #fff; }
.tkt-table th { text-align: left; padding: 9px 12px; background: #f8fafc; color: var(--gc-text-muted, #64748b);
  font-weight: 600; border-bottom: 1px solid var(--gc-border, #e2e8f0); white-space: nowrap; }
.tkt-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.tkt-table tbody tr:hover { background: #f8fafc; }
.tkt-id { font-variant-numeric: tabular-nums; color: var(--gc-text-muted, #64748b); }
.tkt-title-cell { font-weight: 600; max-width: 380px; }
.tkt-row-unseen { background: #fffbeb; }
.tkt-row-unseen td { font-weight: 600; }
.tkt-row-urgent td:first-child { box-shadow: inset 3px 0 0 #dc2626; }
.tkt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: #dc2626; }

/* Fil de discussion (bulles). */
.tkt-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 12px; }
.tkt-thread { display: flex; flex-direction: column; gap: 10px; margin: 14px 0; }
.tkt-msg { max-width: 78%; padding: 9px 13px; border-radius: 12px; font-size: 13px; line-height: 1.5; }
.tkt-msg-head { font-size: 11px; font-weight: 700; margin-bottom: 3px; color: var(--gc-text, #0f172a); }
.tkt-msg-body { white-space: pre-wrap; word-break: break-word; }
.tkt-msg-user   { align-self: flex-end; background: #e0f2fe; border: 1px solid #bae6fd; }
.tkt-msg-admin  { align-self: flex-start; background: #fff7ed; border: 1px solid #fed7aa; }
.tkt-msg-system { align-self: center; background: #f1f5f9; border: 1px solid #e2e8f0; color: #475569;
  font-style: italic; max-width: 90%; }
.tkt-msg-internal { background: #fef9c3; border: 1px dashed #ca8a04; align-self: flex-start; }

/* Formulaires. */
.tkt-form, .tkt-reply, .tkt-update { display: flex; flex-direction: column; gap: 11px; }
.tkt-field { display: flex; flex-direction: column; gap: 4px; font-size: 12px;
  color: var(--gc-text-muted, #64748b); }
.tkt-field input, .tkt-field select, .tkt-field textarea, .tkt-reply textarea {
  border: 1px solid #cbd5e1; border-radius: 6px; padding: 7px 9px; font-size: 13px;
  color: var(--gc-text, #0f172a); font-family: inherit; }
.tkt-field-row { display: flex; gap: 12px; flex-wrap: wrap; }
.tkt-field-row .tkt-field { flex: 1; min-width: 160px; }
.tkt-form-foot { display: flex; justify-content: flex-end; gap: 8px; align-items: center; }
.tkt-reply { margin-top: 14px; border-top: 1px solid var(--gc-border, #e2e8f0); padding-top: 14px; }
.tkt-reply-foot { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; justify-content: flex-end; }
.tkt-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 12px;
  color: var(--gc-text-muted, #64748b); }
.tkt-inline select { border: 1px solid #cbd5e1; border-radius: 6px; padding: 4px 7px; font-size: 12px; }

/* Détail admin : fil + panneau latéral propriétés. */
.tkt-cols { display: grid; grid-template-columns: 1fr 260px; gap: 18px; align-items: start; }
.tkt-side { background: #f8fafc; border: 1px solid var(--gc-border, #e2e8f0); border-radius: 10px;
  padding: 14px; position: sticky; top: 12px; }
.tkt-side-title { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  color: var(--gc-text-muted, #64748b); margin-bottom: 10px; }
@media (max-width: 860px) { .tkt-cols { grid-template-columns: 1fr; } .tkt-msg { max-width: 92%; } }