/* ═══════════════════════════════════════════════════════════════════════
   Company OS Fable — design system v3 « Encre & Laiton » (finition studio)
   Sombre premium · motion design unifié · cérémonies de porte.
   Typo : Fraunces (display) + Outfit (UI), auto-hébergées (offline).
   ═══════════════════════════════════════════════════════════════════════ */

@font-face{font-family:"Fraunces";src:url("fonts/fraunces-600.woff2") format("woff2");font-weight:600;font-display:swap}
@font-face{font-family:"Fraunces";src:url("fonts/fraunces-800.woff2") format("woff2");font-weight:800;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/outfit-400.woff2") format("woff2");font-weight:400;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/outfit-500.woff2") format("woff2");font-weight:500;font-display:swap}
@font-face{font-family:"Outfit";src:url("fonts/outfit-700.woff2") format("woff2");font-weight:700;font-display:swap}

:root{
  --bg:#0f141c; --bg-soft:#131a24; --card:#161e2a; --card-2:#1b2432; --card-3:#212c3d;
  --line:rgba(148,163,184,.14); --line-strong:rgba(148,163,184,.28);
  --ink:#e9eef6; --ink-2:#c3cddb; --muted:#94a3b8;
  --brass:#e0b95f; --brass-2:#f0d08a; --brass-3:#b8933d; --brass-ink:#10151d;
  --brass-dim:rgba(224,185,95,.16); --brass-glow:rgba(224,185,95,.32);
  --ok:#3ddc84; --ok-dim:rgba(61,220,132,.14);
  --warn:#ffb454; --warn-dim:rgba(255,180,84,.14);
  --bad:#ff6b7a; --bad-dim:rgba(255,107,122,.14);
  --info:#6db3f2; --info-dim:rgba(109,179,242,.13);
  --c-n0:#a78bfa; --c-n1:#3fd6d2; --c-n2:#4ade80; --c-n3:#ff6b7a;
  --c-n4:#ff9f43; --c-n5:#ffd166; --c-n6:#c9a2ff;
  --r:16px; --r-sm:10px; --r-lg:22px;
  --shadow:0 10px 34px rgba(0,0,0,.38);
  --ease:cubic-bezier(.2,.8,.3,1); --spring:cubic-bezier(.34,1.4,.5,1);
  --t:180ms var(--ease);
  --font-ui:"Outfit",system-ui,-apple-system,"Segoe UI",sans-serif;
  --font-display:"Fraunces",Georgia,serif;
  color-scheme:dark;
}

*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;scrollbar-color:var(--card-3) var(--bg)}
::-webkit-scrollbar{width:11px;height:11px}
::-webkit-scrollbar-thumb{background:var(--card-3);border-radius:99px;border:3px solid var(--bg)}
::-webkit-scrollbar-track{background:transparent}
body{
  margin:0;font:16px/1.6 var(--font-ui);color:var(--ink);
  background:
    radial-gradient(1100px 520px at 85% -10%, rgba(224,185,95,.08), transparent 60%),
    radial-gradient(900px 620px at -10% 110%, rgba(109,179,242,.05), transparent 55%),
    var(--bg);
  min-height:100dvh;padding-bottom:2.5rem;
}
::selection{background:var(--brass-dim);color:var(--brass-2)}
a{color:var(--info);text-decoration:none}
a:hover{text-decoration:underline}
:focus-visible{outline:2px solid var(--brass);outline-offset:2px;border-radius:6px}

h1{font-family:var(--font-display);font-weight:800;font-size:1.75rem;line-height:1.22;margin:.5rem 0 1rem;letter-spacing:-.012em;text-wrap:balance}
h2{font-family:var(--font-display);font-weight:600;font-size:1.22rem;margin:1.2rem 0 .55rem}
.muted{color:var(--muted)} .small{font-size:.85rem}
.kicker{font-size:.72rem;font-weight:800;letter-spacing:.15em;text-transform:uppercase;color:var(--brass);margin-bottom:.3rem}

/* ── barre supérieure ─────────────────────────────────────────────── */
#topbar{
  position:sticky;top:0;z-index:20;display:flex;gap:1rem;align-items:center;flex-wrap:wrap;
  padding:.55rem 1rem;background:rgba(15,20,28,.82);backdrop-filter:blur(16px) saturate(1.3);
  border-bottom:1px solid var(--line);
}
#topbar .brand{display:inline-flex;align-items:center;gap:.55rem;font-family:var(--font-display);font-weight:800;font-size:1.1rem;color:var(--ink)}
#topbar .brand b{color:var(--brass)}
#topbar .brand:hover{text-decoration:none}
.logo-seal{width:30px;height:30px;flex:none;filter:drop-shadow(0 2px 6px rgba(224,185,95,.35))}
#topbar nav{display:flex;gap:.2rem;flex-wrap:wrap;margin-left:auto}
#topbar nav a{
  display:inline-flex;align-items:center;gap:.42rem;color:var(--ink-2);
  padding:.5rem .8rem;border-radius:99px;font-size:.9rem;font-weight:500;
  min-height:44px;transition:background var(--t),color var(--t),transform var(--t);
}
#topbar nav a svg{width:17px;height:17px;stroke:currentColor;flex:none}
#topbar nav a:hover{background:var(--card-2);color:var(--ink);text-decoration:none}
#topbar nav a:active{transform:scale(.95)}
#topbar nav a.on{background:var(--brass-dim);color:var(--brass-2)}

#app{max-width:960px;margin:0 auto;padding:1.2rem 1rem}
#foot{max-width:960px;margin:2rem auto 0;padding:0 1rem;color:var(--muted);font-size:.78rem;letter-spacing:.02em}

/* ── transitions de vue (chaque changement d'écran) ───────────────── */
@media (prefers-reduced-motion: no-preference){
  #app.view-in > *{animation:viewIn .32s var(--ease) both}
  #app.view-in > :nth-child(2){animation-delay:35ms}
  #app.view-in > :nth-child(3){animation-delay:70ms}
  #app.view-in > :nth-child(4){animation-delay:105ms}
  #app.view-in > :nth-child(5){animation-delay:140ms}
}
@keyframes viewIn{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

/* ── cartes ───────────────────────────────────────────────────────── */
.card{
  background:linear-gradient(180deg, rgba(255,255,255,.025), transparent 42%), var(--card);
  border:1px solid var(--line);border-radius:var(--r);
  padding:1.15rem 1.3rem;margin:.8rem 0;
}
.grid{display:grid;gap:.8rem}
@media(min-width:720px){.grid.c2{grid-template-columns:1fr 1fr}.grid.c3{grid-template-columns:1fr 1fr 1fr}}

/* ── boutons ──────────────────────────────────────────────────────── */
.btn{
  position:relative;display:inline-flex;align-items:center;justify-content:center;gap:.45rem;
  border:1px solid var(--line-strong);background:var(--card-2);color:var(--ink);
  padding:.6rem 1.1rem;border-radius:12px;font:500 .95rem var(--font-ui);
  cursor:pointer;min-height:44px;text-decoration:none;overflow:hidden;
  transition:transform 140ms var(--spring),background var(--t),border-color var(--t),box-shadow var(--t),filter var(--t);
  touch-action:manipulation;
}
.btn:hover{border-color:var(--brass);text-decoration:none;background:var(--card-3);transform:translateY(-1px)}
.btn:active{transform:scale(.96)}
.btn.primary{
  background:linear-gradient(180deg,var(--brass-2),var(--brass) 55%,var(--brass-3));
  border-color:transparent;color:var(--brass-ink);font-weight:700;letter-spacing:.01em;
  box-shadow:0 4px 20px var(--brass-glow), inset 0 1px 0 rgba(255,255,255,.35);
}
.btn.primary:hover{filter:brightness(1.07);transform:translateY(-1px)}
.btn.big{padding:.85rem 1.6rem;font-size:1.05rem;border-radius:14px}
.btn.danger{background:var(--bad-dim);border-color:rgba(255,107,122,.4);color:var(--bad)}
.btn.ghost{background:transparent;border-color:transparent;color:var(--ink-2)}
.btn.ghost:hover{border-color:var(--line-strong)}
.btn[disabled]{opacity:.4;cursor:not-allowed;transform:none}
.btnrow{display:flex;gap:.55rem;flex-wrap:wrap;margin:.7rem 0;align-items:center}

/* ── pastilles ────────────────────────────────────────────────────── */
.chip{
  display:inline-flex;align-items:center;gap:.3rem;padding:.18rem .6rem;border-radius:99px;
  font-size:.72rem;font-weight:700;letter-spacing:.05em;text-transform:uppercase;
  border:1px solid transparent;vertical-align:middle;white-space:nowrap;
}
.chip.afaire{background:var(--card-2);color:var(--muted);border-color:var(--line)}
.chip.encours{background:var(--warn-dim);color:var(--warn)}
.chip.fait{background:var(--ok-dim);color:var(--ok)}
.chip.sautee{background:transparent;color:var(--muted);border-color:var(--line);text-decoration:line-through}
.chip.verrou{background:var(--card-2);color:var(--muted);border-color:var(--line)}
.chip.prep{background:var(--warn-dim);color:var(--warn)}
.chip.preaudit{background:var(--info-dim);color:var(--info)}
.chip.validee{background:var(--ok-dim);color:var(--ok);border-color:rgba(61,220,132,.35)}
.chip.bloquant{background:var(--bad-dim);color:var(--bad)}

/* ── formulaires ──────────────────────────────────────────────────── */
input[type=text],input[type=number],input[type=date],select,textarea{
  width:100%;padding:.62rem .78rem;border:1px solid var(--line-strong);border-radius:var(--r-sm);
  font:inherit;background:var(--bg-soft);color:var(--ink);min-height:44px;
  transition:border-color var(--t),box-shadow var(--t);
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--brass);box-shadow:0 0 0 3px var(--brass-dim)}
textarea{min-height:9rem;resize:vertical;line-height:1.55}
textarea.big{min-height:16rem}
label{font-weight:600;font-size:.86rem;display:block;margin:.7rem 0 .3rem;color:var(--ink-2)}
input[type=file]{color:var(--muted)}
input[type=file]::file-selector-button{
  border:1px solid var(--line-strong);background:var(--card-2);color:var(--ink);
  padding:.5rem .9rem;border-radius:10px;margin-right:.8rem;cursor:pointer;font:500 .9rem var(--font-ui);
}
input[type=radio],input[type=checkbox]{accent-color:var(--brass);width:1.05rem;height:1.05rem}
fieldset{border:1px solid var(--line);border-radius:var(--r-sm);margin:.8rem 0;padding:.6rem 1rem}
legend{font-weight:700;font-size:.9rem;padding:0 .4rem;color:var(--ink-2)}

