/* ════════════════════════════════════════════════════════════════════════════
   kAIros campus · niveaux et tableaux « maître ou esclave »
   Complète campus.css : choix du niveau, parcours primaire, module sur les
   risques (marionnette, cerveau, détecteur, langage, liens, chaînes, pacte).
   ════════════════════════════════════════════════════════════════════════════ */

/* Couleur propre à chaque niveau (cartes, puce, miniatures). */
:root{--lv1:#ffae6b;--lv2:#3ec8c0;--lv3:#8f7cff;--lv4:#e8c66a}
body.light{--lv1:#c9691c;--lv2:#12877f;--lv3:#5f4ad0;--lv4:#9a7410}

/* ─────────── Accueil : choix du niveau ─────────── */
.lvl-pick{margin-top:34px;display:flex;flex-direction:column;gap:14px;animation:fadeUp 1s .6s var(--ease) both;max-width:1080px}
.lvl-q{font-family:var(--f-mono);font-size:12px;letter-spacing:.2em;text-transform:uppercase;color:var(--tx3)}
.lvl-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px}
.lvl-card{
  --lvc:var(--accent);
  position:relative;isolation:isolate;overflow:hidden;text-align:left;border-radius:var(--r);padding:0 18px 18px;
  display:flex;flex-direction:column;gap:6px;min-height:236px;
  background:color-mix(in srgb,var(--panel) 80%,transparent);border:1px solid var(--line);
  transition:transform .45s var(--ease),border-color .3s,box-shadow .4s,opacity .4s;
}
.lvl-card::before{content:'';position:absolute;inset:0;z-index:-1;opacity:0;transition:opacity .4s;background:radial-gradient(120% 90% at 50% 0%,color-mix(in srgb,var(--lvc) 22%,transparent),transparent 65%)}
.lvl-card:hover{transform:translateY(-5px);border-color:color-mix(in srgb,var(--lvc) 70%,transparent);box-shadow:var(--card-sh)}
.lvl-card:hover::before,.lvl-card.on::before{opacity:1}
.lvl-card.on{border-color:var(--lvc);box-shadow:0 0 0 1px var(--lvc),0 18px 50px -18px color-mix(in srgb,var(--lvc) 70%,transparent)}
.lvl-grid.chosen .lvl-card:not(.on){opacity:.62}
.lvl-grid.chosen .lvl-card:not(.on):hover{opacity:1}
.lvl-cv{display:block;width:calc(100% + 36px);height:92px;margin:0 -18px 4px}
.lvl-k{position:absolute;top:12px;right:14px;font-family:var(--f-mono);font-size:11px;color:var(--tx3);border:1px solid var(--line2);border-radius:6px;padding:1px 7px}
.lvl-span{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.1em;text-transform:uppercase;color:var(--lvc)}
.lvl-name{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:34px;line-height:1}
.lvl-pitch{font-size:14.5px;color:var(--tx2);font-weight:300;line-height:1.45}
.lvl-meta{margin-top:auto;padding-top:8px;font-size:12.5px;color:var(--tx3)}
.lvl-card.on .lvl-meta{color:var(--lvc)}
.lvl-note{font-size:14.5px;color:var(--tx2);font-weight:300;max-width:74ch;line-height:1.5;min-height:1em}
.lvl-note:empty{display:none}
#hero-go{margin-top:24px}
#hero-go[hidden],.hero-stats[hidden]{display:none}

/* Puce du niveau dans la barre du haut. */
.lvl-chip{--lvc:var(--accent);display:inline-flex;align-items:center;gap:8px}
.lvl-chip[hidden]{display:none}
.lvl-chip i{width:8px;height:8px;border-radius:50%;background:var(--lvc);box-shadow:0 0 10px var(--lvc)}

/* La partie « maître ou esclave » se distingue sur l'accueil. */
.act-risk .act-head .an{-webkit-text-stroke-color:var(--warm)}
.act-risk .lcard .num{-webkit-text-stroke-color:color-mix(in srgb,var(--warm) 80%,transparent)}
.act-risk .lcard:hover .num{color:var(--warm)}
.act-risk .lcard:hover{border-color:color-mix(in srgb,var(--warm) 60%,transparent)}
.act-risk .lcard::before{background:radial-gradient(420px circle at var(--mx) var(--my),color-mix(in srgb,var(--warm) 16%,transparent),transparent 45%)}
.act-risk .lcard .new{background:var(--warm)}

/* Primaire : textes un peu plus grands. */
body[data-level="primaire"] .t-sub{font-size:clamp(17px,1.7vw,21px)}
body[data-level="primaire"] .hint,body[data-level="primaire"] .verdict .why,body[data-level="primaire"] .flip .mr{font-size:18px}

/* Conteneurs des composants génériques (kit.js). */
.gq,.gs{width:100%;display:flex;flex-direction:column;align-items:center;gap:16px}

/* ─────────── Primaire : apprendre avec des exemples ─────────── */
.ex-wrap{display:flex;gap:18px;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%;max-width:960px}
.ex-plane{position:relative;flex:1 1 440px;max-width:600px;height:min(46vh,400px);min-height:260px;overflow:hidden}
.ex-plane canvas{width:100%;height:100%;display:block}
.ex-ax{position:absolute;font-family:var(--f-mono);font-size:11px;color:var(--tx3);letter-spacing:.06em}
.ex-ax.x{right:14px;bottom:4px}
.ex-ax.y{left:4px;top:50%;transform:rotate(-90deg) translate(50%,-50%);transform-origin:left top}
.ex-side{flex:0 1 280px;min-width:min(260px,100%);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.ex-num{display:flex;align-items:baseline;gap:10px}
.ex-num b{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:40px;line-height:1;color:var(--accent)}
.ex-num span{font-size:14px;color:var(--tx3)}
.ex-side p{font-size:16px;font-weight:300;color:var(--tx2);line-height:1.5}
.ex-side p b{color:var(--tx1);font-weight:500}

/* ─────────── Maître ou esclave : la marionnette ─────────── */
.pup-stage{width:min(600px,100%);height:min(40vh,360px);min-height:240px;overflow:hidden}
.pup-stage canvas{width:100%;height:100%;display:block}

/* ─────────── Le muscle de la pensée ─────────── */
.br-wrap{display:flex;gap:18px;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%;max-width:980px}
.br-brain{position:relative;flex:1 1 440px;max-width:620px;height:min(42vh,380px);min-height:240px;overflow:hidden}
.br-brain canvas{width:100%;height:100%;display:block}
.br-week{position:absolute;left:14px;top:12px;font-family:var(--f-mono);font-size:12px;color:var(--tx3);letter-spacing:.06em}
.br-side{flex:0 1 320px;min-width:min(280px,100%);padding:20px 22px;display:flex;flex-direction:column;gap:18px}
.br-side .meter{width:100%}
.br-m1 .meter-fill{background:var(--accent3)}
.br-m1 .el b{color:var(--accent3)}
.br-m2 .meter-fill{background:var(--accent)}
.br-m2 .el b{color:var(--accent)}
.br-tab{display:none;flex-direction:column;gap:6px;font-size:13.5px;border-top:1px solid var(--line);padding-top:12px}
.br-tab.on{display:flex}
.br-tab div{display:grid;grid-template-columns:1fr 54px 54px;gap:8px;align-items:baseline;animation:rise .5s var(--ease) both}
.br-tab span{color:var(--tx2);font-weight:300;line-height:1.3}
.br-tab b{font-family:var(--f-mono);font-weight:500;text-align:right;color:var(--tx1)}
.br-tab .h span,.br-tab .h b{font-family:var(--f-mono);font-size:10.5px;letter-spacing:.08em;text-transform:uppercase;color:var(--tx3);font-weight:400}

/* ─────────── Le détecteur ─────────── */
.dt-wrap{display:flex;gap:18px;align-items:center;justify-content:center;flex-wrap:wrap;width:100%;max-width:1040px}
.dt-texts{flex:1 1 520px;display:flex;flex-direction:column;gap:10px;max-width:640px}
.dt-card{text-align:left;padding:14px 18px;display:flex;flex-direction:column;gap:6px;transition:border-color .3s,transform .3s var(--ease),box-shadow .3s}
.dt-card:hover{transform:translateY(-2px);border-color:var(--accent)}
.dt-card.on{border-color:var(--accent);box-shadow:var(--glow)}
.dt-card.done{cursor:default;transform:none}
.dt-k{font-family:var(--f-mono);font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--tx3)}
.dt-t{font-size:15.5px;font-weight:300;line-height:1.45;color:var(--tx1)}
.dt-res{display:flex;flex-direction:column;gap:2px;font-size:14px}
.dt-res:empty{display:none}
.dt-res b{font-family:var(--f-mono);font-weight:500;animation:pop .4s var(--ease) both}
.dt-res span{color:var(--tx2);font-weight:300;animation:rise .5s .15s both}
.dt-card.ishuman .dt-res b{color:var(--err)}
.dt-card.isai .dt-res b{color:var(--warm)}
.dt-gauge{flex:0 0 260px;padding:18px 16px 16px;display:flex;flex-direction:column;align-items:center;gap:4px}
.dt-gauge svg{width:100%;max-width:240px}
.dt-arc{fill:none;stroke-width:14}
.dt-arc.a1{stroke:var(--ok)}.dt-arc.a2{stroke:var(--warm)}.dt-arc.a3{stroke:var(--err)}
.dt-needle{stroke:var(--tx1);stroke-width:4;stroke-linecap:round}
.dt-hub{fill:var(--tx1)}
.dt-val{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:44px;line-height:1}
.dt-lbl{font-size:12.5px;color:var(--tx3);text-align:center}

/* ─────────── Quand toutes les phrases se ressemblent ─────────── */
.lg-wrap{display:flex;gap:18px;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%;max-width:1040px}
.lg-cloud{flex:1 1 460px;max-width:640px;height:min(44vh,400px);min-height:260px;overflow:hidden;transition:border-color 1s}
.lg-cloud.grey{border-color:var(--line2)}
.lg-cloud canvas{width:100%;height:100%;display:block}
.lg-side{flex:0 1 340px;min-width:min(280px,100%);padding:20px 22px;display:flex;flex-direction:column;gap:14px}
.lg-side .pk{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent)}
.lg-text{font-family:var(--f-disp);font-size:clamp(20px,2vw,25px);line-height:1.3;font-weight:500;min-height:5.2em}
.lg-stats{margin-top:auto;display:flex;gap:26px}
.lg-stats div{display:flex;flex-direction:column;gap:2px}
.lg-stats b{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:36px;line-height:1}
.lg-stats span{font-size:12.5px;color:var(--tx3)}

