/* ═══════════════════════════════════════════════════════════════════════
   PRÉSENTATION WAKA × RED by SFR
   Système ORBIT v5 — adapté présentation 1920×1080
   ═══════════════════════════════════════════════════════════════════════ */

:root {
  /* Waka Orbit palette */
  --orbit-bg: #0F0F12;
  --orbit-bg-raised: #16161C;
  --orbit-bg-surface: #1E1E26;
  --orbit-bg-hover: #26262E;
  --orbit-border: #2A2A35;
  --orbit-border-strong: #3A3A48;
  --orbit-text-1: #E8F0F8;
  --orbit-text-2: #A8B0BC;
  --orbit-text-3: #6E727E;
  --orbit-text-4: #4A4E58;

  /* Brand accents */
  --waka-orange: #E8832A;
  --waka-orange-bright: #FF9A3D;
  --waka-cyan: #00BCD4;
  --waka-blue: #29B6F6;
  --waka-green-gecko: #5BB85B;
  --waka-yellow: #F1C40F;

  /* RED by SFR — la marque est en vert */
  --red-green: #2DBE60;
  --red-green-deep: #1F8E47;
  --red-green-glow: rgba(45, 190, 96, 0.18);

  --orbit-red: #C0392B;
  --orbit-white: #FFFFFF;
}

* { margin: 0; padding: 0; box-sizing: border-box; border-radius: 0 !important; }

html, body {
  background: var(--orbit-bg);
  font-family: 'DM Sans', -apple-system, sans-serif;
  color: var(--orbit-text-1);
  overflow: hidden;
}

deck-stage { background: var(--orbit-bg); }

deck-stage > section {
  background: var(--orbit-bg);
  font-family: 'DM Sans', sans-serif;
  color: var(--orbit-text-1);
  overflow: hidden;
  position: relative;
}

/* ═══ Slide chrome — header & footer common ═══ */
.slide-chrome-top {
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  border-bottom: 1px solid var(--orbit-border);
  background: var(--orbit-bg-raised);
  z-index: 10;
  font-size: 14px;
}
.slide-chrome-top .left {
  display: flex; align-items: center; gap: 14px;
  color: var(--orbit-text-2); font-weight: 500; letter-spacing: 0.5px;
}
.slide-chrome-top .left .dot { width: 8px; height: 8px; background: var(--waka-orange); }
.slide-chrome-top .left .x { color: var(--orbit-text-3); }
.slide-chrome-top .left .red { color: var(--red-green); font-weight: 700; }
.slide-chrome-top .right {
  display: flex; align-items: center; gap: 18px;
  color: var(--orbit-text-3); font-size: 12px; text-transform: uppercase; letter-spacing: 1px;
}
.slide-chrome-top .right .live {
  display: flex; align-items: center; gap: 6px;
  color: var(--red-green);
  padding: 4px 10px;
  background: var(--red-green-glow);
  border: 1px solid rgba(45,190,96,.35);
  font-size: 11px;
}
.slide-chrome-top .right .live .ld {
  width: 6px; height: 6px; background: var(--red-green); animation: blink 1.5s infinite;
}
@keyframes blink { 0%,100%{opacity:1} 50%{opacity:.3} }

.slide-chrome-bottom {
  position: absolute;
  bottom: 0; left: 0; right: 0;
  height: 48px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 64px;
  border-top: 1px solid var(--orbit-border);
  background: var(--orbit-bg-raised);
  z-index: 10;
  font-size: 12px;
  color: var(--orbit-text-3);
  text-transform: uppercase;
  letter-spacing: 1.5px;
  font-weight: 500;
}
.slide-chrome-bottom .breadcrumb { color: var(--orbit-text-3); }
.slide-chrome-bottom .breadcrumb b { color: var(--orbit-text-1); font-weight: 600; }
.slide-chrome-bottom .meta { display: flex; gap: 28px; align-items: center; }
.slide-chrome-bottom .meta span { display: flex; gap: 8px; align-items: center; }
.slide-chrome-bottom .meta i { color: var(--waka-orange); font-style: normal; }