/* ═══ ASSISTANT D'ONBOARDING (4 actes) ════════════════════════════── */
.wizard{max-width:640px;margin:1.5rem auto}
.wizard .acte{min-height:1rem}
.wz-dots{display:flex;gap:.5rem;justify-content:center;margin:1.4rem 0}
.wz-dots i{width:8px;height:8px;border-radius:99px;background:var(--card-3);transition:all .3s var(--ease)}
.wz-dots i.on{width:26px;background:var(--brass)}
.wz-hero{text-align:center;padding:1.5rem 0 .5rem}
.wz-hero .logo-seal{width:64px;height:64px;margin-bottom:1rem}
.wz-hero h1{font-size:2.1rem;margin:.4rem 0}
.wz-hero p{color:var(--ink-2);max-width:44ch;margin:.5rem auto}
.choice-grid{display:grid;gap:.7rem;margin:.8rem 0}
@media(min-width:560px){.choice-grid{grid-template-columns:1fr 1fr}}
.choice{
  display:flex;gap:.85rem;align-items:flex-start;text-align:left;cursor:pointer;
  background:var(--card);border:1.5px solid var(--line);border-radius:var(--r);
  padding:1rem 1.05rem;transition:transform 140ms var(--spring),border-color var(--t),background var(--t),box-shadow var(--t);
}
.choice:hover{transform:translateY(-2px);border-color:var(--line-strong)}
.choice .ico{font-size:1.5rem;line-height:1;flex:none;margin-top:.1rem}
.choice b{display:block;font-size:.98rem}
.choice span{display:block;font-size:.82rem;color:var(--muted);margin-top:.15rem}
.choice.sel{border-color:var(--brass);background:linear-gradient(135deg, var(--brass-dim), transparent 60%), var(--card);box-shadow:0 0 0 1px var(--brass-glow)}
.choice.sel .ico{transform:scale(1.12)}

/* ═══ LE PLATEAU ══════════════════════════════════════════════════── */
.board{max-width:760px;margin:0 auto;position:relative}
.lvl{
  position:relative;display:flex;gap:1.1rem;align-items:center;cursor:pointer;
  transition:transform 160ms var(--spring),border-color var(--t),box-shadow var(--t);
}
.lvl:hover{transform:translateY(-2px) scale(1.005);border-color:var(--line-strong);box-shadow:var(--shadow), 0 0 24px -12px var(--lvl-c, var(--brass))}
.lvl:active{transform:scale(.99)}
.lvl:not(:last-of-type)::after{
  content:"";position:absolute;left:calc(1.3rem + 27px);top:calc(50% + 34px);
  width:2px;height:calc(100% - 40px);border-left:2px dashed var(--line-strong);
}
.lvl.done::after{border-left:2px solid rgba(61,220,132,.4)}
.lvl .medal{flex:none;position:relative;width:56px;height:56px}
.lvl .medal svg{width:56px;height:56px;transform:rotate(-90deg)}
.lvl .medal circle.prog{transition:stroke-dashoffset .9s var(--ease)}
.lvl .medal .num{
  position:absolute;inset:0;display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.15rem;
}
.lvl .body{flex:1;min-width:0}
.lvl h3{margin:0 0 .15rem;font-family:var(--font-display);font-weight:600;font-size:1.08rem}
.lvl .q{font-size:.86rem;color:var(--muted);margin:0 0 .3rem}
.lvl .meta{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;font-size:.8rem;color:var(--muted)}
.lvl.current{border-color:rgba(224,185,95,.55);box-shadow:0 0 0 1px var(--brass-glow), 0 10px 34px rgba(224,185,95,.09)}
.lvl.current .tag-current{
  position:absolute;top:-9px;right:14px;background:linear-gradient(180deg,var(--brass-2),var(--brass));
  color:var(--brass-ink);font-size:.68rem;font-weight:800;letter-spacing:.09em;text-transform:uppercase;
  padding:.14rem .6rem;border-radius:99px;box-shadow:0 3px 12px var(--brass-glow);
}
.lvl.done{opacity:.78}
.lvl.locked .body{opacity:.6}
.seal{
  flex:none;width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:1rem;border:1.5px solid var(--line-strong);background:var(--bg-soft);color:var(--muted);
}
.seal.ok{background:var(--ok-dim);border-color:rgba(61,220,132,.5);color:var(--ok)}
.seal.prep{background:var(--warn-dim);border-color:rgba(255,180,84,.5);color:var(--warn)}

/* héro « prochaine action » */
.next-action{
  border:1px solid rgba(224,185,95,.4);
  background:linear-gradient(135deg, rgba(224,185,95,.13), rgba(224,185,95,.03) 55%), var(--card);
}
.next-action .action-line{font-family:var(--font-display);font-weight:600;font-size:1.18rem;line-height:1.4}
.victory{
  text-align:center;border-color:rgba(61,220,132,.4);
  background:linear-gradient(180deg, rgba(61,220,132,.1), transparent 60%), var(--card);
}

/* barre de progression */
.bar{height:6px;background:var(--bg-soft);border-radius:99px;overflow:hidden;margin:.45rem 0 .3rem}
.bar i{display:block;height:100%;background:linear-gradient(90deg,var(--brass),var(--brass-2));border-radius:99px;transition:width .5s var(--ease)}

/* ═══ NIVEAU : timeline d'étapes ══════════════════════════════════── */
.steps{position:relative;margin:.4rem 0}
.step{
  position:relative;display:flex;gap:.95rem;align-items:flex-start;
  padding:.75rem 0 .75rem 0;
}
.step:not(:last-child)::after{
  content:"";position:absolute;left:17px;top:44px;bottom:-6px;width:2px;
  background:var(--line);
}
.step.fait:not(:last-child)::after{background:rgba(61,220,132,.35)}
.step .dot{
  flex:none;width:36px;height:36px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.82rem;border:1.5px solid var(--line-strong);
  background:var(--bg-soft);color:var(--muted);z-index:1;
  font-variant-numeric:tabular-nums;
}
.step.fait .dot{background:var(--ok-dim);border-color:rgba(61,220,132,.5);color:var(--ok)}
.step.encours .dot{background:var(--warn-dim);border-color:rgba(255,180,84,.5);color:var(--warn)}
.step.sautee .dot{opacity:.45}
.step .stbody{flex:1;min-width:0;padding-top:.25rem}
.step .stbody a{color:var(--ink);font-weight:500}
.step .stbody a:hover{color:var(--brass-2);text-decoration:none}
.step.sautee .stbody{opacity:.55}
.step .stmeta{font-size:.8rem;color:var(--muted);margin-top:.1rem}

/* ═══ PORTE : cérémonie ═══════════════════════════════════════════── */
.manifest-item{
  display:flex;gap:.8rem;align-items:flex-start;border:1px solid var(--line);
  border-radius:var(--r-sm);padding:.75rem .9rem;margin:.5rem 0;background:var(--bg-soft);
  transition:border-color var(--t);
}
.manifest-item.ok{border-color:rgba(61,220,132,.4);background:linear-gradient(90deg,var(--ok-dim),transparent 45%),var(--bg-soft)}
.manifest-item .mi-ico{flex:none;font-weight:800;width:26px;text-align:center;padding-top:.05rem}
.manifest-item .mi-body{flex:1;min-width:0}
.manifest-item .mi-fmt{font-size:.8rem;color:var(--muted);margin-top:.1rem}
.manifest-item .mi-count{flex:none;font-size:.78rem;color:var(--muted);font-variant-numeric:tabular-nums}

