/* SEOGrow - « Laboratoire › Concurrents » (CompetitorLab.js, 0.150.0 squelette, 0.151.0 liste et analyse) */

.cmp-title { display: flex; align-items: center; gap: var(--space-2); margin-bottom: 2px; }
.cmp-title h1 { margin: 0; }

/* ---------- Bouton « i » et panneau d'explication ---------- */
.cmp-info__btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; flex: none;
  border: 1px solid var(--border-primary); border-radius: 50%;
  background: transparent; color: var(--text-tertiary); cursor: pointer;
}
.cmp-info__btn--inline { width: 22px; height: 22px; vertical-align: middle; }
.cmp-info__btn:hover,
.cmp-info__btn[aria-expanded="true"] { color: var(--color-brand-primary); border-color: var(--color-brand-primary); }
.cmp-info__btn:focus-visible { outline: 2px solid var(--color-brand-primary); outline-offset: 2px; }

.cmp-info__panel {
  margin: 0 0 var(--space-4);
  padding: var(--space-3) var(--space-4);
  border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--surface-secondary); color: var(--text-secondary);
  font-size: 0.875rem; line-height: 1.55;
}
.cmp-info__panel p { margin: 0 0 var(--space-2); }
.cmp-info__panel p:last-child { margin-bottom: 0; }
.cmp-info__panel code { font-size: 0.8125rem; }
.cmp-info__cmd { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }

/* ---------- Barre d'outils ---------- */
.cmp-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2);
  margin-bottom: var(--space-2);
}
.cmp-toolbar .select { width: auto; height: 34px; padding: 0 var(--space-3); font-size: 13px; }
.cmp-search { position: relative; display: inline-flex; align-items: center; flex: 1 1 260px; max-width: 380px; min-width: 0; }
.cmp-search__icon { position: absolute; left: 8px; display: inline-flex; pointer-events: none; color: var(--text-tertiary); }
.cmp-search .input { width: 100%; height: 34px; padding-left: 28px; }
.cmp-check { display: inline-flex; align-items: center; gap: 6px; color: var(--text-secondary); cursor: pointer; }
.cmp-count { margin: 0 0 var(--space-3); }

/* ---------- Tableaux ---------- */
.cmp-table-wrap { overflow-x: auto; }
.cmp-table td, .cmp-axes td, .cmp-pages td { padding-top: var(--space-2); padding-bottom: var(--space-2); vertical-align: middle; }
.cmp-num { text-align: right !important; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cmp-cb { width: 32px; }
.cmp-sort { cursor: pointer; user-select: none; }
.cmp-sort.is-active { color: var(--text-primary); }
.cmp-query { min-width: 150px; max-width: 340px; overflow-wrap: anywhere; font-weight: 500; }
.cmp-table-wrap .badge { white-space: nowrap; }
.cmp-nowrap { white-space: nowrap; }
.cmp-analysis { min-width: 140px; }
.cmp-table th { white-space: nowrap; }
.cmp-table th, .cmp-table td, .cmp-pages th, .cmp-pages td { padding-left: 10px; padding-right: 10px; }
.cmp-table tr.is-selected td { background: var(--color-brand-soft); }
.cmp-badge--muted { color: var(--text-tertiary); }
.cmp-pager { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); margin-top: var(--space-3); }
.is-loading { opacity: 0.6; transition: opacity .2s; }

/* ---------- Analyse ---------- */
.cmp-back { margin: 0 0 var(--space-3); font-size: 13px; }
.cmp-back a { display: inline-flex; align-items: center; gap: 4px; }
.cmp-msg { display: flex; flex-direction: column; gap: 4px; margin-bottom: var(--space-4); }
.cmp-msg svg { vertical-align: -2px; }
.cmp-msg--info { background: rgba(59, 130, 246, 0.08); color: var(--status-info); border-color: rgba(59, 130, 246, 0.3); }
.cmp-msg--info div { color: var(--text-secondary); }
.cmp-kpis {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: var(--space-3);
  margin-bottom: var(--space-4);
}
.cmp-kpi {
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
  padding: var(--space-3); border: 1px solid var(--border-primary); border-radius: var(--radius-lg);
  background: var(--surface-primary);
}
.cmp-kpi strong { font-size: 18px; color: var(--text-primary); font-variant-numeric: tabular-nums; }
.cmp-kpi__url { overflow-wrap: anywhere; font-size: 13px; }
.cmp-cause {
  display: flex; flex-direction: column; gap: 4px;
  padding: var(--space-3) var(--space-4); margin-bottom: var(--space-4);
  border-left: 3px solid var(--color-brand-primary); border-radius: var(--radius-lg);
  background: var(--color-brand-soft);
}
.cmp-cause strong { font-size: 17px; color: var(--text-primary); }
.cmp-card { margin-bottom: var(--space-5); }
.cmp-h { font-size: 15px; margin: 0 0 var(--space-2); }
.cmp-axes__main td { background: var(--color-brand-soft); }
.cmp-behind { margin: 0; padding-left: 1.4em; display: flex; flex-direction: column; gap: 6px; font-size: 14px; }
.cmp-terms { display: flex; flex-wrap: wrap; gap: 6px; margin-top: var(--space-2); }
.cmp-pages__ours td { background: var(--color-brand-soft); font-weight: 500; }
.cmp-page-cell { white-space: nowrap; }
.cmp-ext { margin-left: 4px; color: var(--text-tertiary); }
.cmp-ext:hover { color: var(--color-brand-primary); }

.cmp-kpis--small { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); margin-bottom: var(--space-2); }
.cmp-up { color: var(--status-success); }
.cmp-down { color: var(--status-danger); }
.cmp-feedback { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2); }
.cmp-feedback .select, .cmp-feedback .input { height: 32px; width: auto; font-size: 13px; }
.cmp-feedback .input { flex: 1 1 220px; }
.cmp-feedback .btn[aria-pressed="true"] { border-color: var(--color-brand-primary); color: var(--color-brand-primary); }

@media (max-width: 720px) {
  .cmp-search { max-width: none; flex-basis: 100%; }
  .cmp-toolbar .select, .cmp-toolbar .btn { flex: 1 1 auto; }
}