/* SimulateurPro Player - CSS imported from immersium.fr - pixel-perfect */

/* ===== SHARED ===== */
/* ═══════════════════════════════════════════════════════════════════
   IMMERSIUM — CARIBBEAN EDITORIAL · Design System Shared
   ═══════════════════════════════════════════════════════════════════ */

:root{
  /* PALETTE */
  --bg:#F8F5EE;          --bg-alt:#F2EDE0;
  --paper:#FFFDF7;       --paper-hover:#FFFBEF;
  --ink:#0E1A2B;         --ink-soft:#2A3749;    --ink-mute:#5E6977;
  --line:#E8E0CE;        --line-soft:#F0E9D9;
  --cobalt:#000080;      --cobalt-dark:#00005C;
  --orange:#FF6B35;        --marine:#000080;   --orange-soft:#FFE4D4;
  --amber:#D97706;       --amber-soft:#FED7AA;
  --coral:#D32F2F;       --coral-soft:#FFEBEE;
  --plum:#7C3AED;        --plum-soft:#EDE9FE;
  --sand:#C9A96E;        --sand-soft:#F5E6C8;  --sand-text:#826D47;
  --ink-mute-text:#626C7A; --orange-text:#BF5027;
  --p-cobalt:#D6D6F0;
  /* RADIUS */
  --r-sm:8px; --r:12px; --r-lg:18px; --r-xl:24px;
  /* SHADOWS */
  --sh-1:0 1px 0 rgba(14,26,43,.04), 0 0 0 1px var(--line);
  --sh-2:0 2px 10px rgba(14,26,43,.05), 0 0 0 1px var(--line);
  --sh-lift:0 20px 40px -16px rgba(14,26,43,.14), 0 4px 10px rgba(14,26,43,.04);
  /* TYPO */
  --f-display:"Fraunces", Georgia, serif;
  --f-body:"Inter Tight", system-ui, sans-serif;
  --f-mono:"JetBrains Mono", ui-monospace, monospace;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%}
body{
  font-family:var(--f-body);
  background:var(--bg);
  color:var(--ink);
  font-size:14px;
  line-height:1.55;
  -webkit-font-smoothing:antialiased;
  font-feature-settings:"ss01","cv11";
}
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:9999;opacity:.5;mix-blend-mode:multiply;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='180' height='180'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.055  0 0 0 0 0.102  0 0 0 0 0.169  0 0 0 0.03 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}
button,a{font:inherit;color:inherit;text-decoration:none;border:none;background:none;cursor:pointer}
svg{display:block}
.mono{font-family:var(--f-mono);font-feature-settings:"tnum"}
.serif{font-family:var(--f-display)}
.italic{font-family:var(--f-display);font-style:italic;font-weight:500}
.hidden{display:none!important}

/* ═══════════════════════════════════════════════════
   PUBLIC NAVBAR
   ═══════════════════════════════════════════════════ */
.pub-nav{position:fixed;top:0;left:0;right:0;z-index:50;background:rgba(14,26,43,.96);backdrop-filter:blur(14px);
  -webkit-backdrop-filter:blur(14px);border-bottom:1px solid rgba(255,255,255,.08)}