/* contrôle segmenté 0/1/2 */
.seg{display:inline-flex;border:1px solid var(--line-strong);border-radius:10px;overflow:hidden}
.seg button{
  border:none;background:transparent;color:var(--muted);font:600 .95rem var(--font-ui);
  min-width:52px;min-height:44px;cursor:pointer;transition:background var(--t),color var(--t);
  border-left:1px solid var(--line);font-variant-numeric:tabular-nums;
}
.seg button:first-child{border-left:none}
.seg button:hover{background:var(--card-2);color:var(--ink)}
.seg button.sel{background:var(--brass);color:var(--brass-ink)}
.seg button.sel.v0{background:var(--bad);color:#fff}
.crit{border-top:1px dashed var(--line);padding:.7rem 0;display:flex;gap:1rem;align-items:center;justify-content:space-between;flex-wrap:wrap}
.crit .ct{flex:1;min-width:220px}
.gatehead{display:flex;justify-content:space-between;align-items:center;gap:.6rem;flex-wrap:wrap}
.filerow{display:flex;gap:.6rem;align-items:center;flex-wrap:wrap;border-top:1px dashed var(--line);padding:.55rem 0;font-size:.92rem}
.filerow:first-of-type{border-top:none}
.filerow select{width:auto;max-width:15rem;min-height:38px;padding:.35rem .5rem}
.item-ok{color:var(--ok);font-weight:700}
.item-ko{color:var(--muted);font-weight:700}
.item-warn{color:var(--warn);font-weight:700}

/* cérémonie de scellement */
.ceremony{
  position:fixed;inset:0;z-index:100;display:flex;flex-direction:column;align-items:center;justify-content:center;
  background:rgba(10,14,20,.9);backdrop-filter:blur(8px);
  animation:cerFade .3s var(--ease) both;
}
@keyframes cerFade{from{opacity:0}to{opacity:1}}
.ceremony .cseal{
  width:150px;height:150px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  background:radial-gradient(circle at 35% 30%, var(--brass-2), var(--brass) 55%, var(--brass-3));
  color:var(--brass-ink);font-size:3.4rem;font-weight:800;
  box-shadow:0 0 0 8px rgba(224,185,95,.15), 0 0 90px 10px var(--brass-glow);
}
@media (prefers-reduced-motion: no-preference){
  .ceremony .cseal{animation:stamp .55s var(--spring) both}
}
@keyframes stamp{
  0%{transform:scale(2.4) rotate(-14deg);opacity:0}
  60%{transform:scale(.94) rotate(2deg);opacity:1}
  100%{transform:scale(1) rotate(0)}
}
.ceremony h2{font-family:var(--font-display);font-weight:800;font-size:1.7rem;color:var(--brass-2);margin:1.3rem 0 .2rem;letter-spacing:.02em}
.ceremony p{color:var(--ink-2)}
.ceremony .spark{
  position:absolute;width:7px;height:7px;border-radius:2px;background:var(--brass);
  animation:spark 1s var(--ease) both;pointer-events:none;
}
@keyframes spark{
  0%{transform:translate(0,0) scale(1) rotate(0);opacity:1}
  100%{transform:translate(var(--dx), var(--dy)) scale(.2) rotate(220deg);opacity:0}
}

/* ── rendu markdown ───────────────────────────────────────────────── */
.md{line-height:1.65}
.md h1{font-size:1.4rem}.md h2{font-size:1.15rem}.md h3{font-size:1rem;font-family:var(--font-ui);font-weight:700;color:var(--ink-2)}
.md p{margin:.6rem 0}
.md table{border-collapse:collapse;width:100%;margin:.8rem 0;font-size:.88rem;display:block;overflow-x:auto;border-radius:var(--r-sm)}
.md th,.md td{border:1px solid var(--line);padding:.5rem .65rem;text-align:left;vertical-align:top}
.md th{background:var(--card-2);color:var(--ink-2);font-weight:600;white-space:nowrap}
.md tr:nth-child(even) td{background:rgba(255,255,255,.015)}
.md blockquote{margin:.8rem 0;padding:.6rem 1rem;border-left:3px solid var(--line-strong);background:var(--bg-soft);border-radius:0 var(--r-sm) var(--r-sm) 0;color:var(--ink-2)}
.md .callout{border-radius:var(--r-sm);padding:.7rem 1rem;margin:.8rem 0;border:1px solid var(--line);border-left-width:4px;background:var(--bg-soft)}
.md .callout .co-title{font-weight:700;margin-bottom:.3rem}
.md .co-question{border-left-color:var(--info);background:var(--info-dim)}
.md .co-warning,.md .co-danger{border-left-color:var(--bad);background:var(--bad-dim)}
.md .co-tip,.md .co-note,.md .co-check{border-left-color:var(--ok);background:var(--ok-dim)}
.md code{background:var(--card-2);border:1px solid var(--line);border-radius:6px;padding:.08rem .35rem;font-size:.85em;color:var(--brass-2)}
.md pre{background:#0a0e14;border:1px solid var(--line);padding:.9rem;border-radius:var(--r-sm);overflow-x:auto;font-size:.85rem;color:var(--ink-2)}
.md pre code{background:none;border:none;color:inherit;padding:0}
.md img{max-width:100%;border-radius:var(--r-sm)}
.md hr{border:none;border-top:1px solid var(--line);margin:1.2rem 0}
.md li{margin:.2rem 0}
.md a{color:var(--info)}

/* ── bannières & toasts ───────────────────────────────────────────── */
.banner{padding:.7rem 1rem;border-radius:var(--r-sm);margin:.7rem 0;font-size:.92rem;border:1px solid transparent}
.banner.ok{background:var(--ok-dim);color:var(--ok);border-color:rgba(61,220,132,.3)}
.banner.warn{background:var(--warn-dim);color:var(--warn);border-color:rgba(255,180,84,.3)}
.banner.bad{background:var(--bad-dim);color:var(--bad);border-color:rgba(255,107,122,.3)}
.banner.info{background:var(--info-dim);color:var(--info);border-color:rgba(109,179,242,.3)}

#toast{
  position:fixed;bottom:1.3rem;left:50%;transform:translateX(-50%) translateY(20px);
  background:var(--card-3);border:1px solid var(--line-strong);color:var(--ink);
  padding:.6rem 1.1rem;border-radius:99px;font-size:.9rem;font-weight:500;
  box-shadow:var(--shadow);z-index:90;opacity:0;pointer-events:none;
  transition:opacity .25s var(--ease),transform .25s var(--ease);
}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
#toast .tk{color:var(--ok);font-weight:800;margin-right:.35rem}

/* ── KPI ──────────────────────────────────────────────────────────── */
.kpi{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:.7rem}
.kpi .card{margin:0;text-align:center;padding:1rem .6rem}
.kpi .v{font-family:var(--font-display);font-size:1.7rem;font-weight:800;color:var(--brass-2);font-variant-numeric:tabular-nums}
.kpi .l{font-size:.75rem;color:var(--muted);letter-spacing:.05em;text-transform:uppercase;margin-top:.15rem}

/* ── chat Coach ───────────────────────────────────────────────────── */
.msg{max-width:92%;margin:.6rem 0;padding:.85rem 1.05rem;border-radius:var(--r);border:1px solid var(--line)}
.msg.user{margin-left:auto;background:var(--card-2);border-top-right-radius:4px}
.msg.coach{margin-right:auto;background:var(--card);border-left:3px solid var(--brass);border-top-left-radius:4px}
@media (prefers-reduced-motion: no-preference){
  .msg.reveal{animation:viewIn .35s var(--ease) both}
}
.msg .who{font-size:.72rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);margin-bottom:.3rem}
.msg.coach .who{color:var(--brass)}
.typing{display:inline-flex;gap:.25rem;align-items:center;padding:.4rem 0}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--brass);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}}

/* ── divers ───────────────────────────────────────────────────────── */
.saved-pulse{display:inline-flex;align-items:center;gap:.3rem;color:var(--ok);font-size:.85rem}
.saved-pulse::before{content:"";width:7px;height:7px;border-radius:99px;background:var(--ok);animation:pulse 1s var(--ease)}
@keyframes pulse{0%{box-shadow:0 0 0 0 rgba(61,220,132,.5)}100%{box-shadow:0 0 0 9px transparent}}

@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{animation:none !important;transition:none !important}
}
@media(max-width:640px){
  h1{font-size:1.42rem}
  #topbar{padding:.45rem .6rem}
  #topbar nav a span{display:none}
  #topbar nav a{padding:.55rem .6rem}
  .lvl{gap:.8rem}
  .lvl:not(:last-of-type)::after{left:calc(1.3rem + 23px)}
  .lvl .medal,.lvl .medal svg{width:48px;height:48px}
  .card{padding:1rem}
  .wz-hero h1{font-size:1.65rem}
  .crit{flex-direction:column;align-items:flex-start;gap:.5rem}
}

/* ═══════════════════════════════════════════════════════════════════════
   v4 « L'ÉVEIL » — couche épique (Solo Leveling System × parcours Duolingo)
   Le laiton reste la matière des SCEAUX ; l'arcane bleu-violet est l'énergie.
   ═══════════════════════════════════════════════════════════════════════ */
:root{
  --void:#070a12; --bg:#070a12; --bg-soft:#0c1120; --card:#0e1424; --card-2:#141b30; --card-3:#1a2340;
  --arc:#7cb7ff; --arc-2:#a5ccff; --arc-dim:rgba(124,183,255,.14); --arc-glow:rgba(124,183,255,.35);
  --vio:#8b7cff; --vio-dim:rgba(139,124,255,.14);
  --line:rgba(148,163,184,.16); --line-strong:rgba(148,163,184,.30);
  --info:var(--arc);
}
body{
  background:
    radial-gradient(1200px 600px at 80% -12%, rgba(124,183,255,.10), transparent 60%),
    radial-gradient(1000px 700px at -12% 108%, rgba(139,124,255,.09), transparent 55%),
    radial-gradient(700px 400px at 50% 120%, rgba(224,185,95,.05), transparent 60%),
    var(--void);
}
/* trame de fond — la grille du Système */
body::before{
  content:"";position:fixed;inset:0;pointer-events:none;z-index:0;opacity:.5;
  background-image:
    linear-gradient(rgba(124,183,255,.03) 1px, transparent 1px),
    linear-gradient(90deg, rgba(124,183,255,.03) 1px, transparent 1px);
  background-size:44px 44px;
  -webkit-mask-image:radial-gradient(900px 640px at 50% 12%, black, transparent 75%);
  mask-image:radial-gradient(900px 640px at 50% 12%, black, transparent 75%);
}
#app,#topbar,#foot{position:relative;z-index:1}

/* panneaux « système » : coins soulignés façon fenêtre d'éveil */
.sys{position:relative}
.sys::before,.sys::after{
  content:"";position:absolute;width:22px;height:22px;pointer-events:none;
  border:2px solid var(--arc);opacity:.75;
}
.sys::before{top:-2px;left:-2px;border-right:none;border-bottom:none;border-top-left-radius:var(--r)}
.sys::after{bottom:-2px;right:-2px;border-left:none;border-top:none;border-bottom-right-radius:var(--r)}

/* ── HUD de progression (rang · XP · série) ─────────────────────── */
.hud{
  display:flex;gap:1.2rem;align-items:center;flex-wrap:wrap;
  border:1px solid rgba(124,183,255,.35);
  background:linear-gradient(135deg, rgba(124,183,255,.10), rgba(139,124,255,.05) 55%), var(--card);
}
.rank{flex:none;position:relative;width:82px;height:82px;display:flex;align-items:center;justify-content:center}
.rank .aura{position:absolute;inset:0;border-radius:50%;
  background:conic-gradient(from 0deg, rgba(124,183,255,0), rgba(124,183,255,.55), rgba(139,124,255,0) 60%);
  filter:blur(6px);
}
@media (prefers-reduced-motion: no-preference){
  .rank .aura{animation:rkspin 6s linear infinite}
}
@keyframes rkspin{to{transform:rotate(360deg)}}
.rank .ring{position:absolute;inset:5px;border-radius:50%;border:2px solid rgba(124,183,255,.5);background:var(--void)}
.rank .lettre{
  position:relative;font-family:var(--font-display);font-weight:800;font-size:2.3rem;
  color:var(--arc-2);text-shadow:0 0 18px var(--arc-glow), 0 0 40px var(--arc-glow);
}
.hud .hud-body{flex:1;min-width:220px}
.hud .titre-rang{font-family:var(--font-display);font-weight:600;font-size:1.15rem;margin-bottom:.15rem}
.hud .titre-rang b{color:var(--arc-2)}
.xpbar{height:10px;background:rgba(124,183,255,.10);border:1px solid rgba(124,183,255,.25);border-radius:99px;overflow:hidden;margin:.4rem 0 .25rem}
.xpbar i{display:block;height:100%;border-radius:99px;position:relative;
  background:linear-gradient(90deg, var(--vio), var(--arc) 55%, var(--arc-2));
  box-shadow:0 0 14px var(--arc-glow);transition:width .9s var(--ease)}
@media (prefers-reduced-motion: no-preference){
  .xpbar i::after{content:"";position:absolute;inset:0;
    background:linear-gradient(110deg, transparent 30%, rgba(255,255,255,.35) 50%, transparent 70%);
    background-size:220% 100%;animation:shine 2.6s var(--ease) infinite}
}
@keyframes shine{from{background-position:200% 0}to{background-position:-60% 0}}
.hud .xpmeta{display:flex;justify-content:space-between;font-size:.8rem;color:var(--muted);font-variant-numeric:tabular-nums}
.streak{flex:none;text-align:center;min-width:70px}
.streak .flamme{font-size:1.5rem;filter:drop-shadow(0 0 10px rgba(255,159,67,.6))}
.streak .n{font-family:var(--font-display);font-weight:800;font-size:1.25rem;color:var(--warn)}
.streak .l{font-size:.68rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted)}

/* ── quête prioritaire ──────────────────────────────────────────── */
.next-action{
  border:1px solid rgba(124,183,255,.45);
  background:linear-gradient(135deg, rgba(124,183,255,.13), rgba(139,124,255,.05) 60%), var(--card);
  box-shadow:0 0 34px -14px var(--arc-glow), inset 0 1px 0 rgba(124,183,255,.15);
}
.next-action .kicker{color:var(--arc-2);display:flex;align-items:center;gap:.45rem}
.next-action .kicker::before{content:"";width:7px;height:7px;background:var(--arc);border-radius:1px;
  transform:rotate(45deg);box-shadow:0 0 10px var(--arc-glow)}