/* ═══ Slide body ═══ */
.slide-body {
  position: absolute;
  top: 64px; bottom: 48px; left: 0; right: 0;
  padding: 64px 80px;
  display: flex; flex-direction: column;
}

/* ═══ Eyebrow ═══ */
.eyebrow {
  font-size: 14px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 3px;
  color: var(--waka-orange);
  margin-bottom: 24px;
  display: flex; align-items: center; gap: 14px;
}
.eyebrow .num {
  display: inline-flex;
  width: 32px; height: 32px;
  align-items: center; justify-content: center;
  background: var(--waka-orange);
  color: #fff;
  font-size: 13px;
  font-weight: 800;
}
.eyebrow .bar { height: 1px; flex: 1; background: var(--orbit-border-strong); max-width: 200px; }

/* ═══ Titles ═══ */
.title-xl {
  font-size: 96px; font-weight: 800; line-height: 0.95;
  letter-spacing: -2.5px;
  color: var(--orbit-text-1);
  margin-bottom: 24px;
}
.title-l {
  font-size: 64px; font-weight: 800; line-height: 1.02;
  letter-spacing: -1.5px;
  color: var(--orbit-text-1);
  margin-bottom: 16px;
}
.title-m {
  font-size: 48px; font-weight: 700; line-height: 1.1;
  letter-spacing: -0.8px;
  color: var(--orbit-text-1);
  margin-bottom: 12px;
}
.subtitle {
  font-size: 26px; font-weight: 400; line-height: 1.4;
  color: var(--orbit-text-2);
  max-width: 1100px;
  margin-bottom: 36px;
}

/* ═══ Body text scale ═══ */
.body-l { font-size: 28px; line-height: 1.5; color: var(--orbit-text-2); }
.body-m { font-size: 22px; line-height: 1.55; color: var(--orbit-text-2); }
.body-s { font-size: 18px; line-height: 1.55; color: var(--orbit-text-2); }
.label  { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orbit-text-3); }

/* ═══ Cards ═══ */
.card {
  background: var(--orbit-bg-raised);
  border: 1px solid var(--orbit-border);
  padding: 28px;
}
.card.surface { background: var(--orbit-bg-surface); }
.card-header {
  display: flex; align-items: center; gap: 10px;
  padding-bottom: 14px;
  border-bottom: 1px solid var(--orbit-border);
  margin-bottom: 20px;
}
.card-header i { color: var(--waka-orange); font-size: 18px; }
.card-header h3 { font-size: 14px; font-weight: 700; text-transform: uppercase; letter-spacing: 1.5px; color: var(--orbit-text-2); }

/* ═══ KPI ═══ */
.kpi { display: flex; flex-direction: column; gap: 10px; }
.kpi .label { color: var(--orbit-text-3); }
.kpi .val { font-size: 56px; font-weight: 800; color: var(--orbit-text-1); letter-spacing: -1.5px; line-height: 1; }
.kpi .val.orange { color: var(--waka-orange); }
.kpi .val.green { color: var(--red-green); }
.kpi .val.cyan { color: var(--waka-cyan); }
.kpi .delta { font-size: 14px; color: var(--orbit-text-2); }

/* ═══ Tag ═══ */
.tag {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px;
  background: var(--orbit-bg-surface);
  border: 1px solid var(--orbit-border);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--orbit-text-2);
}
.tag.orange { background: rgba(232,131,42,.12); border-color: rgba(232,131,42,.35); color: var(--waka-orange); }
.tag.green { background: var(--red-green-glow); border-color: rgba(45,190,96,.35); color: var(--red-green); }
.tag.cyan { background: rgba(0,188,212,.12); border-color: rgba(0,188,212,.35); color: var(--waka-cyan); }

