/* ================= SINA DIGITAL — design system ================= */
:root{
  --navy:#1A1058;
  --navy-lift:#2E1F86;
  --cyan:#1FC9E1;
  --violet:#8B5CF6;

  --accent:var(--cyan);              /* pilote par le persona actif */
  --bg:#07070B;
  --bg-2:#0C0C14;
  --panel:rgba(255,255,255,.035);
  --line:rgba(255,255,255,.09);
  --text:#EDEDF2;
  --muted:#9A9AAB;

  --r:16px;
  --head:68px;
  --ease:cubic-bezier(.22,.8,.28,1);
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{
  margin:0; background:var(--bg); color:var(--text);
  font-family:'Poppins','Segoe UI',system-ui,sans-serif;
  font-size:16px; line-height:1.6; overflow-x:hidden;
  -webkit-font-smoothing:antialiased;
}
html[dir="rtl"] body{font-family:'Tajawal','Segoe UI',system-ui,sans-serif}
h1,h2,h3{line-height:1.2; margin:0; font-weight:600; letter-spacing:-.02em}
p{margin:0}
button,input,textarea{font:inherit; color:inherit}

/* halo d'ambiance */
.bg-aura{
  position:fixed; inset:0; z-index:0; pointer-events:none;
  background:
    radial-gradient(60vw 60vw at 18% 12%, color-mix(in srgb,var(--accent) 13%,transparent), transparent 60%),
    radial-gradient(50vw 50vw at 85% 78%, rgba(139,92,246,.13), transparent 62%),
    var(--bg);
  transition:background 1.2s var(--ease);
}

/* ========================= TOPBAR ========================= */
.topbar{
  position:sticky; top:0; z-index:50; height:var(--head);
  display:flex; align-items:center; gap:24px;
  padding:0 clamp(16px,3vw,34px);
  background:rgba(7,7,11,.72); backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.logo{display:flex; align-items:center; gap:11px; text-decoration:none; color:inherit; cursor:pointer}
.logo-mark{width:38px; height:38px; flex:none; filter:drop-shadow(0 0 12px rgba(31,201,225,.35))}
.logo-word{display:flex; flex-direction:column; line-height:1}
.logo-word b{font-size:19px; font-weight:700; letter-spacing:.03em}
.logo-word i{
  font-style:normal; font-size:9.5px; letter-spacing:.42em;
  color:var(--cyan); margin-top:3px; font-weight:500;
}
.topnav{display:flex; gap:22px; margin-inline-start:auto}
.topnav a{
  color:var(--muted); text-decoration:none; font-size:14px; font-weight:500;
  padding:6px 2px; border-bottom:1.5px solid transparent; transition:.2s var(--ease);
}
.topnav a:hover{color:var(--text); border-color:var(--accent)}

.lang{display:flex; gap:2px; background:var(--panel); border:1px solid var(--line); border-radius:99px; padding:3px}
.lang button{
  background:none; border:0; cursor:pointer; color:var(--muted);
  font-size:12px; font-weight:600; padding:5px 11px; border-radius:99px; transition:.2s var(--ease);
}
.lang button.on{background:var(--accent); color:#04121a}

/* ========================= SHELL ========================= */
.shell{
  position:relative; z-index:1;
  display:grid; grid-template-columns:minmax(0,1.06fr) minmax(0,1fr);
  gap:clamp(20px,3vw,44px);
  padding:0 clamp(16px,3vw,34px);
  max-width:1560px; margin:0 auto;
}

/* ========================= STAGE 3D ========================= */
.stage{
  position:sticky; top:var(--head);
  height:calc(100vh - var(--head));
  display:flex; flex-direction:column; gap:14px;
  padding:clamp(14px,2vw,24px) 0;
}
.stage-viewport{
  position:relative; flex:1; min-height:0;
  border:1px solid var(--line); border-radius:calc(var(--r) + 6px);
  overflow:hidden;
  background:radial-gradient(120% 90% at 50% 108%, color-mix(in srgb,var(--accent) 14%,transparent), #05050A 68%);
  box-shadow:0 40px 90px -50px color-mix(in srgb,var(--accent) 55%,transparent), inset 0 0 0 1px rgba(255,255,255,.03);
  transition:box-shadow .6s var(--ease);
}
body.is-speaking .stage-viewport{
  box-shadow:0 40px 110px -40px color-mix(in srgb,var(--accent) 85%,transparent), inset 0 0 0 1px color-mix(in srgb,var(--accent) 22%,transparent);
}
#twin-canvas{position:absolute; inset:0; width:100%; height:100%; display:block}

/* grille holographique */
.stage-grid{
  position:absolute; inset:0; pointer-events:none; opacity:.5;
  background-image:
    linear-gradient(rgba(255,255,255,.045) 1px,transparent 1px),
    linear-gradient(90deg,rgba(255,255,255,.045) 1px,transparent 1px);
  background-size:46px 46px;
  mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 78%);
  -webkit-mask-image:radial-gradient(70% 60% at 50% 45%,#000 30%,transparent 78%);
}

.stage-top{position:absolute; top:14px; inset-inline:14px; display:flex; gap:8px; align-items:center}
.badge{
  display:inline-flex; align-items:center; gap:7px;
  background:rgba(6,6,12,.68); backdrop-filter:blur(8px);
  border:1px solid var(--line); border-radius:99px;
  padding:5px 12px; font-size:11.5px; font-weight:500; letter-spacing:.03em;
}
.badge.muted{color:var(--muted); margin-inline-start:auto}
.dot{width:7px; height:7px; border-radius:99px; background:var(--muted); flex:none; transition:.3s}
body.is-thinking .dot{background:#F5B84B; animation:blink .7s infinite}
body.is-speaking .dot{background:var(--accent); box-shadow:0 0 10px var(--accent)}
@keyframes blink{50%{opacity:.25}}

.stage-bottom{position:absolute; bottom:0; inset-inline:0; padding:18px 16px 16px;
  background:linear-gradient(transparent,rgba(4,4,9,.9) 55%)}
.subtitle{
  min-height:56px; font-size:clamp(14px,1.15vw,16.5px); line-height:1.55;
  color:#fff; text-shadow:0 2px 18px rgba(0,0,0,.9);
  opacity:0; transform:translateY(6px); transition:.35s var(--ease);
}
body.is-speaking .subtitle,body.is-thinking .subtitle{opacity:1; transform:none}
.subtitle .caret{
  display:inline-block; width:2px; height:1.05em; vertical-align:-2px;
  background:var(--accent); margin-inline-start:3px; animation:blink .8s infinite;
}
.hud{
  display:flex; gap:14px; flex-wrap:wrap; margin-top:10px;
  font-size:10.5px; letter-spacing:.09em; color:var(--muted); text-transform:uppercase;
}
.hud b{color:var(--accent); font-weight:600}
.hud .total b{color:#fff}

.stage-controls{display:flex; align-items:center; gap:14px; flex-wrap:wrap}
.hint{font-size:11.5px; color:var(--muted)}

.btn{
  border:1px solid var(--line); background:var(--panel); color:var(--text);
  border-radius:99px; padding:11px 22px; font-size:14px; font-weight:600;
  cursor:pointer; transition:.25s var(--ease);
}
.btn:hover{transform:translateY(-1px)}
.btn.primary{
  background:linear-gradient(120deg,var(--accent),var(--violet));
  color:#050510; border-color:transparent;
  box-shadow:0 10px 34px -12px color-mix(in srgb,var(--accent) 85%,transparent);
}
.btn.primary:disabled{opacity:.55; cursor:progress; transform:none}

/* personas */
.personas-title{font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-bottom:8px}
.persona-row{display:flex; gap:9px; flex-wrap:wrap}
.persona{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:9px 14px; font-size:13px; font-weight:500; transition:.25s var(--ease);
}
.persona:hover{border-color:color-mix(in srgb,var(--accent) 45%,transparent)}
.persona.on{
  border-color:var(--accent); background:color-mix(in srgb,var(--accent) 13%,transparent);
  box-shadow:0 0 26px -10px var(--accent);
}
.pico{font-size:16px; line-height:1}

/* ========================= CONTENU ========================= */
.content{padding:clamp(26px,4vw,60px) 0 60px; display:flex; flex-direction:column; gap:clamp(40px,6vw,84px)}
.block{scroll-margin-top:calc(var(--head) + 20px)}
.eyebrow{
  font-size:11px; letter-spacing:.22em; text-transform:uppercase;
  color:var(--accent); margin-bottom:14px; font-weight:600;
}
h1{font-size:clamp(30px,3.5vw,50px); font-weight:700}
h2{font-size:clamp(20px,1.9vw,27px); margin-bottom:22px}
h2::after{
  content:""; display:block; width:34px; height:2px; margin-top:10px; border-radius:2px;
  background:linear-gradient(90deg,var(--accent),transparent);
}
h3{font-size:15.5px; margin-bottom:8px}
.lead{color:var(--muted); font-size:15.5px; margin-top:16px; max-width:56ch}
.click-tip{margin-top:22px; font-size:12.5px; color:var(--muted); display:flex; align-items:center; gap:9px}
.kbd{
  border:1px solid var(--line); border-radius:6px; padding:2px 8px;
  font-size:10.5px; letter-spacing:.08em; text-transform:uppercase; color:var(--accent);
}

.cards{display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:13px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:20px 19px; cursor:pointer; position:relative; overflow:hidden;
  transition:.3s var(--ease);
}
.card p{color:var(--muted); font-size:13.5px}
.card::before{
  content:""; position:absolute; inset-inline-start:0; top:0; bottom:0; width:2px;
  background:var(--accent); transform:scaleY(0); transform-origin:top; transition:.35s var(--ease);
}
.card:hover{background:rgba(255,255,255,.062); transform:translateY(-3px); border-color:rgba(255,255,255,.16)}
.card:hover::before{transform:scaleY(1)}
.card.glow{background:linear-gradient(160deg,color-mix(in srgb,var(--accent) 8%,transparent),var(--panel))}

.steps{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:11px; counter-reset:s}
.step{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:17px 19px; cursor:pointer; transition:.3s var(--ease);
}
.step p{color:var(--muted); font-size:13.5px}
.step:hover{transform:translateX(4px); border-color:color-mix(in srgb,var(--accent) 42%,transparent)}
html[dir="rtl"] .step:hover{transform:translateX(-4px)}

/* element en cours d'explication */
.spot{
  border-color:var(--accent) !important;
  box-shadow:0 0 0 1px var(--accent),0 0 44px -12px var(--accent) !important;
  background:color-mix(in srgb,var(--accent) 9%,transparent) !important;
}

.form{display:flex; flex-direction:column; gap:11px; max-width:520px; margin-top:22px}
.form input,.form textarea{
  background:var(--panel); border:1px solid var(--line); border-radius:12px;
  padding:13px 15px; font-size:14px; resize:vertical; transition:.2s;
}
.form input:focus,.form textarea:focus{outline:none; border-color:var(--accent)}
.form .btn{align-self:flex-start}
.form-note{font-size:13px; color:var(--accent)}

.foot{
  display:flex; gap:10px; flex-wrap:wrap; align-items:center;
  border-top:1px solid var(--line); padding-top:22px;
  font-size:12px; color:var(--muted);
}
.sep{opacity:.45}
.demo-note{color:#F5B84B; opacity:.9}

/* ========================= RESPONSIVE ========================= */
@media (max-width:1080px){
  .shell{grid-template-columns:1fr; gap:0}
  .topnav{display:none}
  .stage{
    position:sticky; top:var(--head); height:auto;
    padding-top:12px; padding-bottom:12px;
    background:linear-gradient(var(--bg) 76%,transparent); z-index:20;
  }
  .stage-viewport{height:44vh; flex:none}
  .personas{display:none}
  .content{padding-top:26px}
}
@media (max-width:560px){
  .stage-viewport{height:38vh}
  .stage-controls{gap:8px}
  .btn{padding:10px 17px; font-size:13px}
}
@media (prefers-reduced-motion:reduce){
  *{animation:none !important; transition-duration:.01ms !important}
  html{scroll-behavior:auto}
}