@media (prefers-reduced-motion: no-preference){
  .next-action{animation:questPulse 3.2s var(--ease) infinite}
}
@keyframes questPulse{
  0%,100%{box-shadow:0 0 34px -14px var(--arc-glow), inset 0 1px 0 rgba(124,183,255,.15)}
  50%{box-shadow:0 0 48px -10px var(--arc-glow), inset 0 1px 0 rgba(124,183,255,.25)}
}

/* ── plateau : énergie des nœuds ────────────────────────────────── */
.lvl.current{border-color:rgba(124,183,255,.55);
  box-shadow:0 0 0 1px rgba(124,183,255,.35), 0 10px 40px -6px var(--arc-glow)}
.lvl.current .tag-current{background:linear-gradient(90deg,var(--vio),var(--arc));color:#061020;
  box-shadow:0 3px 14px var(--arc-glow)}
.lvl .medal circle.prog{filter:drop-shadow(0 0 5px currentColor)}
.mote{position:absolute;width:4px;height:4px;border-radius:50%;background:var(--arc);
  opacity:.35;pointer-events:none;filter:blur(.5px);box-shadow:0 0 8px var(--arc-glow)}
@media (prefers-reduced-motion: no-preference){
  .mote{animation:mote var(--mote-d,9s) linear infinite}
}
@keyframes mote{
  0%{transform:translateY(24px);opacity:0}
  12%{opacity:.4} 88%{opacity:.35}
  100%{transform:translateY(-360px);opacity:0}
}

/* ── boutons : balayage d'énergie ───────────────────────────────── */
.btn.primary{
  background:linear-gradient(180deg,var(--arc-2),var(--arc) 55%,#4d8fe0);
  color:#061020;box-shadow:0 4px 22px var(--arc-glow), inset 0 1px 0 rgba(255,255,255,.4);
}
.btn.primary.brass{background:linear-gradient(180deg,var(--brass-2),var(--brass) 55%,var(--brass-3));
  color:var(--brass-ink);box-shadow:0 4px 20px var(--brass-glow), inset 0 1px 0 rgba(255,255,255,.35)}
@media (prefers-reduced-motion: no-preference){
  .btn.primary::after{content:"";position:absolute;inset:0;border-radius:inherit;
    background:linear-gradient(110deg, transparent 35%, rgba(255,255,255,.45) 50%, transparent 65%);
    background-size:250% 100%;background-position:200% 0}
  .btn.primary:hover::after{animation:sweep .7s var(--ease)}
}
@keyframes sweep{from{background-position:200% 0}to{background-position:-80% 0}}

/* ── cérémonies : scellement (laiton) et RANG (arcane) ──────────── */
.ceremony{background:rgba(4,7,14,.93)}
.ceremony .onde{position:absolute;left:50%;top:42%;width:40px;height:40px;border-radius:50%;
  transform:translate(-50%,-50%);border:2px solid var(--arc);opacity:0;pointer-events:none}
@media (prefers-reduced-motion: no-preference){
  .ceremony .onde{animation:onde 1.1s var(--ease) .15s both}
  .ceremony .onde.o2{animation-delay:.35s;border-color:var(--vio)}
}
@keyframes onde{0%{opacity:.8;width:40px;height:40px}100%{opacity:0;width:560px;height:560px}}
.ceremony .gain{font-family:var(--font-ui);font-weight:700;color:var(--arc-2);letter-spacing:.06em;
  margin-top:.4rem;text-shadow:0 0 14px var(--arc-glow)}
.ceremony.rangup .cseal{
  background:radial-gradient(circle at 35% 30%, var(--arc-2), var(--arc) 55%, #3b6fc4);
  color:#061020;box-shadow:0 0 0 8px rgba(124,183,255,.14), 0 0 110px 14px var(--arc-glow);
}
.ceremony.rangup h2{color:var(--arc-2)}

/* HUD compacte mobile */
@media(max-width:640px){
  .hud{gap:.8rem}
  .rank{width:64px;height:64px}
  .rank .lettre{font-size:1.8rem}
}

/* ═══ v4.1 — corrections d'audit (4 lentilles) ═══════════════════════ */

/* rite d'ouverture : le sceau se trace (remplace « Chargement… ») */
#splash{position:fixed;inset:0;z-index:200;display:flex;flex-direction:column;gap:1rem;
  align-items:center;justify-content:center;background:var(--void);transition:opacity .45s var(--ease)}
#splash .logo-seal{width:88px;height:88px}
@media (prefers-reduced-motion: no-preference){
  #splash .logo-seal circle,#splash .logo-seal path{stroke-dasharray:130;stroke-dashoffset:130;
    animation:trace 1s var(--ease) forwards}
  #splash .logo-seal circle:nth-child(2){animation-delay:.15s}
  #splash .logo-seal path{animation-delay:.35s}
  #splash .splash-name{opacity:0;animation:viewIn .5s .65s var(--ease) forwards}
}
@keyframes trace{to{stroke-dashoffset:0}}
#splash .splash-name{font-family:var(--font-display);font-weight:800;font-size:1.35rem}
#splash .splash-name b{color:var(--brass)}

/* icônes trait maison (même langage que le logo) */
.ic{width:1.05em;height:1.05em;vertical-align:-.16em;flex:none;stroke:currentColor;fill:none;
  stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;display:inline-block}
h1 .ic,h2 .ic{color:var(--brass)}
.flame-svg{width:26px;height:30px;filter:drop-shadow(0 0 9px rgba(255,159,67,.55))}
.streak.froide .flame-svg{filter:grayscale(1) opacity(.45)}
.streak.froide .n{color:var(--muted)}

/* CONTRASTE : proposition du Coach (était #f8fafc → 1.1:1) */
.proposal-pre{white-space:pre-wrap;background:var(--bg-soft);border:1px solid rgba(224,185,95,.35);
  color:var(--ink-2);font-size:.88rem;padding:.7rem .9rem;border-radius:var(--r-sm);margin:.5rem 0}
/* CONTRASTE : score 0 sélectionné (était blanc/rouge 2.75:1) */
.seg button.sel.v0{background:var(--bad);color:#210408;font-weight:800}

/* poste de travail formulaire */
.formhead{border-left:6px solid var(--lvl-c, var(--brass))}
.formhead .stepnav{display:flex;gap:.6rem;justify-content:space-between;margin-top:.5rem;font-size:.85rem}
.sealed-pulse{animation:sealedP .9s var(--ease)}
@keyframes sealedP{0%{box-shadow:0 0 0 0 var(--brass-glow)}70%{box-shadow:0 0 0 18px transparent}100%{box-shadow:0 0 0 0 transparent}}
.xp-float{position:fixed;z-index:95;font-family:var(--font-display);font-weight:800;color:var(--brass-2);
  text-shadow:0 0 14px var(--brass-glow);pointer-events:none;font-size:1.2rem}
@media (prefers-reduced-motion: no-preference){.xp-float{animation:xpfloat 1.2s var(--ease) forwards}}
@keyframes xpfloat{0%{opacity:0;transform:translateY(6px)}15%{opacity:1}100%{opacity:0;transform:translateY(-46px)}}

/* barre d'état du verrou (vue Porte) */
.gate-status{display:grid;gap:.35rem;grid-template-columns:1fr 1fr;margin:.6rem 0 0}
.gate-status .cond{display:flex;gap:.5rem;align-items:center;font-size:.86rem;color:var(--muted)}
.gate-status .cond.ok{color:var(--ok)}
.gate-status .cond i{font-style:normal;width:20px;height:20px;border-radius:50%;flex:none;
  display:flex;align-items:center;justify-content:center;font-size:.7rem;font-weight:800;
  border:1.5px solid currentColor}
@media(max-width:560px){.gate-status{grid-template-columns:1fr}}

/* déverrouillage du niveau au retour de cérémonie */
@media (prefers-reduced-motion: no-preference){
  .lvl.unlocked{animation:unlock 1.6s var(--ease) .5s}
}
@keyframes unlock{
  0%{box-shadow:0 0 0 0 rgba(124,183,255,0)}
  25%{box-shadow:0 0 0 3px rgba(124,183,255,.65), 0 0 60px -4px var(--arc-glow)}
  100%{box-shadow:0 0 0 0 rgba(124,183,255,0)}
}

/* cérémonies : sortie en dissolution + bouton de reprise */
.ceremony{transition:opacity .4s var(--ease)}
.ceremony.out{opacity:0}
.ceremony.out .cseal{transform:translateY(-14px) scale(.96);transition:transform .4s var(--ease)}
.ceremony .btn-cer{margin-top:1.3rem}

/* motion : questPulse et shine compositables */
.next-action{animation:none}
.next-action::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;
  box-shadow:0 0 52px -8px var(--arc-glow);opacity:.35}
@media (prefers-reduced-motion: no-preference){
  .next-action::after{animation:questGlow 3.2s var(--ease) infinite}
}
@keyframes questGlow{0%,100%{opacity:.25}50%{opacity:.8}}
.xpbar i::after{background:linear-gradient(110deg, transparent 20%, rgba(255,255,255,.4) 50%, transparent 80%);
  background-size:100% 100%;width:55%;animation:none;transform:translateX(-140%)}
@media (prefers-reduced-motion: no-preference){
  .xpbar i::after{animation:shine2 2.8s var(--ease) infinite}
}
@keyframes shine2{from{transform:translateX(-140%)}55%,100%{transform:translateX(260%)}}
.mote{filter:none;opacity:.3}

/* récolte du jour + sommet */
.recolte{display:flex;gap:.5rem;align-items:center;font-size:.85rem;color:var(--ok);margin-top:.45rem}
.lvl.sommet{cursor:default;border-color:rgba(224,185,95,.4);
  background:linear-gradient(135deg, rgba(224,185,95,.10), transparent 60%), var(--card)}
.lvl.sommet:hover{transform:none;box-shadow:none}
.lvl.sommet .medal .num{font-size:1.3rem}

/* zone preuves : cibles tactiles */
.filerow select{min-height:44px}

/* ═══ v4.2 — audits DA / UX / gamification ═══════════════════════════ */

/* mini-HUD : la progression te suit partout (rang · XP · flamme) */
#hud-mini{display:flex;align-items:center;gap:.55rem;margin-left:.4rem}
#hud-mini:empty{display:none}
.hm-rang{font-family:var(--font-display);font-weight:800;font-size:1.02rem;color:var(--arc);
  text-shadow:0 0 10px var(--arc-glow);min-width:1em;text-align:center}
