/* ====== Base ====== */
.sgp-gold { box-sizing: border-box; font-family: system-ui, -apple-system, Segoe UI, Roboto, sans-serif; }
.sgp-gold * { box-sizing: inherit; }

.sgp-gold .sgp-card__inner { border: 1px solid #e3e6ea; border-radius: 16px; padding: 18px 18px 14px; background:#ffffff; }
.sgp-theme-dark .sgp-card__inner { background: #0f1115; border-color:#242833; color:#e9eef6; }

/* ====== Header ====== */
.sgp-card__header { display:flex; align-items:center; justify-content:center; margin-bottom:8px; position:relative; }
.sgp-card__title { font-weight:800; font-size:24px; letter-spacing:.2px; text-align:center; }
.sgp-card__unit { display:none; } /* plus de (OZ) à l’affichage */

.sgp-badge { position:absolute; right:0; top:0; display:inline-flex; align-items:center; gap:6px; padding:2px 8px; border-radius:999px; font-size:12px; line-height:1.6; border:1px solid #e5e7eb; color:#374151; background:#f9fafb; }
.sgp-badge__dot { width:8px; height:8px; border-radius:50%; background:#9ca3af; }
.sgp-badge.is-live { background:#ecfdf5; color:#065f46; border-color:#a7f3d0; }
.sgp-badge.is-live .sgp-badge__dot { background:#10b981; }
.sgp-badge.is-cache { background:#eff6ff; color:#1e3a8a; border-color:#bfdbfe; }
.sgp-badge.is-cache .sgp-badge__dot { background:#3b82f6; }

/* Bandeau résilience */
.sgp-banner { display:none; margin:6px 0 2px; text-align:center; font-size:12px; border-radius:8px; padding:6px 8px; }
.sgp-banner.is-visible { display:block; }
.sgp-banner.is-cache { background:#fff7ed; color:#7c2d12; border:1px solid #fde68a; }

/* ====== KPIs ====== */
.sgp-card__body { margin-bottom:10px; }
.sgp-grid { display:grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap:12px; }
.sgp-kpi { padding:12px 14px; border:1px dashed #e5e7eb; border-radius:10px; }
.sgp-theme-dark .sgp-kpi { border-color:#2b3140; }
.sgp-kpi--xl .sgp-kpi__value { font-size:28px; font-weight:800; }
.sgp-kpi__label { color:#6b7280; font-size:13px; margin-bottom:4px; font-weight:600; }
.sgp-theme-dark .sgp-kpi__label { color:#9aa3b2; }

@media (max-width: 480px) {
  .sgp-grid { grid-template-columns: 1fr; }
  .sgp-kpi--xl .sgp-kpi__value { font-size:30px; }
}

/* ====== Footer (heure) ====== */
.sgp-card__footer { display:flex; align-items:center; justify-content:space-between; gap:12px; flex-wrap:wrap; margin-top:6px; }
.sgp-meta { display:flex; align-items:center; gap:8px; flex-wrap:wrap; font-size:12px; color:#6b7280; }
.sgp-theme-dark .sgp-meta { color:#9aa3b2; }
.sgp-meta__label { font-weight:600; }

/* ====== Historique 3 graphes ====== */
.sgp-history { width:100%; margin-top:8px; }
.sgp-history-row { display:flex; align-items:center; gap:12px; padding:8px 0; border-top:1px solid #eef0f4; }
.sgp-history-row:first-child { border-top:0; }
.sgp-theme-dark .sgp-history-row { border-color:#222838; }

.sgp-history-title { min-width:220px; display:flex; align-items:center; gap:8px; font-size:14px; font-weight:700; color:#374151; }
.sgp-theme-dark .sgp-history-title { color:#e9eef6; }
.sgp-history-pct { display:inline-block; min-width:60px; text-align:right; font-weight:800; }
.sgp-history-legend { color:#6b7280; font-size:12px; margin-left:6px; }
.sgp-theme-dark .sgp-history-legend { color:#9aa3b2; }

.sgp-history-chart { flex:1 1 auto; min-height:80px; }
.sgp-chart-holder svg { width:100%; height:80px; display:block; }
.sgp-chart-holder .sgp-sparkline { stroke:#6b7280; stroke-width:2.5; fill:none; }
.sgp-chart-holder .sgp-sparkline.is-up { stroke:#10b981; }
.sgp-chart-holder .sgp-sparkline.is-down { stroke:#ef4444; }
.sgp-chart-holder .sgp-sparkline.is-flat { stroke:#6b7280; }

/* animation légère TV */
.sgp-animate-line { stroke-dasharray: 1000; stroke-dashoffset: 1000; animation: sgp-draw 1.2s ease-out forwards; }
@keyframes sgp-draw { to { stroke-dashoffset: 0; } }

/* ====== Source ====== */
.sgp-source { margin-top:8px; font-size:12px; color:#6b7280; text-align:center; }
.sgp-theme-dark .sgp-source { color:#9aa3b2; }

/* ====== Désactivation interactions ====== */
.sgp-gold button, .sgp-gold a { cursor:default; pointer-events:none; }

/* ====== TV MODE (ajouter la classe .sgp-tv sur le conteneur) ====== */
.sgp-tv .sgp-card__title { font-size:28px; }
.sgp-tv .sgp-kpi--xl .sgp-kpi__value { font-size:44px; }
.sgp-tv .sgp-history-title { min-width:260px; font-size:16px; }
.sgp-tv .sgp-chart-holder svg { height:96px; }
.sgp-tv .sgp-source { font-size:13px; }