/* ============================================================
   RCF · thème par défaut — screens.css
   Couleurs et polices : héritées de tokens.css (var(--...)).
   ============================================================ */
  .timeline .tly{font-family:var(--mono);font-size:12px;color:var(--faint);flex:none;width:56px}
  .timeline .tlr{font-family:var(--disp);font-size:15px;letter-spacing:.02em}
  /* formation banner */
  #formBanner{display:none;margin-bottom:12px;padding:9px 13px;border-radius:6px;
    background:#1d2620;border:1px solid #2f5540;color:#bfe6cf;font-size:13px}
  #formBanner .fb-ic{margin-right:6px}
  /* career button */
  .toolbar{display:flex;justify-content:flex-end;margin-bottom:12px}
  .career-btn{position:relative;font-family:var(--disp);font-weight:600;letter-spacing:.06em;
    text-transform:uppercase;font-size:13px;cursor:pointer;border:1px solid var(--steel);
    border-radius:6px;padding:9px 16px;background:var(--panel);color:var(--ink);transition:.14s}
  .career-btn:hover{border-color:var(--hivis);color:var(--hivis)}
  .career-btn .cbadge{position:absolute;top:-8px;right:-8px;min-width:20px;height:20px;border-radius:10px;
    background:var(--hivis);color:#14160c;font-family:var(--mono);font-weight:700;font-size:11px;
    display:inline-flex;align-items:center;justify-content:center;padding:0 5px;box-shadow:0 0 10px rgba(215,224,36,.5)}
  /* career modal */
  .modal{position:fixed;inset:0;background:rgba(10,11,13,.8);backdrop-filter:blur(3px);
    display:none;align-items:flex-start;justify-content:center;z-index:50;padding:24px 14px;overflow:auto}
  .modal.on{display:flex;animation:fade .2s ease both}
  .modal .sheet{max-width:560px;width:100%;background:var(--panel);border:1px solid var(--edge);
    border-radius:10px;box-shadow:var(--shadow);padding:20px 20px 24px;margin:auto 0}
  .modal .sheet-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
  .modal .sheet-top h3{font-family:var(--disp);font-weight:700;letter-spacing:.06em;text-transform:uppercase;font-size:20px;margin:0}
  .modal .x{cursor:pointer;border:1px solid var(--edge);background:var(--panel2);color:var(--dim);
    border-radius:6px;width:34px;height:34px;font-size:18px}
  .modal .x:hover{color:var(--ink);border-color:var(--steel)}
  .cpanel-head{background:var(--panel2);border:1px solid var(--edge);border-radius:8px;padding:12px 14px;margin-bottom:14px}
  .cp-role{font-family:var(--disp);font-weight:700;font-size:20px;text-transform:uppercase;letter-spacing:.02em;margin-top:3px}
  .cp-sec{color:var(--dim);font-size:12.5px;margin-top:2px}
  .cp-grp{margin-bottom:16px}
  .cp-t{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-bottom:8px}
  .cp-sub{font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--muted,#8a93a5);margin:12px 0 6px;opacity:.85}
  .cp-row{display:flex;justify-content:space-between;align-items:center;gap:12px;
    background:var(--plate);border:1px solid var(--edge);border-radius:6px;padding:11px 13px;margin-bottom:8px}
  .cp-row.ok{border-left:3px solid var(--hivis)}
  .cp-n{font-family:var(--disp);font-weight:600;font-size:16px;letter-spacing:.02em}
  .cp-d{font-size:12px;color:var(--dim);margin-top:2px}
  .cp-lock{color:var(--faint);font-size:16px}
  .cp-empty{color:var(--faint);font-size:13px;font-style:italic;padding:4px 2px}

  /* --- Fenêtre Carrière compacte : accordéons (Promotions/Mobilités/Reconversions/Négociation/Formations) --- */
  .cp-section-title{font-family:var(--mono);font-size:11px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin:16px 0 8px}
  details.cp-acc{margin-bottom:8px;border:1px solid var(--edge);border-radius:9px;background:var(--panel2);overflow:hidden}
  details.cp-acc summary{cursor:pointer;list-style:none;padding:11px 14px;font-family:var(--disp);font-weight:600;
    font-size:14px;text-transform:uppercase;letter-spacing:.03em;display:flex;justify-content:space-between;align-items:center;gap:8px}
  details.cp-acc summary::-webkit-details-marker{display:none}
  details.cp-acc summary::after{content:"▾";color:var(--faint);margin-left:8px;flex:none}
  details.cp-acc[open] summary::after{content:"▴"}
  .cp-count{font-family:var(--mono);font-size:10.5px;color:var(--faint);font-weight:400;letter-spacing:.02em;
    text-transform:none;text-align:right;flex:1}
  .cp-acc-body{padding:2px 12px 12px}
  .cp-row-main{display:flex;flex-direction:column;gap:3px;flex:1;min-width:0}
  .cp-badge{display:inline-block;width:fit-content;font-family:var(--mono);font-size:10px;letter-spacing:.08em;
    text-transform:uppercase;padding:2px 8px;border-radius:20px;border:1px solid var(--edge)}
  .cp-badge.ok{color:var(--hivis);border-color:var(--hivis-deep);background:rgba(215,224,36,.08)}
  .cp-badge.soon{color:#e8c96a;border-color:#8a7530;background:rgba(232,201,106,.08)}
  .cp-badge.locked{color:var(--faint)}
  .cp-miss{font-size:11.5px;color:var(--dim);margin-top:1px}

  /* --- Salaire et négociation --- */
  .raise-form{display:flex;flex-direction:column;gap:8px;margin-top:6px}
  .raise-form label{font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--faint)}
  input[type=number]{width:100%;background:var(--floor2);border:1px solid var(--steel);color:var(--ink);
    font-family:var(--disp);font-size:18px;letter-spacing:.02em;padding:9px 12px;border-radius:5px}
  input[type=number]:focus{outline:none;border-color:var(--hivis);box-shadow:0 0 0 3px rgba(215,224,36,.18)}
  /* --- LOT 5 : objectif professionnel, appreciation de negociation, reconnaissance --- */
  .cp-block{border:1px solid var(--edge);border-radius:9px;background:var(--panel2);padding:11px 13px;margin-bottom:10px}
  .obj-cond{font-size:12.5px;line-height:1.75;display:flex;gap:6px;align-items:baseline}
  .obj-cond.ok{color:var(--hivis)}
  .obj-cond.ko{color:var(--faint)}
  .obj-cond.lock{color:#e0b25a}
  .raise-stepper{display:flex;align-items:center;gap:10px;margin:6px 0}
  .raise-amount{font-family:var(--disp);font-weight:700;font-size:19px;min-width:82px;text-align:center}
  .raise-verdict{font-family:var(--disp);font-weight:700;font-size:14px;letter-spacing:.06em;
    margin:8px 0 4px;padding:5px 9px;border-radius:6px;display:inline-block}
  .rv-tres_favorable{background:rgba(90,190,130,.18);color:#7fd3a0}
  .rv-favorable{background:rgba(120,180,120,.15);color:#95c98f}
  .rv-incertain{background:rgba(200,180,90,.15);color:#d8c07a}
  .rv-risque{background:rgba(215,140,70,.16);color:#e0a06a}
  .rv-tres_risque{background:rgba(215,90,90,.18);color:#e08a8a}
  .raise-warn{font-size:11.5px;color:#e0a06a;margin-top:6px}
  .raise-alert{font-size:12px;line-height:1.6;color:#e08a8a;margin-top:8px;padding:8px 10px;
    border:1px solid rgba(215,90,90,.45);border-radius:7px;background:rgba(215,90,90,.10)}
  .vae-ready{border-color:rgba(90,190,130,.5)}
  .vae-ok{border-color:rgba(90,190,130,.35);opacity:.9}
  .raise-counter{font-family:var(--disp);font-weight:700;font-size:18px;color:var(--hivis);margin-top:4px}
  .cp-factor{font-size:11.5px;line-height:1.6;margin-top:4px}
  .cp-factor.pos{color:var(--hivis)}
  .cp-factor.neg{color:#e08a8a}
  .btn.small{font-size:12px;padding:8px 14px}
  /* diploma + post creation */
  .create-grid{display:grid;grid-template-columns:1fr;gap:0}
  .opts.dip{grid-template-columns:repeat(3,1fr)}
  @media(max-width:560px){.opts.dip{grid-template-columns:repeat(2,1fr)}}

  /* ===== ÉCRAN DE FIN — récompense (chic) ===== */
  #endStage{max-width:640px;margin:0 auto}
  .end-hero{position:relative;overflow:hidden;text-align:center;padding:30px 22px 26px;margin-bottom:16px}
  .hero-glow{position:absolute;inset:0;background:radial-gradient(120% 80% at 50% -10%,var(--g,transparent) 0%,transparent 55%);opacity:.5;pointer-events:none}
  .medallion{position:relative;width:132px;height:132px;margin:2px auto 10px;display:flex;flex-direction:column;
    align-items:center;justify-content:center;border-radius:50%;
    background:radial-gradient(circle at 50% 34%,#2c313a 0%,#181b20 78%);
    box-shadow:0 0 46px -6px var(--rc),inset 0 2px 0 rgba(255,255,255,.06),inset 0 -10px 24px rgba(0,0,0,.6);
    animation:medIn .6s cubic-bezier(.2,1.3,.4,1) both}
  @keyframes medIn{from{transform:scale(.5) rotate(-12deg);opacity:0}to{transform:none;opacity:1}}
  .med-ring{position:absolute;inset:8px;border-radius:50%;border:2px solid var(--rc);opacity:.75;
    box-shadow:0 0 18px -2px var(--rc)}
  .med-ring::after{content:"";position:absolute;inset:5px;border-radius:50%;border:1px dashed rgba(255,255,255,.12)}
  .med-k{font-family:var(--disp);font-weight:700;font-size:60px;line-height:.8;color:var(--rc);
    text-shadow:0 2px 14px var(--rc);letter-spacing:.02em}
  .med-lbl{font-family:var(--mono);font-size:9.5px;letter-spacing:.26em;text-transform:uppercase;color:var(--dim);margin-top:4px}
  .hero-score{display:flex;align-items:baseline;justify-content:center;gap:4px;margin-top:6px}
  .hs-num{font-family:var(--disp);font-weight:700;font-size:56px;line-height:.85;color:var(--ink)}
  .hs-max{font-family:var(--disp);font-weight:600;font-size:22px;color:var(--faint)}
  .hero-who{font-family:var(--disp);font-weight:700;font-size:24px;text-transform:uppercase;letter-spacing:.03em;margin-top:8px}
  .hero-role{color:var(--dim);font-size:13.5px;margin-top:2px}
  .hero-cause{color:var(--dim);font-size:14px;max-width:46ch;margin:14px auto 0;line-height:1.5}
  .record-flash{margin:16px auto 0;display:inline-block;font-family:var(--mono);font-size:12px;letter-spacing:.12em;
    text-transform:uppercase;color:#14160c;background:var(--hivis);padding:6px 14px;border-radius:4px;font-weight:700;
    animation:pulse 1.6s ease-in-out infinite}
  @keyframes pulse{0%,100%{box-shadow:0 0 0 0 rgba(215,224,36,.5)}50%{box-shadow:0 0 22px 2px rgba(215,224,36,.55)}}

  /* KPIs */
  .end-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:9px;margin-bottom:16px}
  .kcard{position:relative;background:var(--panel2);border:1px solid var(--edge);border-radius:7px;padding:11px 12px}
  .kcard.beat{border-color:var(--hivis-deep);box-shadow:inset 0 0 0 1px rgba(215,224,36,.35)}
  .kcard .kk{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
  .kcard .kv{font-family:var(--disp);font-weight:600;font-size:16px;margin-top:3px;line-height:1.15}
  .kcard .kbeat{position:absolute;top:8px;right:8px;font-family:var(--mono);font-size:8px;letter-spacing:.1em;
    color:var(--hivis);border:1px solid var(--hivis-deep);border-radius:3px;padding:1px 4px}
  @media(max-width:560px){.end-kpis{grid-template-columns:repeat(2,1fr)}}

  /* blocs */
  .end-block{background:linear-gradient(180deg,var(--panel) 0%,var(--panel2) 100%);
    border:1px solid var(--edge);border-radius:9px;padding:16px 16px 18px;margin-bottom:16px;box-shadow:var(--shadow)}
  .block-t{font-family:var(--disp);font-weight:700;font-size:16px;letter-spacing:.05em;text-transform:uppercase;
    margin-bottom:13px;display:flex;align-items:center;gap:10px}
  .block-t .tcount{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;color:var(--faint);
    text-transform:none;border:1px solid var(--edge);border-radius:20px;padding:2px 10px}

  /* trophées */
  .trophies{display:grid;grid-template-columns:repeat(2,1fr);gap:9px}
  @media(max-width:560px){.trophies{grid-template-columns:1fr}}
  .trophy{display:grid;grid-template-columns:auto 1fr;grid-template-rows:auto auto;column-gap:11px;
    background:var(--plate);border:1px solid var(--edge);border-radius:7px;padding:11px 12px;transition:.15s}
  .trophy .t-ic{grid-row:1/3;align-self:center;font-size:24px;width:34px;text-align:center}
  .trophy .t-n{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.02em}
  .trophy .t-d{font-size:11.5px;color:var(--faint);line-height:1.35;margin-top:1px}
  .trophy.on{border-color:var(--hivis-deep);box-shadow:inset 0 0 0 1px rgba(215,224,36,.22),0 0 24px -14px rgba(215,224,36,.7)}
  .trophy.on .t-n{color:var(--hivis)}
  .trophy.off{opacity:.5}
  .trophy.off .t-ic{filter:grayscale(1)}

  /* records */
  .records{display:flex;flex-direction:column;gap:2px}
  .rec-row{display:flex;justify-content:space-between;align-items:center;padding:9px 4px;border-top:1px dashed var(--edge)}
  .rec-row:first-child{border-top:none}
  .rec-l{color:var(--dim);font-size:13.5px}
  .rec-v{font-family:var(--mono);font-weight:700;font-size:14px;display:flex;align-items:center;gap:8px}
  .rec-row.beat .rec-v{color:var(--hivis)}
  .rec-tag{font-family:var(--mono);font-size:8.5px;letter-spacing:.08em;color:#14160c;background:var(--hivis);
    padding:1px 5px;border-radius:3px}

  /* hall of fame */
  .hof{display:flex;flex-direction:column;gap:5px}
  .hof-row{display:grid;grid-template-columns:34px 1fr auto auto;align-items:center;gap:10px;
    background:var(--plate);border:1px solid var(--edge);border-radius:6px;padding:9px 11px}
  .hof-row.me{border-color:var(--hivis);box-shadow:inset 0 0 0 1px rgba(215,224,36,.3)}
  .hof-pos{font-size:18px;text-align:center}
  .hof-rk{font-family:var(--mono);color:var(--faint);font-size:13px}
  .hof-name{font-family:var(--disp);font-weight:600;font-size:15px;letter-spacing:.02em;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hof-you{font-family:var(--mono);font-size:9px;letter-spacing:.1em;text-transform:uppercase;color:#14160c;
    background:var(--hivis);border-radius:3px;padding:1px 5px;vertical-align:middle}
  .hof-role{grid-column:2;grid-row:2;font-size:11px;color:var(--faint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .hof-badge{font-family:var(--disp);font-weight:700;font-size:13px;color:var(--rc,#fff);
    border:1px solid currentColor;border-radius:5px;width:24px;height:24px;display:flex;align-items:center;justify-content:center}
  .hof-score{font-family:var(--disp);font-weight:700;font-size:19px;min-width:34px;text-align:right}

  /* actions fin */
  .end-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:4px;padding-bottom:10px}
  .btn.danger{color:var(--faint);border-color:var(--edge)}
  .btn.danger:hover{color:var(--red);border-color:#4a2a2c}

/* ============================================================
   RCF — REVOLUTION CYCLE FACTORY · THÈME PREMIUM (Sprint 1.5)
   Bleu acier · jaune industriel · blanc · anthracite. Sobre.
   Surcharge la palette + restyle premium sans toucher au DOM.
   ============================================================ */
/* [Consolidation] Le bloc :root qui se trouvait ici a été déplacé dans
   tokens.css afin que toute la palette vive au même endroit.
   Aucun changement de rendu : les variables CSS sont résolues après la cascade. */
html,body{background:#0b1420}
body{
  background:
    radial-gradient(1200px 600px at 50% -10%, #1a2c42 0%, rgba(26,44,66,0) 60%),
    linear-gradient(180deg,#0e1926 0%,#0b1420 100%);
  color:var(--ink);
}

/* ---------- HEADER / MARQUE ---------- */
header.top{border-bottom:1px solid var(--edge)}
.brand h1{letter-spacing:.02em}
.brand .cog{color:var(--hivis)}

/* ---------- BOUTONS PREMIUM ---------- */
.btn{
  border-radius:12px; padding:14px 22px; letter-spacing:.06em;
  background:var(--yellowgrad); color:#1a1204; font-weight:700;
  box-shadow:0 1px 0 rgba(255,255,255,.35) inset, 0 10px 22px -12px rgba(245,178,26,.7);
}
.btn:hover{filter:brightness(1.04);transform:translateY(-1px)}
.btn.ghost{
  background:linear-gradient(180deg,rgba(30,46,66,.85),rgba(20,32,48,.85));
  color:var(--ink); border:1px solid var(--edge); box-shadow:none; backdrop-filter:blur(4px);
}
.btn.ghost:hover{border-color:var(--steel);background:linear-gradient(180deg,#20344c,#16273a)}
.btn.ghost.danger:hover{border-color:var(--red);color:#ffd7db}

/* ---------- CARTES ---------- */
.card{
  background:linear-gradient(180deg,#182636,#132030);
  border:1px solid var(--edge); border-radius:var(--radius);
  box-shadow:var(--shadow);
}

/* ---------- OPTIONS (création) ---------- */
.opt{border-radius:11px;border:1px solid var(--edge);background:var(--panel2);transition:.14s}
.opt:hover{border-color:var(--steel);background:#182a3e}
.opt.sel{border-color:var(--hivis);background:linear-gradient(180deg,rgba(245,178,26,.14),rgba(245,178,26,.05));box-shadow:0 0 0 1px var(--hivis) inset}
.opt .n{color:var(--ink);font-weight:600}
.opt .d{color:var(--faint);font-size:11.5px}
.field label{color:var(--dim)}
.field input{background:#0f1a28;border:1px solid var(--edge);color:var(--ink);border-radius:10px}
.field input:focus{border-color:var(--hivis);outline:none}

/* ---------- STATS ---------- */
.stat{background:linear-gradient(180deg,#152232,#111d2b);border:1px solid var(--edge);border-radius:11px}
.stat .k{color:var(--faint)}
.stat.pay{background:linear-gradient(180deg,#16283a,#111f2f);border-color:#2f4c66}
.stat.pay .v{color:var(--hivis)}

/* ---------- PLAQUE POSTE ---------- */
.plate{background:linear-gradient(135deg,#1a2c40,#132132);border-radius:var(--radius)}
.plate .role{color:#fff}
.plate .lvl{color:var(--hivis)}

/* ---------- ÉVÉNEMENT ---------- */
.event .etag,.etag{background:rgba(245,178,26,.14);color:var(--hivis);border:1px solid rgba(245,178,26,.3);border-radius:20px;padding:3px 10px;font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase}
.etag.warn{background:rgba(239,90,106,.14);color:#ff9aa4;border-color:rgba(239,90,106,.35)}
.etitle{color:#fff}
.choice{
  border-radius:12px;border:1px solid var(--edge);
  background:linear-gradient(180deg,#152433,#111e2c);transition:.14s;
}
.choice:hover{border-color:var(--hivis);background:linear-gradient(180deg,#1a2c40,#132132);transform:translateY(-1px)}
.choice .cl{color:var(--ink)}
.choice .ch{color:var(--faint)}

/* ---------- PANNEAU CARRIÈRE / MODALES ---------- */
.sheet,.stamp{background:linear-gradient(180deg,#16243480,#0f1b2a);border:1px solid var(--edge);border-radius:16px}
.cp-row{border-radius:11px}
.cp-row.ok{border-color:var(--hivis)}
.career-btn{background:var(--yellowgrad);color:#1a1204;border-radius:12px;font-weight:700}

/* ============================================================
   ÉCRAN D'ACCUEIL RCF
   ============================================================ */
#scHome{padding:0}
.home{
  position:relative; min-height:calc(100vh - 90px); min-height:calc(100dvh - 90px);
  display:flex; flex-direction:column; align-items:center; justify-content:flex-start;
  border-radius:18px; overflow:hidden; border:1px solid var(--edge);
  background:
    radial-gradient(760px 420px at 26% 70%, rgba(244,176,84,.42), rgba(244,176,84,0) 62%),
    radial-gradient(900px 500px at 78% 20%, rgba(60,96,140,.35), rgba(60,96,140,0) 60%),
    linear-gradient(180deg,#16294180 0%,#1b2d45 30%,#24344a 58%,#101c2b 100%);
}
.home .sky{position:absolute;inset:0;overflow:hidden}
.home .sky svg{position:absolute;bottom:0;left:0;width:100%;height:auto;display:block}
.home .veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(11,20,32,.15) 0%,rgba(11,20,32,.05) 45%,rgba(11,20,32,.82) 100%)}
.home-in{position:relative;z-index:2;width:100%;max-width:520px;margin:0 auto;padding:38px 22px 26px;display:flex;flex-direction:column;align-items:center;text-align:center}

/* logo RCF */
.rcf-logo{font-family:var(--disp);font-weight:700;font-size:88px;line-height:.9;letter-spacing:.01em;
  color:#fff;text-shadow:0 6px 26px rgba(0,0,0,.5);display:flex;align-items:center;gap:2px}
.rcf-logo .c{color:var(--hivis)}
.rcf-sub{font-family:var(--disp);font-weight:600;letter-spacing:.26em;font-size:19px;margin-top:8px;color:#eaf1f9}
.rcf-sub .y{color:var(--hivis)}
.rcf-rule{width:180px;height:2px;margin:14px 0 10px;background:linear-gradient(90deg,transparent,var(--hivis),transparent)}
.rcf-slogan{font-style:italic;color:#cdd9e6;font-size:15.5px;letter-spacing:.02em}

/* menu */
.home-menu{margin-top:auto;width:100%;display:flex;flex-direction:column;gap:12px;padding-top:34px}
.menu-btn{
  display:flex;align-items:center;gap:14px;width:100%;cursor:pointer;text-align:left;
  font-family:var(--disp);font-weight:600;letter-spacing:.06em;text-transform:uppercase;font-size:17px;
  padding:16px 18px;border-radius:14px;border:1px solid rgba(255,255,255,.1);
  background:linear-gradient(180deg,rgba(22,36,54,.72),rgba(14,24,38,.72));color:#eef4fb;
  backdrop-filter:blur(6px);transition:.15s;
}
.menu-btn .mi{width:26px;height:26px;flex:0 0 26px;color:var(--hivis);display:flex;align-items:center;justify-content:center}
.menu-btn .ml{flex:1}
.menu-btn .mc{color:var(--faint);font-size:18px}
.menu-btn:hover{border-color:var(--steel);transform:translateY(-1px);background:linear-gradient(180deg,#20344c,#16273a)}
.menu-btn.primary{background:var(--yellowgrad);color:#1a1204;border-color:transparent;box-shadow:0 12px 26px -12px rgba(245,178,26,.75)}
.menu-btn.primary .mi{color:#1a1204}
.menu-btn.primary .mc{color:#5a3f06}
.menu-btn.disabled{opacity:.5;cursor:not-allowed}
.menu-btn.disabled:hover{transform:none;border-color:rgba(255,255,255,.1);background:linear-gradient(180deg,rgba(22,36,54,.72),rgba(14,24,38,.72))}
.home-ver{margin-top:18px;font-family:var(--mono);font-size:11px;letter-spacing:.28em;color:var(--faint)}
.home-ver b{color:var(--hivis)}

/* toast "bientôt" */
.rcf-toast{position:fixed;left:50%;bottom:26px;transform:translateX(-50%) translateY(10px);
  background:#182a3e;border:1px solid var(--edge);color:var(--ink);padding:11px 18px;border-radius:12px;
  font-size:14px;box-shadow:var(--shadow);opacity:0;transition:.25s;z-index:9999;pointer-events:none}
.rcf-toast.show{opacity:1;transform:translateX(-50%) translateY(0)}

@media(max-width:560px){
  .rcf-logo{font-size:66px}
  .rcf-sub{font-size:15px;letter-spacing:.2em}
  .home{min-height:calc(100vh - 70px);min-height:calc(100dvh - 70px)}
}

/* ============================================================
   Éléments spec conservés (Sprint Alpha / 1.2)
   ============================================================ */
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media(max-width:460px){.grid2{grid-template-columns:1fr}}
.rig.one{grid-template-columns:1fr}
.plate .xpline{font-family:var(--mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint);margin-top:8px}
.cause-badge{display:inline-block;font-family:var(--mono);font-size:11px;letter-spacing:.18em;text-transform:uppercase;
  padding:4px 12px;border-radius:20px;margin:10px 0 2px;font-weight:700;border:1px solid}
.cb-retraite{color:#4ad991;border-color:#2f5a4a;background:rgba(74,217,145,.1)}
.cb-demission{color:var(--amber);border-color:#5a4a24;background:rgba(245,178,26,.12)}
.cb-licenciement{color:var(--red);border-color:#5a2430;background:rgba(239,90,106,.12)}
.facts{display:grid;grid-template-columns:1fr 1fr;gap:10px}
@media(max-width:560px){.facts{grid-template-columns:1fr}}
.fact{border-radius:12px;padding:12px 13px;border:1px solid var(--edge);background:var(--plate)}
.fact.good{border-left:3px solid var(--green)}
.fact.bad{border-left:3px solid var(--red)}
.fact .fk{font-family:var(--mono);font-size:10px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}
.fact .fh{font-family:var(--disp);font-weight:600;font-size:15px;margin:4px 0 3px}
.fact .ft{font-size:12.5px;color:var(--dim);line-height:1.4}
.hero-note{font-family:var(--mono);font-size:10px;letter-spacing:.2em;text-transform:uppercase;color:var(--faint);margin-top:2px}
/* accueil = vrai splash : header masqué, pleine hauteur */
.wrap:has(#scHome.on) header.top,
.wrap:has(#scIntro.on) header.top{display:none}
.wrap:has(#scHome.on){padding-top:0}
#scHome .home{min-height:calc(100dvh - 34px)}

/* ============================================================
   ÉCRAN D'INTRODUCTION
   ============================================================ */
#scIntro .intro-wrap{min-height:calc(100dvh - 34px);display:flex;align-items:center;justify-content:center;padding:26px 4px}
.intro{max-width:560px;width:100%;background:linear-gradient(180deg,#182636,#111e2d);
  border:1px solid var(--edge);border-radius:18px;box-shadow:var(--shadow);padding:30px 26px 26px;text-align:center}
.intro .eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.28em;text-transform:uppercase;color:var(--hivis)}
.intro h2{font-family:var(--disp);font-weight:700;text-transform:uppercase;letter-spacing:.02em;font-size:26px;margin:8px 0 16px;color:#fff}
.intro p{color:var(--dim);font-size:15px;line-height:1.62;margin:0 auto 12px;max-width:46ch}
.intro p.lead{color:#eaf1f9}
.intro p.accent{color:var(--hivis);font-weight:600}
.intro .go{margin:20px auto 6px;width:100%;max-width:340px}
.intro .fiction{margin-top:18px;padding-top:16px;border-top:1px solid var(--edge);
  font-size:11px;line-height:1.55;color:var(--faint);max-width:48ch;margin-left:auto;margin-right:auto}
/* stats à 5 compétences (Sprint 2.1) */
.stats{grid-template-columns:repeat(3,1fr)}
.stat.pay{grid-column:1 / -1}
.stat .k{display:flex;align-items:center;gap:5px;white-space:nowrap}
@media(max-width:560px){.stats{grid-template-columns:repeat(2,1fr)}}
/* Fiche métier (Sprint 2.2 — architecture officielle) */
.fiche{background:linear-gradient(180deg,#132132,#0f1a28);border:1px solid var(--edge);border-radius:12px;padding:13px 14px;margin:2px 0 14px}
.fiche-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:var(--hivis)}
.fiche-name{font-family:var(--disp);font-weight:700;font-size:18px;color:#fff;margin:3px 0 2px}
.fiche-loc{color:var(--dim);font-size:12.5px}
.fiche-mgr{color:var(--faint);font-size:12px;margin-top:2px}
.fiche-desc{color:var(--dim);font-size:13px;line-height:1.5;margin:8px 0 6px}
.fiche-row{font-size:12.5px;color:var(--dim);margin-top:4px}
.fiche-row b{color:#cdd9e6;font-weight:600}
.fiche-evos{display:flex;flex-wrap:wrap;gap:6px;margin-top:10px}
.fiche-evo{font-size:11px;padding:3px 9px;border-radius:20px;border:1px solid var(--edge);background:#16283a;color:var(--dim)}
.fiche-evo em{color:var(--faint);font-style:normal}
.ev-promotion{border-color:#2f5a4a;color:#9fe3c2}
.ev-mobilite{border-color:#2f4a66;color:#a9cdf2}
.ev-reconversion{border-color:#5a4a24;color:#f0c98a}
/* fiche : rémunération + accès (Sprint 2.2b) */
.fiche-rem{font-size:12px;color:var(--dim);line-height:1.55;margin:8px 0;padding:8px 10px;border:1px solid var(--edge);border-radius:9px;background:#12202f}
.fiche-rem b{color:var(--hivis)} .fiche-ind{color:var(--faint);font-style:italic}
.fiche-acc{font-size:12px;color:var(--dim);margin-top:8px;line-height:1.7}
.fiche-acc b{color:#cdd9e6}
.fiche-src{display:inline-block;margin:3px 4px 0 0;padding:2px 8px;border-radius:16px;border:1px solid var(--edge);font-size:11px}
.fiche-src em{color:var(--faint);font-style:normal}
.src-promotion{border-color:#2f5a4a;color:#9fe3c2}.src-mobilite{border-color:#2f4a66;color:#a9cdf2}.src-reconversion{border-color:#5a4a24;color:#f0c98a}


/* ============================================================
   RCF CINÉMATIQUE · SURCHARGE FINALE
   Ces règles sont volontairement placées en fin de cascade.
   ============================================================ */
body{
  padding:14px 12px 42px;
  background:
    radial-gradient(900px 520px at 50% -180px,rgba(50,91,130,.32),transparent 70%),
    linear-gradient(180deg,var(--floor2),var(--floor));
}
.wrap{max-width:760px}

/* Accueil photographique : l'image de référence devient le décor réel du jeu. */
#scHome .home{
  min-height:calc(100dvh - 28px);
  border-radius:20px;
  border:1px solid rgba(157,188,216,.28);
  --rcf-home-scrim:linear-gradient(180deg,rgba(4,15,27,.06) 0%,rgba(4,15,27,.10) 43%,rgba(4,15,27,.78) 69%,rgba(4,15,27,.98) 100%);
  background:var(--rcf-home-scrim);
  background-repeat:no-repeat;
  background-position:center;
  background-size:cover;
  box-shadow:0 24px 70px -30px rgba(0,0,0,.95);
}
#scHome .home .sky{display:none}
#scHome .home .veil{
  background:
    radial-gradient(110% 56% at 50% 19%,rgba(13,45,73,.05),rgba(4,15,27,.18) 72%),
    linear-gradient(180deg,rgba(3,12,22,.02),rgba(3,12,22,.02) 48%,rgba(3,12,22,.84) 75%,rgba(3,12,22,.98));
}
.home-in{min-height:calc(100dvh - 30px);padding:40px 20px 24px}
.rcf-logo{font-size:clamp(68px,21vw,104px);text-shadow:0 5px 28px rgba(0,0,0,.62)}
.rcf-sub{font-size:clamp(13px,4.1vw,19px);letter-spacing:.23em;text-shadow:0 3px 14px rgba(0,0,0,.8)}
.rcf-slogan{font-size:clamp(14px,3.7vw,17px);color:#f4f6f9;text-shadow:0 2px 10px rgba(0,0,0,.9)}
.home-menu{max-width:430px;padding-top:30px;gap:10px}
.menu-btn{
  min-height:58px;
  border-radius:10px;
  border:1px solid rgba(123,154,183,.48);
  background:linear-gradient(180deg,rgba(12,31,50,.94),rgba(6,20,34,.96));
  box-shadow:0 1px 0 rgba(255,255,255,.04) inset,0 12px 28px -20px rgba(0,0,0,.9);
  backdrop-filter:blur(9px);
}
.menu-btn.primary{border-color:#ffc94c;background:var(--yellowgrad);box-shadow:0 1px 0 rgba(255,255,255,.45) inset,0 14px 28px -16px rgba(255,185,21,.8)}
.menu-btn:active{transform:translateY(1px);filter:brightness(.96)}
.menu-btn.disabled{opacity:.78;color:#aab8c7}
.home-ver{margin-top:20px;color:#b3c0ce;text-shadow:0 2px 8px #000}

/* Hiérarchie générale */
header.top{padding:8px 2px 14px;margin-bottom:14px}
.brand h1{font-size:30px;color:#fff}
.punch{border-radius:10px;background:var(--glassgrad)}
.card,.modal .sheet,.end-block,.intro{
  background:var(--panelgrad);
  border-color:rgba(77,112,145,.62);
  box-shadow:var(--shadow);
}
.card{border-radius:var(--radius)}
.eyebrow,.cp-t,.cp-section-title{color:#9eb0c2}

/* Interactions tactiles et focus */
.btn,.career-btn,.menu-btn,.opt,.choice,details.cp-acc summary,.modal .x{min-height:var(--tap)}
.btn,.career-btn{border-radius:10px}
.btn:focus-visible,.career-btn:focus-visible,.menu-btn:focus-visible,.opt:focus-visible,.choice:focus-visible,.modal .x:focus-visible,details.cp-acc summary:focus-visible{
  outline:2px solid var(--hivis);outline-offset:3px;box-shadow:var(--shadow-focus)
}
.btn:active,.career-btn:active,.opt:active,.choice:active{transform:translateY(1px);filter:brightness(.96)}
.btn.ghost{border-color:rgba(82,112,141,.78)}

/* Création de personnage */
#scStart>.card{padding:20px!important}
.field{margin:18px 0}
input[type=text],input[type=number]{min-height:48px;background:#081624;border-color:#35536f;border-radius:10px}
.opt{min-height:64px;border-radius:11px;background:linear-gradient(180deg,#132940,#0c1d2f);padding:12px 13px}
.opt.sel{border-color:var(--hivis);background:linear-gradient(180deg,rgba(255,185,21,.19),rgba(255,185,21,.06));box-shadow:inset 4px 0 0 var(--hivis),var(--shadow-focus)}

/* HUD et statistiques */
.plate{border-radius:12px;background:linear-gradient(135deg,#17324d,#0c1d30)}
.plate .strip{width:5px;box-shadow:0 0 18px currentColor}
.stats{gap:8px}
.stat{min-height:82px;padding:10px;border-radius:10px;background:linear-gradient(180deg,#12283d,#0b1c2e)}
.stat .k{white-space:normal;line-height:1.25}
.stat .v{font-size:20px;color:#fff}
.bar{height:6px;background:#06111d;border:1px solid rgba(83,113,143,.22)}
.stat.pay{min-height:auto;border-color:rgba(255,185,21,.35);background:linear-gradient(180deg,#19334a,#0e2235)}
.stat.pay .v{color:var(--hivis)}
.toolbar{margin:0 0 10px}.career-btn{padding:11px 18px}

/* Cartes événements */
.event{padding:17px 16px 16px;border-top:3px solid var(--hivis)}
.etitle,.event h2{font-size:24px;color:#fff}
.ebody,.event p.body{color:var(--dim);font-size:14.5px;line-height:1.58}
.choice{min-height:64px;border-radius:10px;border-left:4px solid var(--steel);background:linear-gradient(180deg,#142b41,#0b1e31);padding:12px 13px}
.choice:hover{border-left-color:var(--hivis)}
.choice::after{content:"›";position:absolute;right:14px;color:var(--hivis);font-size:22px}
.choice{position:relative;padding-right:42px}
.result{border-top:3px solid var(--green)}
.delta.up{border-left:3px solid var(--green);color:#86e0b7}
.delta.dn{border-left:3px solid var(--red);color:#ff9da6}

/* Carrière, accordéons et modales */
.modal{background:rgba(2,9,16,.84);backdrop-filter:blur(10px)}
.modal .sheet{border-radius:16px;padding:18px 16px 22px}
.modal .x{width:44px;height:44px;border-radius:10px}
details.cp-acc{border-radius:10px;background:#0d2033}
details.cp-acc[open]{border-color:#426580;box-shadow:0 12px 28px -24px #000}
.cp-row{min-height:58px;border-radius:10px;background:linear-gradient(180deg,#13283d,#0b1d2f)}
.cp-row.ok{border-left:4px solid var(--green)}
.cp-badge.ok{color:#87e2b8;border-color:#2e8e64;background:rgba(65,197,138,.12)}
.cp-badge.soon{color:#ffd275;border-color:#a57209;background:rgba(255,185,21,.1)}
.cp-badge.locked{color:#a7b4c1;border-style:dashed}

/* Fin de carrière */
.end-hero{border-top:3px solid var(--hivis)}
.medallion{background:radial-gradient(circle at 50% 30%,#29445f,#091724 76%)}
.kcard{border-radius:10px;background:#0e2134}
.trophy.on{border-left:4px solid var(--hivis)}
.trophy.off{opacity:.62;filter:saturate(.6)}
.fact.good{border-left:4px solid var(--green)}
.fact.bad{border-left:4px solid var(--red)}

/* Accessibilité : succès/échec différenciés aussi par forme */
.delta.up::before,.cp-badge.ok::before{content:"✓ ";font-weight:800}
.delta.dn::before{content:"! ";font-weight:800}

@media(max-width:460px){
  body{padding:8px 8px 30px}
  #scHome .home{min-height:calc(100dvh - 16px);border-radius:15px}
  .home-in{min-height:calc(100dvh - 18px);padding:28px 14px 18px}
  .home-menu{gap:8px;padding-top:26px}
  .menu-btn{min-height:56px;padding:13px 15px;font-size:16px}
  .rcf-rule{margin:10px 0 7px}
  .card{border-radius:12px}
  .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .stat{min-width:0}
  .stat .k{font-size:8.8px;letter-spacing:.08em}
  .event{padding:15px 13px}
  .etitle,.event h2{font-size:22px}
}

/* ===== ÉCRAN D'ACCUEIL — cadrage plein écran, sans en-tête ===== */
.wrap:has(#scHome.on){max-width:none;padding:0}
.wrap:has(#scHome.on) header.top,.wrap:has(#scIntro.on) header.top{display:none}
#scHome{padding:0}
.home{
  min-height:100dvh;border:0;border-radius:0;overflow:hidden;
  background-image:
    linear-gradient(180deg,rgba(3,12,21,.76) 0%,rgba(4,14,24,.48) 22%,rgba(4,14,24,.08) 39%,rgba(4,14,24,.12) 58%,rgba(3,12,21,.72) 67%,rgba(3,11,19,.96) 100%);
  background-position:center center;background-size:cover;background-repeat:no-repeat;
}
.home .sky{display:none}.home .veil{display:none}
.home-in{min-height:100dvh;max-width:620px;padding:38px 18px 24px;justify-content:flex-start}
.rcf-logo{font-size:82px;line-height:.82;filter:drop-shadow(0 8px 24px rgba(0,0,0,.5))}
.rcf-sub{font-size:17px;letter-spacing:.245em;text-shadow:0 2px 14px rgba(0,0,0,.75)}
.rcf-rule{width:150px;margin:12px 0 8px}.rcf-slogan{font-size:14px;color:#dce6ef;text-shadow:0 2px 12px #000}
.home-menu{width:min(78vw,390px);margin-top:auto;padding-top:31vh;gap:7px}
.menu-btn{
  position:relative;min-height:var(--tap);width:100%;padding:5px 13px;border-radius:11px;
  gap:11px;font-size:14px;background:linear-gradient(180deg,rgba(13,32,50,.68),rgba(5,18,31,.82));
  border:1px solid rgba(158,188,214,.3);backdrop-filter:blur(14px) saturate(1.05);
  box-shadow:0 1px 0 rgba(255,255,255,.06) inset,0 15px 28px -22px rgba(0,0,0,.9)
}
.menu-btn::before{content:"";position:absolute;inset:7px 0 7px 0;border-left:2px solid transparent;pointer-events:none}
.menu-btn .mi{width:22px;height:22px;flex-basis:22px}.menu-btn .mi svg{width:21px;height:21px}.menu-btn .mc{font-size:17px}
.menu-btn:hover{transform:translateX(2px);border-color:rgba(255,189,25,.58);background:linear-gradient(180deg,rgba(25,55,80,.82),rgba(7,24,40,.9))}
.menu-btn:hover::before{border-left-color:var(--hivis)}
.menu-btn.primary{background:linear-gradient(90deg,#ffc42b,#ffb000);border-color:rgba(255,226,145,.9);box-shadow:0 1px 0 rgba(255,255,255,.5) inset,0 16px 34px -19px rgba(255,176,0,.95)}
.menu-btn.primary:hover{transform:translateY(-1px);filter:brightness(1.04)}
.home-ver{margin-top:12px;font-size:9.5px;letter-spacing:.25em;text-shadow:0 2px 10px #000}
#scStart>.card{max-width:680px;margin:18px auto;padding:20px!important}
#scStart h2{font-size:27px!important;margin-bottom:8px!important}
#scStart .lead{font-size:13.5px;line-height:1.55}
.toolbar{display:flex;justify-content:flex-end;margin:0 0 8px}
.career-btn{min-height:44px;padding:6px 15px;border-radius:10px;font-size:12px;letter-spacing:.08em;background:rgba(8,25,41,.78);color:var(--ink);border:1px solid rgba(255,189,25,.42);box-shadow:none}
.career-btn:hover{background:rgba(24,50,73,.9);border-color:var(--hivis)}
.modal{background:rgba(2,8,14,.75);backdrop-filter:blur(12px)}
.sheet{width:min(94vw,720px);max-height:92dvh;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;border-radius:20px;background:linear-gradient(180deg,rgba(16,42,64,.98),rgba(5,18,31,.99));border-color:rgba(142,177,209,.3);box-shadow:0 38px 90px -42px #000}
.sheet-top{position:sticky;top:0;z-index:4;padding:14px 15px;background:rgba(7,23,38,.9);backdrop-filter:blur(12px);border-bottom:1px solid rgba(142,177,209,.22)}
.sheet-top h3{font-size:21px}.sheet-top .x,.x{width:42px;height:42px;border-radius:50%;background:rgba(255,255,255,.04);border:1px solid rgba(142,177,209,.25)}
.cp-acc{border-radius:13px;background:rgba(7,24,40,.65);border-color:rgba(142,177,209,.2)}
.cp-acc>summary{min-height:50px;padding:9px 12px}.cp-row{border-radius:12px;background:rgba(10,29,46,.72);border-color:rgba(142,177,209,.18)}
.fiche{padding:18px}.fiche .score{font-size:62px;text-shadow:0 12px 34px rgba(255,189,25,.2)}
.trophy-card{background:rgba(8,25,41,.72);border-color:rgba(142,177,209,.2);border-radius:13px}
@media(max-width:560px){
  .rcf-logo{font-size:62px}.rcf-sub{font-size:13px;letter-spacing:.19em}.rcf-slogan{font-size:13px}
  .home-in{padding:30px 12px 18px}.home-menu{width:min(76vw,330px);padding-top:30vh;gap:6px}
  .menu-btn{font-size:13px;padding-inline:11px}.menu-btn .mc{font-size:15px}
  #scStart>.card{margin:10px 0;padding:16px!important}.opts{grid-template-columns:1fr!important}
  .sheet{width:calc(100vw - 12px);max-height:96dvh;border-radius:17px}
}

/* =========================================================
   RCF LIVING PRESTIGE 3.0 — écran et ambiance évolutive
   ========================================================= */
#scHome .home{
  --rcf-home-scrim:linear-gradient(180deg,rgba(2,9,16,.82) 0%,rgba(2,10,18,.52) 20%,rgba(2,10,18,.08) 36%,rgba(2,10,18,.06) 58%,rgba(2,10,18,.66) 70%,rgba(2,8,14,.97) 100%);
  background-position:center center!important;
  transition:background-image 1.1s ease,filter .9s ease;
}
#scHome .home::before{content:"";position:absolute;inset:0;pointer-events:none;z-index:1;background:radial-gradient(ellipse at 50% 45%,transparent 32%,rgba(0,0,0,.16) 72%,rgba(0,0,0,.42) 100%)}
#scHome .home::after{content:"";position:absolute;left:-20%;right:-20%;bottom:26%;height:22%;pointer-events:none;z-index:1;background:linear-gradient(100deg,transparent 10%,rgba(255,194,78,.055) 45%,transparent 72%);transform:skewY(-4deg);animation:rcfGlow 9s ease-in-out infinite alternate}
@keyframes rcfGlow{from{opacity:.35;transform:translateX(-3%) skewY(-4deg)}to{opacity:.85;transform:translateX(4%) skewY(-4deg)}}
.home-in{z-index:3!important}
.rcf-logo{letter-spacing:.04em;text-shadow:0 4px 0 rgba(0,0,0,.22),0 18px 44px rgba(0,0,0,.7)}
.rcf-sub{font-weight:500;color:#eef4f8}
.rcf-slogan{letter-spacing:.08em;color:#e2eaf0}
.home-menu{width:min(72vw,360px)!important;gap:8px!important;padding-top:32vh!important}
.menu-btn{min-height:52px!important;width:100%;padding:6px 14px!important;border-radius:12px!important;background:linear-gradient(180deg,rgba(8,27,44,.58),rgba(3,13,23,.82))!important;border:1px solid rgba(177,206,229,.28)!important;box-shadow:0 1px 0 rgba(255,255,255,.07) inset,0 16px 38px -28px #000!important;backdrop-filter:blur(18px) saturate(1.12)!important}
.menu-btn::after{content:"";position:absolute;left:12px;right:12px;bottom:5px;height:1px;background:linear-gradient(90deg,transparent,rgba(255,255,255,.08),transparent)}
.menu-btn:hover{transform:translateY(-2px)!important;border-color:rgba(255,192,46,.62)!important;box-shadow:0 1px 0 rgba(255,255,255,.09) inset,0 22px 44px -28px rgba(255,175,0,.5)!important}
.menu-btn.primary{background:linear-gradient(180deg,rgba(255,202,70,.96),rgba(238,156,0,.96))!important;color:#07111a!important;border-color:rgba(255,237,179,.88)!important;box-shadow:0 1px 0 rgba(255,255,255,.55) inset,0 18px 38px -22px rgba(255,171,0,.88)!important}
.menu-btn.primary:hover{filter:saturate(1.06) brightness(1.04)}
/* ============================================================
   Photo d'ambiance de l'écran de jeu — couvre TOUTE la page, y compris
   derrière l'en-tête (logo RCF, pastille saison).
   ------------------------------------------------------------
   Pourquoi z-index POSITIF et pas négatif (piège vérifié à l'écran) :
   html et body portent tous deux un fond de couleur OPAQUE (voir plus
   haut : html{background:#06111c} et html,body{background:#0b1420}).
   Un calque en z-index négatif passe derrière ce fond de page et devient
   totalement invisible — l'inspecteur affiche pourtant opacity:1 et une
   image correctement chargée, ce qui rend le symptôme très trompeur.
   On empile donc explicitement : photo (1) < voile (2) < contenu (3),
   tous positifs, plutôt que de compter sur le fond de page pour rester
   transparent.
   position:fixed + rattachement à <body> : couvre le viewport entier.
   Attention, .screen porte une animation d'entrée qui laisse un transform
   actif ; un ancêtre transformé devient le référentiel des descendants
   fixed. C'est pourquoi ces calques doivent rester enfants directs de
   <body> et surtout PAS de #scGame (sinon la photo se recadre sur la
   seule zone de #scGame et s'arrête sous l'en-tête).
   Confinement à l'écran de jeu via :has(), avec repli sur .rcf-ingame
   posé en JS pour les navigateurs sans :has(). */
/* Hauteur FIGÉE sur le plus grand viewport (100lvh) au lieu de inset:0 : sinon, quand la
   barre d'URL du navigateur se rétracte au scroll, la hauteur du bloc fixe change et
   l'image en background-size:cover se recadre -> effet de zoom disgracieux. */
.rcf-game-bg,.rcf-game-scrim{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;background-size:cover;background-position:center;opacity:0;transition:opacity .9s ease;pointer-events:none}
.rcf-game-bg{z-index:1;filter:saturate(.95)}
.rcf-game-scrim{z-index:2;background-image:linear-gradient(180deg,rgba(4,11,18,.30),rgba(4,11,18,.60) 55%,rgba(3,9,15,.87))}
.wrap{position:relative;z-index:3}
body.rcf-ingame .rcf-game-bg.on,body.rcf-ingame .rcf-game-scrim{opacity:1}
#scStart>.card,#scEnd>.card{background:linear-gradient(155deg,rgba(14,38,58,.94),rgba(3,13,23,.985))!important;box-shadow:0 40px 90px -55px #000!important}
.sheet{box-shadow:0 48px 110px -48px #000!important}
.overlay-card{background:linear-gradient(150deg,rgba(19,49,72,.98),rgba(4,15,26,.99))!important;border:1px solid rgba(255,192,46,.35)!important;box-shadow:0 45px 100px -52px #000,0 0 60px -38px rgba(255,177,0,.75)!important}
@media(max-width:560px){
  .home-menu{width:min(76vw,320px)!important;padding-top:31vh!important}
  .menu-btn{min-height:50px!important;padding:4px 12px!important}
  .rcf-logo{font-size:64px!important}
}

/* ============================================================
   DENSITÉ ÉCRAN DE JEU — l'écran de jeu (grade + jauges + barre
   d'action) tenait sur plus de 500px avant même la carte
   d'événement : impossible de voir un choix sans défiler sur un
   téléphone standard. Réduit ce bloc, sans rien retirer : mêmes
   informations, cartes plus compactes. La carte d'événement
   elle-même n'est pas concernée (sa hauteur dépend du texte).
   ============================================================ */
header.top{padding:4px 2px 6px!important;margin-bottom:10px!important}
#plate{padding:10px 14px!important}
#plate .lvl{font-size:10px!important;margin-bottom:1px!important}
#plate .role{font-size:18px!important;margin:0 0 1px!important;line-height:1.15!important}
#plate .filiere{font-size:11.5px!important;margin-bottom:1px!important}
#plate .xpline{font-size:10px!important}
.stats{grid-template-columns:repeat(3,1fr)!important;gap:6px!important;margin-bottom:10px!important}
.stat{min-height:0!important;padding:7px 8px!important;border-radius:9px!important}
.stat .k{font-size:8px!important;letter-spacing:.05em!important;gap:3px!important;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stat .v{font-size:15px!important;margin:2px 0 4px!important}
.stat .bar{height:3px!important}
.hud-ic{width:11px!important;height:11px!important}
.stat.pay{grid-column:1/-1!important}
.stat.pay .v{font-size:16px!important}
.toolbar{margin:4px 0 10px!important}
@media(max-width:560px){
  .stats{grid-template-columns:repeat(3,1fr)!important}
}

/* ---- Densité, second passage : viser "zéro défilement pour choisir" -------
   Le bloc ci-dessus avait déjà resserré grade + jauges. Il restait ~325 px de
   débordement sur un 375x667 (iPhone SE). On récupère la place sur les zones
   sans valeur de jeu : en-tête de marque, barre d'action et journal, tout en
   laissant intacte la carte d'événement (c'est elle qu'on veut voir).
   Ciblé via .wrap:has(#scGame.on) pour ne compacter QUE l'écran de jeu :
   accueil, création et fin gardent leur respiration d'origine. */
@media(max-width:900px){
  /* En-tête : sur l'écran de jeu, le pavé de marque ne sert plus à rien —
     seul le cartouche saison/âge porte de l'information. */
  .wrap:has(#scGame.on) header.top{padding:2px 2px 5px!important;margin-bottom:7px!important}
  .wrap:has(#scGame.on) header.top .brand .sub{display:none}
  .wrap:has(#scGame.on) header.top .brand h1{font-size:17px}
  .wrap:has(#scGame.on) header.top .cog{width:22px;height:22px}

  /* Barre d'action et journal : compactés, jamais masqués (toujours atteignables). */
  .wrap:has(#scGame.on) .toolbar{margin:2px 0 7px!important}
  .wrap:has(#scGame.on) .career-btn{min-height:38px;padding:5px 13px;font-size:11.5px}
  .wrap:has(#scGame.on) details.log summary{min-height:34px;padding:5px 11px}
  .wrap:has(#scGame.on) details.log{margin-top:4px}

  /* Plaque de poste : encore un cran. */
  .wrap:has(#scGame.on) #plate{padding:8px 12px!important}
  .wrap:has(#scGame.on) #plate .role{font-size:16.5px!important}

  /* Marges de page rognées (le fond photo occupe l'espace, pas du vide). */
  .wrap:has(#scGame.on){padding-top:8px;padding-bottom:14px}
}

/* Carte d'événement sur petits écrans : titre et texte resserrés d'un cran pour
   faire remonter les choix. On garde une cible tactile confortable (>=44 px,
   recommandation d'accessibilité) sur les boutons de choix : c'est la hauteur
   du texte qu'on récupère, pas celle des zones cliquables. */
@media(max-width:430px){
  .wrap:has(#scGame.on) .event{padding:13px 13px 12px;margin-bottom:8px}
  .wrap:has(#scGame.on) .etitle,.wrap:has(#scGame.on) .event h2{font-size:19px!important;line-height:1.14;margin-bottom:6px}
  .wrap:has(#scGame.on) .ebody,.wrap:has(#scGame.on) .event p.body{font-size:13.5px;line-height:1.45;margin-bottom:11px}
  .wrap:has(#scGame.on) .choices{gap:6px}
  .wrap:has(#scGame.on) .choice{min-height:44px;padding:8px 11px}
  .wrap:has(#scGame.on) .choice .lab,.wrap:has(#scGame.on) .choice .cl{font-size:13.5px;line-height:1.25}
}

/* ---- Densité, troisième passage : les jauges du HUD -----------------------
   Après les deux passages ci-dessus, le bloc .stats restait le plus gros
   morceau de l'écran (~175 px sur 375x667) : 6 tuiles hautes + le bandeau
   salaire. Ce sont des informations de CONSULTATION, pas d'action — on les
   densifie donc franchement pour faire remonter la carte d'événement, qui
   est la seule zone où le joueur décide. Rien n'est masqué : les six jauges
   et le salaire restent tous lisibles à l'écran.
   Même ciblage que les passages précédents (.wrap:has(#scGame.on)) pour ne
   toucher QUE l'écran de jeu. */
@media(max-width:900px){
  .wrap:has(#scGame.on) .stats{gap:6px!important;margin-bottom:8px!important}
  .wrap:has(#scGame.on) .stat{min-height:0!important;padding:6px 8px!important;border-radius:9px}
  .wrap:has(#scGame.on) .stat .k{font-size:8px!important;letter-spacing:.06em;line-height:1.15;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .wrap:has(#scGame.on) .stat .v{font-size:15px!important;margin:1px 0 4px!important}
  .wrap:has(#scGame.on) .stat .bar,.wrap:has(#scGame.on) .bar{height:3px}
  .wrap:has(#scGame.on) .stat.pay{padding:6px 10px!important}
  .wrap:has(#scGame.on) .stat.pay .v{font-size:16px!important}
}

@media(max-width:400px){ .pt-radar-svg{max-width:320px} }
@media(max-width:380px){
  /* iPhone SE et assimilés : dernier cran, sans jamais toucher aux cibles tactiles */
  .wrap:has(#scGame.on) .stat{padding:5px 6px!important}
  .wrap:has(#scGame.on) .stat .k{font-size:7.5px!important}
  .wrap:has(#scGame.on) .stat .v{font-size:14px!important;margin:0 0 3px!important}
}

/* ============================================================
   COMPACITÉ DU HUD — 4e passe : panneau unique à séparateurs fins
   ------------------------------------------------------------
   Reprend le retour de la direction artistique (ChatGPT) : les 6 tuiles
   indépendantes forment un "mur visuel" qui rivalise avec la carte
   d'événement. On passe à UN SEUL panneau (grille 3×2 + ligne salaire),
   séparé par de simples filets, plutôt que 7 cartes avec chacune leur
   fond/bordure/coins arrondis.
   Sélecteurs préfixés par .wrap:has(#scGame.on) à dessein : les 3 passes
   précédentes (ci-dessus) utilisent ce même préfixe, qui a plus de poids
   qu'un simple ".stat" — sans ce préfixe, cette 4e passe se fait
   silencieusement écraser par la 3e (piège vérifié à l'écran : les
   valeurs ne changeaient pas malgré le fichier modifié). */
@media(max-width:900px){
  .wrap:has(#scGame.on) .stats{
    grid-template-columns:repeat(3,minmax(0,1fr))!important;gap:0!important;margin-bottom:8px!important;
    background:rgba(8,24,39,.72)!important;border:1px solid rgba(142,177,209,.22)!important;
    border-radius:12px!important;overflow:hidden!important}
  .wrap:has(#scGame.on) .stat{
    min-height:0!important;padding:6px 7px!important;border-radius:0!important;
    background:transparent!important;border:none!important;position:relative!important}
  .wrap:has(#scGame.on) .stat:not(.pay)::after{content:"";position:absolute;top:10%;right:0;bottom:10%;width:1px;background:rgba(142,177,209,.16)}
  .wrap:has(#scGame.on) .stat:nth-child(3n)::after{display:none}
  .wrap:has(#scGame.on) .stat:nth-child(-n+3)::before{content:"";position:absolute;left:8%;right:8%;bottom:0;height:1px;background:rgba(142,177,209,.16)}
  .wrap:has(#scGame.on) .stat .k{font-size:7.5px!important;letter-spacing:.06em!important;line-height:1.15!important;gap:3px!important}
  .wrap:has(#scGame.on) .stat .v{font-size:14.5px!important;margin:1px 0 3px!important}
  .wrap:has(#scGame.on) .hud-ic{width:11px!important;height:11px!important}
  .wrap:has(#scGame.on) .stat .bar,.wrap:has(#scGame.on) .bar{height:2px!important}
  .wrap:has(#scGame.on) .stat.pay{grid-column:1 / -1!important;padding:6px 10px!important;border-top:1px solid rgba(142,177,209,.22)!important}
  .wrap:has(#scGame.on) .stat.pay .v{font-size:16px!important}

  /* En-tête et plaque de poste : un cran de plus, priorité direction artistique */
  .wrap:has(#scGame.on) header.top{padding:0 2px 4px!important;margin-bottom:6px!important}
  .wrap:has(#scGame.on) #plate{padding:7px 12px!important}
  .wrap:has(#scGame.on) #plate .lvl{font-size:9.5px!important;margin-bottom:0!important}
  .wrap:has(#scGame.on) #plate .role{font-size:15.5px!important;margin:0!important;line-height:1.1!important}
  .wrap:has(#scGame.on) #plate .filiere{font-size:11px!important;margin-bottom:0!important}
  .wrap:has(#scGame.on) #plate .xpline{font-size:9.5px!important}
}

/* Très petits écrans (SE, 667 px de haut) : dernier cran de densité. */
@media(max-width:400px) and (max-height:700px){
  header.top{padding:0 2px 6px!important;margin-bottom:8px!important}
  #plate{padding:9px 12px!important}
  .stat .v{font-size:15px!important}
  #eventCard{padding:12px 13px!important}
  .etitle,.event h2{font-size:18px!important}
  .ebody,.event p.body{font-size:13px!important}
  /* derniers pixels : espacement des choix + journal replié, sans passer
     sous la cible tactile confortable (~44 px) */
  .choices{gap:6px!important}
  .choice{padding:9px 12px!important;font-size:13.5px!important;line-height:1.34!important}
  details.log{margin-top:4px!important}
  details.log summary{min-height:38px!important;padding:6px 12px!important}
  body{padding-bottom:14px!important}
}

/* ============================================================
   ICÔNES DU HUD — masque CSS teinté (livraison ChatGPT, 17 SVG)
   ------------------------------------------------------------
   Le SVG sert de POCHOIR (mask) et la couleur vient de
   background-color:currentColor : c'est ce qui permet de teinter chaque
   icône avec l'accent de sa statistique, comme prévu par la direction
   artistique. Une simple <img> ne le permettrait pas (currentColor y
   retombe sur du noir, invisible sur le fond sombre — cf. note dans
   boot.js).
   ============================================================ */
span.hud-ic{
  display:inline-block;width:12px;height:12px;vertical-align:-1.5px;
  background-color:currentColor;
  -webkit-mask-repeat:no-repeat;mask-repeat:no-repeat;
  -webkit-mask-position:center;mask-position:center;
  -webkit-mask-size:contain;mask-size:contain;
}
/* Teinte par statistique, alignée sur la couleur de la valeur affichée. */
.stat[data-stat-key="tech"]    span.hud-ic{color:var(--cyan)}
.stat[data-stat-key="conn"]    span.hud-ic{color:#8fb4ff}
.stat[data-stat-key="rep"]     span.hud-ic{color:var(--amber)}
.stat[data-stat-key="moral"]   span.hud-ic{color:var(--green)}
.stat[data-stat-key="fatigue"] span.hud-ic{color:var(--amber)}
.stat[data-stat-key="resil"]   span.hud-ic{color:#e0863c}

/* ============================================================
   FOND PHOTOGRAPHIQUE PARTAGÉ — "Bienvenue chez RCF" et création du
   personnage reprennent la même photo que l'accueil (posée en JS,
   cf. ambience.js applyHome). Simple background-image standard ici :
   pas de calque séparé ni de z-index, donc aucun des pièges rencontrés
   sur le fond de l'écran de jeu (containing block, empilement) ne
   s'applique.
   ============================================================ */
/* ============================================================
   FOND PHOTOGRAPHIQUE PARTAGÉ — "Bienvenue chez RCF" et création du
   personnage reprennent la photo d'accueil. Calque fixe (comme le fond de
   jeu), PAS un background-image direct sur #scIntro/#scStart : ces écrans
   ont une hauteur qui dépend de leur contenu (le formulaire de création
   dépasse largement l'écran), et "cover" se cale alors sur cette hauteur
   de boîte géante plutôt que sur le viewport — zoom extrême, piège vérifié
   à l'écran (voir la note dans ambience.js).
   ============================================================ */
.rcf-hero-bg,.rcf-hero-scrim{position:fixed;top:0;left:0;width:100vw;height:100vh;height:100lvh;background-size:cover;background-position:center;opacity:0;transition:opacity .6s ease;pointer-events:none}
.rcf-hero-bg{z-index:1;filter:saturate(.95)}
.rcf-hero-scrim{z-index:2;background-image:linear-gradient(180deg,rgba(4,11,18,.5),rgba(4,11,18,.7))}
body.rcf-hero-on .rcf-hero-bg,body.rcf-hero-on .rcf-hero-scrim{opacity:1}

/* ============================================================
   LOGO D'ACCUEIL — le vrai logo (vélo) remplace le texte "RCF" stylisé.
   Astuce : .rcf-logo porte déjà tout un réglage de taille responsive
   (plusieurs paliers de font-size selon la largeur d'écran). Plutôt que
   de dupliquer chaque palier pour l'image, le SVG est dimensionné en
   `em` : il hérite automatiquement de la taille de police déjà réglée à
   chaque palier, sans toucher au reste. .rcf-sub (la légende "REVOLUTION
   CYCLE FACTORY") reste inchangée juste en dessous.
   ============================================================ */
.rcf-logo--mark{display:flex;justify-content:center;color:var(--hivis)}
.rcf-logo--mark img{height:1em;width:auto;display:block;filter:drop-shadow(0 8px 20px rgba(0,0,0,.45))}

/* ============================================================
   LOGO DE L'EN-TÊTE — le vrai logo (image) remplace l'ancien couple
   engrenage + titre texte "RCF" sur tous les écrans hors accueil.
   Le logo contenant déjà le lettrage RCF, le <h1> a été retiré du markup
   pour ne pas faire doublon ; seule la ligne "Revolution Cycle Factory"
   subsiste en légende. Dimensionné en hauteur (largeur auto) pour ne pas
   déformer le lettrage.
   ============================================================ */
.brand-mark{height:40px;width:auto;flex:none;display:block}
@media(max-width:900px){
  /* sur l'écran de jeu la légende texte est masquée pour gagner de la hauteur
     (règle de compactage plus haut) : le logo porte donc seul l'identité et doit
     rester assez grand pour que le lettrage RCF se lise. */
  .wrap:has(#scGame.on) header.top .brand-mark{height:34px}
}
@media(max-width:400px) and (max-height:700px){
  .brand-mark{height:30px}
}

/* ============================================================
   ÉCRAN DE TITRE — mise en avant de l'identité (retour de test :
   "le logo RCF et Revolution Cycle Factory doivent être plus gros").
   On agit sur le VRAI bloc d'accueil (.home-in), pas sur header.top
   qui est masqué (display:none) sur cet écran.
   Le logo image est dimensionné en `em` : il suit .rcf-logo.
   Placé en fin de feuille pour primer sur les paliers précédents.
   ============================================================ */
#scHome .rcf-logo{
  font-size:clamp(96px,26vw,168px) !important;
  text-shadow:0 6px 0 rgba(0,0,0,.20),0 22px 52px rgba(0,0,0,.72);
}
#scHome .rcf-logo--mark img{
  filter:drop-shadow(0 12px 30px rgba(0,0,0,.6));
}
#scHome .rcf-sub{
  font-size:clamp(20px,5.2vw,34px) !important;
  letter-spacing:.24em;
  font-weight:700;
  color:#fff;
  margin-top:14px;
  text-shadow:0 4px 20px rgba(0,0,0,.85);
}
#scHome .rcf-rule{ margin-top:16px; }
#scHome .rcf-slogan{ font-size:clamp(14px,3.4vw,18px); margin-top:10px; }
@media (max-width:520px){
  #scHome .rcf-logo{ font-size:clamp(74px,27vw,110px) !important; }
  #scHome .rcf-sub{ font-size:clamp(15px,5vw,22px) !important; letter-spacing:.16em; }
}

/* ============================================================
   CRÉATION DE CARRIÈRE — Atelier vivant, parcours en 3 étapes
   Les données et les ID existants restent inchangés : cette couche
   remplace uniquement le long formulaire par des pages courtes.
   ============================================================ */
#scStart{min-height:100dvh;padding:22px 0 34px}
#scStart .creation-shell{width:min(100%,680px);margin:0 auto;padding:26px 24px 22px;position:relative;border:1px solid rgba(208,229,243,.28);border-radius:24px;background:linear-gradient(145deg,rgba(6,26,43,.87),rgba(2,12,22,.94));box-shadow:0 28px 70px -42px #000;backdrop-filter:blur(18px) saturate(1.05)}
.create-back{position:absolute;right:17px;top:16px;width:38px;height:38px;border-radius:50%;color:#eaf2f8;background:rgba(4,18,31,.62);border:1px solid rgba(204,226,241,.25);font-size:30px;line-height:30px;cursor:pointer}
.creation-kicker{font-family:var(--mono);font-size:10px;letter-spacing:.22em;text-transform:uppercase;color:#bac9d7;margin-bottom:8px}
#scStart h2{font-family:var(--disp);font-size:35px!important;line-height:.97;margin:0!important;text-transform:uppercase;letter-spacing:.015em;color:#fff}
#scStart h2 em{font-style:normal;color:var(--hivis)}
.creation-lead{margin:11px 0 18px;color:#c5d3df;font-size:14px;line-height:1.45}
.creation-progress{display:flex;align-items:center;gap:8px;margin:0 0 19px;color:#8296a8;font-family:var(--mono);font-size:9px;letter-spacing:.08em;text-transform:uppercase}
.creation-progress span{display:flex;align-items:center;gap:6px;white-space:nowrap}.creation-progress b{display:grid;place-items:center;width:20px;height:20px;border:1px solid rgba(163,191,212,.38);border-radius:50%;font-size:9px;font-weight:700}.creation-progress i{display:block;flex:1;height:1px;background:rgba(166,193,214,.25)}
.creation-progress .is-on,.creation-progress .is-done{color:#fff}.creation-progress .is-on b{border-color:var(--hivis);background:var(--hivis);color:#17202a;box-shadow:0 0 18px rgba(255,187,31,.5)}.creation-progress .is-done b{border-color:#6aa880;background:#6aa880;color:#07151d;font-size:0}.creation-progress .is-done b::after{content:'✓';font-size:11px}
.creation-page{display:none;animation:createPageIn .26s ease both}.creation-page.is-on{display:block}@keyframes createPageIn{from{opacity:0;transform:translateX(8px)}to{opacity:1;transform:none}}
.creation-section-title{font-family:var(--disp);font-size:21px;letter-spacing:.02em;color:#fff;margin:2px 0 15px}.creation-section-title span{font-family:var(--mono);font-size:10px;color:var(--hivis);letter-spacing:.1em;margin-right:7px;vertical-align:3px}
#scStart .compact-field{margin:0 0 15px}#scStart .compact-field>label{font-size:9.5px;color:#c4d0da;margin-bottom:7px}#scStart .compact-field>label small{font-family:var(--sans);font-size:11px;letter-spacing:0;text-transform:none;color:#90a3b4}
#scStart .opts{gap:7px}.create-gender{grid-template-columns:1fr 1fr!important}.create-gender .opt{min-height:52px!important;text-align:center;padding:7px!important}.create-gender .opt .n{font-size:16px!important}
.create-names{display:grid;grid-template-columns:1fr 1fr;gap:9px}.create-names .compact-field{margin:0}.create-names input{min-height:50px!important;font-size:16px!important;padding:8px 11px!important}
.create-note{display:flex;gap:10px;align-items:flex-start;margin-top:19px;padding:12px;border:1px solid rgba(214,230,239,.17);border-radius:12px;background:linear-gradient(100deg,rgba(26,57,72,.61),rgba(7,22,36,.52));color:#aebfcd;font-size:12px;line-height:1.4}.create-note span{color:var(--hivis);font-size:18px;line-height:1}.create-note b{color:#f2f7fb}
.create-diplomas{grid-template-columns:repeat(3,1fr)!important}.create-diplomas .opt{min-height:66px!important;padding:8px!important}.create-diplomas .opt .n{font-size:13px!important;line-height:1.08}.create-diplomas .opt .d{font-size:10px!important;margin-top:2px}
.create-services{grid-template-columns:repeat(2,1fr)!important}.create-services .opt{min-height:55px!important;padding:8px 10px!important}.create-services .opt .n{font-size:13px!important;line-height:1.1}.create-services .opt .d{font-size:9.5px!important;margin-top:2px}.create-services .opt.sel{box-shadow:inset 3px 0 0 var(--hivis),0 8px 22px -18px rgba(255,187,31,.7)}
.create-jobs{grid-template-columns:repeat(2,1fr)!important}.create-jobs .opt,.create-modes .opt{min-height:58px!important;padding:9px 10px!important}.create-jobs .opt .n,.create-modes .opt .n{font-size:14px!important;line-height:1.05}.create-jobs .opt .d,.create-modes .opt .d{font-size:10px!important;margin-top:3px}.create-modes{grid-template-columns:1fr 1fr!important}
.contract-summary{margin:16px 0 0;padding:13px 14px;border-radius:13px;border:1px solid rgba(255,192,42,.43);background:linear-gradient(110deg,rgba(255,185,23,.17),rgba(255,185,23,.045))}.cs-label{font-family:var(--mono);font-size:9px;letter-spacing:.17em;text-transform:uppercase;color:#ffd36f}.cs-role{font-family:var(--disp);font-size:22px;line-height:1.05;color:#fff;text-transform:uppercase;margin:4px 0}.cs-meta{font-size:12px;color:#ccd9e4}.cs-meta span{color:var(--hivis);padding:0 4px}
.creation-actions{display:flex;gap:9px;margin-top:21px}.creation-actions .btn{min-height:49px}.create-prev{min-width:100px}.create-next,.create-sign{flex:1;justify-content:center;align-items:center;gap:9px}.create-next span,.create-sign span{font-size:20px;line-height:0}.create-sign{display:none!important}.create-sign[style*="inline-flex"]{display:inline-flex!important}
@media(max-width:560px){#scStart{padding:12px 0 22px}#scStart .creation-shell{padding:21px 16px 16px;border-radius:19px}#scStart h2{font-size:31px!important}.creation-lead{font-size:13px;margin:8px 0 15px}.creation-progress{font-size:8px;gap:5px}.creation-progress b{width:18px;height:18px}.creation-progress i{min-width:9px}.creation-section-title{font-size:19px;margin-bottom:12px}.create-services .opt{min-height:51px!important}.create-names{gap:7px}.creation-actions{margin-top:16px}.create-prev{min-width:88px}}

/* ============================================================
   CRÉATION (scStart) — l'en-tête logo est masqué, comme sur l'accueil
   et comme dans les rendus de référence de la refonte : sur un écran
   420x900 il consommait ~140 px et forçait un défilement vertical, que
   la refonte veut justement éviter (chaque étape tient en un écran).
   ============================================================ */
.wrap:has(#scStart.on) header.top{ display:none; }
/* La section .screen est deja forcee a 100vh ; les marges du .wrap s'y AJOUTAIENT
   (8 px en haut + 34 px en bas), d'ou un debordement de 80 px et un defilement que la
   refonte veut eviter. On les annule uniquement sur l'ecran de creation. */
.wrap:has(#scStart.on){ padding-top:0; padding-bottom:0; }
.wrap:has(#scStart.on) #scStart{ min-height:0; }   /* le contenu tient deja : forcer 100vh ajoutait 8 px de decalage et relancait le defilement */
@media (max-height:940px){
  /* Resserrage fin : chaque etape doit tenir en un ecran (critere de la refonte).
     Classes reelles de la refonte : .creation-page, .creation-kicker, .creation-lead,
     .create-names, .creation-actions, .opts/.opt. */
  #scStart .creation-page{ padding:16px 15px 14px; }
  #scStart .creation-kicker{ margin-bottom:6px; }
  #scStart h2, #scStart .creation-title{ font-size:25px; line-height:1.1; margin:2px 0 6px; }
  #scStart .creation-lead{ margin-bottom:8px; font-size:13px; }
  #scStart .create-steps, #scStart .stepper{ margin:8px 0 10px; }
  #scStart .field{ margin-bottom:9px; }
  #scStart .opts{ gap:7px; }
  #scStart .opts .opt{ padding:8px 10px; }
  #scStart label small{ font-size:11px; line-height:1.35; }
  #scStart .creation-actions{ margin-top:10px; }
  #scStart .create-names{ gap:8px; }
}
@media (max-height:940px){
  /* Etape 3 (contrat) : le badge recapitulatif est le plus haut des trois ecrans. */
  #scStart .contract-summary{ padding:12px 14px; }
  #scStart .contract-summary .stamp{ transform:scale(.92); }
  #scStart .creation-page{ padding-bottom:10px; }
  #scStart .create-note{ font-size:11px; line-height:1.35; }
}
@media (max-height:940px){
  /* Assemblage propose 7 metiers d'entree (plus que la maquette) : on resserre cette grille. */
  #scStart #atelierOpts .opt{ padding:7px 10px; }
  #scStart #atelierOpts{ gap:6px; }
  #scStart #modeOpts .opt{ padding:7px 10px; }
}

/* M16 — la règle .chain-note a été retirée avec le bandeau de chaîne :
   une suite s'affiche comme un événement normal, sans étiquette du moteur. */

/* Poste présent dans l'organigramme mais dont la banque d'événements n'est pas encore
   écrite : visible pour montrer où mène la carrière, mais grisé et non cliquable. */
.cp-row.cp-todo{ opacity:.48; filter:grayscale(.75); }
.cp-row.cp-todo .cp-n{ color:var(--faint,#9aa7b4); }
.cp-row.cp-todo .btn[disabled]{ cursor:not-allowed; opacity:.6; pointer-events:none; }
.cp-badge.todo{
  background:rgba(150,160,175,.18); color:#aab6c4;
  border:1px solid rgba(150,160,175,.35);
}


/* --- LOT 3C · CHAPITRES DE CARRIÈRE (bloc du bilan) ---------------------- */
.chapters{display:flex;flex-direction:column;gap:9px}
.chapter{border-radius:12px;padding:11px 13px;border:1px solid var(--edge);
  background:var(--plate);border-left:3px solid var(--edge2,var(--edge))}
.ch-head{display:flex;align-items:baseline;justify-content:space-between;gap:10px}
.ch-title{font-family:var(--disp);font-weight:700;font-size:14.5px;line-height:1.25}
.ch-years{font-family:var(--mono);font-size:10px;letter-spacing:.12em;
  text-transform:uppercase;color:var(--faint);white-space:nowrap}
.ch-text{margin-top:5px;font-size:13px;line-height:1.45;color:var(--ink2,var(--ink))}
.ch-marker{margin-top:6px;font-family:var(--mono);font-size:10px;letter-spacing:.1em;
  text-transform:uppercase;color:var(--faint)}

/* ==== LOT 4 · PORTRAIT DE CARRIÈRE (structure ; la DA finale vient en étape 9) ==== */
.portrait{display:flex;flex-direction:column;gap:14px;padding-bottom:24px}
.pt-hero{position:relative;min-height:300px;display:flex;align-items:flex-end;overflow:hidden;border-radius:0 0 16px 16px}
.pt-hero-bg{position:absolute;inset:0;background-size:cover;background-position:center 38%}
.pt-hero-bg-none{background:linear-gradient(180deg,#12243a,#0b1622)}
.pt-hero-veil{position:absolute;inset:0;background:linear-gradient(180deg,rgba(6,14,24,.15) 0%,rgba(6,14,24,.55) 55%,rgba(6,14,24,.96) 100%)}
.pt-hero-in{position:relative;padding:18px 16px 22px;width:100%;text-align:center}
.pt-hero-t{font-family:var(--disp);font-size:26px;letter-spacing:.04em;text-transform:uppercase;margin:0;color:#fff}
.pt-hero-s{margin:6px 0 0;font-size:13.5px;color:var(--faint)}
.pt-card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px;margin:0 12px}
.pt-card-t{font-family:var(--disp);font-size:13px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin:0 0 10px}
.pt-sub,.pt-note{font-size:12.5px;color:var(--faint);margin:0 0 10px;line-height:1.45}
.pt-career{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.pt-career-main{flex:1 1 55%;min-width:0}
.pt-career-side{flex:1 1 35%;display:flex;gap:12px;align-items:center;flex-wrap:wrap}
.pt-career-job{min-width:0}
.pt-job-name{display:block;font-family:var(--disp);font-size:21px;line-height:1.15;color:var(--ink);overflow-wrap:anywhere}
.pt-job-badge{margin-top:6px}
.pt-badge{display:inline-block;font-family:var(--mono);font-size:9.5px;letter-spacing:.1em;text-transform:uppercase;
  color:var(--acc);border:1px solid var(--acc);border-radius:999px;padding:2px 7px;vertical-align:middle}
.pt-badge-lvl{color:var(--ink);border-color:var(--line)}
/* Sommet de la filiere industrielle : meme gabarit que les autres badges, fond plein
   pour se distinguer de « Poste final » place juste avant. */
.pt-badge-n7{margin-left:6px;color:var(--floor);background:var(--hivis);border:1px solid var(--hivis)}
.pt-meta-l{font-size:13px;color:var(--faint);margin-top:4px}
.pt-years{text-align:center}
.pt-years b{display:block;font-family:var(--disp);font-size:30px;color:var(--acc);line-height:1}
.pt-years span{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint)}
.pt-dates{display:grid;grid-template-columns:auto 1fr;gap:2px 10px;margin:0;font-size:12.5px}
.pt-dates dt{font-family:var(--mono);font-size:10px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pt-dates dd{margin:0;color:var(--ink)}
.pt-radar-legend{display:flex;gap:14px;justify-content:center;font-size:11.5px;color:var(--faint);margin-bottom:0}
.pt-radar-wrap{display:flex;justify-content:center}
.pt-radar-svg{width:100%;max-width:346px;height:auto;display:block;margin:-10px auto -14px}
.pt-radar-ring,.pt-radar-spoke{fill:none;stroke:var(--line);stroke-width:1}
.pt-radar-initial{fill:none;stroke:#b8cde0;stroke-width:1.9;stroke-dasharray:4 3;opacity:.95}
.pt-radar-final{fill:rgba(56,152,255,.20);stroke:#3f9bff;stroke-width:2.2}
.pt-radar-dot{fill:#8fc6ff}
.pt-axes{list-style:none;margin:2px 0 0;padding:0;display:grid;grid-template-columns:repeat(3,1fr);gap:8px 6px}
.pt-axis{text-align:center}
.pt-axis-l{display:block;font-family:var(--mono);font-size:9px;letter-spacing:.06em;text-transform:uppercase;color:var(--faint)}
.pt-axis-v{display:block;font-family:var(--disp);font-size:19px;color:#8fc6ff}
.pt-scrub-wrap{padding:2px 2px 0}
.pt-scrub-out{display:block;width:max-content;margin:0 auto 6px;font-family:var(--mono);font-size:11px;
  letter-spacing:.06em;color:var(--ink);background:var(--panel2);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
.pt-scrub{width:100%;height:44px;margin:0;background:transparent;-webkit-appearance:none;appearance:none}
.pt-scrub:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
.pt-scrub::-webkit-slider-runnable-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#6f5cff,#3f9bff,#38d6c8)}
.pt-scrub::-webkit-slider-thumb{-webkit-appearance:none;width:22px;height:22px;margin-top:-9px;border-radius:50%;
  background:#eaf4ff;border:3px solid #3f9bff;box-shadow:0 0 10px rgba(63,155,255,.7)}
.pt-scrub::-moz-range-track{height:4px;border-radius:2px;background:linear-gradient(90deg,#6f5cff,#3f9bff,#38d6c8)}
.pt-scrub::-moz-range-thumb{width:22px;height:22px;border-radius:50%;background:#eaf4ff;border:3px solid #3f9bff}
.pt-scrub-ticks{display:flex;justify-content:space-between;font-family:var(--mono);font-size:9.5px;color:var(--faint)}
.pt-chapters{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:8px}
.pt-chapter{background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.pt-ch-t{font-family:var(--disp);font-weight:700;font-size:14px;color:var(--ink)}
.pt-ch-f{font-family:var(--mono);font-size:9.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--faint);margin-top:2px}
.pt-ch-y{font-family:var(--mono);font-size:10.5px;color:var(--faint);margin-top:3px}
.pt-mastery-list{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.pt-m-row{display:flex;gap:10px;align-items:center;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:9px 11px}
.pt-m-main{flex:1 1 auto;min-width:0}
.pt-m-job{font-family:var(--disp);font-size:14.5px;color:var(--ink);margin-right:7px}
.pt-m-exp{display:block;font-family:var(--mono);font-size:10px;letter-spacing:.05em;color:var(--faint);margin-top:3px}
.pt-m-years{font-family:var(--mono);font-size:12px;color:var(--ink);white-space:nowrap}
.pt-summary{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin:0 12px}
.pt-sum{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 6px;text-align:center}
.pt-sum b{display:block;font-family:var(--disp);font-size:22px;color:var(--acc);line-height:1}
.pt-sum span{display:block;font-family:var(--mono);font-size:9.5px;letter-spacing:.06em;text-transform:uppercase;color:var(--ink);margin-top:3px}
.pt-sum em{display:block;font-size:10px;font-style:normal;color:var(--faint)}
.pt-actions{display:flex;gap:10px;justify-content:center;margin:4px 12px 0}
@media(max-width:400px){ .pt-radar-svg{max-width:320px} }
@media(max-width:380px){
  .pt-summary{grid-template-columns:repeat(2,1fr)}
  .pt-career-side{flex-direction:column;align-items:flex-start}
  .pt-axis-v{font-size:17px}
}
@media(min-width:641px){ .portrait{max-width:680px;margin:0 auto} }
@media(prefers-reduced-motion:reduce){ .pt-radar-final,.pt-radar-dot{transition:none} }

/* ==== UCHRONIE · FLASH INFO INDUSTRIEL ==== */
.wn-flash{position:fixed;inset:0;z-index:70;display:none;align-items:center;justify-content:center;
  padding:16px;background:rgba(4,10,18,.78);backdrop-filter:blur(2px)}
.wn-flash.on{display:flex}
.wn-card{width:100%;max-width:520px;max-height:86vh;overflow:auto;background:var(--panel);
  border:1px solid var(--line);border-left:3px solid #3f9bff;border-radius:14px;padding:16px 16px 14px;
  animation:wnIn .22s ease-out}
.wn-card[data-priority="1"]{border-left-color:var(--acc);box-shadow:0 0 0 1px rgba(245,197,24,.18)}
@keyframes wnIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}
.wn-band{display:flex;align-items:baseline;justify-content:space-between;gap:10px;margin-bottom:10px}
.wn-band-t{font-family:var(--mono);font-size:10px;letter-spacing:.16em;text-transform:uppercase;color:#8fc6ff}
.wn-card[data-priority="1"] .wn-band-t{color:var(--acc)}
.wn-year{font-family:var(--mono);font-size:11px;color:var(--faint)}
.wn-dossier{font-family:var(--mono);font-size:10px;letter-spacing:.08em;text-transform:uppercase;
  color:var(--faint);border-top:1px solid var(--line);padding-top:8px;margin-bottom:8px}
.wn-title{font-family:var(--disp);font-size:19px;line-height:1.25;color:var(--ink);margin:0 0 8px}
.wn-text{font-size:14px;line-height:1.55;color:var(--ink2,var(--ink));margin:0}
.wn-impact{margin-top:12px;background:var(--panel2);border:1px solid var(--line);border-radius:10px;padding:10px 11px}
.wn-impact-t{font-family:var(--mono);font-size:10px;letter-spacing:.12em;text-transform:uppercase;color:var(--acc);margin-bottom:6px}
.wn-impact ul{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:4px}
.wn-impact li{display:flex;justify-content:space-between;gap:10px;font-size:13px}
.wn-imp-k{color:var(--ink)}
.wn-imp-b{font-family:var(--mono);font-size:11.5px;color:var(--faint);white-space:nowrap}
.wn-actions{margin-top:14px;display:flex;justify-content:flex-end}
.wn-continue{min-height:44px;min-width:120px}
.wn-continue:focus-visible{outline:2px solid var(--acc);outline-offset:2px}
@media(max-width:400px){.wn-card{padding:14px 13px 12px}.wn-title{font-size:17.5px}.wn-text{font-size:13.5px}
  .wn-impact li{flex-direction:column;gap:1px}.wn-actions{justify-content:stretch}.wn-continue{width:100%}}
@media(prefers-reduced-motion:reduce){.wn-card{animation:none}}