/* ─────────── Les tics de la machine ─────────── */
.tic-text{width:min(820px,100%);padding:26px 30px;font-size:clamp(18px,1.9vw,22px);line-height:1.75;font-weight:300}
.tic-text .tw,.tic-text .tic{cursor:pointer;border-radius:5px;transition:background .25s,color .25s}
.tic-text .tw:hover,.tic-text .tic:hover{background:color-mix(in srgb,var(--accent) 10%,transparent)}
.tic-text .tw.miss{animation:ticMiss .45s ease;color:var(--err)}
@keyframes ticMiss{0%,100%{transform:none}25%{transform:translateX(-3px)}75%{transform:translateX(3px)}}
.tic-text .tw{display:inline-block}
.tic-text .tic.hit{color:var(--tx1);font-weight:400;cursor:default;
  background:linear-gradient(90deg,color-mix(in srgb,var(--warm) 32%,transparent),color-mix(in srgb,var(--accent3) 30%,transparent)) no-repeat 0 100%/100% 100%;
  box-shadow:0 2px 0 var(--warm);animation:ticHit .6s var(--ease) both}
@keyframes ticHit{from{background-size:0 100%}to{background-size:100% 100%}}
.tic-count{font-family:var(--f-mono);font-size:13px;color:var(--tx3);letter-spacing:.06em}

