/* ATLAS6 — Human Digital Twin. Theme clair aerospatial professionnel.
   Blanc / gris tres clair, bleu marine profond, accent orange sobre.
   Icones SVG trait fin (icons.js), animations subtiles et fonctionnelles. */

:root{
  --bg:#f4f6f9; --bg2:#eef1f5; --panel:#ffffff; --panel2:#f8fafc;
  --line:#e3e8ef; --line2:#cbd5e1;
  --text:#182437; --muted:#5b6b81; --dim:#8b99ad;
  --navy:#0e3a5f; --navy-d:#0a2b47; --navy-l:#eaf1f7;
  --acc:#e25822; --acc-d:#c44715; --acc-l:#fdf0e9;
  --ok:#15803d; --ok-l:#f0fdf4; --info:#0369a1; --info-l:#f0f9ff;
  --bad:#b91c1c; --bad-l:#fef2f2; --warn:#b45309; --warn-l:#fffbeb;
  --neutral:#64748b; --neutral-l:#f1f5f9;
  --r:12px; --shadow:0 1px 3px rgba(16,24,40,.07), 0 8px 24px rgba(16,24,40,.05);
  --shadow-lg:0 12px 40px rgba(16,24,40,.12);
  --tr:.18s cubic-bezier(.4,0,.2,1);
}
*{box-sizing:border-box; margin:0}
html,body{height:100%}
body{
  font:14.5px/1.55 "Segoe UI Variable","Segoe UI",Inter,system-ui,sans-serif;
  background:var(--bg); color:var(--text); overflow-x:hidden;
}
a{color:var(--info); text-decoration:none}
a:hover{text-decoration:underline}
::-webkit-scrollbar{width:9px;height:9px}
::-webkit-scrollbar-thumb{background:#c4cfdb;border-radius:8px}
::-webkit-scrollbar-thumb:hover{background:#a9b7c6}
::-webkit-scrollbar-track{background:transparent}
.ic{vertical-align:-3px; flex-shrink:0}

/* ---------- generic ---------- */
h1,h2,h3,h4{font-weight:650; letter-spacing:.1px; color:var(--navy-d)}
.hint{color:var(--muted); font-size:12.8px}
small{color:var(--muted)}
code{background:var(--navy-l); border:1px solid #d3e0ec; color:var(--navy);
  padding:1px 6px; border-radius:6px; font-size:12px}
.card{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:18px 20px; margin-bottom:14px; box-shadow:var(--shadow);
}
.card h3{margin-bottom:8px; font-size:15.5px; display:flex; align-items:center; gap:8px}
.card h3 .ic{color:var(--navy)}
.grid2{display:grid; grid-template-columns:1fr 1fr; gap:14px}
.grid3{display:grid; grid-template-columns:repeat(3,1fr); gap:14px}
.row{display:flex; gap:10px; align-items:flex-end; flex-wrap:wrap}
.field{display:flex; flex-direction:column; gap:5px; min-width:120px}
.field.full{grid-column:1/-1}
label{font-size:11px; text-transform:uppercase; letter-spacing:.8px; color:var(--muted); font-weight:600}
input,select,textarea{
  background:#fff; border:1px solid var(--line2); color:var(--text);
  border-radius:8px; padding:8.5px 12px; font:inherit; outline:none;
  transition:border-color var(--tr), box-shadow var(--tr);
}
input:hover,select:hover,textarea:hover{border-color:#a9b7c6}
input:focus,select:focus,textarea:focus{border-color:var(--navy);
  box-shadow:0 0 0 3px rgba(14,58,95,.12)}
textarea{resize:vertical}
button{font:inherit; cursor:pointer}
.btn{
  display:inline-flex; align-items:center; gap:7px;
  background:var(--navy); color:#fff; font-weight:600; border:none;
  padding:9px 17px; border-radius:9px; letter-spacing:.2px;
  transition:background var(--tr), transform var(--tr), box-shadow var(--tr);
  box-shadow:0 1px 2px rgba(10,43,71,.25);
}
.btn:hover{background:var(--navy-d); transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(10,43,71,.22)}
.btn:disabled{opacity:.45; cursor:default; transform:none; box-shadow:none}
.btn.accent{background:var(--acc)}
.btn.accent:hover{background:var(--acc-d)}
.btn.ghost{background:transparent; color:var(--navy); border:1px solid var(--line2); box-shadow:none}
.btn.ghost:hover{border-color:var(--navy); background:var(--navy-l); transform:none}
.btn.sm{padding:5.5px 12px; font-size:12.5px; border-radius:8px}
.iconbtn{display:inline-flex; align-items:center; gap:5px;
  background:transparent;border:1px solid var(--line2);border-radius:7px;
  color:var(--muted);padding:3px 9px;font-size:12px; transition:all var(--tr)}
.iconbtn:hover{color:var(--navy);border-color:var(--navy)}
.i-ok:hover{color:var(--ok);border-color:var(--ok);background:var(--ok-l)}
.i-bad:hover{color:var(--bad);border-color:var(--bad);background:var(--bad-l)}

/* ---------- auth ---------- */
.auth{min-height:100vh; display:flex; align-items:center; justify-content:center; padding:20px;
  background:linear-gradient(160deg,#f4f6f9 55%, #e8eef5)}
.auth .card{width:400px; padding:34px 36px; box-shadow:var(--shadow-lg)}
.authbrand{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.authbrand .ic{color:var(--acc)}
.auth h1{font-size:26px; color:var(--navy-d)}
.auth .sub{color:var(--muted); margin-bottom:20px; font-size:13px}
.auth label{margin-top:12px; display:block}
.auth input,.auth select{width:100%; margin-top:4px}
.auth .link{margin-top:16px; font-size:13px; color:var(--muted); text-align:center}
.auth .link a{cursor:pointer}

/* ---------- shell ---------- */
.shell{display:flex; min-height:100vh}
.side{
  width:246px; flex-shrink:0; padding:18px 12px 14px; display:flex; flex-direction:column;
  border-right:1px solid var(--line); background:var(--panel);
  position:sticky; top:0; height:100vh; overflow-y:auto;
}
.brand{font-size:17.5px; font-weight:700; margin:2px 10px 16px; display:flex; align-items:center; gap:9px;
  color:var(--navy-d)}
.brand .ic{color:var(--acc)}
.brand small{display:block;font-size:10px;color:var(--dim);font-weight:500;letter-spacing:.8px;text-transform:uppercase}
.grp{font-size:10.5px; text-transform:uppercase; letter-spacing:1.1px; color:var(--dim); margin:14px 10px 5px; font-weight:600}
.side button[data-nav],.side button[data-sec]{
  display:flex; align-items:center; gap:10px; width:100%; text-align:left;
  background:transparent; border:none; color:var(--muted);
  padding:8px 12px; border-radius:8px; margin-bottom:1px; font-size:13.5px;
  transition:background var(--tr),color var(--tr);
}
.side button[data-nav]:hover,.side button[data-sec]:hover{background:var(--bg2); color:var(--text)}
.side button.active{background:var(--navy-l); color:var(--navy); font-weight:600;
  box-shadow:inset 3px 0 0 var(--navy)}
.side .secstate{margin-left:auto; display:inline-flex; align-items:center}
.dotst{width:8px;height:8px;border-radius:50%;display:inline-block}
.dotst.done{background:var(--ok)}
.dotst.todo{background:#cbd5e1}
.dotst.stale{background:var(--warn)}
.dotst.warn{background:var(--acc)}
.side .spacer{flex:1}
.side .u{font-size:12.5px; color:var(--muted); padding:10px 12px 4px;
  border-top:1px solid var(--line); display:flex; align-items:center; gap:8px; flex-wrap:wrap}
.langsw{display:flex; gap:2px; margin-left:auto}
.langsw button{border:1px solid var(--line2); background:#fff; color:var(--muted);
  font-size:10.5px; padding:2px 8px; font-weight:600}
.langsw button:first-child{border-radius:6px 0 0 6px}
.langsw button:last-child{border-radius:0 6px 6px 0}
.langsw button.on{background:var(--navy); color:#fff; border-color:var(--navy)}
.projhead{margin:4px 10px 8px; padding:10px 12px; background:var(--navy-l);
  border:1px solid #d3e0ec; border-radius:10px}
.projhead b{font-size:13.5px; color:var(--navy-d); display:block; line-height:1.3}
.projhead small{font-size:11.5px}
.main{flex:1; padding:22px 30px 90px; max-width:1500px; min-width:0}
.topbar{display:flex; align-items:baseline; gap:12px; margin-bottom:16px}
.topbar h2{font-size:20px}
.crumbs{color:var(--muted); font-size:13px}
.topbar .right{margin-left:auto; display:flex; gap:8px; align-items:center}
.engine-pill{
  display:inline-flex; align-items:center; gap:6px;
  font-size:11.5px; padding:4px 12px; border-radius:20px; letter-spacing:.3px;
  border:1px solid var(--warn); color:var(--warn); background:var(--warn-l); white-space:nowrap;
}
.engine-pill.ready{border-color:#bbe3c8; color:var(--ok); background:var(--ok-l)}

/* ---------- project cards ---------- */
.pgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:14px}
.pcard{
  background:var(--panel); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; cursor:pointer; transition:transform var(--tr),border-color var(--tr), box-shadow var(--tr);
  position:relative; overflow:hidden;
}
.pcard::before{content:""; position:absolute; inset:0 auto 0 0; width:3px;
  background:var(--navy); opacity:0; transition:opacity var(--tr)}
.pcard:hover{transform:translateY(-2px); border-color:#b8c8d8; box-shadow:var(--shadow-lg)}
.pcard:hover::before{opacity:1}
.pcard h4{font-size:14.5px; margin-bottom:4px}
.pcard small{display:block; margin-bottom:8px}
.t{display:inline-block; font-size:10.5px; color:var(--muted); font-weight:600;
  border:1px solid var(--line2); padding:2px 9px; border-radius:12px; margin-right:5px;
  text-transform:uppercase; letter-spacing:.4px}
.t.ok{color:var(--ok); border-color:#bbe3c8; background:var(--ok-l)}

/* ---------- chips / badges ---------- */
.chips{display:flex; gap:10px; flex-wrap:wrap; margin:8px 0}
.chip{
  background:var(--panel2); border:1px solid var(--line); border-radius:10px;
  padding:8px 15px; display:flex; flex-direction:column; min-width:84px;
}
.chip b{font-size:19px; font-weight:700; color:var(--navy-d)}
.chip b.c-ok{color:var(--ok)} .chip b.c-info{color:var(--info)}
.chip b.c-bad{color:var(--bad)} .chip b.c-warn{color:var(--warn)}
.chip b.c-acc{color:var(--acc)}
.chip span{font-size:10.5px; color:var(--muted); text-transform:uppercase; letter-spacing:.6px; font-weight:600}
.badge{font-size:11px; padding:2px 10px; border-radius:12px; white-space:nowrap;
  border:1px solid; letter-spacing:.2px; font-weight:600}
.b-couverte{color:var(--ok); border-color:#bbe3c8; background:var(--ok-l)}
.b-a_certifier{color:var(--info); border-color:#bae0f5; background:var(--info-l)}
.b-ecart{color:var(--bad); border-color:#f5c6c6; background:var(--bad-l)}
.b-non_evaluee{color:var(--warn); border-color:#f3ddaa; background:var(--warn-l)}
.b-detectee{color:var(--neutral); border-color:var(--line2); background:var(--neutral-l)}

/* ---------- tables ---------- */
table{width:100%; border-collapse:collapse; font-size:13px}
th{
  text-align:left; color:var(--muted); font-size:10.5px; text-transform:uppercase;
  letter-spacing:.8px; padding:8px 10px; border-bottom:1.5px solid var(--line2);
  position:sticky; top:0; background:var(--panel2); z-index:2; font-weight:650;
}
td{padding:7px 10px; border-bottom:1px solid var(--line)}
tbody tr{transition:background .1s}
tbody tr:hover{background:var(--navy-l)}
.tablewrap{max-height:520px; overflow:auto; border:1px solid var(--line); border-radius:10px;
  background:#fff}

/* ---------- viz tabs ---------- */
.viztabs{display:flex; gap:4px; flex-wrap:wrap; background:var(--bg2);
  padding:3px; border-radius:10px}
.viztab{
  display:inline-flex; align-items:center; gap:7px;
  padding:7px 14px; border-radius:8px; border:none;
  background:transparent; color:var(--muted); font-size:13px; font-weight:550;
  transition:all var(--tr);
}
.viztab:hover{color:var(--navy)}
.viztab.active{background:#fff; color:var(--navy); font-weight:650;
  box-shadow:0 1px 3px rgba(16,24,40,.12)}
.vizbox{position:relative; border:1px solid var(--line); border-radius:var(--r);
  background:#fff; overflow:hidden; min-height:420px}
canvas.graph{display:block; width:100%; cursor:grab}
canvas.graph:active{cursor:grabbing}
.graphside{
  position:absolute; top:0; right:0; bottom:0; width:290px; overflow:auto;
  background:#fff; border-left:1px solid var(--line2); padding:16px;
  transform:translateX(100%); transition:transform .22s cubic-bezier(.4,0,.2,1);
  box-shadow:-8px 0 24px rgba(16,24,40,.08);
}
.graphside.open{transform:none}
.graphside h4{font-size:14px; margin-bottom:8px}
.gkv{display:flex; justify-content:space-between; font-size:12.5px; padding:4px 0;
  border-bottom:1px dashed var(--line)}
.gkv b{color:var(--text)} .gkv span{color:var(--muted)}
.legend{display:flex; gap:14px; flex-wrap:wrap; padding:10px 14px; font-size:12px; color:var(--muted)}
.legend i{display:inline-block; width:10px; height:10px; border-radius:50%; margin-right:6px}
.vtooltip{
  position:fixed; z-index:60; pointer-events:none; background:var(--navy-d);
  color:#eaf1f7; border-radius:9px; padding:8px 12px; font-size:12.3px;
  max-width:320px; box-shadow:var(--shadow-lg); display:none;
}
.vtooltip b{display:block; margin-bottom:2px; color:#fff}
.vtooltip .m{color:#a8c0d4}

/* heatmap */
.hm-cell{border-radius:4px; text-align:center; font-size:11px; padding:4px 6px; color:#fff; font-weight:650;
  text-shadow:0 1px 1px rgba(0,0,0,.2)}
.hm-row:hover td{background:var(--navy-l)}

/* ---------- gantt ---------- */
.gantt{overflow-x:auto; border:1px solid var(--line); border-radius:10px;
  background:#fff; margin:12px 0; padding:6px}
.gbar{cursor:pointer}
.week{margin:16px 0 6px; color:var(--navy); font-weight:650; font-size:13px;
  border-bottom:1px solid var(--line); padding-bottom:4px}
.line{padding:5px 8px; font-size:13px; border-radius:8px; margin-bottom:2px}
.line:hover{background:var(--bg2)}
.pill{font-size:10px; padding:2px 9px; border-radius:10px; margin-right:8px;
  letter-spacing:.5px; font-weight:700}
.pill.form{background:var(--navy-l); color:var(--navy)}
.pill.rap{background:var(--warn-l); color:var(--warn)}
.pill.sim{background:var(--acc-l); color:var(--acc)}
.pill.trav{background:var(--neutral-l); color:var(--neutral); font-weight:600}
.pill.fin{background:var(--ok-l); color:var(--ok)}
.pill.quar{background:#fef3c7; color:#b45309}
.pill.launch{background:#fee2e2; color:#b91c1c}
.line .pill.trav .ic{vertical-align:-2px}
.warnbox{
  background:var(--bad-l); border:1px solid #f5c6c6; color:#7f1d1d;
  border-radius:10px; padding:11px 15px; margin:10px 0; font-size:13px;
}
.infobox{
  background:var(--info-l); border:1px solid #bae0f5; color:#0c4a6e;
  border-radius:10px; padding:11px 15px; margin:10px 0; font-size:13px;
}
.okbox{
  background:var(--ok-l); border:1px solid #bbe3c8; color:#14532d;
  border-radius:10px; padding:11px 15px; margin:10px 0; font-size:13px;
}

/* ---------- rating ---------- */
.scalebar{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px}
.scalebar .s{font-size:11.5px; border:1px solid; border-radius:9px; padding:4px 10px; color:var(--muted); background:#fff}
.rate-row{display:flex; align-items:center; gap:10px; padding:6px 4px;
  border-bottom:1px solid var(--line)}
.rate-row .txt{flex:1; font-size:13px}
.dots{display:flex; gap:5px}
.dot{
  width:27px;height:27px;border-radius:50%;border:1px solid var(--line2);
  display:flex;align-items:center;justify-content:center;font-size:11.5px;
  color:var(--muted);cursor:pointer; transition:all .1s; background:#fff;
}
.dot:hover{border-color:var(--navy); color:var(--navy)}
.dot.on{background:var(--navy); border-color:var(--navy); color:#fff; font-weight:700}

/* ---------- trainings ---------- */
.trainlist{max-height:600px; overflow:auto; display:flex; flex-direction:column; gap:8px}
.tcard{background:var(--panel); border:1px solid var(--line); border-radius:10px;
  padding:11px 14px; cursor:pointer; transition:border-color var(--tr), box-shadow var(--tr)}
.tcard:hover{border-color:var(--navy); box-shadow:var(--shadow)}
.tcard.sel{border-color:var(--navy); background:var(--navy-l)}
.tcard h4{font-size:13.2px}
.skilltag{
  display:inline-flex; align-items:center; gap:6px; background:var(--navy-l);
  border:1px solid #d3e0ec; color:var(--navy); border-radius:9px;
  padding:3px 10px; font-size:12px; margin:0 6px 6px 0;
}
.skilltag button{background:none;border:none;color:var(--muted);font-size:11px;padding:0}
.skilltag button:hover{color:var(--bad)}

/* ---------- loader ---------- */
#loader{position:fixed; inset:0; display:none; align-items:center; justify-content:center;
  background:rgba(24,36,55,.35); z-index:100; backdrop-filter:blur(3px)}
.loadcard{width:380px; text-align:center; padding:34px 30px;
  background:#fff; border:1px solid var(--line); border-radius:16px;
  box-shadow:var(--shadow-lg)}
.loadtitle{font-size:16px; font-weight:650; margin-top:16px; color:var(--navy-d)}
.loadsub{color:var(--muted); font-size:12.8px; margin-top:8px; min-height:18px; transition:opacity .2s}
.loadtime{color:var(--dim); font-size:12px; margin-top:10px}
.loadbar{height:5px; border-radius:4px; background:var(--bg2); margin-top:14px; overflow:hidden}
.loadbar i{display:block; height:100%; border-radius:4px; background:var(--navy); width:0%;
  transition:width .3s}
.loadbar i.indet{width:38%; animation:slide 1.15s ease-in-out infinite}
@keyframes slide{0%{margin-left:-38%}100%{margin-left:100%}}
.orbit{position:relative; width:72px; height:72px; margin:0 auto}
.orbit .planet{position:absolute; inset:24px; border-radius:50%;
  background:var(--navy); box-shadow:0 0 0 5px var(--navy-l)}
.orbit .ringstatic{position:absolute; inset:0; border-radius:50%;
  border:1.5px dashed var(--line2)}
.orbit .track{position:absolute; inset:0; animation:spin 2.2s linear infinite}
.orbit .sat{position:absolute; top:-4px; left:50%; width:9px; height:9px;
  border-radius:50%; background:var(--acc); box-shadow:0 0 0 3px var(--acc-l)}
@keyframes spin{to{transform:rotate(360deg)}}

/* ---------- toast ---------- */
.toast{
  position:fixed; bottom:24px; left:50%; transform:translate(-50%,80px);
  background:var(--navy-d); color:#fff; border-left:3px solid var(--ok);
  padding:11px 20px; border-radius:10px;
  font-size:13.5px; transition:transform .25s cubic-bezier(.4,0,.2,1); z-index:120;
  box-shadow:var(--shadow-lg);
}
.toast.show{transform:translate(-50%,0)}

/* ---------- chat dock ---------- */
#chatfab{
  position:fixed; right:26px; bottom:26px; z-index:90;
  width:54px; height:54px; border-radius:50%; border:none;
  background:var(--navy); color:#fff; box-shadow:0 6px 24px rgba(10,43,71,.35);
  transition:transform var(--tr), background var(--tr); display:flex; align-items:center; justify-content:center;
}
#chatfab:hover{transform:scale(1.07); background:var(--navy-d)}
#chatdock{
  position:fixed; right:26px; bottom:92px; z-index:95; width:420px; max-width:calc(100vw - 40px);
  height:560px; max-height:calc(100vh - 130px);
  background:#fff; border:1px solid var(--line); border-radius:16px;
  display:none; flex-direction:column; overflow:hidden; box-shadow:var(--shadow-lg);
}
#chatdock.open{display:flex; animation:dockin .18s cubic-bezier(.4,0,.2,1)}
@keyframes dockin{from{opacity:0; transform:translateY(10px)}to{opacity:1}}
.chathead{display:flex; align-items:center; gap:10px; padding:13px 16px;
  border-bottom:1px solid var(--line); background:var(--panel2)}
.chathead .dot-on{width:9px;height:9px;border-radius:50%;background:var(--ok)}
.chathead b{font-size:14px; color:var(--navy-d)}
.chathead small{color:var(--muted)}
.chathead .x{margin-left:auto;background:none;border:none;color:var(--muted);font-size:16px}
.chathead .x:hover{color:var(--text)}
.chatmode{display:flex;align-items:center;gap:6px;font-size:11px;color:var(--muted)}
.chatmode input{accent-color:var(--navy)}
#chatlog{flex:1; overflow-y:auto; padding:16px; display:flex; flex-direction:column; gap:10px;
  background:var(--bg)}
.msg{max-width:86%; padding:9px 13px; border-radius:13px; font-size:13.3px; white-space:pre-wrap}
.msg.user{align-self:flex-end; background:var(--navy); color:#fff; border-bottom-right-radius:4px}
.msg.bot{align-self:flex-start; background:#fff; border:1px solid var(--line);
  border-bottom-left-radius:4px; box-shadow:var(--shadow)}
.msg .mode{display:block; font-size:10px; color:var(--dim); margin-top:5px; letter-spacing:.4px}
.typing{align-self:flex-start; display:flex; gap:4px; padding:12px 16px}
.typing i{width:7px;height:7px;border-radius:50%;background:var(--dim);
  animation:blink 1.2s infinite}
.typing i:nth-child(2){animation-delay:.2s}
.typing i:nth-child(3){animation-delay:.4s}
@keyframes blink{0%,80%,100%{opacity:.25}40%{opacity:1}}
.chatin{display:flex; gap:8px; padding:12px; border-top:1px solid var(--line); background:#fff}
.chatin textarea{flex:1; height:44px; max-height:120px; border-radius:11px}
.chatin button{width:46px; border-radius:11px; padding:0; justify-content:center}
.chatsug{display:flex; gap:6px; flex-wrap:wrap; padding:8px 14px; background:var(--bg);
  border-top:1px solid var(--line)}
.chatsug button{font-size:11px; color:var(--muted); background:#fff;
  border:1px solid var(--line2); border-radius:14px; padding:4px 11px; transition:all var(--tr)}
.chatsug button:hover{color:var(--navy); border-color:var(--navy)}

/* ---------- readiness gauge ---------- */
.gaugebox{display:flex; gap:22px; align-items:center}
.gaugelabel{color:var(--muted); font-size:12.5px}

/* ---------- constraints ---------- */
.constr-grid{display:grid; grid-template-columns:1fr 1fr; gap:16px}
.constr-sec{border:1px solid var(--line); border-radius:11px; padding:14px 16px;
  background:var(--panel2)}
.constr-sec h4{font-size:12px; margin-bottom:10px; color:var(--navy);
  text-transform:uppercase; letter-spacing:.8px; display:flex; align-items:center; gap:7px}
.taglist{display:flex; flex-wrap:wrap; gap:6px; margin-top:6px}
.seltag{display:inline-flex; align-items:center; gap:6px; font-size:12px;
  background:var(--navy-l); border:1px solid #d3e0ec; color:var(--navy);
  border-radius:9px; padding:3px 10px}
.seltag button{background:none;border:none;color:var(--muted);font-size:11px;padding:0}
.seltag button:hover{color:var(--bad)}
.daychk{display:inline-flex; align-items:center; gap:5px; margin-right:12px; font-size:13px}
.daychk input{accent-color:var(--navy)}

/* review queue */
.review-row{display:flex; align-items:center; gap:10px; padding:8px 6px;
  border-bottom:1px solid var(--line); font-size:13px}
.review-row .w{font-weight:700; color:var(--warn); min-width:44px}

/* ---------- overview (vue d'ensemble projet) ---------- */
.ov-grid{display:grid; grid-template-columns:repeat(12,1fr); gap:14px}
.ov-grid .span4{grid-column:span 4} .ov-grid .span6{grid-column:span 6}
.ov-grid .span8{grid-column:span 8} .ov-grid .span12{grid-column:span 12}
.ov-num{font-size:30px; font-weight:750; color:var(--navy-d); line-height:1.1}
.ov-item{display:flex; align-items:center; gap:10px; padding:7px 0;
  border-bottom:1px dashed var(--line); font-size:13px}
.ov-item:last-child{border-bottom:none}
.ov-item .when{color:var(--dim); font-size:11.5px; min-width:74px}
.fade-in{animation:fadein .28s cubic-bezier(.4,0,.2,1)}
@keyframes fadein{from{opacity:0; transform:translateY(6px)}to{opacity:1}}

/* ---------- scenario cards ---------- */
.scen-grid{display:grid; grid-template-columns:repeat(3,1fr); gap:12px; margin:12px 0}
.scen{border:1.5px solid var(--line); border-radius:12px; padding:14px 16px; cursor:pointer;
  background:#fff; transition:all var(--tr); position:relative}
.scen:hover{border-color:var(--navy); box-shadow:var(--shadow)}
.scen.sel{border-color:var(--navy); background:var(--navy-l);
  box-shadow:0 0 0 3px rgba(14,58,95,.1)}
.scen h4{font-size:13.5px; margin-bottom:8px; display:flex; gap:7px; align-items:center}
.scen .kv{display:flex; justify-content:space-between; font-size:12px; color:var(--muted); padding:2px 0}
.scen .kv b{color:var(--text)}
.scen .chosen{position:absolute; top:10px; right:12px; color:var(--ok)}

@media (max-width:1150px){
  .grid2,.grid3,.constr-grid,.scen-grid{grid-template-columns:1fr}
  .ov-grid .span4,.ov-grid .span6,.ov-grid .span8{grid-column:span 12}
  .side{width:200px}
}

/* --- activites de mission (builder) --- */
.actgrid{display:grid; grid-template-columns:repeat(auto-fill,minmax(230px,1fr)); gap:8px}
.actcard{display:flex; align-items:center; gap:8px; padding:9px 11px; border:1px solid var(--line);
  border-radius:10px; cursor:pointer; background:var(--bg2); transition:all .15s}
.actcard:hover{border-color:var(--accent)}
.actcard.on{border-color:var(--accent); background:rgba(14,58,95,.07); box-shadow:0 0 0 1px var(--accent) inset}
.actcard input{accent-color:var(--accent)}
.actcard span{flex:1; font-size:.86rem; font-weight:600}
.actcard small{color:var(--dim); font-size:.72rem; white-space:nowrap}
@media (max-width:1150px){ .actgrid{grid-template-columns:1fr 1fr} }

/* --- crew mission readiness board --- */
.verdict{display:flex;align-items:center;gap:16px;border:1.5px solid;border-radius:12px;padding:14px 18px}
.v-big{font-size:1.6rem;font-weight:800;display:flex;align-items:center;gap:8px;letter-spacing:.5px}
.v-sub{color:var(--dim);font-size:.86rem}
.slotgrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:10px}
.slotcard{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:var(--bg2)}
.slotcard .s-role{font-size:.8rem;color:var(--dim);display:flex;align-items:center;gap:5px}
.slotcard .s-name{font-weight:700;margin:5px 0 3px;font-size:.95rem}
.slotcard .s-meters{display:flex;gap:12px;font-size:.8rem;color:var(--dim)}
.slotcard .s-status{font-weight:800;font-size:.82rem;margin-top:6px;letter-spacing:.6px}
.slotcard .s-reasons{font-size:.74rem;color:#b45309;margin-top:3px}

/* --- human digital twin --- */
.twinhead{display:flex;justify-content:space-between;align-items:center;gap:16px}
.tw-big{text-align:center;padding:4px 18px;border-left:1px solid var(--line)}
.tw-big b{font-size:2.2rem;font-weight:800;color:var(--navy,#0e3a5f);display:block;line-height:1.1}
.tw-big span{color:var(--dim);font-size:.8rem}
.tw-meter{display:flex;align-items:center;gap:10px;margin:7px 0}
.tw-meter label{width:180px;font-size:.8rem;color:var(--dim)}
.tw-meter .bar{flex:1;height:9px;border-radius:5px;background:var(--bg2);overflow:hidden}
.tw-meter .bar i{display:block;height:100%;border-radius:5px;transition:width .35s}
.tw-meter b{width:52px;text-align:right;font-size:.82rem}
.tw-meter.sm label{width:80px}
.tw-params{display:grid;grid-template-columns:1fr 1fr;gap:5px 18px}
.tw-params div{display:flex;justify-content:space-between;font-size:.82rem;padding:3px 0;border-bottom:1px dashed var(--line)}
.tw-params span{color:var(--dim)}
.twlegend{display:flex;flex-wrap:wrap;gap:4px 14px;margin-top:6px;justify-content:center}
.twleg{display:inline-flex;align-items:center;gap:5px;font-size:.76rem;color:var(--dim);cursor:default}
.twleg i{width:9px;height:9px;border-radius:50%;display:inline-block}
.twcat,.twskill{cursor:pointer;transition:opacity .15s}
.twcat:hover,.twskill:hover{opacity:.82}

/* --- COCKPIT clair (section Twin) --- */
.cp-hero{display:flex;justify-content:space-between;align-items:center;gap:18px;flex-wrap:wrap;
  border-radius:16px;padding:20px 24px;margin-bottom:14px;color:#fff;
  background:linear-gradient(120deg,#0e3a5f 0%,#14507e 55%,#1c6699 100%);
  box-shadow:0 10px 30px rgba(14,58,95,.28)}
.cp-id{display:flex;align-items:center;gap:16px}
.cp-av{width:62px;height:62px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:22px;font-weight:800;color:#fff;background:rgba(255,255,255,.10);
  border:2px solid #e25822;box-shadow:0 0 0 4px rgba(226,88,34,.18)}
.cp-name{font-size:1.45rem;font-weight:800;letter-spacing:.3px}
.cp-tags{display:flex;align-items:center;gap:10px;margin:4px 0;flex-wrap:wrap}
.cp-chip{background:#e25822;color:#fff;font-size:.72rem;font-weight:700;padding:3px 10px;border-radius:20px;letter-spacing:.5px}
.cp-sub{color:rgba(255,255,255,.72);font-size:.82rem}
.cp-state{font-size:.78rem;color:rgba(255,255,255,.85);margin-top:5px}
.cp-state a{color:#ffd7c4}
.cp-rdy{display:flex;align-items:center;gap:16px}
.cp-ring{width:118px;height:118px;border-radius:50%;padding:11px;
  box-shadow:inset 0 0 0 1px rgba(255,255,255,.15)}
.cp-ring-in{width:100%;height:100%;border-radius:50%;background:#fff;display:flex;flex-direction:column;
  align-items:center;justify-content:center;box-shadow:0 4px 12px rgba(0,0,0,.18)}
.cp-ring-in b{font-size:2rem;font-weight:800;line-height:1}
.cp-ring-in span{font-size:.62rem;color:var(--dim);letter-spacing:2px;text-transform:uppercase}
.cp-verdict{font-size:1.15rem;font-weight:800;letter-spacing:.5px}
.cp-rdy-meta .cp-sub{color:rgba(255,255,255,.8)}
.cp-tiles{display:grid;grid-template-columns:repeat(6,1fr);gap:10px;margin-bottom:14px}
@media(max-width:900px){.cp-tiles{grid-template-columns:repeat(3,1fr)}}
.cp-tile{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px;text-align:center;box-shadow:var(--shadow)}
.cp-tile b{display:block;font-size:1.7rem;font-weight:800;line-height:1}
.cp-tile span{font-size:.72rem;color:var(--dim)}
.cp-meter{display:flex;align-items:center;gap:10px;margin:7px 0}
.cp-meter label{width:170px;font-size:.78rem;color:var(--muted)}
.cp-meter .bar{flex:1;height:9px;border-radius:5px;background:var(--bg2);overflow:hidden}
.cp-meter .bar i{display:block;height:100%;border-radius:5px;transition:width .4s cubic-bezier(.4,0,.2,1)}
.cp-meter b{width:56px;text-align:right;font-size:.82rem}
.cp-timerow{display:flex;align-items:center;gap:12px;margin:10px 0 2px}
.cp-timerow input{flex:1;accent-color:var(--acc)}
.cp-timerow b{color:var(--navy);font-weight:700;min-width:56px;text-align:right}
.cp-slider{margin:9px 0}
.cp-slider label{display:flex;justify-content:space-between;align-items:center;font-size:.8rem;color:var(--text);gap:8px}
.cp-slider output{font-family:Consolas,monospace;font-size:.72rem;color:var(--navy)}
.cp-slider input{width:100%;accent-color:var(--navy);margin:3px 0}
.cp-slider.mod label{font-weight:700}
.cp-dot{width:6px;height:6px;border-radius:50%;background:var(--acc);display:inline-block}
.cp-info{font-size:.7rem;color:var(--dim);line-height:1.35}
.cp-ctlgroup{border-top:1px dashed var(--line);padding-top:4px;margin-top:6px}
.cp-ctlgroup h5{margin:6px 0 2px;font-size:.7rem;letter-spacing:1.5px;color:var(--dim);font-weight:700;text-transform:uppercase}
.cp-ctlbtns{display:flex;gap:8px;margin-top:12px}
.cp-scenrow{display:grid;grid-template-columns:repeat(auto-fill,minmax(210px,1fr));gap:8px;margin:10px 0}
.cp-scen{position:relative;display:flex;flex-direction:column;gap:2px;padding:9px 11px;border:1px solid var(--line);
  border-radius:10px;cursor:pointer;background:var(--panel2);transition:all .15s}
.cp-scen:hover{border-color:var(--navy)}
.cp-scen:has(input:checked){border-color:var(--navy);box-shadow:0 0 0 1px var(--navy) inset}
.cp-scen input{position:absolute;top:9px;right:9px;accent-color:var(--navy)}
.cp-scen b{font-size:.8rem;color:var(--text);padding-right:22px}
.cp-scen small{font-size:.68rem;color:var(--dim);font-family:Consolas,monospace}
.cp-spin1{transform-origin:center;animation:cpspin 30s linear infinite}
.cp-spin2{transform-origin:center;animation:cpspin 18s linear infinite reverse}
@keyframes cpspin{to{transform:rotate(360deg)}}