.hm-xp{width:52px;height:5px;border-radius:99px;background:var(--bg-soft);overflow:hidden;flex:none}
.hm-xp i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,var(--arc),var(--arc-2));transition:width .6s var(--ease)}
.hm-st{display:flex;align-items:center;gap:.15rem;font-size:.82rem;font-weight:700;color:#ff9f43}
.hm-st .ic{width:.95em;height:1.1em}
.hm-st.froide{color:var(--muted)}
@media(max-width:640px){#hud-mini{display:none}}

/* allumage de la flamme (première action du jour) */
@media (prefers-reduced-motion: no-preference){
  .streak.ignite{animation:ignite .9s var(--ease)}
}
@keyframes ignite{
  0%{transform:scale(1)}
  30%{transform:scale(1.18);filter:drop-shadow(0 0 18px rgba(255,159,67,.8))}
  100%{transform:scale(1)}
}

/* jalon de série : même rite que la montée en rang, en orange flamme */
.ceremony.jalon .cseal{color:#ff9f43;border-color:rgba(255,159,67,.55);
  text-shadow:0 0 22px rgba(255,159,67,.6)}

/* la ligne d'énergie coule vers le niveau courant */
.lvl.feed{position:relative}
@media (prefers-reduced-motion: no-preference){
  .lvl.feed::after{border-left:0 !important;width:2px;
    background:repeating-linear-gradient(180deg,var(--arc) 0 6px,transparent 6px 14px);
    box-shadow:0 0 7px var(--arc-glow);animation:flowline 1.1s linear infinite}
}
@keyframes flowline{to{background-position:0 14px}}

/* un trophée acquis reste plein : on n'éteint que le texte, jamais la médaille */
.lvl.done{opacity:1}
.lvl.done .body{opacity:.72}

/* revue du dirigeant (quête secondaire hebdo, discrète) */
.revue-due{display:flex;align-items:center;gap:.8rem;justify-content:space-between;
  padding:.7rem 1rem;margin-top:.6rem;border-color:rgba(224,185,95,.28)}
.revue-due .rd-body{display:flex;align-items:center;gap:.55rem;font-size:.9rem;color:var(--ink-2)}
.revue-due .ic{color:var(--brass);width:1.25em;height:1.25em;flex:none}

/* icônes trait dans les boutons et sceaux */
.btn .ic{margin-right:.1rem}
.seal .ic{width:.95em;height:.95em}
.lvl.sommet .medal .num .ic{width:1.3em;height:1.3em}
.card > h2:first-child{margin-top:0}

/* fond inerte pendant un rite */
#app[inert],#topbar[inert]{pointer-events:none;filter:saturate(.7) brightness(.85)}

/* ═══ v4.3 — vrais champs de formulaire + preuves reliées ═══════════ */

.champ{margin:1.05rem 0;padding:.85rem .95rem;border:1px solid var(--line);
  border-radius:var(--r-sm);background:rgba(255,255,255,.015)}
.champ:focus-within{border-color:var(--lvl-c, var(--brass));
  box-shadow:0 0 0 1px var(--lvl-c, var(--brass)), 0 0 22px -12px var(--lvl-c, var(--brass))}
.ch-label{display:block;font-family:var(--font-display);font-weight:600;
  font-size:1.02rem;color:var(--ink);margin:0 0 .2rem}
.ch-aide{font-size:.84rem;color:var(--muted);margin:.1rem 0 .55rem;line-height:1.5}
.ch-aide.intro{margin:.2rem 0 .9rem;padding:.5rem .7rem;border-left:3px solid var(--line-strong)}
.ch-extra{font-size:.84rem;margin:.3rem 0 .55rem;opacity:.85}
.ch-extra table{font-size:.8rem}
.champ textarea{margin:0;min-height:0}
.souschamp{display:grid;grid-template-columns:150px 1fr;gap:.6rem;align-items:start;margin:.45rem 0}
.souschamp label{font-size:.85rem;font-weight:500;color:var(--ink-2);padding-top:.55rem;margin:0}
.souschamp textarea{margin:0}
@media(max-width:560px){.souschamp{grid-template-columns:1fr;gap:.15rem}
  .souschamp label{padding-top:0}}

.notes-libres{margin:.9rem 0 .3rem}
.notes-libres summary{cursor:pointer;font-size:.88rem;color:var(--muted);
  padding:.35rem 0;user-select:none}
.notes-libres summary:hover{color:var(--ink-2)}
.notes-libres[open] summary{color:var(--ink-2)}

.footnav{margin-top:.9rem}

/* joindre un formulaire rempli comme preuve (item du manifest) */
.mi-body .joindre{margin-top:.4rem;font-size:.82rem;max-width:340px;min-height:38px;
  background:var(--bg-soft);border:1px dashed var(--line-strong);color:var(--muted)}
.mi-body .joindre:focus{border-style:solid}

/* ═══ v4.4 — le rite de franchissement (la porte S'OUVRE) ═══════════ */

.rite [hidden]{display:none !important}
.rite-stage{position:relative;width:min(560px,92vw);min-height:380px;display:flex;
  align-items:center;justify-content:center;text-align:center}

/* temps 1 — le sceau se pose sur le dossier d'audit */
.rite-dossier{background:var(--card);border:1px solid var(--line-strong);
  border-radius:var(--r);padding:1.6rem 2rem 2rem;position:relative;min-width:min(420px,88vw)}
.rite-dossier.done{transition:opacity .4s var(--ease), transform .4s var(--ease);
  opacity:0;transform:translateY(-18px);pointer-events:none;position:absolute}
.rd-conds{display:grid;gap:.45rem;margin:1rem 0 1.2rem;justify-content:center}
.rd-c{display:flex;gap:.55rem;align-items:center;font-size:.92rem;color:var(--ok);text-align:left}
.rd-c i{font-style:normal;width:22px;height:22px;border-radius:50%;border:1.5px solid currentColor;
  display:flex;align-items:center;justify-content:center;font-size:.72rem;font-weight:800;flex:none}
@media (prefers-reduced-motion: no-preference){
  .rd-c{opacity:0;animation:rdc .3s var(--ease) forwards;animation-delay:calc(.15s + var(--i) * .25s)}
  .rite-seal{opacity:0;animation:sealdrop .45s cubic-bezier(.6,-.1,.7,1.4) 1.35s forwards}
  .rd-scelle{opacity:0;animation:viewIn .4s 1.7s var(--ease) forwards}
}
@keyframes rdc{from{opacity:0;transform:translateX(-8px)}to{opacity:1;transform:none}}
.rite-seal .logo-seal{width:74px;height:74px;filter:drop-shadow(0 0 18px var(--brass-glow))}
@keyframes sealdrop{0%{opacity:0;transform:scale(2.2)}70%{opacity:1;transform:scale(.94)}100%{opacity:1;transform:scale(1)}}
.rd-scelle{font-family:var(--font-display);font-weight:600;color:var(--brass);margin-top:.4rem}

/* temps 2 — le verrou à briser */
.rite-lock{display:flex;flex-direction:column;align-items:center;gap:.9rem}
.lock-zone{width:190px;height:190px;display:flex;align-items:center;justify-content:center;
  cursor:pointer;border-radius:50%;touch-action:none;user-select:none;-webkit-user-select:none}
.lock-zone:focus-visible{outline:2px solid var(--arc);outline-offset:6px}
.lock-svg{width:170px;height:170px;overflow:visible}
.lock-svg .charge-bg{fill:none;stroke:var(--bg-soft);stroke-width:5}
.lock-svg .charge{fill:none;stroke:var(--arc);stroke-width:5;stroke-linecap:round;
  transform:rotate(-90deg);transform-origin:60px 60px;
  filter:drop-shadow(0 0 8px var(--arc-glow))}
.lock-svg .lk-shackle,.lock-svg .lk-body,.lock-svg .lk-key{fill:none;stroke:var(--brass);
  stroke-width:5;stroke-linecap:round;stroke-linejoin:round}
.lock-svg .lk-body{fill:rgba(224,185,95,.07)}
.lock-svg .lk-hole{fill:var(--brass)}
.lock-svg .crack{fill:none;stroke:var(--arc);stroke-width:2.5;stroke-linecap:round;
  stroke-linejoin:round;opacity:0;filter:drop-shadow(0 0 5px var(--arc-glow))}
.lock-svg.c1 .crack.k1{opacity:1}
.lock-svg.c2 .crack.k2,.lock-svg.c2 .crack.k3{opacity:1}
@media (prefers-reduced-motion: no-preference){
  .lock-svg.shake{animation:lkshake .22s linear}
}
@keyframes lkshake{0%,100%{transform:translateX(0)}25%{transform:translateX(-4px) rotate(-1.5deg)}
  75%{transform:translateX(4px) rotate(1.5deg)}}
.lock-svg.shatter{transition:opacity .3s, transform .3s;opacity:0;transform:scale(1.25)}
.rite-instr{font-family:var(--font-display);font-weight:600;font-size:1.05rem;color:var(--ink-2);margin:0}

/* temps 3 — les battants s'ouvrent sur la lumière du niveau suivant */
.rite .rite-doors{position:fixed;inset:0;perspective:1000px;overflow:hidden;pointer-events:none}
.door{position:absolute;top:0;bottom:0;width:50.5%;
  background:linear-gradient(160deg,#111827 0%,#0b101c 55%,#070a12 100%);
  box-shadow:inset 0 0 60px rgba(0,0,0,.55)}
.door.g{left:0;transform-origin:left center}
.door.d{right:0;transform-origin:right center}
.door-light{position:absolute;inset:0;opacity:0}
@media (prefers-reduced-motion: no-preference){
  .door{transition:transform 1.5s cubic-bezier(.72,0,.3,1)}
  .door-light{transition:opacity 1.3s .3s var(--ease)}
}
.rite-doors.open .door.g{transform:translateX(-32%) rotateY(58deg)}
.rite-doors.open .door.d{transform:translateX(32%) rotateY(-58deg)}
.rite-doors.open .door-light{opacity:1}
.rite-doors.dim{transition:opacity 1s var(--ease);opacity:.35}

/* temps 4 — l'arrivée dans le niveau */
.rite-next{position:relative;z-index:2;max-width:min(480px,88vw)}
@media (prefers-reduced-motion: no-preference){
  .rite-next{animation:arrive .7s cubic-bezier(.2,.8,.3,1) both}
}
@keyframes arrive{from{opacity:0;transform:scale(.92) translateY(14px)}to{opacity:1;transform:none}}
.rite-next h2{font-size:1.7rem;margin:.4rem 0 .5rem}
.rite-next .rn-q{color:var(--ink-2);line-height:1.55;margin:0 0 .4rem}
.rite-next .gain{font-family:var(--font-display);font-weight:800;font-size:1.25rem;
  color:var(--brass-2);text-shadow:0 0 16px var(--brass-glow)}
.rite-next .btn-cer{margin-top:.9rem}

/* ═══ v4.5 (phase A palier 3) — FX canvas + ambiances par étage ═════ */

/* canvas de particules : au-dessus des rites, transparent aux clics */
#fx{position:fixed;inset:0;width:100%;height:100%;pointer-events:none;z-index:120}

/* couche d'ambiance : la couleur de l'étage irrigue le décor, en fondu.
   La transition porte sur `color` — currentColor repeint les dégradés. */
#amb{
  position:fixed;inset:0;pointer-events:none;z-index:0;
  color:var(--amb, #7cb7ff);
  transition:color 1.1s var(--ease);
  background:
    radial-gradient(1100px 560px at 50% -12%, color-mix(in srgb, currentColor 13%, transparent), transparent 62%),
    radial-gradient(900px 520px at 50% 118%, color-mix(in srgb, currentColor 6%, transparent), transparent 58%),
    linear-gradient(transparent 62%, rgba(2,4,9,.34));
}
@supports not (background: color-mix(in srgb, red 10%, transparent)){
  #amb{background:linear-gradient(transparent 62%, rgba(2,4,9,.34))}
}

/* liseré d'étage sous la barre du haut */
#topbar::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;
  background:linear-gradient(90deg, transparent 4%,
    color-mix(in srgb, var(--amb, #7cb7ff) 55%, transparent) 50%, transparent 96%);
  transition:background .9s var(--ease);
  pointer-events:none;
}

/* la quête prioritaire et le HUD respirent la couleur de l'étage */
.next-action.sys{border-color:color-mix(in srgb, var(--amb, #7cb7ff) 34%, transparent)}
.next-action::after{box-shadow:0 0 52px -8px color-mix(in srgb, var(--amb, #7cb7ff) 45%, transparent)}

/* ── v4.5b — décor du donjon (galerie d'arches) + navigation spatiale ── */

#decor{position:fixed;inset:0;pointer-events:none;z-index:0;
  color:var(--amb, #7cb7ff);
  transition:color 1.1s var(--ease), opacity .6s var(--ease);
  opacity:0}
body.decor-on #decor{opacity:1}
#decor .dc{position:absolute;left:0;right:0;bottom:0;width:100%;height:min(72vh, 640px)}
#decor .dc.far{opacity:.05}
#decor .dc.near{opacity:.075}
@media (prefers-reduced-motion: no-preference){
  #decor .dc.far{transform:translateY(calc(var(--sy, 0) * -0.045px))}
  #decor .dc.near{transform:translateY(calc(var(--sy, 0) * -0.09px))}
}
#decor .dc.fog{height:34vh;
  background:linear-gradient(transparent, rgba(3, 5, 10, .55));opacity:.85}

/* transitions spatiales entre écrans (View Transitions API) */
@media (prefers-reduced-motion: no-preference){
  ::view-transition-old(root), ::view-transition-new(root){
    animation-duration:.26s;animation-timing-function:var(--ease)}
  html[data-nav="down"]::view-transition-old(root){animation-name:vtOutHaut}
  html[data-nav="down"]::view-transition-new(root){animation-name:vtInBas}
  html[data-nav="up"]::view-transition-old(root){animation-name:vtOutBas}
  html[data-nav="up"]::view-transition-new(root){animation-name:vtInHaut}
}
@keyframes vtOutHaut{to{opacity:0;transform:translateY(-24px)}}
@keyframes vtInBas{from{opacity:0;transform:translateY(28px)}}
@keyframes vtOutBas{to{opacity:0;transform:translateY(24px)}}
@keyframes vtInHaut{from{opacity:0;transform:translateY(-28px)}}

/* ── v4.6 — emblèmes d'étage (blasons trait) ── */
.emb{width:44px;height:44px;fill:none;stroke:currentColor;stroke-width:2.2;
  stroke-linecap:round;stroke-linejoin:round;display:block}
.niv-head{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin:.2rem 0 .6rem}
.niv-head .emb-wrap{flex:none;opacity:.85;filter:drop-shadow(0 0 12px currentColor)}
.lvl-emb{position:absolute;right:3.4rem;top:50%;transform:translateY(-50%);
  opacity:.07;pointer-events:none}
.lvl-emb .emb{width:72px;height:72px;stroke-width:1.8}
.lvl:hover .lvl-emb{opacity:.13;transition:opacity .3s var(--ease)}
@media(max-width:640px){.lvl-emb{display:none}}
.rn-emb{display:flex;justify-content:center;margin-bottom:.7rem;
  filter:drop-shadow(0 0 16px currentColor)}
.rn-emb .emb,.rn-emb .ic{width:54px;height:54px}

/* ── v4.7 — cinématiques (ouverture · étage · victoire · flashback) ── */
.cine{cursor:pointer}
.cine .cine-skip{position:absolute;bottom:1.4rem;right:1.6rem;font-size:.78rem;
  color:var(--muted);opacity:0;animation:viewIn .4s 1.4s var(--ease) forwards}
.cine-sc{max-width:min(540px,90vw);text-align:center;display:flex;
  flex-direction:column;align-items:center;gap:.55rem}
.cine .c-titre{font-size:2rem;margin:.15rem 0}
.cine .c-sub{color:var(--ink-2);line-height:1.6;margin:0}
.cine .c-kick{margin-top:.7rem}
@media (prefers-reduced-motion: no-preference){
  .cine-sc > *{opacity:0;animation:cineIn .55s var(--ease) forwards}
  .cine-sc > *:nth-child(1){animation-delay:.1s}
  .cine-sc > *:nth-child(2){animation-delay:.55s}
  .cine-sc > *:nth-child(3){animation-delay:1.05s}
  .cine-sc > *:nth-child(4){animation-delay:1.6s}
  .cine-sc > *:nth-child(5){animation-delay:2.1s}
}
@keyframes cineIn{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}

/* ouverture de partie : le sceau se trace, le nom s'inscrit */
.cine .c-seal .logo-seal{width:96px;height:96px;filter:drop-shadow(0 0 20px var(--brass-glow))}
@media (prefers-reduced-motion: no-preference){
  .cine .c-seal .logo-seal circle,.cine .c-seal .logo-seal path{
    stroke-dasharray:130;stroke-dashoffset:130;animation:trace 1.1s var(--ease) forwards}
  .cine .c-seal .logo-seal circle:nth-child(2){animation-delay:.18s}
  .cine .c-seal .logo-seal path{animation-delay:.4s}
}
.cine .c-nom{font-size:2.3rem;margin:.25rem 0 0;letter-spacing:.5px}

/* intro d'étage : le blason se trace */
.cine .c-emb .emb{width:88px;height:88px;filter:drop-shadow(0 0 20px currentColor)}
@media (prefers-reduced-motion: no-preference){
  .cine .c-emb .emb path,.cine .c-emb .emb circle,.cine .c-emb .emb ellipse{
    stroke-dasharray:280;stroke-dashoffset:280;animation:trace 1.3s var(--ease) forwards}
}

/* victoire : les 7 blasons scellés un à un, puis les chiffres de la partie */
.c-embs{display:flex;gap:.75rem;flex-wrap:wrap;justify-content:center;margin-bottom:.3rem}
.c-embs .c-e .emb{width:34px;height:34px;stroke-width:2.6}
@media (prefers-reduced-motion: no-preference){
  .c-embs .c-e{opacity:0;animation:cineIn .4s var(--ease) forwards;
    animation-delay:calc(.25s + var(--i) * .3s)}
}
.c-mont .ic{width:62px;height:62px;filter:drop-shadow(0 0 16px var(--brass-glow))}
.c-stats{display:flex;gap:1.3rem;flex-wrap:wrap;justify-content:center;
  margin-top:.35rem;color:var(--muted);font-size:.9rem}
.c-stats b{color:var(--brass-2);font-family:var(--font-display);font-size:1.15rem}

/* flashback : les dernières actions en cartes */
.c-cartes{display:grid;gap:.5rem;margin:.5rem 0;width:100%}
.c-carte{display:flex;gap:.8rem;align-items:baseline;background:var(--card);
  border:1px solid var(--line);border-radius:var(--r-sm);padding:.6rem .95rem;
  text-align:left;font-size:.92rem}
.c-carte .muted{flex:none}
@media (prefers-reduced-motion: no-preference){
  .c-carte{opacity:0;animation:cineIn .45s var(--ease) forwards;
    animation-delay:calc(.5s + var(--i) * .4s)}
}

/* ═══ v4.8 — statut identitaire du rang + certificat (crédential) ═══ */

/* blason de rang (galons → couronne), teinte selon le rang */
.rang-emb{stroke-width:2.4}
.rank{position:relative}
.rank-blason{position:absolute;bottom:-5px;right:-5px;width:24px;height:24px;
  display:flex;align-items:center;justify-content:center;border-radius:50%;
  background:var(--void);border:1.5px solid var(--rangc, var(--arc));color:var(--rangc, var(--arc))}
.rank-blason .emb{width:15px;height:15px}
.rank[data-r="5"]{filter:drop-shadow(0 0 10px var(--brass-glow))}
.titre-rang .ti{color:var(--ink)}
.hm-rang{display:inline-flex;align-items:center;gap:.25rem}
.hm-rang .hm-emb{width:14px;height:14px;color:currentColor}

/* cérémonie de rang : le grand blason */
.rang-cseal .emb.big{width:76px;height:76px;stroke-width:2.2;
  filter:drop-shadow(0 0 18px currentColor)}

/* carte d'appel vers l'attestation (Pilotage) */
.cert-cta{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;
  border-color:rgba(224,185,95,.3)}
.cert-cta:hover{border-color:var(--brass);transform:translateY(-1px)}
.cert-cta .cta-emb .emb{width:38px;height:38px;color:var(--brass-2)}
.cert-cta .cta-txt{flex:1;display:flex;flex-direction:column;gap:.15rem}
.cert-cta .cta-go .ic{width:20px;height:20px;color:var(--brass)}

.c-cert{margin-top:1rem}

/* ── l'attestation : un vrai document (parchemin clair, même en dark) ── */
.cert-actions{display:flex;align-items:center;justify-content:space-between;gap:1rem;margin-bottom:1rem}
.certificat{
  background:#f7f3e9; color:#20242c;
  border:1px solid #d8cdb0; border-radius:10px;
  padding:2.4rem 2.6rem; max-width:820px; margin:0 auto;
  box-shadow:0 24px 60px -30px rgba(0,0,0,.7);
  position:relative; overflow:hidden;
}
.certificat::before{content:"";position:absolute;inset:10px;border:1px solid #c9b98d;
  border-radius:6px;pointer-events:none}
.cert-sceau{display:flex;justify-content:center;margin-bottom:.6rem}
.cert-sceau .logo-seal{width:72px;height:72px}
.cert-eyebrow{text-align:center;text-transform:uppercase;letter-spacing:.22em;
  font-size:.72rem;color:#9a7b2e;font-weight:700}
.cert-titre{text-align:center;font-family:var(--font-display);font-weight:800;
  font-size:2.1rem;margin:.3rem 0 .1rem;color:#20242c}
.cert-sub{text-align:center;color:#5c5545;margin:0 0 1.3rem}
.cert-rang{display:flex;align-items:center;justify-content:center;gap:2rem;flex-wrap:wrap;
  padding:1rem;background:rgba(201,185,141,.16);border-radius:8px;margin-bottom:1.4rem}
.cert-rang .emb{width:46px;height:46px;color:#9a7b2e;stroke-width:2.4;flex:none}
.cert-rang .cr-l{font-size:.72rem;text-transform:uppercase;letter-spacing:.12em;color:#8a7f66}
.cert-rang .cr-v{font-family:var(--font-display);font-weight:700;font-size:1.15rem;color:#20242c}
.cert-table{width:100%;border-collapse:collapse;font-size:.9rem;margin-bottom:1.2rem}
.cert-table th{text-align:left;font-size:.72rem;text-transform:uppercase;letter-spacing:.08em;
  color:#8a7f66;border-bottom:1.5px solid #c9b98d;padding:.4rem .5rem}
.cert-table td{padding:.5rem .5rem;border-bottom:1px solid #e2d8bf;vertical-align:top}
.cert-table .c-porte{white-space:nowrap;font-weight:600}
.cert-table .c-porte .ic{width:14px;height:14px;vertical-align:-2px;margin-right:.2rem}
.cert-table tr.ok .c-porte{color:#3c7d3c}
.cert-table tr.off{opacity:.5}
.cert-table .c-score{text-align:right;font-variant-numeric:tabular-nums;font-weight:600}
.cert-table .muted{color:#9a927c}
.cert-mention{font-size:.86rem;line-height:1.6;color:#4a4436;font-style:italic;
  border-left:3px solid #c9b98d;padding-left:.9rem;margin:0 0 1.4rem}
.cert-pied{display:flex;justify-content:space-between;gap:1rem;flex-wrap:wrap;
  font-size:.78rem;color:#5c5545;border-top:1px solid #d8cdb0;padding-top:.9rem}
.cert-pied .muted{color:#9a927c}
.cert-date{text-align:right}
.certificat .muted{color:#9a927c}

/* impression : seul le document, en pleine page */
@media print{
  #topbar, #foot, #amb, #decor, #fx, #hud-mini, .no-print, .cert-actions{display:none !important}
  body{background:#fff}
  #app{padding:0}
  .certificat{box-shadow:none;border:none;max-width:none;margin:0}
  .certificat::before{border-color:#c9b98d}
}

/* ═══ v4.9 — Le Gardien des portes (guide en bulles) ═══════════════ */

/* avatar : silhouette encapuchonnée au sceau */
.gard-av .g-robe,.gard-av .g-hood{stroke:var(--brass);stroke-width:2.1;
  stroke-linecap:round;stroke-linejoin:round;fill:none}
.gard-av .g-face{fill:rgba(4,7,14,.92);stroke:var(--brass);stroke-width:1.1}
.gard-av .g-seal{fill:none;stroke:var(--brass-2);stroke-width:1.4;
  filter:drop-shadow(0 0 5px var(--brass-glow))}
.gard-av .g-glyph{stroke:var(--brass-2);stroke-width:1.4;stroke-linecap:round;fill:none}

/* la bulle : compagnon ancré en bas, non bloquant */
#gardien{position:fixed;left:0;right:0;bottom:0;z-index:92;display:flex;
  justify-content:center;padding:0 1rem 1.1rem;pointer-events:none}
.gard-box{pointer-events:auto;display:flex;gap:1rem;align-items:flex-end;
  width:min(680px,100%);background:linear-gradient(180deg, var(--card), var(--bg-soft));
  border:1px solid rgba(224,185,95,.4);border-radius:var(--r);
  box-shadow:0 18px 50px -22px #000, 0 0 40px -18px var(--brass-glow);
  padding:1rem 1.2rem}
@media (prefers-reduced-motion: no-preference){
  #gardien .gard-box{animation:gardIn .4s var(--ease)}
}
@keyframes gardIn{from{opacity:0;transform:translateY(24px)}to{opacity:1;transform:none}}
#gardien.out .gard-box{opacity:0;transform:translateY(20px);transition:.3s var(--ease)}
.gard-avatar{flex:none;width:66px;align-self:stretch;display:flex;align-items:flex-end}
.gard-avatar .gard-av{width:66px;height:auto}
@media (prefers-reduced-motion: no-preference){
  .gard-avatar .gard-av{animation:gardFloat 4s ease-in-out infinite}
}
@keyframes gardFloat{0%,100%{transform:translateY(0)}50%{transform:translateY(-4px)}}
.gard-body{flex:1;min-width:0}
.gard-nom{font-family:var(--font-display);font-weight:700;font-size:.82rem;
  letter-spacing:.03em;color:var(--brass);margin-bottom:.2rem}
.gard-txt{margin:0 0 .7rem;line-height:1.55;font-size:.96rem;color:var(--ink)}
.gard-txt b{color:var(--brass-2)}
.gard-actions{display:flex;align-items:center;gap:.7rem}
.gard-coach{font-size:.84rem;color:var(--arc);white-space:nowrap}
.gard-pts{display:flex;gap:.3rem}
.gard-pts i{width:6px;height:6px;border-radius:50%;background:var(--line-strong)}
.gard-pts i.on{background:var(--brass)}
@media(max-width:520px){
  .gard-avatar{width:46px}.gard-avatar .gard-av{width:46px}
  .gard-coach{font-size:.78rem}
}

/* bouton flottant de rappel */
#gardien-appel{position:fixed;right:1rem;bottom:1rem;z-index:80;
  width:52px;height:52px;border-radius:50%;padding:6px 6px 0;
  background:var(--card);border:1px solid rgba(224,185,95,.4);cursor:pointer;
  box-shadow:0 8px 24px -12px #000, 0 0 22px -14px var(--brass-glow);
  display:flex;align-items:flex-end;justify-content:center;overflow:hidden;
  transition:transform .2s var(--ease), border-color .2s var(--ease)}
#gardien-appel:hover{transform:translateY(-2px) scale(1.04);border-color:var(--brass)}
#gardien-appel .gard-av{width:40px;height:auto}
#gardien-appel:focus-visible{outline:2px solid var(--arc);outline-offset:3px}
@media print{#gardien,#gardien-appel{display:none !important}}

/* ═══ v4.10 — Le Carnet d'entretiens ═══════════════════════════════ */
.ent-liste{display:flex;flex-direction:column;gap:.55rem;margin-top:.8rem}
.ent-row{display:flex;align-items:center;gap:.9rem;text-decoration:none;color:inherit;padding:.8rem 1rem}
.ent-row:hover{border-color:var(--line-strong);transform:translateY(-1px)}
.ent-ic .ic{width:26px;height:26px;color:var(--arc)}
.ent-ic.gros .ic{width:34px;height:34px}
.ent-main{flex:1;display:flex;flex-direction:column;gap:.15rem;min-width:0}
.ent-main b{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ent-etat{flex:none;font-size:.72rem;font-weight:700;text-transform:uppercase;letter-spacing:.06em;
  padding:.2rem .5rem;border-radius:99px;border:1px solid currentColor}
.ent-etat.ok{color:var(--ok)}
.ent-etat.brut{color:var(--muted)}
.ent-head{display:flex;align-items:center;gap:.9rem;margin:.2rem 0 .8rem}
.ent-struct{border-left:3px solid var(--arc)}
.ent-brut{margin:.2rem 0 .9rem}
.ent-brut summary{cursor:pointer;font-size:.86rem;color:var(--muted);padding:.35rem 0}
input[type="search"]{min-height:44px}

/* ── v4.11 — ponts Carnet → jeu ── */
.pont{display:flex;gap:1rem;align-items:center;justify-content:space-between;
  flex-wrap:wrap;padding:.7rem 0;border-bottom:1px solid var(--line)}
.pont:last-of-type{border-bottom:none}
.pont-l{display:flex;flex-direction:column;gap:.1rem;min-width:220px;flex:1}
.pont-l .ic{color:var(--arc);width:18px;height:18px;margin-bottom:.15rem}
.pont-r{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}
.pont-r select{max-width:280px;min-height:44px}

/* ── v4.12 — générateur de documents ── */
.d-ligne{display:grid;grid-template-columns:1fr 90px 120px 44px;gap:.5rem;margin:.4rem 0;align-items:center}
.d-ligne input{margin:0}
@media(max-width:560px){.d-ligne{grid-template-columns:1fr 70px 90px 40px}}
.docpage .doc-head{display:flex;justify-content:space-between;gap:2rem;flex-wrap:wrap;
  font-size:.9rem;line-height:1.5;margin-bottom:1.6rem}
.docpage .doc-dest{text-align:right;min-width:200px}
.docpage .doc-total td{border-top:2px solid #c9b98d;font-size:1.02rem}
.docpage tfoot td{padding:.45rem .5rem}

/* ═══ v4.14 — la Tour (carte-monde), compagnons, avatar, quêtes ═══ */

/* la Tour : étages de bas en haut, chemin central lumineux */
.tour{display:flex;flex-direction:column-reverse;position:relative;
  padding:1.2rem 0 .6rem;max-width:740px;margin:0 auto}
.tour-path{position:absolute;left:50%;top:24px;bottom:12px;width:3px;
  transform:translateX(-50%);border-radius:99px;z-index:0;
  box-shadow:0 0 12px -2px var(--arc-glow)}
.etage{position:relative;display:flex;padding:.55rem 0;z-index:1}
.etage.gauche{justify-content:flex-start}
.etage.droite{justify-content:flex-end}
.etage .chambre{width:min(46%, 330px);display:flex;align-items:center;gap:.8rem;
  padding:.8rem .95rem;position:relative;cursor:pointer}
/* bras de liaison vers le chemin central */
.etage::before{content:"";position:absolute;top:50%;width:8%;height:2px;
  background:var(--line-strong)}
.etage.gauche::before{left:46%}
.etage.droite::before{right:46%}
.etage.et-done::before,.etage.et-courant::before{background:var(--arc);
  box-shadow:0 0 8px -1px var(--arc-glow)}
.etage .ch-body{flex:1;min-width:0;display:flex;flex-direction:column;gap:.2rem}
.etage .ch-body b{font-family:var(--font-display);font-size:.98rem;line-height:1.25}
.etage .ch-emb{position:absolute;right:2.6rem;top:50%;transform:translateY(-50%);
  opacity:.08;pointer-events:none}
.etage .ch-emb .emb{width:54px;height:54px;stroke-width:1.8}
.etage .chambre:hover .ch-emb{opacity:.15}
.etage.et-verrou .chambre{filter:grayscale(.55) brightness(.72)}
.etage.et-verrou .chambre:hover{filter:grayscale(.3) brightness(.85)}
.sommet-etage{justify-content:center}
.sommet-etage .chambre{width:min(60%, 380px);cursor:default}
.sommet-etage .chambre:hover{transform:none}
.etage .lvl-emb{display:none}

/* l'avatar du joueur, posté près de sa chambre */
.avatar-joueur{position:absolute;top:50%;transform:translateY(-58%);z-index:2;
  pointer-events:none;filter:drop-shadow(0 0 10px var(--arc-glow))}
.etage.gauche .avatar-joueur{left:calc(46% + 9%)}
.etage.droite .avatar-joueur{right:calc(46% + 9%)}
.avatar-joueur .av-svg{width:44px;height:52px;fill:none;stroke:var(--arc);
  stroke-width:2.6;stroke-linecap:round;stroke-linejoin:round}
.avatar-joueur.haut-rang .av-svg{stroke:var(--brass-2)}
.avatar-joueur.haut-rang{filter:drop-shadow(0 0 12px var(--brass-glow))}
@media (prefers-reduced-motion: no-preference){
  .avatar-joueur{animation:gardFloat 4.5s ease-in-out infinite}
}
/* allures dans le wizard */
.choice-grid.avatars .choice{padding:.55rem .7rem}
.choice-grid.avatars .av-svg{width:34px;height:40px;fill:none;stroke:currentColor;
  stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round}

/* compagnons sur la carte */
.pnj-spot{position:absolute;top:-4px;display:flex;gap:.3rem;z-index:2}
.etage.gauche .pnj-spot{left:calc(1rem)}
.etage.droite .pnj-spot{right:calc(1rem)}
.pnj{width:30px;height:30px;border-radius:50%;border:2px solid var(--pc);
  background:var(--void);color:var(--pc);cursor:pointer;padding:0;
  font-family:var(--font-display);font-weight:800;font-size:.85rem;
  display:flex;align-items:center;justify-content:center;
  box-shadow:0 0 10px -4px var(--pc);transition:transform .2s var(--ease)}
.pnj:hover{transform:scale(1.15)}
.pnj.vu{opacity:.55}
.pnj i{font-style:normal}
.pnj:focus-visible{outline:2px solid var(--arc);outline-offset:2px}
/* portrait dans la bulle de dialogue */
.pnj-port{width:52px;height:52px;border-radius:50%;border:2.5px solid var(--pc);
  color:var(--pc);display:flex;align-items:center;justify-content:center;
  font-family:var(--font-display);font-weight:800;font-size:1.5rem;
  box-shadow:0 0 16px -6px var(--pc);background:var(--void)}
.pnj-port i{font-style:normal}
#gardien .gard-nom{color:var(--gacc, var(--brass))}
#gardien .gard-box{border-color:color-mix(in srgb, var(--gacc, #e0b95f) 40%, transparent)}

/* journal de quêtes */
.quete-lien{display:inline-block;margin-top:.35rem;color:var(--arc)}
.quete{display:flex;flex-direction:column;gap:.1rem;padding:.6rem .8rem;margin:.35rem 0;
  border:1px solid var(--line);border-radius:var(--r-sm);text-decoration:none;color:inherit}
.quete:hover{border-color:var(--line-strong)}
.hf-grid{display:grid;grid-template-columns:1fr 1fr;gap:.5rem}
@media(max-width:640px){.hf-grid{grid-template-columns:1fr}}
.hf{display:flex;gap:.6rem;align-items:flex-start;padding:.55rem .7rem;
  border:1px solid var(--line);border-radius:var(--r-sm);opacity:.5}
.hf.ok{opacity:1;border-color:rgba(224,185,95,.35)}
.hf-med{flex:none;width:26px;height:26px;border-radius:50%;border:1.5px solid var(--muted);
  display:flex;align-items:center;justify-content:center;color:var(--muted)}
.hf.ok .hf-med{border-color:var(--brass);color:var(--brass);
  box-shadow:0 0 10px -4px var(--brass-glow)}
.hf-med .ic{width:13px;height:13px}
.hf span b{display:block;font-size:.92rem}

/* mobile : la tour devient une colonne simple */
@media(max-width:640px){
  .tour-path{left:22px;transform:none}
  .etage,.etage.droite{justify-content:flex-start;padding-left:44px}
  .etage .chambre,.sommet-etage .chambre{width:100%}
  .etage::before,.etage.droite::before{left:22px;right:auto;width:22px}
  .avatar-joueur,.etage.droite .avatar-joueur{left:auto;right:6px;top:auto;bottom:-6px;transform:none}
  .avatar-joueur .av-svg{width:30px;height:36px}
  .pnj-spot,.etage.droite .pnj-spot{left:auto;right:2.6rem;top:-10px}
}

/* ═══ v4.15 — démarrage (premier quart d'heure), conformité, mode sobre ═══ */
.demarrage{max-width:640px;margin:0 auto}
.dem-sous{color:var(--ink-2);line-height:1.55;margin:.2rem 0 1.1rem}
.dem-livrable{display:flex;align-items:center;gap:1rem;text-decoration:none;color:inherit;
  border-color:rgba(224,185,95,.4);background:linear-gradient(135deg, rgba(224,185,95,.08), transparent 60%), var(--card)}
.dem-livrable:hover{border-color:var(--brass);transform:translateY(-1px)}
.dem-livrable .dl-ic .ic{width:34px;height:34px;color:var(--brass-2)}
.dl-txt{flex:1;display:flex;flex-direction:column;gap:.1rem}
.dl-kick{font-size:.72rem;text-transform:uppercase;letter-spacing:.1em;color:var(--brass)}
.dl-txt b{font-family:var(--font-display);font-size:1.15rem}
.dl-go .ic{width:22px;height:22px;color:var(--brass)}
.dem-actions{display:flex;flex-direction:column;gap:.5rem}
.dem-act{display:flex;align-items:center;gap:.8rem;text-decoration:none;color:inherit;
  padding:.7rem .85rem;border:1px solid var(--line);border-radius:var(--r-sm)}
.dem-act:hover{border-color:var(--line-strong);transform:translateX(2px)}
.da-n{flex:none;width:26px;height:26px;border-radius:50%;background:var(--bg-soft);
  color:var(--arc);font-family:var(--font-display);font-weight:800;
  display:flex;align-items:center;justify-content:center;font-size:.9rem}
.da-txt{flex:1;display:flex;flex-direction:column;gap:.1rem;min-width:0}
.da-go .ic{width:16px;height:16px;color:var(--muted)}
.outils-grid{display:grid;grid-template-columns:1fr 1fr 1fr;gap:.5rem}
@media(max-width:560px){.outils-grid{grid-template-columns:1fr 1fr}}
.outil{display:flex;flex-direction:column;align-items:center;gap:.35rem;text-align:center;
  padding:.8rem .4rem;border:1px solid var(--line);border-radius:var(--r-sm);
  text-decoration:none;color:var(--ink-2);font-size:.82rem}
.outil:hover{border-color:var(--line-strong);color:var(--ink)}
.outil .ic{width:22px;height:22px;color:var(--arc)}
.dem-tour{text-align:center;margin-top:1.4rem}

/* conformité */
.conf-progress{font-size:.9rem;color:var(--muted);margin-bottom:.6rem}
.conf-progress b{color:var(--brass-2);font-family:var(--font-display);font-size:1.1rem}
.conf-liste{display:flex;flex-direction:column;gap:.4rem}
.conf-item{display:flex;gap:.7rem;align-items:flex-start;padding:.65rem .8rem;
  border:1px solid var(--line);border-radius:var(--r-sm);cursor:pointer}
.conf-item:hover{border-color:var(--line-strong)}
.conf-item.ok{border-color:rgba(61,220,132,.35);background:rgba(61,220,132,.05)}
.conf-item input{margin-top:.2rem;min-width:20px;min-height:20px;flex:none;accent-color:var(--ok)}
.ci-body{display:flex;flex-direction:column;gap:.15rem}
.ci-body b{font-size:.94rem}
.ci-tag{font-size:.66rem;text-transform:uppercase;letter-spacing:.06em;color:var(--arc);
  border:1px solid currentColor;border-radius:99px;padding:.05rem .4rem;font-weight:600;vertical-align:middle}

/* ── v4.16 — dossier de validation (procès-verbal) ── */
.pv-note{font-size:.88rem;background:rgba(124,183,255,.08);border:1px solid rgba(124,183,255,.25);
  border-radius:var(--r-sm);padding:.6rem .8rem;margin:.6rem 0;color:#3a4658}
.docpage .pv-h{font-size:.78rem;text-transform:uppercase;letter-spacing:.1em;color:#8a7f66;
  border-bottom:1px solid #d8cdb0;padding-bottom:.3rem;margin:1.2rem 0 .5rem}
.docpage .pv-q{font-size:1.05rem;font-weight:600;color:#20242c;margin:.2rem 0}
.docpage .pv-crit{display:flex;justify-content:space-between;align-items:center;gap:1rem;
  padding:.4rem 0;border-bottom:1px solid #e7ddc6}
.docpage .pvc-t{font-size:.92rem}
.docpage .pv-total{text-align:right;font-size:1.05rem;margin:.5rem 0 0}
.docpage .pv-signe{margin-top:1.2rem;font-size:.95rem;color:#20242c}
.docpage label{color:#4a4436;font-size:.82rem}
.docpage input, .docpage .pv-crit .seg{color:#20242c}
.docpage input[type=text],.docpage input[type=date]{background:#fff;border:1px solid #c9b98d;color:#20242c}
.docpage .seg button{background:#efe7d2;color:#4a4436;border-color:#c9b98d}
.docpage .seg button.sel{background:#9a7b2e;color:#fff}
.docpage .seg button.sel.v0{background:var(--bad);color:#fff}
@media print{ .docpage .pv-note{display:none} }

/* ── v4.18 — QR-facture (bulletin de paiement suisse) ── */
.bull-manque{background:#fff6e5;border:1px solid #e0b95f;color:#5c4a1f;font-size:.88rem}
.bulletin{background:#fff;color:#000;border:1px solid #bbb;border-top:2px dashed #888;
  max-width:820px;margin:1.2rem auto 0;font-family:"Outfit",Arial,sans-serif}
.bl-note{background:#eef4ff;border:1px solid #b9d0f5;color:#2b3a52;font-size:.82rem;
  padding:.5rem .7rem;border-radius:6px;margin:.6rem}
.bl-grid{display:grid;grid-template-columns:1fr 2fr;gap:0}
.bl-recu{border-right:1px dashed #888;padding:.8rem}
.bl-pay{padding:.8rem}
.bl-titre{font-weight:700;font-size:1rem;margin-bottom:.5rem}
.bl-l{font-weight:700;font-size:.62rem;margin-top:.4rem}
.bl-v{font-size:.78rem;line-height:1.35}
.bl-vide{display:inline-block;border:.5px solid #000;width:60%;height:2.2em;vertical-align:top}
.bl-mm{display:flex;gap:1.4rem;margin-top:.5rem}
.bl-qr{position:relative;width:150px;height:150px;margin:.3rem 0}
.bl-qr svg{width:150px;height:150px;display:block}
.qr-cross{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:22px;height:22px}
.qr-cross svg{width:22px;height:22px;display:block}
@media(max-width:560px){.bl-grid{grid-template-columns:1fr}.bl-recu{border-right:none;border-bottom:1px dashed #888}}
@media print{.bulletin{page-break-inside:avoid;border-color:#000}.bl-note{display:none}}