/* ─────────── Seul avec la machine ─────────── */
.so-stage{position:relative;width:min(760px,100%);height:min(46vh,420px);min-height:280px;overflow:hidden}
.so-stage canvas{width:100%;height:100%;display:block}
.so-val{position:absolute;right:16px;top:12px;font-family:var(--f-mono);font-size:13px;color:var(--accent3);letter-spacing:.04em}
.so-help{border-color:color-mix(in srgb,var(--warm) 55%,transparent)}

/* ─────────── Les chaînes invisibles ─────────── */
.ch-wrap{display:flex;gap:18px;align-items:stretch;justify-content:center;flex-wrap:wrap;width:100%;max-width:1000px}
.ch-stage{flex:1 1 460px;max-width:620px;overflow:hidden;padding:6px}
.ch-stage svg{width:100%;height:auto;display:block;--free:0}
.ch-aura{opacity:calc(var(--free) * .7);transition:opacity 1s}
.chain{cursor:pointer}
.chain .lk{fill:none;stroke:var(--tx2);stroke-width:3.2;transition:transform 1.4s cubic-bezier(.2,.7,.3,1),opacity 1.4s,stroke .3s;transform-box:fill-box;transform-origin:center}
.chain .anchor{fill:var(--tx3);transition:opacity 1s}
.chain:hover .lk{stroke:var(--accent)}
.chain.sel .lk{stroke:var(--warm);animation:chSel 1s ease-in-out infinite alternate}
@keyframes chSel{to{stroke-width:4.4}}
.chain.broken{pointer-events:none}
.chain.broken .lk{opacity:0}
.chain.broken .anchor{opacity:.25}
.ch-fig{fill:color-mix(in srgb,var(--tx1) calc(55% + var(--free) * 45%),transparent);transition:transform 1.2s var(--spring),fill 1s}
.free .ch-fig{fill:var(--accent);transform:translateY(-16px)}
.ch-win{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:40px;fill:var(--accent);opacity:0;transition:opacity 1s .6s}
.free .ch-win{opacity:1}
.ch-side{flex:0 1 320px;min-width:min(280px,100%);padding:20px 22px;display:flex;flex-direction:column;gap:12px}
.ch-side .pk{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.ch-side h4{font-size:24px;font-weight:500;color:var(--warm)}
.ch-side p{font-size:16px;font-weight:300;color:var(--tx2);line-height:1.5}
.ch-key:empty{display:none}
.ch-key{border-left:2px solid var(--accent);padding-left:12px;color:var(--tx1)!important}
.ch-key span{display:block;font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--accent);margin-bottom:4px}
#r-ch-btns .qbtn.done{opacity:.5;text-decoration:line-through;text-decoration-color:var(--accent)}

