/* Kiclic — Résultats d'un Rali terminé (port web fidèle du design Claude Design).
   Tokens fournis par rali-results-tokens.css (scopés .rr-root). Le shell du design
   (.k-app / .k-side / .k-main) est remplacé par le DashboardLayout : tout est
   contenu dans .rr-root. Le thème suit le système global du site (html[data-theme]). */

/* ===================================================================
   ROOT — remplit le #dash-main, scroll interne via .rr-stage
   =================================================================== */
.rr-root {
  position: relative;
  /* Hauteur ferme = app pleine page : la topbar reste figée et seule .rr-stage scrolle.
     (flex:1 ne suffit pas car #dash-main est en min-h-screen et grandit avec le contenu) */
  height: 100dvh;
  min-height: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg);
}

/* ===================================================================
   AMBIENT BACKDROP
   =================================================================== */
.rr-bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; z-index: 0; }
.rr-bg .blob { position: absolute; border-radius: 50%; }
.rr-bg .b1 { width: 520px; height: 520px; background: radial-gradient(circle, #5B8DEF 0%, transparent 70%); top: -200px; left: 180px; opacity: 0.13; }
.rr-bg .b2 { width: 560px; height: 560px; background: radial-gradient(circle, #E94E8B 0%, transparent 70%); bottom: -280px; right: 60px; opacity: 0.11; }
.rr-bg .b3 { width: 420px; height: 420px; background: radial-gradient(circle, #B968C7 0%, transparent 70%); top: 220px; right: 440px; opacity: 0.09; }
html[data-theme="light"] .rr-bg .blob { opacity: 0.10; }

/* ===================================================================
   TOPBAR — status + navigation + actions
   =================================================================== */
.rr-topbar {
  position: relative; z-index: 5; flex: 0 0 auto;
  height: var(--k-topbar-h, 56px);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  border-bottom: 1px solid var(--border-soft);
}
.rr-crumb .meta { white-space: nowrap; }
.rr-back {
  width: 36px; height: 36px; flex: 0 0 auto;
  border-radius: 10px; border: 1px solid var(--border-soft);
  background: var(--bg-elev-1); color: var(--fg-secondary);
  display: inline-flex; align-items: center; justify-content: center; cursor: pointer;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), color var(--t-fast);
}
.rr-back:hover { border-color: rgba(185,104,199,0.4); color: var(--fg); transform: translateX(-2px); }
.rr-back svg { width: 18px; height: 18px; stroke: currentColor; stroke-width: 2.2; fill: none; }

.rr-crumb { display: flex; flex-direction: column; justify-content: center; gap: 2px; min-width: 0; flex: 1 1 240px; }
.rr-crumb .top { display: flex; align-items: center; gap: 10px; }
.rr-status {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 3px 11px 3px 9px; border-radius: 9999px;
  /* Contour en dégradé, intérieur neutre (technique double background) */
  background: linear-gradient(var(--bg), var(--bg)) padding-box, var(--k-gradient) border-box;
  border: 1px solid transparent;
  font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.rr-status .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--k-gradient); }
/* Texte du statut en dégradé */
.rr-status #rrStatusLabel {
  background: var(--k-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
/* Variante "En direct" du statut (déclinaison verte du même style fin) */
.rr-status.live { background: linear-gradient(var(--bg), var(--bg)) padding-box, linear-gradient(90deg,#10B981,#34D399) border-box; }
.rr-status.live .dot { background: #34D399; animation: rrPulse 1.9s ease-out infinite; }
.rr-status.live #rrStatusLabel { background: none; -webkit-text-fill-color: #10B981; color: #10B981; }
.rr-crumb h1 {
  margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 17px;
  letter-spacing: -0.02em; color: var(--fg); white-space: nowrap;
}
.rr-crumb .meta { font-size: 11.5px; color: var(--fg-muted); display: flex; align-items: center; gap: 7px; }
.rr-crumb .meta .sep { opacity: .5; }

.rr-tb-right { margin-left: auto; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; justify-content: flex-end; }

/* Segmented view toggle */
.rr-seg {
  display: inline-flex; padding: 3px; border-radius: 11px;
  background: var(--surface-tint-light); border: 1px solid var(--border-soft);
}
.rr-seg button {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 6px 12px; border: 0; background: transparent; cursor: pointer;
  font-size: 13px; font-weight: 600; color: var(--fg-muted); border-radius: 8px;
  transition: color var(--t-fast), background var(--t-fast);
}
.rr-seg button svg { width: 14px; height: 14px; stroke: currentColor; stroke-width: 2; fill: none; }
.rr-seg button .live-dot { width: 7px; height: 7px; border-radius: 50%; background: #34D399; box-shadow: 0 0 0 0 rgba(52,211,153,.5); }
.rr-seg button.on { color: var(--fg); background: var(--bg-elev-1); box-shadow: var(--shadow-card-dk); }
.rr-seg button.on .live-dot { animation: rrPulse 1.9s ease-out infinite; }
@keyframes rrPulse { 0%{box-shadow:0 0 0 0 rgba(52,211,153,.5)} 70%{box-shadow:0 0 0 7px rgba(52,211,153,0)} 100%{box-shadow:0 0 0 0 rgba(52,211,153,0)} }

.rr-divider { width: 1px; height: 26px; background: var(--border-soft); }

/* Generic top buttons */
.rr-btn {
  display: inline-flex; align-items: center; gap: 8px;
  height: 36px; padding: 0 13px; border-radius: 10px; cursor: pointer;
  background: var(--bg-elev-1); border: 1px solid var(--border-soft); color: var(--fg);
  font-size: 13px; font-weight: 600;
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast);
}
.rr-btn:hover { border-color: rgba(185,104,199,0.4); transform: translateY(-1px); }
.rr-btn svg { width: 16px; height: 16px; stroke: var(--fg-secondary); stroke-width: 2; fill: none; }
.rr-btn.icon { padding: 0; width: 36px; height: 36px; justify-content: center; }
.rr-btn.primary {
  background: var(--k-gradient-h); border-color: transparent; color: #fff;
  box-shadow: var(--shadow-button);
}
.rr-btn.primary svg { stroke: #fff; }
.rr-btn.primary:hover { box-shadow: 0 10px 26px rgba(233,78,139,.42); }

/* Export dropdown */
.rr-drop { position: relative; }
.rr-menu {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 40;
  min-width: 234px; padding: 7px; border-radius: 16px;
  background: var(--bg-elev-1); border: 1px solid var(--border-soft);
  box-shadow: 0 20px 50px rgba(0,0,0,.35);
  opacity: 0; transform: translateY(-6px) scale(.98); transform-origin: top right;
  pointer-events: none; transition: opacity var(--t-fast), transform var(--t-fast) var(--ease-out);
}
html[data-theme="light"] .rr-menu { box-shadow: 0 20px 50px rgba(30,30,60,.16); }
.rr-menu.open { opacity: 1; transform: translateY(0) scale(1); pointer-events: auto; }
.rr-menu .mh { font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--fg-muted); padding: 8px 12px 6px; }
.rr-menu button {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 10px 12px; border: 0; background: transparent; cursor: pointer;
  border-radius: 10px; color: var(--fg); font-size: 13.5px; font-weight: 500; text-align: left;
  transition: background var(--t-fast);
}
.rr-menu button:hover { background: var(--surface-tint); }
.rr-menu button .mi {
  width: 30px; height: 30px; border-radius: 9px; flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--surface-tint);
}
.rr-menu button .mi svg { width: 16px; height: 16px; stroke: var(--fg-secondary); stroke-width: 2; fill: none; }
.rr-menu button .mt { display: flex; flex-direction: column; gap: 1px; }
.rr-menu button .mt small { font-size: 11.5px; font-weight: 400; color: var(--fg-muted); }
.rr-menu .msep { height: 1px; background: var(--border-soft); margin: 5px 8px; }

/* ===================================================================
   STAGE
   =================================================================== */
.rr-stage {
  position: relative; z-index: 1; flex: 1 1 auto; min-height: 0;
  overflow-y: auto; padding: 6px 28px 30px;
  scrollbar-width: thin;
}
.rr-stage::-webkit-scrollbar { width: 9px; }
.rr-stage::-webkit-scrollbar-thumb { background: var(--border); border-radius: 4px; }

/* KPI strip */
.rr-kpis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 14px; margin-bottom: 18px; }
.rr-kpi {
  position: relative; padding: 16px 18px; border-radius: 18px;
  background: var(--bg-elev-1); border: 1px solid var(--border-soft);
  overflow: hidden;
}
.rr-kpi .ic { width: 30px; height: 30px; border-radius: 9px; display: inline-flex; align-items: center; justify-content: center; background: var(--surface-tint); margin-bottom: 10px; }
.rr-kpi .ic svg { width: 16px; height: 16px; stroke: var(--fg-secondary); stroke-width: 2; fill: none; }
.rr-kpi .val { font-family: var(--font-display); font-weight: 800; font-size: 28px; line-height: 1; letter-spacing: -0.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.rr-kpi .val small { font-size: 15px; font-weight: 700; color: var(--fg-muted); }
.rr-kpi .lbl { font-size: 12px; color: var(--fg-muted); margin-top: 6px; font-weight: 500; }
.rr-kpi.accent { border-color: rgba(185,104,199,0.3); background: linear-gradient(160deg, rgba(91,141,239,0.10), rgba(233,78,139,0.07)); }
.rr-kpi.accent .ic { background: rgba(185,104,199,0.16); }
.rr-kpi.accent .ic svg { stroke: var(--k-violet); }
.rr-kpi.accent .val { background: var(--k-gradient-h); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rr-kpi .spark { position: absolute; right: 14px; top: 16px; font-size: 11.5px; font-weight: 700; color: #34D399; }

/* Two-column grid */
.rr-grid { display: grid; grid-template-columns: minmax(0,1fr) 340px; gap: 20px; align-items: start; }

/* ---- Card shell ---- */
.rr-card { border-radius: 20px; background: var(--bg-elev-1); border: 1px solid var(--border-soft); overflow: hidden; }
.rr-card-h { display: flex; align-items: center; gap: 12px; padding: 16px 20px; border-bottom: 1px solid var(--border-soft); }
.rr-card-h .ci { width: 34px; height: 34px; border-radius: 10px; background: var(--surface-tint); display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.rr-card-h .ci svg { width: 17px; height: 17px; stroke: var(--fg-secondary); stroke-width: 2; fill: none; }
.rr-card-h .ct { flex: 1 1 auto; min-width: 0; }
.rr-card-h .ct h2 { margin: 0; font-size: 16px; font-weight: 700; color: var(--fg); }
.rr-card-h .ct .cs { font-size: 12.5px; color: var(--fg-muted); margin-top: 2px; }

/* ===================================================================
   PODIUM
   =================================================================== */
.rr-podium-card { margin-bottom: 20px; }
.rr-podium { display: grid; grid-template-columns: 1fr 1.18fr 1fr; gap: 16px; align-items: end; padding: 26px 26px 28px; }
.rr-pod {
  position: relative; border-radius: 18px; padding: 20px 16px 18px;
  background: var(--bg-elev-2); border: 1px solid var(--border-soft);
  display: flex; flex-direction: column; align-items: center; text-align: center;
  cursor: pointer; transition: transform var(--t-base) var(--ease-out);
}
.rr-pod:hover { transform: translateY(-3px); }
.rr-pod .medal { position: absolute; top: -13px; left: 50%; transform: translateX(-50%); width: 28px; height: 28px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; color: #1a1205; box-shadow: 0 4px 12px rgba(0,0,0,.25); }
.rr-pod.p1 .medal { background: linear-gradient(135deg,#FFE08A,#F5B301); }
.rr-pod.p2 .medal { background: linear-gradient(135deg,#E8ECF2,#B6BFCC); }
.rr-pod.p3 .medal { background: linear-gradient(135deg,#F0C28B,#C97D3D); color:#2a1605; }
.rr-pod .av { width: 64px; height: 64px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 22px; color: #fff; margin-bottom: 11px; box-shadow: 0 6px 18px rgba(0,0,0,.22); }
.rr-pod .nm { font-size: 15px; font-weight: 700; color: var(--fg); max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.rr-pod .tm { font-family: var(--font-num); font-weight: 800; font-size: 22px; letter-spacing: -.02em; margin-top: 6px; font-variant-numeric: tabular-nums; }
.rr-pod .tm small { font-size: 13px; font-weight: 700; color: var(--fg-muted); }
.rr-pod .scan { margin-top: 11px; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 11px; font-weight: 700; }
.rr-pod .scan svg { width: 12px; height: 12px; stroke-width: 2.4; fill: none; }
.rr-pod.p1 {
  background: linear-gradient(165deg, rgba(91,141,239,.16), rgba(233,78,139,.13));
  border-color: transparent; transform: translateY(-10px);
  box-shadow: 0 14px 40px rgba(185,104,199,.22);
}
.rr-pod.p1::before { content:""; position:absolute; inset:0; border-radius:18px; padding:1.5px; background: var(--k-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.rr-pod.p1:hover { transform: translateY(-13px); }
.rr-pod.p1 .av { width: 76px; height: 76px; font-size: 26px; }
.rr-pod.p1 .tm { font-size: 26px; background: var(--k-gradient-h); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.rr-pod.p1 .crown { position: absolute; top: -30px; left: 50%; transform: translateX(-50%); width: 26px; height: 26px; }
.rr-pod.p1 .crown svg { width: 26px; height: 26px; fill: #F5B301; filter: drop-shadow(0 3px 6px rgba(245,179,1,.4)); }

/* status badge palettes (shared) */
.sb-scanned { background: rgba(16,185,129,.14); color: #10B981; }
.sb-pending { background: rgba(245,158,11,.14); color: #F59E0B; }
.sb-expired { background: rgba(239,68,68,.13); color: #EF4444; }
.sb-none { background: var(--surface-tint); color: var(--fg-muted); }

/* ===================================================================
   RANKING TABLE
   =================================================================== */
.rr-toolbar { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border-soft); flex-wrap: wrap; }
.rr-search { flex: 1 1 220px; min-width: 180px; display: flex; align-items: center; gap: 9px; padding: 9px 13px; border-radius: 11px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); }
.rr-search svg { width: 16px; height: 16px; stroke: var(--fg-muted); stroke-width: 2; fill: none; flex: 0 0 auto; }
.rr-search input { flex: 1 1 auto; border: 0; background: transparent; color: var(--fg); font-size: 13.5px; outline: none; }
.rr-search input::placeholder { color: var(--fg-muted); }
.rr-filters { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.rr-chip { display: inline-flex; align-items: center; gap: 6px; padding: 8px 13px; border-radius: 9999px; border: 1px solid var(--border-soft); background: var(--bg-elev-1); color: var(--fg-secondary); font-size: 12.5px; font-weight: 600; cursor: pointer; transition: all var(--t-fast); }
.rr-chip:hover { border-color: rgba(185,104,199,.36); color: var(--fg); }
.rr-chip .n { font-size: 11px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; background: var(--surface-tint); color: var(--fg-muted); }
.rr-chip.on { color: #fff; background: var(--k-gradient-h); border-color: transparent; }
.rr-chip.on .n { background: rgba(255,255,255,.25); color: #fff; }

.rr-table-wrap { overflow-x: auto; }
table.rr-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.rr-table thead th { text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--fg-muted); padding: 12px 14px; border-bottom: 1px solid var(--border-soft); white-space: nowrap; }
.rr-table thead th.right { text-align: right; }
.rr-table tbody tr { border-bottom: 1px solid var(--border-soft); transition: background var(--t-fast); }
.rr-table tbody tr:last-child { border-bottom: 0; }
.rr-table tbody tr:hover { background: var(--surface-tint-light); }
.rr-table tbody tr.win { background: linear-gradient(90deg, rgba(185,104,199,.08), transparent 60%); }
.rr-table tbody tr.win:hover { background: linear-gradient(90deg, rgba(185,104,199,.13), transparent 60%); }
.rr-table td { padding: 11px 14px; vertical-align: middle; }

.rr-rank { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 9px; font-weight: 800; font-size: 13px; background: var(--surface-tint); color: var(--fg-secondary); font-variant-numeric: tabular-nums; }
.rr-rank.m1 { background: linear-gradient(135deg,#FFE08A,#F5B301); color: #1a1205; }
.rr-rank.m2 { background: linear-gradient(135deg,#E8ECF2,#B6BFCC); color: #2b2f36; }
.rr-rank.m3 { background: linear-gradient(135deg,#F0C28B,#C97D3D); color: #2a1605; }

.rr-part { display: flex; align-items: center; gap: 11px; }
.rr-av { width: 34px; height: 34px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: #fff; }
.rr-part .pn { font-weight: 600; color: var(--fg); white-space: nowrap; }
.rr-part .pc { font-size: 11.5px; color: var(--fg-muted); display: flex; align-items: center; gap: 5px; margin-top: 1px; }
.rr-part .pc .gd { width: 6px; height: 6px; border-radius: 50%; background: #34D399; }

.rr-time { font-family: var(--font-num); font-weight: 800; font-size: 15px; letter-spacing: -.01em; color: var(--fg); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rr-time small { font-size: 11.5px; font-weight: 700; color: var(--fg-muted); }
.rr-gap { font-size: 11px; color: var(--fg-muted); font-variant-numeric: tabular-nums; }

.rr-badge { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border-radius: 9999px; font-size: 11.5px; font-weight: 700; white-space: nowrap; }
.rr-badge svg { width: 12px; height: 12px; stroke-width: 2.4; fill: none; }
.rr-badge.win { background: var(--k-gradient-h); color: #fff; box-shadow: 0 4px 14px rgba(185,104,199,.28); }
.rr-badge.win svg { fill: #fff; stroke: none; }
.rr-badge.out { background: var(--surface-tint); color: var(--fg-muted); }

/* Colonne Qualification centrée (header + cellules) */
.rr-table thead th:nth-child(4),
.rr-table tbody td:nth-child(4) { text-align: center; }

.rr-scan-cell { display: flex; flex-direction: column; gap: 2px; }
.rr-scan-cell .when { font-size: 11px; color: var(--fg-muted); margin-top: 3px; }

.rr-rowmenu { width: 30px; height: 30px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--fg-muted); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; }
.rr-rowmenu:hover { background: var(--surface-tint); color: var(--fg); }
.rr-rowmenu svg { width: 17px; height: 17px; stroke: currentColor; stroke-width: 2; fill: none; }

/* Qualification divider row */
.rr-qline td { padding: 0; }
.rr-qline .inner { display: flex; align-items: center; gap: 10px; padding: 8px 14px; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; background: linear-gradient(90deg, rgba(185,104,199,.10), transparent); }
.rr-qline .inner .qtxt {
  background: var(--k-gradient-h);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.rr-qline .inner .ln { flex: 1 1 auto; height: 1px; background: linear-gradient(90deg, rgba(185,104,199,.5), rgba(233,78,139,.3), transparent); }
.rr-qline .inner svg { width: 13px; height: 13px; stroke-width: 2.2; fill: none; }

/* Empty state (table / live) */
.rr-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; padding: 48px 24px; text-align: center; color: var(--fg-muted); }
.rr-empty svg { width: 40px; height: 40px; stroke: var(--fg-muted); stroke-width: 1.6; fill: none; opacity: .5; }
.rr-empty .t { font-size: 14px; font-weight: 600; color: var(--fg-secondary); }
.rr-empty .s { font-size: 12.5px; }

/* ===================================================================
   LIVE VIEW (real-time board)
   =================================================================== */
.rr-live-banner { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-radius: 14px; background: rgba(245,158,11,.10); border: 1px solid rgba(245,158,11,.3); margin-bottom: 18px; font-size: 13px; color: var(--fg); }
.rr-live-banner svg { width: 18px; height: 18px; stroke: #F59E0B; stroke-width: 2; fill: none; flex: 0 0 auto; }
.rr-live-banner b { font-weight: 700; }
.rr-live-banner a { margin-left: auto; color: var(--k-violet); font-weight: 700; cursor: pointer; white-space: nowrap; }

.rr-live-list { display: flex; flex-direction: column; gap: 10px; }
.rr-live-row { display: flex; align-items: center; gap: 16px; padding: 16px 20px; border-radius: 16px; background: var(--bg-elev-1); border: 1px solid var(--border-soft); transition: border-color var(--t-fast); }
.rr-live-row:hover { border-color: rgba(185,104,199,.3); }
.rr-live-row .rnk { width: 40px; height: 40px; flex: 0 0 auto; }
.rr-live-row .rnk .rr-rank { width: 40px; height: 40px; border-radius: 11px; font-size: 14px; }
.rr-live-row .av { width: 44px; height: 44px; border-radius: 50%; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: #fff; }
.rr-live-row .info { flex: 1 1 auto; min-width: 0; }
.rr-live-row .info .nm { font-size: 16px; font-weight: 700; color: var(--fg); }
.rr-live-row .info .st { font-size: 12.5px; font-weight: 600; color: #34D399; display: inline-flex; align-items: center; gap: 6px; margin-top: 3px; }
.rr-live-row .info .st .gd { width: 7px; height: 7px; border-radius: 50%; background: #34D399; }
.rr-live-row .sc { text-align: right; }
.rr-live-row .sc .v { font-family: var(--font-num); font-weight: 800; font-size: 20px; letter-spacing: -.02em; color: var(--fg); font-variant-numeric: tabular-nums; }
.rr-live-row .sc .l { font-size: 11px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; }

/* statuts dynamiques pour la vue live temps réel */
.rr-live-row .info .st.playing { color: var(--k-orange); }
.rr-live-row .info .st.playing .gd { background: var(--k-orange); }
.rr-live-row .info .st.pending { color: var(--k-blue); }
.rr-live-row .info .st.pending .gd { background: var(--k-blue); }
.rr-live-row .info .st.expired { color: var(--fg-muted); }
.rr-live-row .info .st.expired .gd { background: var(--fg-muted); }

/* ===================================================================
   RIGHT RAIL
   =================================================================== */
.rr-rail { display: flex; flex-direction: column; gap: 18px; position: sticky; top: 0; }

/* Scan progress card */
.rr-prog-body { padding: 20px; display: flex; align-items: center; gap: 20px; }
.rr-donut { position: relative; width: 104px; height: 104px; flex: 0 0 auto; }
.rr-donut svg { width: 104px; height: 104px; transform: rotate(-90deg); }
.rr-donut .track { stroke: var(--surface-tint-strong); }
.rr-donut .val { stroke: url(#rr-grad); stroke-linecap: round; transition: stroke-dashoffset var(--t-slow) var(--ease-out); }
.rr-donut .ct { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; }
.rr-donut .ct .pct { font-family: var(--font-display); font-weight: 800; font-size: 24px; letter-spacing: -.02em; color: var(--fg); }
.rr-donut .ct .sub { font-size: 10px; color: var(--fg-muted); text-transform: uppercase; letter-spacing: .05em; }
.rr-prog-legend { flex: 1 1 auto; display: flex; flex-direction: column; gap: 9px; }
.rr-leg { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--fg-secondary); }
.rr-leg .d { width: 9px; height: 9px; border-radius: 3px; flex: 0 0 auto; }
.rr-leg b { color: var(--fg); font-weight: 700; margin-left: auto; font-variant-numeric: tabular-nums; }

/* Quick actions card */
.rr-actions { padding: 14px; display: flex; flex-direction: column; gap: 8px; }
.rr-act {
  display: flex; align-items: center; gap: 13px; width: 100%; text-align: left;
  padding: 12px 13px; border-radius: 13px; cursor: pointer;
  background: var(--surface-tint-light); border: 1px solid var(--border-soft); color: var(--fg);
  transition: transform var(--t-fast) var(--ease-out), border-color var(--t-fast), background var(--t-fast);
}
.rr-act:hover { transform: translateY(-1px); border-color: rgba(185,104,199,.36); background: var(--surface-tint); }
.rr-act .ai { width: 36px; height: 36px; border-radius: 10px; flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; background: var(--bg-elev-2); }
.rr-act .ai svg { width: 18px; height: 18px; stroke: var(--fg-secondary); stroke-width: 2; fill: none; }
.rr-act .at { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.rr-act .at .t { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.rr-act .at .s { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }
.rr-act .arr { color: var(--fg-muted); }
.rr-act .arr svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.rr-act.primary { background: var(--k-gradient-h); border-color: transparent; box-shadow: var(--shadow-button); }
.rr-act.primary .ai { background: rgba(255,255,255,.2); }
.rr-act.primary .ai svg, .rr-act.primary .arr svg { stroke: #fff; }
.rr-act.primary .at .t, .rr-act.primary .at .s { color: #fff; }
.rr-act.primary .at .s { opacity: .85; }

/* Détails recap card */
.rr-recap { padding: 6px 20px 18px; }
.rr-recap .row { display: flex; align-items: center; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border-soft); }
.rr-recap .row:last-child { border-bottom: 0; }
.rr-recap .row svg { width: 16px; height: 16px; stroke: var(--fg-muted); stroke-width: 2; fill: none; flex: 0 0 auto; }
.rr-recap .row .k { font-size: 12.5px; color: var(--fg-muted); }
.rr-recap .row .v { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--fg); text-align: right; }

/* ===================================================================
   MODALS / SHEETS
   =================================================================== */
.rr-modal-bg { position: fixed; inset: 0; z-index: 60; display: none; align-items: center; justify-content: center; padding: 32px; background: rgba(5,5,8,.62); backdrop-filter: blur(8px); opacity: 0; transition: opacity var(--t-base); }
.rr-modal-bg.open { display: flex; opacity: 1; }
.rr-modal { width: 100%; max-width: 460px; border-radius: 22px; background: var(--bg-elev-1); border: 1px solid var(--border-soft); box-shadow: 0 30px 80px rgba(0,0,0,.5); transform: translateY(14px) scale(.98); opacity: 0; transition: transform var(--t-base) var(--ease-out), opacity var(--t-base); overflow: hidden; }
.rr-modal-bg.open .rr-modal { transform: none; opacity: 1; }
.rr-modal .mhead { padding: 24px 26px 0; position: relative; }
.rr-modal .mhead .mic { width: 48px; height: 48px; border-radius: 14px; display: flex; align-items: center; justify-content: center; background: rgba(185,104,199,.14); margin-bottom: 14px; }
.rr-modal .mhead .mic svg { width: 24px; height: 24px; stroke: var(--k-violet); stroke-width: 1.9; fill: none; }
.rr-modal .mhead h3 { margin: 0; font-family: var(--font-display); font-weight: 800; font-size: 21px; letter-spacing: -.02em; color: var(--fg); }
.rr-modal .mhead p { margin: 7px 0 0; font-size: 13.5px; color: var(--fg-secondary); line-height: 1.5; }
.rr-modal .mbody { padding: 20px 26px; display: flex; flex-direction: column; gap: 14px; }
.rr-modal .mfoot { padding: 16px 26px 22px; display: flex; gap: 10px; }
.rr-mx { position: absolute; top: 18px; right: 18px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface-tint-light); color: var(--fg-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rr-mx svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }

.rr-field { display: flex; flex-direction: column; gap: 7px; }
.rr-field label { font-size: 12.5px; font-weight: 600; color: var(--fg-secondary); }
.rr-field .ipt { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border-radius: 12px; background: var(--surface-tint-light); border: 1px solid var(--border-soft); }
.rr-field .ipt svg { width: 16px; height: 16px; stroke: var(--fg-muted); stroke-width: 2; fill: none; }
.rr-field .ipt input, .rr-field .ipt textarea { flex: 1 1 auto; border: 0; background: transparent; color: var(--fg); font-size: 14px; outline: none; resize: none; }
.rr-row2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }

.rr-opt { display: flex; align-items: center; gap: 12px; padding: 13px 14px; border-radius: 13px; border: 1px solid var(--border-soft); background: var(--surface-tint-light); cursor: pointer; transition: border-color var(--t-fast), background var(--t-fast); }
.rr-opt:hover { border-color: rgba(185,104,199,.36); }
.rr-opt.on { border-color: var(--k-violet); background: rgba(185,104,199,.10); }
.rr-opt .ck { width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.rr-opt.on .ck { border-color: var(--k-violet); background: var(--k-violet); }
.rr-opt .ck svg { width: 12px; height: 12px; stroke: #fff; stroke-width: 3; fill: none; opacity: 0; }
.rr-opt.on .ck svg { opacity: 1; }
.rr-opt .ox { flex: 1 1 auto; }
.rr-opt .ox .t { font-size: 13.5px; font-weight: 600; color: var(--fg); }
.rr-opt .ox .s { font-size: 11.5px; color: var(--fg-muted); margin-top: 1px; }

.rr-mbtn { flex: 1 1 0; padding: 13px; border-radius: 13px; font-size: 14px; font-weight: 600; cursor: pointer; border: 1px solid var(--border-soft); background: var(--surface-tint-light); color: var(--fg); transition: background var(--t-fast), transform var(--t-fast); }
.rr-mbtn:hover { background: var(--surface-tint); }
.rr-mbtn.primary { flex: 1.6 1 0; background: var(--k-gradient-h); border-color: transparent; color: #fff; box-shadow: var(--shadow-button); display: inline-flex; align-items: center; justify-content: center; gap: 8px; }
.rr-mbtn.primary svg { width: 16px; height: 16px; stroke: #fff; stroke-width: 2; fill: none; }
.rr-mbtn:active { transform: scale(.98); }
.rr-mbtn.primary:disabled { opacity: .6; cursor: not-allowed; }

.rr-note { display: flex; align-items: flex-start; gap: 9px; font-size: 12px; color: var(--fg-muted); line-height: 1.45; padding: 11px 13px; border-radius: 11px; background: var(--surface-tint-light); }
.rr-note svg { width: 15px; height: 15px; stroke: var(--fg-muted); stroke-width: 2; fill: none; flex: 0 0 auto; margin-top: 1px; }

/* Detail drawer (participant) */
.rr-scrim { position: fixed; top: var(--ma-bar, 0px); left: 0; right: 0; bottom: 0; z-index: 55; background: rgba(5,5,8,.5); backdrop-filter: blur(4px); opacity: 0; pointer-events: none; transition: opacity var(--t-base); }
.rr-scrim.open { opacity: 1; pointer-events: auto; }
/* top décalé sous le bandeau « mode propriétaire / manager » (--ma-bar) pour ne pas être masqué. */
.rr-drawer { position: fixed; top: var(--ma-bar, 0px); right: 0; bottom: 0; z-index: 56; width: 400px; max-width: 92vw; background: var(--bg-elev-1); border-left: 1px solid var(--border-soft); box-shadow: -20px 0 60px rgba(0,0,0,.4); transform: translateX(100%); transition: transform var(--t-base) var(--ease-out); display: flex; flex-direction: column; }
.rr-drawer.open { transform: none; }
.rr-dr-head { padding: 22px 24px 18px; border-bottom: 1px solid var(--border-soft); display: flex; flex-direction: column; align-items: center; text-align: center; position: relative; }
.rr-dr-close { position: absolute; top: 16px; right: 16px; width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border-soft); background: var(--surface-tint-light); color: var(--fg-secondary); cursor: pointer; display: flex; align-items: center; justify-content: center; }
.rr-dr-close svg { width: 16px; height: 16px; stroke: currentColor; stroke-width: 2; fill: none; }
.rr-dr-head .av { width: 80px; height: 80px; border-radius: 50%; display: flex; align-items: center; justify-content: center; font-weight: 800; font-size: 28px; color: #fff; margin-bottom: 12px; box-shadow: 0 8px 24px rgba(0,0,0,.25); }
.rr-dr-head .nm { font-family: var(--font-display); font-weight: 800; font-size: 22px; letter-spacing: -.02em; color: var(--fg); }
.rr-dr-head .meta { display: flex; align-items: center; gap: 8px; margin-top: 10px; }
.rr-dr-body { flex: 1 1 auto; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 14px; }
/* Pied du drawer : réouverture d'une place validée (annulation de scan). */
.rr-dr-foot { flex: 0 0 auto; padding: 16px 24px calc(18px + env(safe-area-inset-bottom)); border-top: 1px solid var(--border-soft); }
.rr-dr-foot[hidden] { display: none; }
.rr-reopen-btn { width: 100%; height: 46px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 12px; border: 1px solid var(--border-soft); background: var(--bg-elev-2, rgba(255,255,255,.04)); color: var(--fg); font-family: inherit; font-size: 14px; font-weight: 700; cursor: pointer; transition: border-color var(--t-base), background var(--t-base), color var(--t-base); }
.rr-reopen-btn:hover { border-color: color-mix(in srgb, #ef4444 40%, transparent); color: #f87171; }
.rr-reopen-btn svg { width: 17px; height: 17px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.rr-reopen-btn.armed { border-color: color-mix(in srgb, #ef4444 60%, transparent); background: rgba(239,68,68,.12); color: #f87171; }
.rr-reopen-btn:disabled { opacity: .6; cursor: default; }
.rr-reopen-hint { margin: 8px 2px 0; font-size: 11.5px; line-height: 1.4; color: var(--fg-muted); text-align: center; }
.rr-dr-time { border-radius: 18px; padding: 20px; text-align: center; background: var(--bg-elev-2); position: relative; border: 1px solid var(--border-soft); }
.rr-dr-time::before { content:""; position:absolute; inset:0; border-radius:18px; padding:1.5px; background: var(--k-gradient); -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask-composite: exclude; pointer-events:none; }
.rr-dr-time .l { font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase; color: var(--fg-muted); }
.rr-dr-time .v { font-family: var(--font-num); font-weight: 800; font-size: 42px; letter-spacing: -.02em; margin-top: 6px; background: var(--k-gradient-h); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; font-variant-numeric: tabular-nums; }
.rr-dr-scan { display: flex; align-items: center; gap: 13px; padding: 15px; border-radius: 16px; border: 1px solid var(--border-soft); }
.rr-dr-scan .si { width: 44px; height: 44px; border-radius: 12px; flex: 0 0 auto; display: flex; align-items: center; justify-content: center; }
.rr-dr-scan .si svg { width: 22px; height: 22px; stroke-width: 2; fill: none; }
.rr-dr-scan .sx .t { font-size: 14px; font-weight: 700; }
.rr-dr-scan .sx .s { font-size: 12px; color: var(--fg-muted); margin-top: 2px; }
.rr-dr-list .row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-soft); }
.rr-dr-list .row:last-child { border-bottom: 0; }
.rr-dr-list .row svg { width: 16px; height: 16px; stroke: var(--fg-muted); stroke-width: 2; fill: none; }
.rr-dr-list .row .k { font-size: 12.5px; color: var(--fg-muted); }
.rr-dr-list .row .v { margin-left: auto; font-size: 13px; font-weight: 600; color: var(--fg); }

/* ===================================================================
   TOAST
   =================================================================== */
.rr-toast { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%) translateY(20px); z-index: 80; display: flex; align-items: center; gap: 10px; padding: 13px 18px; border-radius: 13px; background: var(--bg-elev-1); border: 1px solid var(--border-soft); box-shadow: 0 16px 40px rgba(0,0,0,.4); font-size: 13.5px; font-weight: 600; color: var(--fg); opacity: 0; pointer-events: none; transition: opacity var(--t-base), transform var(--t-base) var(--ease-out); }
.rr-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }
.rr-toast svg { width: 18px; height: 18px; stroke-width: 2.2; fill: none; stroke: #34D399; }

.rr-hidden { display: none !important; }

/* Loading / error states */
.rr-loading, .rr-fatal { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 40px; text-align: center; }
.rr-spin { width: 44px; height: 44px; animation: rrSpin .9s linear infinite; }
.rr-spin circle { stroke: var(--border); }
.rr-spin path { stroke: url(#rr-grad); }
@keyframes rrSpin { to { transform: rotate(360deg); } }

/* Entrance — désactivée : avec les View Transitions (SPA), l'entrée rejouait à
   chaque arrivée et provoquait un "flash". Le contenu apparaît directement. */
.rr-rise { opacity: 1; transform: none; animation: none; }

/* Responsive */
@media (max-width: 1180px) {
  .rr-kpis { grid-template-columns: repeat(3, 1fr); }
  .rr-grid { grid-template-columns: 1fr; }
  .rr-rail { position: static; flex-direction: row; flex-wrap: wrap; }
  .rr-rail > * { flex: 1 1 280px; }
}
@media (max-width: 640px) {
  .rr-topbar { height: auto; padding: 12px 16px 10px; flex-wrap: wrap; }
  .rr-stage { padding: 6px 16px 24px; }
  .rr-kpis { grid-template-columns: repeat(2, 1fr); }
}