/* Page /demo : tableau de bord Radar Pro animé (repris de l'ancien site), en panneau sombre posé sur la page claire. DÉMONSTRATION : données simulées. */
.board { --bg: #090a0b; --t: #f3f1ee; --m: #b3aea8; --f: #8f8a83; --line: rgba(255,255,255,.08); --line2: rgba(255,255,255,.16); --accent: #9fd4ff; --accent-rgb: 159,212,255;
  --display: "Inter", system-ui, sans-serif; --text: "Inter", system-ui, sans-serif; --mono: ui-monospace, "Cascadia Mono", Consolas, monospace; --ease: cubic-bezier(.22,1,.36,1); color: var(--t); position: relative; }
.board { margin: 0; border-radius: 12px; border: 1px solid var(--line2); overflow: hidden;
  background: #151413; box-shadow: var(--shadow); }
.board-bar { display: flex; align-items: center; gap: 16px; height: 48px; padding: 0 20px; border-bottom: 1px solid var(--line); background: rgba(255, 255, 255, .02); }
.board-bar .dots { display: flex; gap: 6px; }
.board-bar .dots i { width: 10px; height: 10px; border-radius: 50%; background: var(--line2); }
.board-site { font: 400 13px/16px var(--mono); color: var(--m); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.board-bar .demo { margin-left: auto; display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--line2);
  font: 400 12px/16px var(--mono); color: var(--t); white-space: nowrap; }
.board-bar .demo i { width: 6px; height: 6px; border-radius: 50%; background: #f2df9a; }
.board-body { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); min-height: 520px; }
.board-globe { position: relative; border-right: 1px solid var(--line); background: radial-gradient(55% 55% at 50% 50%, rgba(var(--accent-rgb), .07), transparent 70%); }
#pro-globe { position: absolute; inset: 0; width: 100%; height: 100%; }

/* Alerte imposteur */
.alert { position: absolute; left: 20px; top: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
  background: rgba(40, 16, 16, .85); border: 1px solid rgba(255, 107, 107, .55); color: #ffd6d6;
  opacity: 0; transform: translateY(-8px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.alert.on { opacity: 1; transform: none; }
.alert b { display: block; font: 500 14px/20px var(--text); color: #ffffff; }
.alert small { display: block; font: 400 12px/16px var(--text); color: #ffb4b4; }
.alert-dot { width: 10px; height: 10px; border-radius: 50%; background: #ff6b6b; box-shadow: 0 0 0 0 rgba(255, 107, 107, .6); flex: none; }
.alert.on .alert-dot { animation: ping 1.6s var(--ease) infinite; }   /* seulement quand l'alerte est visible */
@keyframes ping { 0% { box-shadow: 0 0 0 0 rgba(255, 107, 107, .6); } 100% { box-shadow: 0 0 0 12px rgba(255, 107, 107, 0); } }

/* Chiffres et fil */
.board-side { display: grid; grid-template-rows: auto 1fr; min-width: 0; }
.kpis { margin: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); border-bottom: 1px solid var(--line); }
.kpis > div { padding: 24px 20px; border-right: 1px solid var(--line); }
.kpis > div:last-child { border-right: 0; }
.kpis dt { font: 400 12px/16px var(--text); color: var(--f); }
.kpis dd { margin: 8px 0 0; font: 300 44px/1 var(--display); letter-spacing: -.02em; font-variant-numeric: tabular-nums; color: var(--t); transition: color .6s var(--ease); }
.kpis dd.tick { color: var(--accent); }
.kpis .bad dd { color: #ff9b9b; }
.feed { list-style: none; margin: 0; padding: 12px 0; overflow: hidden; display: flex; flex-direction: column; gap: 2px; }
.feed li { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 10px 20px; font: 400 14px/20px var(--text); color: var(--m);
  animation: slide .7s var(--ease) both; }
.feed li .d { width: 8px; height: 8px; border-radius: 50%; background: var(--c); }
.feed li .w { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.feed li .w b { color: var(--t); font-weight: 500; }
.feed li .p { font-family: var(--mono); font-size: 12px; }
.feed li .s { font: 400 11px/16px var(--mono); color: var(--accent); white-space: nowrap; }
.feed li.fake { background: rgba(255, 107, 107, .07); }
.feed li.fake .s { color: #ff9b9b; }
@keyframes slide { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
.sale-toast { position: absolute; left: 20px; bottom: 20px; display: flex; align-items: center; gap: 12px; padding: 12px 16px; border-radius: 16px;
  background: rgba(38, 30, 12, .88); border: 1px solid rgba(242, 200, 107, .55); color: #fbe7b5;
  opacity: 0; transform: translateY(8px) scale(.98); transition: opacity .6s var(--ease), transform .6s var(--ease); pointer-events: none; }
.sale-toast.on { opacity: 1; transform: none; }
.sale-toast b { display: block; font: 500 14px/20px var(--text); color: #ffffff; }
.sale-toast small { display: block; font: 400 12px/16px var(--text); color: #e9cf8f; }
.coin { display: grid; place-items: center; width: 28px; height: 28px; border-radius: 50%; background: #f2c86b; color: #2a1f05; font: 700 14px/1 var(--text); flex: none; box-shadow: 0 0 20px rgba(242, 200, 107, .45); }
.feed li.sale { background: rgba(242, 200, 107, .08); }
.feed li.sale .s { color: #f2c86b; }
/* Image de secours : affichée si le globe 3D ne peut pas démarrer (pas de WebGL, script bloqué) */
.board-fallback { display: none; width: 100%; height: auto; }
.board.no-webgl .board-body { display: none; }
.board.no-webgl .board-fallback { display: block; }
.demo-note { margin: 16px 0 0; font-size: 14px; color: var(--m); }
.demo-wrap { padding: 0 var(--edge) 96px; }
@media (max-width: 820px) {
  .demo-wrap { padding: 0 20px 64px; }
  .board-bar { height: auto; flex-wrap: wrap; row-gap: 8px; padding: 12px 16px; }
  .board-bar .dots { display: none; }
  .board-bar .demo { margin-left: 0; }
  .board-body { grid-template-columns: 1fr; min-height: 0; }
  .board-globe { height: 320px; border-right: 0; border-bottom: 1px solid var(--line); }
  .alert { left: 12px; right: 12px; top: 12px; }
  .sale-toast { left: 12px; right: 12px; bottom: 12px; }
  .kpis > div { padding: 16px 12px; }
  .kpis dt { font-size: 11px; line-height: 14px; }
  .kpis dd { font-size: 32px; }
  .feed { max-height: 232px; }
  .feed li { padding: 8px 16px; font-size: 13px; }
}
@media (prefers-reduced-motion: reduce) {
  .alert, .feed li, .kpis dd, .sale-toast { transition: none; animation: none; }
  .alert-dot { animation: none; }
}

/* Version claire (accueil et page /demo) : même tableau, couleurs « Éditorial clair », textes ≥ 4,5:1 */
.board.light { --t: #1a1916; --m: #57534c; --f: #6b665d; --line: rgba(26,25,22,.12); --line2: rgba(26,25,22,.22); --accent: #1e3a8a; --accent-rgb: 30,58,138;
  background: #fffdf9; border: 1px solid var(--line); }
.board.light .board-bar { background: #f6f3ee; }
.board.light .board-bar .demo { background: #fff4d6; border-color: #e0c27a; color: #5c4300; font-weight: 500; }
.board.light .board-bar .demo i { background: #9a6400; }
.board.light .board-globe { background: radial-gradient(55% 55% at 50% 50%, rgba(30,58,138,.05), transparent 70%); }
.board.light .alert { background: #fff5f2; border-color: rgba(180,65,44,.45); color: #7a2a1b; box-shadow: 0 8px 24px -12px rgba(26,25,22,.3); }
.board.light .alert b { color: #1a1916; } .board.light .alert small { color: #8f3322; }
.board.light .alert-dot { background: #b4412c; }
.board.light .sale-toast { background: #fff8e6; border-color: #e0c27a; color: #5c4300; box-shadow: 0 8px 24px -12px rgba(26,25,22,.3); }
.board.light .sale-toast b { color: #1a1916; } .board.light .sale-toast small { color: #6b4e00; }
.board.light .coin { background: #9a6400; color: #fff; }
.board.light .kpis dd { font-family: var(--serif, Georgia, serif); font-weight: 400; }
.board.light .kpis .bad dd { color: #b4412c; }
.board.light .feed li .s { color: #1e3a8a; }
.board.light .feed li.fake { background: rgba(180,65,44,.07); } .board.light .feed li.fake .s { color: #b4412c; }
.board.light .feed li.sale { background: rgba(154,100,0,.08); } .board.light .feed li.sale .s { color: #7a5000; }
.board.light { box-shadow: var(--shadow); }