/* ─────────── Mon pacte ─────────── */
@property --pact-a{syntax:'<angle>';inherits:false;initial-value:0deg}
.pact{position:relative;width:min(640px,100%);padding:2px;border-radius:calc(var(--r) + 2px);
  background:conic-gradient(from var(--pact-a),var(--accent),var(--accent3),var(--warm),var(--accent));
  animation:pactTurn 8s linear infinite}
@keyframes pactTurn{to{--pact-a:360deg}}
.pact-in{position:relative;border-radius:var(--r);background:var(--panel);padding:26px 30px 22px;display:flex;flex-direction:column;gap:14px;overflow:hidden}
.pact-head{display:flex;justify-content:space-between;align-items:baseline;gap:12px}
.pact-head .klogo{font-size:22px}
.pact-lvl{font-family:var(--f-mono);font-size:11px;letter-spacing:.14em;text-transform:uppercase;color:var(--tx3)}
.pact-title{font-family:var(--f-disp);font-style:italic;font-weight:500;font-size:clamp(28px,3vw,38px);line-height:1.05}
.pact-list{list-style:none;display:flex;flex-direction:column;gap:6px}
.pact-list button{display:flex;align-items:flex-start;gap:12px;width:100%;text-align:left;padding:8px 10px;border-radius:10px;font-size:16.5px;font-weight:300;line-height:1.4;color:var(--tx2);transition:background .25s,color .25s}
.pact-list button:hover{background:color-mix(in srgb,var(--accent) 8%,transparent)}
.pact-list button[aria-pressed="true"]{color:var(--tx1)}
.pact-list i{flex:0 0 22px;height:22px;margin-top:1px;border-radius:6px;border:1.5px solid var(--line2);display:flex;align-items:center;justify-content:center;transition:background .3s,border-color .3s}
.pact-list svg{width:16px;height:16px;fill:none;stroke:#fff;stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round;stroke-dasharray:22;stroke-dashoffset:22;transition:stroke-dashoffset .4s var(--ease) .05s}
.pact-list button[aria-pressed="true"] i{background:var(--accent);border-color:var(--accent)}
.pact-list button[aria-pressed="true"] svg{stroke-dashoffset:0}
.pact-foot{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;font-size:13px;color:var(--tx3);border-top:1px solid var(--line);padding-top:12px}
.pact-seal{position:absolute;right:20px;top:78px;width:100px;height:100px;border-radius:50%;display:flex;align-items:center;justify-content:center;text-align:center;
  border:3px double var(--warm);color:var(--warm);font-family:var(--f-disp);font-style:italic;font-weight:600;font-size:19px;line-height:1.05;
  transform:rotate(-14deg) scale(2.2);opacity:0;pointer-events:none;background:color-mix(in srgb,var(--panel) 70%,transparent)}
.sealed .pact-seal{animation:sealIn .6s cubic-bezier(.2,1.3,.4,1) .15s forwards}
@keyframes sealIn{to{transform:rotate(-14deg) scale(1);opacity:.95}}

/* ─────────── Récapitulatif : plus de cartes dans les parcours longs ─────────── */
.rc-grid.many{grid-template-columns:repeat(5,minmax(0,190px))}

/* ─────────── Petits écrans ─────────── */
@media (max-width:1020px){
  .lvl-grid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rc-grid.many{grid-template-columns:repeat(4,minmax(0,1fr))}
}
@media (max-width:760px){
  .lvl-card{min-height:0}
  .lvl-cv{height:64px}
  .lvl-name{font-size:28px}
  .lvl-pitch{font-size:13.5px}
  .lvl-chip span{display:none}
  .pup-stage,.so-stage{height:40vh}
  .br-brain,.lg-cloud,.ex-plane{flex-basis:100%;height:38vh}
  .dt-gauge{flex-basis:100%}
  .tic-text{padding:18px 18px;line-height:1.7}
  .pact-in{padding:20px 18px 18px}
  .pact-seal{width:86px;height:86px;font-size:15px;top:auto;bottom:54px;right:14px}
  .rc-grid.many{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media (max-width:420px){
  .lvl-grid{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .pact{animation:none}
  .chain .lk,.ch-fig{transition:none}
}

/* ─────────── Impression du pacte ─────────── */
@media print{
  @page{margin:16mm}
  body{overflow:visible;background:#fff;color:#111}
  body::before,body::after,#aurora,#bg-canvas,#fx-canvas,#stage-prog,#lesson-inter,.topbar,.rail,#help,#view-home{display:none!important}
  #view-lesson{position:static;overflow:visible}
  .tableau{display:none!important}
  #r-pact.live{display:block!important;position:static;visibility:visible;opacity:1;animation:none;padding:0}
  #r-pact.live > :not(.pact){display:none!important}
  .pact{animation:none;background:#111;width:100%}
  .pact-in{background:#fff;color:#111}
  .pact-list button{color:#111}
  .pact-list i{border-color:#111}
  .pact-list button[aria-pressed="true"] i{background:#111}
}