body.has-pub-nav{padding-top:68px}
.pub-nav-inner{max-width:1240px;margin:0 auto;padding:16px 32px;display:flex;align-items:center;justify-content:space-between;gap:24px}
.pub-brand{display:flex;align-items:baseline;gap:10px}
.pub-brand .num{font-family:var(--f-display);font-style:italic;font-size:10.5px;color:var(--orange);letter-spacing:.18em;font-weight:500}
.pub-brand .name{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.02em;color:#fff}
.pub-brand .name em{font-style:italic;color:var(--orange);font-weight:500}
.pub-brand .pub-beta{font-family:var(--f-mono);font-size:8px;letter-spacing:.1em;background:var(--orange);color:#fff;padding:2px 6px;border-radius:4px;font-style:normal;font-weight:700;align-self:center}
.pub-links{display:flex;align-items:center;gap:4px}
.pub-links a{padding:8px 14px;border-radius:10px;font-size:13.5px;font-weight:500;color:rgba(255,255,255,.7);transition:background .15s,color .15s}
.pub-links a:hover{background:rgba(255,255,255,.08);color:#fff}
.pub-links a.active{color:#fff;font-weight:600}
.pub-cta{display:flex;align-items:center;gap:10px}

/* ═══════════════════════════════════════════════════
   BUTTONS / PILLS
   ═══════════════════════════════════════════════════ */
.btn{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:10px;font-size:13px;
  font-weight:600;transition:background .15s,transform .08s,box-shadow .15s;border:1px solid transparent;white-space:nowrap}
.btn:active{transform:scale(.98)}
.btn svg{width:14px;height:14px;stroke-width:2}
.btn-primary{background:var(--ink);color:#fff}
.btn-primary:hover{background:#1a2940}
.btn-jade{background:var(--orange);color:var(--ink);box-shadow:0 4px 12px -4px rgba(255,107,53,.5)}
.btn-jade:hover{background:#FF8659}
.btn-outline{background:var(--paper);border-color:var(--line);color:var(--ink)}
.btn-outline:hover{background:var(--paper-hover);border-color:var(--sand)}
.btn-ghost{background:transparent;color:var(--ink-soft)}
.btn-ghost:hover{background:var(--bg-alt)}
.btn-lg{padding:14px 24px;font-size:14px;border-radius:12px}
.btn-lg svg{width:16px;height:16px}

.pill{display:inline-flex;align-items:center;gap:6px;font-size:11px;padding:3px 10px;border-radius:999px;
  font-weight:600;letter-spacing:.02em;border:1px solid transparent}
.pill-jade{background:var(--orange-soft);color:var(--marine);border-color:rgba(0,0,128,.15)}
.pill-cobalt{background:var(--p-cobalt);color:var(--cobalt);border-color:rgba(0,0,128,.15)}
.pill-sand{background:var(--sand-soft);color:#7A5A20;border-color:rgba(201,169,110,.25)}
.pill-amber{background:var(--amber-soft);color:var(--amber);border-color:rgba(217,119,6,.2)}
.pill-coral{background:var(--coral-soft);color:var(--coral);border-color:rgba(211,47,47,.15)}
.pill-plum{background:var(--plum-soft);color:var(--plum);border-color:rgba(124,58,237,.15)}
.pill-ink{background:var(--ink);color:#fff}
.pill-outline{background:var(--paper);color:var(--ink-soft);border-color:var(--line)}
.pill .dot{width:6px;height:6px;border-radius:50%}

/* ═══════════════════════════════════════════════════
   LAYOUT HELPERS
   ═══════════════════════════════════════════════════ */
.container{max-width:1600px;margin:0 auto;padding:0 32px}
.section{padding:80px 0}
.section-tight{padding:48px 0}

.eyebrow{font-size:10.5px;letter-spacing:.28em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:14px}
.eyebrow-jade{color:var(--marine)}

h1,.h1{font-family:var(--f-display);font-size:clamp(36px,5.5vw,56px);font-weight:500;letter-spacing:-.025em;line-height:1.05}
h1 em,.h1 em{font-style:italic;color:var(--marine);font-weight:500}
h2,.h2{font-family:var(--f-display);font-size:clamp(28px,4vw,38px);font-weight:500;letter-spacing:-.02em;line-height:1.1}
h2 em,.h2 em{font-style:italic;color:var(--marine);font-weight:500}
h3,.h3{font-family:var(--f-display);font-size:clamp(20px,2.4vw,24px);font-weight:500;letter-spacing:-.01em;line-height:1.2}
h3 em,.h3 em{font-style:italic;font-weight:500}
.lede{font-size:clamp(15px,1.6vw,17px);line-height:1.55;color:var(--ink-soft);max-width:620px}

/* ═══════════════════════════════════════════════════
   ACCESSIBILITY — focus styles
   ═══════════════════════════════════════════════════ */
:focus{outline:none}
a:focus-visible,button:focus-visible,input:focus-visible,select:focus-visible,textarea:focus-visible,[tabindex]:focus-visible{outline:2px solid var(--orange);outline-offset:2px;border-radius:4px}

/* ═══════════════════════════════════════════════════
   CARD
   ═══════════════════════════════════════════════════ */
.card{background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);transition:box-shadow .2s,border-color .2s,transform .2s}
.card.lift:hover{border-color:var(--sand);box-shadow:var(--sh-lift);transform:translateY(-2px)}
.card-head{padding:20px 22px 12px;display:flex;align-items:center;justify-content:space-between;gap:12px}
.card-title{font-family:var(--f-display);font-size:18px;font-weight:500;letter-spacing:-.01em}
.card-sub{font-size:12px;color:var(--ink-mute);margin-top:2px}
.card-body{padding:4px 22px 22px}

/* ═══════════════════════════════════════════════════
   FOOTER COMMON
   ═══════════════════════════════════════════════════ */
.pub-footer{background:var(--ink);color:rgba(255,255,255,.75);padding:60px 0 32px;margin-top:80px;position:relative;overflow:hidden}
.pub-footer::before{content:"";position:absolute;top:-140px;right:-80px;width:320px;height:320px;border-radius:50%;
  background:radial-gradient(circle,rgba(255,107,53,.15) 0%,transparent 65%);pointer-events:none}
.pub-footer .container{position:relative}
.pub-footer-top{display:grid;grid-template-columns:2fr 1fr 1fr 1fr;gap:40px;padding-bottom:40px;border-bottom:1px solid rgba(255,255,255,.08)}
.pub-footer-brand .name{font-family:var(--f-display);font-size:26px;font-weight:500;color:#fff;letter-spacing:-.02em}
.pub-footer-brand .name em{font-style:italic;color:var(--orange);font-weight:500}
.pub-footer-brand .tag{margin-top:8px;font-size:10.5px;letter-spacing:.25em;text-transform:uppercase;color:rgba(255,255,255,.4);font-weight:600}
.pub-footer-brand p{margin-top:14px;font-size:13px;line-height:1.6;color:rgba(255,255,255,.6);max-width:320px}
.pub-footer-col h4{font-size:11px;letter-spacing:.22em;text-transform:uppercase;color:var(--orange);font-weight:600;margin-bottom:14px}
.pub-footer-col ul{list-style:none;display:flex;flex-direction:column;gap:8px}
.pub-footer-col a{font-size:13px;color:rgba(255,255,255,.7);transition:color .15s}
.pub-footer-col a:hover{color:var(--orange)}
.pub-footer-bottom{padding-top:28px;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;font-size:12px;color:rgba(255,255,255,.4)}

/* ═══════════════════════════════════════════════════
   RESPONSIVE
   ═══════════════════════════════════════════════════ */
@media(max-width:1024px){
  .pub-footer-top{grid-template-columns:2fr 1fr 1fr;gap:32px}
  .pub-footer-brand{grid-column:1/-1}
}
@media(max-width:960px){
  .container{padding:0 20px}
  .pub-nav-inner{padding:14px 20px}
  .pub-links{display:none}
}
@media(max-width:768px){
  .section{padding:56px 0}
  .section-tight{padding:36px 0}
  .pub-footer-top{grid-template-columns:1fr 1fr;gap:28px}
  .pub-footer{padding:48px 0 28px;margin-top:56px}
  .pub-footer-bottom{flex-direction:column;align-items:flex-start}
  .page-hero,.contact-head,.legal-hero{text-align:center}
  .page-hero .lede,.contact-head .sub,.legal-hero .lede,.page-hero p,.contact-head p{margin-left:auto;margin-right:auto}
}
@media(max-width:480px){
  .container{padding:0 16px}
  .pub-nav-inner{padding:12px 16px;gap:12px}
  .pub-brand .name{font-size:19px}
  .pub-footer-top{grid-template-columns:1fr;gap:24px}
  .section{padding:44px 0}
  .btn{padding:10px 16px;font-size:12.5px}
  .btn-lg{padding:13px 20px;font-size:13.5px}
  .page-hero,.contact-head,.legal-hero{padding:56px 0 36px;text-align:center}
  .page-hero .container,.contact-head .container,.legal-hero .container{padding:0 16px}
  .page-hero .eyebrow,.contact-head .eyebrow,.legal-hero .eyebrow{display:inline-block;margin-left:auto;margin-right:auto}
  .page-hero h1,.contact-head h1,.legal-hero h1{font-size:clamp(26px,7vw,34px)}
  .page-hero .lede,.contact-head .sub,.legal-hero .lede,.page-hero p,.contact-head p{max-width:320px;font-size:14px;margin-left:auto;margin-right:auto}
}


/* ===== GAME PAGE ===== */

/* ═══════════════════════════════════════════════════
   GAME PAGE — Caribbean Editorial
   ═══════════════════════════════════════════════════ */

/* SHELL */
.game-shell{display:flex;flex-direction:column;height:100vh;overflow:hidden}

/* TOPBAR */
.game-topbar{display:flex;align-items:center;gap:16px;padding:10px 20px;background:var(--paper);border-bottom:1px solid var(--line);flex-shrink:0;z-index:40}
.game-topbar-left{display:flex;align-items:center;gap:12px;min-width:0;flex:1}
.game-back{display:flex;align-items:center;justify-content:center;width:34px;height:34px;border-radius:10px;background:var(--bg);border:1px solid var(--line);color:var(--ink);transition:all .15s;flex-shrink:0}
.game-back:hover{background:var(--paper-hover);border-color:var(--sand)}
.game-crumb{display:flex;align-items:baseline;gap:8px;font-size:13px;color:var(--ink-soft);min-width:0;overflow:hidden}
.game-crumb .ord{font-family:var(--f-display);font-style:italic;font-size:11px;color:var(--sand);letter-spacing:.18em;font-weight:500;flex-shrink:0}
.game-crumb .slash{color:var(--line);flex-shrink:0}
.game-crumb .ch{font-family:var(--f-mono);font-size:11.5px;color:var(--ink-mute);flex-shrink:0}
.game-progress{display:flex;align-items:center;gap:8px;flex-shrink:0}
.game-progress span{font-family:var(--f-mono);font-size:11px;color:var(--cobalt);font-weight:600}
.game-progress .bar{width:100px;height:5px;background:var(--bg-alt);border-radius:99px;overflow:hidden}
.game-progress .fill{height:100%;background:var(--cobalt);border-radius:99px;transition:width .4s}
.game-topbar-right{display:flex;align-items:center;gap:10px;flex-shrink:0}

/* MAIN LAYOUT */
.game-main{display:grid;grid-template-columns:240px 1fr 260px;flex:1;overflow:hidden}

/* SIDEBAR LEFT */
.game-side{padding:20px;overflow-y:auto;background:var(--paper);border-right:1px solid var(--line)}
.game-side h5{font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:10px}
.ch-list{display:flex;flex-direction:column;gap:2px;margin-bottom:20px}
.ch-item{display:flex;align-items:center;gap:10px;padding:7px 10px;border-radius:8px;font-size:12.5px;color:var(--ink-soft);cursor:pointer;transition:background .12s,color .12s}
.ch-item:hover{background:var(--bg-alt);color:var(--ink)}
.ch-item.current{background:var(--cobalt);color:#fff;font-weight:600}
.ch-item.done{color:var(--ink-mute)}
.ch-item.done .ch-num{background:var(--bg-alt);color:var(--ink-mute);border-color:var(--line)}
.ch-item.locked{color:var(--ink-mute);opacity:.5;cursor:default}
.ch-item.locked .ch-num{position:relative}
.ch-item.locked .ch-num::after{content:'\1F512';font-size:9px;position:absolute;right:-2px;bottom:-2px}

/* PAYWALL OVERLAY */
.paywall-overlay{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;background:rgba(14,26,43,.85);backdrop-filter:blur(8px);animation:pw-in .3s}
@keyframes pw-in{from{opacity:0}to{opacity:1}}
.paywall-box{background:var(--paper);border-radius:20px;max-width:520px;width:92%;padding:48px 40px;text-align:center;box-shadow:0 24px 80px -16px rgba(0,0,0,.5);position:relative}
.paywall-box .pw-icon{width:64px;height:64px;border-radius:16px;background:linear-gradient(135deg,var(--orange),#FF8659);display:flex;align-items:center;justify-content:center;margin:0 auto 20px;font-size:28px}
.paywall-box h2{font-family:var(--f-display);font-size:28px;font-weight:500;letter-spacing:-.02em;margin-bottom:8px}
.paywall-box h2 em{font-style:italic;color:var(--marine)}
.paywall-box .pw-sub{font-size:14px;color:var(--ink-soft);line-height:1.6;margin-bottom:28px}
.paywall-box .pw-plans{display:flex;flex-direction:column;gap:10px;margin-bottom:24px}
.paywall-box .pw-plan{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border:1px solid var(--line);border-radius:12px;text-decoration:none;color:var(--ink);transition:all .15s}
.paywall-box .pw-plan:hover{border-color:var(--orange);background:rgba(255,107,53,.05)}
.paywall-box .pw-plan .pw-plan-name{font-weight:600;font-size:14px}
.paywall-box .pw-plan .pw-plan-desc{font-size:12px;color:var(--ink-mute);margin-top:2px}
.paywall-box .pw-plan .pw-plan-price{font-family:var(--f-display);font-size:20px;font-weight:500;color:var(--orange);white-space:nowrap}
.paywall-box .pw-plan.featured{border-color:var(--orange);background:rgba(255,107,53,.06)}
.paywall-box .pw-close{position:absolute;top:16px;right:16px;width:32px;height:32px;border-radius:8px;border:1px solid var(--line);background:var(--paper);display:flex;align-items:center;justify-content:center;cursor:pointer;font-size:16px;color:var(--ink-mute);transition:all .12s}
.paywall-box .pw-close:hover{background:var(--bg-alt);color:var(--ink)}
.paywall-box .pw-free{font-size:12px;color:var(--ink-mute);margin-top:12px}
.paywall-box .pw-free a{color:var(--cobalt);text-decoration:underline}
.ch-num{width:24px;height:24px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:12px;font-weight:500;background:var(--bg);border:1px solid var(--line);flex-shrink:0}
.ch-item.current .ch-num{background:rgba(255,255,255,.2);border-color:rgba(255,255,255,.3);color:#fff}

/* CONTENT AREA */
.game-content{padding:32px 40px;overflow-y:auto}
.game-hero{margin-bottom:32px}
.game-hero .ord{font-family:var(--f-display);font-style:italic;font-size:12px;color:var(--sand);letter-spacing:.22em;text-transform:uppercase;font-weight:500;margin-bottom:8px}
.game-hero h1{font-family:var(--f-display);font-size:36px;font-weight:500;letter-spacing:-.025em;line-height:1.1}
.game-hero h1 em{font-style:italic;color:var(--marine);font-weight:500}
.game-hero .meta{display:flex;gap:18px;margin-top:14px;font-size:12px;color:var(--ink-mute)}
.game-hero .meta span{display:flex;align-items:center;gap:5px}

/* BRIEFING */
.game-briefing{padding:20px 24px;background:var(--bg);border-left:3px solid var(--sand);border-radius:0 var(--r) var(--r) 0;margin-bottom:28px}
.game-briefing .from{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:10px}
.game-briefing .content{font-size:14px;line-height:1.65;color:var(--ink-soft)}

/* COMMUNICATIONS */
.comm-block{margin-bottom:20px;border-radius:var(--r-lg);overflow:hidden;border:1px solid var(--line)}
.comm-header{display:flex;align-items:center;gap:10px;padding:12px 18px;font-size:12px;font-weight:600;letter-spacing:.05em}
.comm-header .comm-icon{width:28px;height:28px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px;flex-shrink:0}
.comm-header .comm-from{font-size:13px;font-weight:600}
.comm-header .comm-channel{font-size:10px;letter-spacing:.15em;text-transform:uppercase;opacity:.7;margin-left:auto}
.comm-body{padding:16px 20px;font-size:13.5px;line-height:1.65;color:var(--ink-soft);background:var(--paper)}
.comm-body .comm-subject{font-weight:600;color:var(--ink);margin-bottom:8px;font-size:12px}
.comm-email .comm-header{background:rgba(0,85,255,.06);color:var(--cobalt)}
.comm-email .comm-icon{background:rgba(0,85,255,.12);color:var(--cobalt)}
.comm-teams .comm-header{background:rgba(88,86,214,.06);color:#5856D6}
.comm-teams .comm-icon{background:rgba(88,86,214,.12);color:#5856D6}
.comm-visio .comm-header{background:rgba(13,148,136,.06);color:#0D9488}
.comm-visio .comm-icon{background:rgba(13,148,136,.12);color:#0D9488}
.comm-notif .comm-header{background:rgba(220,38,38,.06);color:#DC2626}
.comm-notif .comm-icon{background:rgba(220,38,38,.12);color:#DC2626}
.comm-vocal .comm-header{background:rgba(245,158,11,.06);color:#D97706}
.comm-vocal .comm-icon{background:rgba(245,158,11,.12);color:#D97706}

/* ── Knowledge base ── */
.kb-list { display: flex; flex-direction: column; gap: 16px; }
.kb-card {
  background: linear-gradient(135deg, #F8FAFF 0%, #F0F4FF 100%);
  border: 1px solid #C7D7FF; border-radius: var(--r-lg); overflow: hidden;
}
.kb-card-head { padding: 14px 20px 10px; border-bottom: 1px solid #C7D7FF; display: flex; align-items: center; gap: 10px; }
.kb-card-head h3 { font-size: 15px; font-weight: 700; color: #1E3A8A; margin: 0; }
.kb-tag { padding: 2px 8px; border-radius: 999px; font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; background: #DBEAFE; color: #1E40AF; }
.kb-body { padding: 16px 20px; display: flex; flex-direction: column; gap: 12px; }
.kb-row { display: grid; grid-template-columns: 90px 1fr; gap: 10px; align-items: baseline; }
.kb-row-label { font-size: 10px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: #64748B; padding-top: 2px; }
.kb-row-content { font-size: 14px; color: var(--ink); line-height: 1.6; }
.kb-row-content strong { color: #1E3A8A; }

/* ── Progress steps within challenge ── */
.phase-steps {
  display: flex; align-items: center; gap: 0; margin-bottom: 28px;
}
.phase-step {
  display: flex; align-items: center; flex: 1;
}
.phase-step-dot {
  width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--line);
  display: flex; align-items: center; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--ink-mute); flex-shrink: 0;
  transition: all .25s;
}
.phase-step.done .phase-step-dot { background: #16A34A; border-color: #16A34A; color: #fff; }
.phase-step.active .phase-step-dot { background: var(--cobalt); border-color: var(--cobalt); color: #fff; }
.phase-step-line { flex: 1; height: 2px; background: var(--line); margin: 0 4px; transition: background .25s; }
.phase-step.done + .phase-step .phase-step-line,
.phase-step.done .phase-step-line { background: #16A34A; }
.phase-step-label { font-size: 10px; color: var(--ink-mute); text-align: center; margin-top: 4px; }
.phase-step-wrap { display: flex; flex-direction: column; align-items: center; }

/* DOCUMENT */
.game-doc{padding:24px;background:var(--paper);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:28px;font-size:14px;line-height:1.65;color:var(--ink-soft);max-height:400px;overflow-y:auto}
.game-doc h3,.game-doc h4{color:var(--ink);margin:16px 0 8px}
.game-doc p{margin-bottom:10px}
.game-doc ul,.game-doc ol{margin:8px 0 12px 20px}
.game-doc li{margin-bottom:4px}
.game-doc table{width:100%;border-collapse:collapse;margin:12px 0}
.game-doc th,.game-doc td{padding:8px 12px;border:1px solid var(--line);font-size:13px;text-align:left}
.game-doc th{background:var(--bg);font-weight:600;color:var(--ink)}

/* QUESTIONS */
.game-q{margin-bottom:28px}
.game-q .label{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;font-weight:600;margin-bottom:10px}
.game-q .label .type-tag{color:var(--cobalt)}
.game-q h3{font-family:var(--f-display);font-size:22px;font-weight:500;letter-spacing:-.01em;line-height:1.25;margin-bottom:16px}
.choice-list{display:flex;flex-direction:column;gap:8px}
.choice{display:flex;gap:12px;padding:14px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:all .15s}
.choice:hover{background:var(--paper-hover);border-color:var(--sand)}
.choice.selected{background:rgba(0,0,128,.06);border-color:var(--cobalt)}
.choice.correct{background:rgba(46,125,50,.08);border-color:#2E7D32}
.choice.incorrect{background:rgba(211,47,47,.06);border-color:var(--coral)}
.ch-radio{width:20px;height:20px;border-radius:50%;border:2px solid var(--line);flex-shrink:0;margin-top:2px;position:relative;transition:all .15s}
.choice.selected .ch-radio{border-color:var(--cobalt);background:var(--cobalt)}
.choice.selected .ch-radio::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.choice.correct .ch-radio{border-color:#2E7D32;background:#2E7D32}
.choice.correct .ch-radio::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.choice.incorrect .ch-radio{border-color:var(--coral);background:var(--coral)}
.choice.incorrect .ch-radio::after{content:"";position:absolute;top:50%;left:50%;width:6px;height:6px;border-radius:50%;background:#fff;transform:translate(-50%,-50%)}
.ch-check{width:20px;height:20px;border-radius:6px;border:2px solid var(--line);flex-shrink:0;margin-top:2px;position:relative;transition:all .15s}
.choice.selected .ch-check{border-color:var(--cobalt);background:var(--cobalt)}
.choice.selected .ch-check::after{content:"\2713";position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);color:#fff;font-size:12px;font-weight:700}
.choice .text{font-size:13.5px;line-height:1.5;color:var(--ink-soft)}
.choice .text strong{color:var(--ink);font-weight:600}

/* ORDERING */
.ordering-list{display:flex;flex-direction:column;gap:6px}
.ordering-item{display:flex;align-items:center;gap:10px;padding:12px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);cursor:grab;transition:all .15s;user-select:none}
.ordering-item:hover{background:var(--paper-hover);border-color:var(--sand)}
.ordering-item.dragging{opacity:.5;border-color:var(--cobalt);background:rgba(0,85,255,.06)}
.ordering-item .ord-num{width:26px;height:26px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:13px;font-weight:600;background:var(--bg-alt);color:var(--ink-mute);flex-shrink:0}
.ordering-item .ord-text{font-size:13.5px;line-height:1.4;color:var(--ink-soft);flex:1}
.ordering-item .ord-handle{display:flex;flex-direction:column;gap:1px;opacity:.4;flex-shrink:0;cursor:grab}
.ordering-item .ord-handle span{display:block;width:14px;height:2px;background:var(--ink-mute);border-radius:1px}
.ordering-item.correct-pos{background:rgba(46,125,50,.08);border-color:#2E7D32}
.ordering-item.correct-pos .ord-num{background:#2E7D32;color:#fff}
.ordering-item.incorrect-pos{background:rgba(211,47,47,.06);border-color:var(--coral)}
.ordering-item.incorrect-pos .ord-num{background:var(--coral);color:#fff}
.ordering-btns{display:flex;gap:4px;flex-shrink:0}
.ordering-btns button{width:28px;height:28px;border:1px solid var(--line);border-radius:6px;background:var(--paper);cursor:pointer;display:flex;align-items:center;justify-content:center;color:var(--ink-mute);transition:all .12s;font-size:14px;padding:0}
.ordering-btns button:hover{background:var(--bg-alt);color:var(--ink);border-color:var(--sand)}

/* MATCHING */
.matching-zone{display:flex;gap:20px;flex-wrap:wrap}
.matching-col{flex:1;min-width:200px;display:flex;flex-direction:column;gap:6px}
.matching-col h6{font-size:10px;letter-spacing:.18em;text-transform:uppercase;color:var(--ink-mute);font-weight:600;margin-bottom:6px}
.matching-item{padding:12px 16px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);font-size:13px;line-height:1.4;color:var(--ink-soft);cursor:pointer;transition:all .15s}
.matching-item:hover{border-color:var(--sand);background:var(--paper-hover)}
.matching-item.selected{border-color:var(--cobalt);background:rgba(0,85,255,.06);color:var(--ink)}
.matching-item.matched{border-color:#2E7D32;background:rgba(46,125,50,.08);cursor:default}
.matching-item.matched::before{content:"\2713 ";color:#2E7D32;font-weight:700}
.matching-item.error{border-color:var(--coral);background:rgba(211,47,47,.06)}
.matching-pairs-display{margin-top:12px;display:flex;flex-direction:column;gap:6px}
.matching-pair-row{display:flex;align-items:center;gap:8px;padding:8px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);font-size:12.5px}
.matching-pair-row .mp-left{font-weight:600;color:var(--ink);flex:1}
.matching-pair-row .mp-arrow{color:var(--ink-mute);flex-shrink:0}
.matching-pair-row .mp-right{color:var(--ink-soft);flex:1;text-align:right}
.matching-pair-row.mp-correct{border-color:#2E7D32;background:rgba(46,125,50,.06)}
.matching-pair-row.mp-incorrect{border-color:var(--coral);background:rgba(211,47,47,.06)}

/* CHECKBOX (uses .choice-list + .ch-check already defined) */

/* TUTO */
.tuto-video{margin-bottom:20px;border-radius:var(--r-lg);overflow:hidden;background:#000;position:relative;padding-bottom:56.25%;height:0}
.tuto-video iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.tuto-link{display:inline-flex;align-items:center;gap:8px;padding:14px 20px;background:rgba(220,38,38,.06);border:1px solid rgba(220,38,38,.15);border-radius:var(--r);color:#DC2626;font-size:13px;font-weight:600;margin-bottom:16px;text-decoration:none;transition:all .15s}
.tuto-link:hover{background:rgba(220,38,38,.1);border-color:rgba(220,38,38,.25)}

/* TOOL / SCREENSHOT */
.tool-instruction{padding:18px 22px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);margin-bottom:16px;font-size:13.5px;line-height:1.65;color:var(--ink-soft)}
.tool-instruction h6{font-size:10.5px;letter-spacing:.15em;text-transform:uppercase;color:var(--cobalt);font-weight:600;margin-bottom:10px}
.tool-instruction ol{margin:8px 0 0 20px;padding:0}
.tool-instruction li{margin-bottom:6px}
.tool-link{display:inline-flex;align-items:center;gap:8px;padding:12px 20px;background:var(--cobalt);color:#fff;border-radius:var(--r);font-size:13px;font-weight:600;text-decoration:none;margin-bottom:16px;transition:all .15s}
.tool-link:hover{opacity:.9}

/* FEEDBACK */
.feedback{padding:14px 18px;border-radius:var(--r);margin-top:8px;font-size:13px;line-height:1.55;display:none}
.feedback.show{display:block}
.feedback.correct{background:rgba(46,125,50,.08);border:1px solid rgba(46,125,50,.2);color:#1B5E20}
.feedback.incorrect{background:rgba(211,47,47,.06);border:1px solid rgba(211,47,47,.15);color:#B71C1C}

/* FREE RESPONSE */
.free-textarea{width:100%;min-height:120px;padding:14px 16px;border:1px solid var(--line);border-radius:var(--r);font-family:var(--f-body);font-size:14px;line-height:1.6;color:var(--ink);background:var(--bg);resize:vertical;transition:border-color .15s}
.free-textarea:focus{outline:none;border-color:var(--cobalt)}
.free-textarea:disabled{opacity:.6;cursor:not-allowed;background:var(--bg-alt)}


/* FREE RESPONSE - Rich Editor */
.rich-editor-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;transition:border-color .15s;background:var(--bg)}
.rich-editor-wrap:focus-within{border-color:var(--cobalt)}
.rich-editor-wrap.disabled{opacity:.6;pointer-events:none;background:var(--bg-alt)}
.re-toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:2px;padding:6px 8px;background:var(--bg-alt);border-bottom:1px solid var(--line)}
.re-toolbar button{display:inline-flex;align-items:center;justify-content:center;width:30px;height:28px;border:none;background:transparent;border-radius:4px;cursor:pointer;color:var(--ink-soft);font-size:14px;font-weight:600;transition:all .12s}
.re-toolbar button:hover{background:rgba(0,0,0,.06);color:var(--ink)}
.re-toolbar button.active{background:var(--cobalt);color:#fff}
.re-toolbar .re-sep{width:1px;height:20px;background:var(--line);margin:0 4px}
.re-toolbar .re-upload-btn{width:auto;padding:0 10px;gap:5px;font-size:11px;font-weight:600;letter-spacing:.03em}
.re-body{min-height:120px;max-height:400px;overflow-y:auto;padding:14px 16px;font-family:var(--f-body);font-size:14px;line-height:1.7;color:var(--ink);outline:none}
.re-body:empty::before{content:attr(data-placeholder);color:var(--ink-mute);pointer-events:none}
.re-body ul,.re-body ol{margin:4px 0 4px 20px;padding:0}
.re-body li{margin-bottom:2px}
.re-body blockquote{margin:8px 0;padding:8px 14px;border-left:3px solid var(--cobalt);background:rgba(0,85,255,.04);border-radius:0 var(--r) var(--r) 0}
.re-attachments{padding:8px 12px;border-top:1px solid var(--line);background:var(--bg-alt)}
.re-attachments:empty{display:none}
.re-file-chip{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;background:var(--bg);border:1px solid var(--line);border-radius:999px;font-size:11px;color:var(--ink-soft);margin:2px 4px 2px 0}
.re-file-chip .re-file-icon{font-size:13px}
.re-file-chip .re-file-remove{cursor:pointer;color:var(--ink-mute);font-size:14px;margin-left:2px;transition:color .12s}
.re-file-chip .re-file-remove:hover{color:#DC2626}
.re-file-chip .re-file-name{max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.re-file-input{display:none}
/* AI FEEDBACK */
.ai-loading{display:flex;align-items:center;gap:10px;padding:14px 18px;background:rgba(0,85,255,.06);border:1px solid rgba(0,85,255,.15);border-radius:var(--r);margin-top:8px;font-size:13px;color:var(--cobalt)}
.ai-spinner{width:18px;height:18px;border:2px solid rgba(0,85,255,.2);border-top-color:var(--cobalt);border-radius:50%;animation:aispin .6s linear infinite}
@keyframes aispin{to{transform:rotate(360deg)}}
.ai-feedback{padding:18px 20px;border-radius:var(--r-lg);margin-top:10px;font-size:13px;line-height:1.6;border:1px solid var(--line)}
.ai-feedback.good{background:rgba(13,148,136,.06);border-color:rgba(13,148,136,.2)}
.ai-feedback.average{background:rgba(245,158,11,.06);border-color:rgba(245,158,11,.2)}
.ai-feedback.poor{background:rgba(211,47,47,.06);border-color:rgba(211,47,47,.15)}
.ai-score{display:inline-flex;align-items:center;gap:6px;font-family:var(--f-display);font-size:28px;font-weight:500;margin-bottom:10px}
.ai-score .out-of{font-size:14px;color:var(--ink-mute);font-weight:400}
.ai-detail{margin-top:12px;font-size:12px}
.ai-detail h6{font-size:10px;letter-spacing:.15em;text-transform:uppercase;font-weight:700;margin-bottom:6px}
.ai-detail ul{margin:0 0 10px 16px;padding:0}
.ai-detail li{margin-bottom:3px}
.ai-badge{display:inline-block;font-size:10px;font-weight:700;letter-spacing:.1em;text-transform:uppercase;padding:2px 8px;border-radius:999px;margin-left:8px}
.ai-badge.ia{background:rgba(0,85,255,.1);color:var(--cobalt)}

/* MEMO */
.game-memo{padding:16px 20px;background:var(--bg-alt);border:1px dashed var(--sand);border-radius:var(--r);margin-bottom:28px;font-size:13px;line-height:1.6;color:var(--ink-soft)}
.game-memo h5{font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--sand);font-weight:600;margin-bottom:8px}

/* ACTIONS */
.game-actions{display:flex;align-items:center;justify-content:space-between;gap:16px;padding-top:24px;border-top:1px solid var(--line);margin-top:32px}
.game-help{font-size:11.5px;color:var(--ink-mute);font-style:italic}

/* RIGHT SIDEBAR (toolbox) */
.game-side-r{border-right:none;border-left:1px solid var(--line)}
.toolbox .tool-card{padding:12px 14px;background:var(--bg);border:1px solid var(--line);border-radius:var(--r);margin-bottom:8px;cursor:pointer;transition:all .15s}
.toolbox .tool-card:hover{background:var(--paper-hover);border-color:var(--sand)}
.toolbox .tool-card .t{font-size:12.5px;font-weight:600;color:var(--ink);display:flex;justify-content:space-between;align-items:center}
.toolbox .tool-card .k{font-family:var(--f-mono);font-size:10px;color:var(--ink-mute);background:var(--bg-alt);padding:2px 6px;border-radius:4px}
.toolbox .tool-card .d{font-size:11.5px;color:var(--ink-mute);margin-top:4px}

/* NO DATA */
.no-data{padding:60px 40px;text-align:center}
.no-data h2{font-family:var(--f-display);font-size:28px;font-weight:500;margin-bottom:12px}
.no-data p{color:var(--ink-soft);font-size:15px;max-width:480px;margin:0 auto 24px}

/* ONBOARDING */
.onboarding-screen{padding:0}
.onboarding-screen .ob-hero{text-align:center;padding:48px 40px 32px;border-bottom:1px solid var(--line)}
.onboarding-screen .ob-hero .ob-badge{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:99px;background:rgba(0,0,128,.06);color:var(--cobalt);font-size:11px;font-weight:600;letter-spacing:.1em;text-transform:uppercase;margin-bottom:16px}
.onboarding-screen .ob-hero h1{font-family:var(--f-display);font-size:36px;font-weight:500;letter-spacing:-.025em;line-height:1.1;margin-bottom:8px}
.onboarding-screen .ob-hero h1 em{font-style:italic;color:var(--marine)}
.onboarding-screen .ob-hero .ob-sub{font-size:15px;color:var(--ink-soft);max-width:520px;margin:0 auto}
.onboarding-screen .ob-content{padding:32px 40px;font-size:14.5px;line-height:1.75;color:var(--ink-soft);max-width:760px;margin:0 auto}

/* INTRO VIDEO */
.ob-video-section{max-width:760px;margin:0 auto;padding:32px 40px 0}
.ob-video-section .ob-video-label{display:inline-flex;align-items:center;gap:6px;font-size:10.5px;letter-spacing:.18em;text-transform:uppercase;color:var(--cobalt);font-weight:600;margin-bottom:14px}
.ob-video-section .ob-video-label svg{width:16px;height:16px}
.ob-video-section .ob-video-title{font-family:var(--f-display);font-size:20px;font-weight:500;color:var(--ink);margin-bottom:16px;letter-spacing:-.015em}
.ob-video-wrap{position:relative;width:100%;border-radius:var(--r-lg);overflow:hidden;box-shadow:0 8px 30px -6px rgba(14,26,43,.18);background:#000}
.ob-video-wrap iframe{position:absolute;top:0;left:0;width:100%;height:100%;border:0}
.ob-video-wrap video{width:100%;display:block}
.ob-video-wrap.ratio-16-9{padding-top:56.25%}
.ob-video-divider{max-width:760px;margin:28px auto 0;padding:0 40px}
.ob-video-divider hr{border:none;border-top:1px solid var(--line)}
.onboarding-screen .ob-content div{max-width:100%}

/* Onboarding formatted sections */
.ob-section-title{font-family:var(--f-display);font-size:20px;font-weight:600;color:var(--ink);letter-spacing:.04em;margin:32px 0 16px;padding-bottom:8px;border-bottom:2px solid var(--sand)}
.ob-section-title:first-child{margin-top:0}
.ob-character-card{background:var(--bg);border:1px solid var(--line);border-radius:var(--r-lg);padding:24px;margin:20px 0}
.ob-character-card .ob-char-header{display:flex;align-items:center;gap:12px;margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line)}
.ob-character-card .ob-char-avatar{width:44px;height:44px;border-radius:12px;background:var(--cobalt);color:#fff;display:flex;align-items:center;justify-content:center;font-family:var(--f-display);font-size:16px;font-weight:600;flex-shrink:0}
.ob-character-card .ob-char-name{font-family:var(--f-display);font-size:17px;font-weight:600;color:var(--ink);letter-spacing:-.01em}
.ob-character-card .ob-char-role{font-size:12.5px;color:var(--sand-text);font-weight:500;margin-top:2px}
.ob-character-card .ob-char-speech{font-size:14px;line-height:1.7;color:var(--ink-soft);font-style:italic;padding:12px 16px;background:rgba(0,0,128,.03);border-left:3px solid var(--cobalt);border-radius:0 8px 8px 0;margin:12px 0}
.ob-character-card .ob-char-meta{display:grid;grid-template-columns:1fr 1fr;gap:8px 16px;margin-top:14px;padding-top:12px;border-top:1px solid var(--line)}
.ob-character-card .ob-char-meta-item{font-size:12.5px;line-height:1.5}
.ob-character-card .ob-char-meta-item .meta-label{font-weight:600;color:var(--ink);display:block;font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;margin-bottom:2px}
.ob-character-card .ob-char-meta-item .meta-value{color:var(--ink-soft)}
.ob-narrative{font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin:12px 0}
.ob-narrative em{color:var(--ink);font-style:italic}
.ob-scene{font-size:14.5px;line-height:1.75;color:var(--ink-soft);margin:12px 0;padding:14px 18px;background:linear-gradient(135deg,rgba(201,169,110,.06),rgba(201,169,110,.02));border-radius:var(--r);border:1px solid rgba(201,169,110,.15)}
.onboarding-screen .ob-actions{display:flex;align-items:center;justify-content:center;gap:16px;padding:32px 40px;border-top:1px solid var(--line)}
.onboarding-screen .ob-actions .btn{font-size:16px;padding:14px 32px}
.ch-item.onboarding{font-style:italic;color:var(--cobalt)}
.ch-item.onboarding .ch-num{background:rgba(0,85,255,.1);border-color:rgba(0,85,255,.2);color:var(--cobalt);font-size:10px}

/* BANNIERE DE SIMULATION */
.sim-banner-persistent{margin:-20px -20px 20px;padding:16px 18px;position:relative;overflow:hidden;color:#fff;display:flex;align-items:center;gap:12px}
.sim-banner-persistent::before{content:"";position:absolute;top:-40px;right:-40px;width:140px;height:140px;border-radius:50%;background:radial-gradient(circle,rgba(255,255,255,.12) 0%,transparent 65%);pointer-events:none}
.sim-banner-persistent .sb-logo{width:40px;height:40px;border-radius:10px;background:rgba(255,255,255,.15);display:flex;align-items:center;justify-content:center;flex-shrink:0;font-family:"Fraunces",serif;font-weight:500;font-size:15px;overflow:hidden;position:relative;z-index:1}
.sim-banner-persistent .sb-text{flex:1;position:relative;min-width:0;z-index:1}
.sim-banner-persistent .sb-eye{font-family:"Fraunces",serif;font-style:italic;font-size:9.5px;letter-spacing:.18em;text-transform:uppercase;opacity:.75;font-weight:500;margin-bottom:2px}
.sim-banner-persistent .sb-cname{font-family:"Fraunces",serif;font-weight:500;font-size:16px;letter-spacing:-.005em;line-height:1.1}
.sim-banner-persistent .sb-sub{font-size:11px;opacity:.85;margin-top:3px}

/* MOBILE */
.game-menu-btn{display:none;width:44px;height:44px;border-radius:10px;background:var(--paper);border:1px solid var(--line);align-items:center;justify-content:center;cursor:pointer;color:var(--ink);margin-left:8px;flex-shrink:0}
@media(max-width:960px){
  .game-main{grid-template-columns:1fr}
  .game-side{display:none}
  .game-side.mobile-open{display:block;position:fixed;top:0;left:0;width:280px;height:100vh;z-index:100;box-shadow:var(--sh-lift)}
  .game-side-r{display:none}
  .game-menu-btn{display:flex}
  .game-content{padding:20px}
  .game-hero h1{font-size:26px}
  .matching-zone{flex-direction:column}
}


/* SPP-FALC-CONTRAST-PATCH-V1 */
/* Correction contraste : bouton 'Integration' actif dans le menu */
.ch-item.onboarding.current,
.ch-item.onboarding.current .ch-num,
.ch-item.onboarding.current svg {
  color: #ffffff;
}

/* Correction visibilite : fleche de retour en haut a gauche */
.game-back {
  background: #0131b4;
  border-color: #0131b4;
  color: #ffffff;
}
.game-back svg {
  stroke-width: 2.5;
}
.game-back:hover {
  background: #00237d;
  border-color: #00237d;
}