/* ═══ Decorative grid background ═══ */
.grid-bg {
  position: absolute; inset: 0;
  background-image:
    linear-gradient(var(--orbit-border) 1px, transparent 1px),
    linear-gradient(90deg, var(--orbit-border) 1px, transparent 1px);
  background-size: 80px 80px;
  opacity: 0.18;
  pointer-events: none;
}

/* ═══ Section divider slide ═══ */
.section-divider {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; justify-content: space-between;
  padding: 80px;
  background: var(--orbit-bg-raised);
}
.section-divider::before {
  content: ''; position: absolute; inset: 0;
  background:
    radial-gradient(circle at 85% 25%, rgba(232,131,42,.12), transparent 50%),
    radial-gradient(circle at 15% 85%, rgba(45,190,96,.08), transparent 45%);
  pointer-events: none;
}
.section-divider .top { display: flex; justify-content: space-between; align-items: flex-start; position: relative; z-index: 2; }
.section-divider .center { position: relative; z-index: 2; }
.section-divider .bottom { display: flex; justify-content: space-between; align-items: flex-end; position: relative; z-index: 2; }

/* ═══ Quote block ═══ */
.quote-block {
  border-left: 3px solid var(--waka-orange);
  padding-left: 28px;
}
.quote-block .q {
  font-size: 32px; line-height: 1.4; font-weight: 400;
  color: var(--orbit-text-1);
  font-style: italic;
}
.quote-block .author { margin-top: 16px; font-size: 14px; color: var(--orbit-text-3); text-transform: uppercase; letter-spacing: 1.5px; }

/* ═══ Process step ═══ */
.step-num {
  display: inline-flex;
  width: 56px; height: 56px;
  align-items: center; justify-content: center;
  background: var(--orbit-bg-surface);
  border: 1px solid var(--orbit-border-strong);
  font-size: 22px;
  font-weight: 800;
  color: var(--waka-orange);
  font-family: 'DM Sans', sans-serif;
}

/* ═══ Animated orbit ring (signature Waka) ═══ */
.orbit-ring {
  position: relative;
  width: 320px; height: 320px;
}
.orbit-ring .ring {
  position: absolute; inset: 0;
  border: 1px dashed var(--orbit-border-strong);
  animation: spin 60s linear infinite;
}
.orbit-ring .ring.r2 { inset: 30px; animation-duration: 40s; animation-direction: reverse; }
.orbit-ring .ring.r3 { inset: 60px; animation-duration: 25s; }
@keyframes spin { to { transform: rotate(360deg); } }
.orbit-ring .ring::before {
  content: ''; position: absolute;
  width: 8px; height: 8px;
  background: var(--waka-orange);
  top: -4px; left: 50%; transform: translateX(-50%);
}
.orbit-ring .ring.r2::before { background: var(--waka-cyan); }
.orbit-ring .ring.r3::before { background: var(--red-green); }
.orbit-ring .center-dot {
  position: absolute; top: 50%; left: 50%;
  width: 80px; height: 80px;
  transform: translate(-50%, -50%);
  background: var(--waka-orange);
  display: flex; align-items: center; justify-content: center;
  color: #fff; font-weight: 800;
}

/* ═══ Bento ═══ */
.bento { display: grid; gap: 14px; height: 100%; }

/* ═══ Marquee strip ═══ */
.strip {
  display: flex; align-items: center; gap: 32px;
  padding: 14px 24px;
  background: var(--orbit-bg-surface);
  border: 1px solid var(--orbit-border);
  font-size: 13px; color: var(--orbit-text-3);
  text-transform: uppercase; letter-spacing: 2px;
}
.strip .sep { color: var(--orbit-text-4); }

/* ═══ Diagonal accent ═══ */
.accent-corner {
  position: absolute;
  top: 64px; right: 0;
  width: 2px; height: 200px;
  background: var(--waka-orange);
}

/* ═══ Tweaks panel positioning ═══ */
.tweaks-fab { z-index: 1000 !important; }

/* Bootstrap icons import */
@import url('https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.css');