/* NYMBLE — DS Arkange Piste B (tokens exacts) */
:root{
  --canvas:#F5F5F6; --panel:#FFFFFF; --inset:#F5F5F6;
  --ink:#020202; --body:#2A2A2E; --muted:#74747B;
  --hair:#DCDCDF; --hair-soft:#ECECEE; --hover:#F5F5F6;
  --side:#212022; --side-ink:#FFFFFF; --side-muted:rgba(255,255,255,.72);
  --side-hair:rgba(255,255,255,.14); --side-hover:rgba(255,255,255,.07);
  --good:#1B7F4B; --warn:#B4540A; --lock:#A3A3AA;
  --radius-sm:4px; --radius:6px; --radius-lg:10px; --radius-hero:14px;
  --ease:cubic-bezier(.2,0,0,1); --t-fast:120ms; --t-med:200ms; --t-slow:360ms;
  --font-display:"UT Exageld","Darker Grotesque",system-ui,sans-serif;
  --font-body:"Darker Grotesque",system-ui,sans-serif;
}
@font-face{
  font-family:"UT Exageld";
  src:url("UT-Exageld.woff2") format("woff2");
  font-weight:400; font-style:normal; font-display:swap;
}
@font-face{
  font-family:"Darker Grotesque";
  src:url("DarkerGrotesque-var.woff2") format("woff2");
  font-weight:300 900; font-style:normal; font-display:swap;
}
*,*::before,*::after{box-sizing:border-box; margin:0; padding:0}
html{font-size:19px; -webkit-text-size-adjust:100%}
body{font-family:var(--font-body); background:var(--canvas); color:var(--body); font-size:16px; line-height:1.45; min-width:0; overflow-x:hidden}
a{color:inherit; text-decoration:none}
button{font:inherit; color:inherit; background:none; border:none; cursor:pointer}
input{font:inherit; color:inherit}
::selection{background:var(--ink); color:#fff}
h1,h2,h3,h4{font-family:var(--font-display); font-weight:400; color:var(--ink); line-height:1.04}
.kicker{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted)}
.display{font-family:var(--font-display)}
.mono{font-family:ui-monospace,"Cascadia Mono",monospace; font-size:.86em}

/* ── App shell ── */
.shell{display:flex; min-height:100vh; min-width:0}
.sidebar{width:246px; flex:0 0 246px; background:var(--side); color:var(--side-ink); display:flex; flex-direction:column; position:sticky; top:0; height:100vh; overflow-y:auto;
  background-image:repeating-linear-gradient(0deg,rgba(255,255,255,.07) 0 1px,transparent 1px 22px),repeating-linear-gradient(90deg,rgba(255,255,255,.07) 0 1px,transparent 1px 22px)}
.sidebar::after{content:""; position:fixed; left:0; top:0; bottom:0; width:246px; pointer-events:none;
  background:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/8px 8px; opacity:.35}
.side-top{padding:18px 16px 10px; position:relative; z-index:1}
.wordmark{font-family:var(--font-display); font-size:23px; letter-spacing:.06em; color:#fff; display:flex; align-items:center; gap:9px}
.wordmark .cube{width:13px; height:13px; flex:0 0 13px; display:grid; grid-template:repeat(3,1fr)/repeat(3,1fr)}
.wordmark .cube i{background:#fff}
.wordmark .cube i:nth-child(2n){background:transparent}
.rank-chip{margin-top:10px; display:inline-flex; align-items:center; gap:8px; border:1px solid var(--side-hair); border-radius:999px; padding:4px 11px 4px 6px; font-size:12.5px; color:var(--side-muted); position:relative; z-index:1}
.rank-chip b{background:#fff; color:var(--ink); border-radius:999px; font-size:11px; padding:2px 8px; letter-spacing:.1em}
.side-nav{flex:1; padding:8px 10px 10px; position:relative; z-index:1}
.side-label{font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--side-muted); opacity:.75; padding:14px 8px 5px}
.side-item{display:flex; align-items:center; gap:11px; width:100%; padding:7px 8px; border-radius:var(--radius); color:var(--side-muted); font-size:15.5px; font-weight:600; position:relative; transition:background var(--t-fast) var(--ease),color var(--t-fast) var(--ease)}
.side-item svg{width:17px; height:17px; flex:0 0 17px; stroke-width:1.9}
.side-item:hover{background:var(--side-hover); color:#fff}
.side-item.active{color:#fff; background:var(--side-hover)}
.side-item.active::before{content:""; position:absolute; left:-10px; top:6px; bottom:6px; width:3px; background:#fff}
.side-item .pip{margin-left:auto; font-size:11px; border:1px solid var(--side-hair); border-radius:999px; padding:1px 7px}
.side-bottom{padding:12px; border-top:1px solid var(--side-hair); position:relative; z-index:1; display:flex; gap:10px; align-items:center}
.avatar{width:34px; height:34px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; font-family:var(--font-display); font-size:15px; flex:0 0 34px}
.side-user{min-width:0}
.side-user b{display:block; font-size:14px; color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.side-user span{font-size:12px; color:var(--side-muted)}

.main{flex:1; min-width:0; display:flex; flex-direction:column}
.topbar{display:flex; align-items:center; gap:14px; padding:13px 26px; background:var(--panel); border-bottom:1px solid var(--hair-soft); position:sticky; top:0; z-index:20}
.topbar .crumb{font-size:14.5px; font-weight:600; color:var(--muted)}
.topbar .crumb b{color:var(--ink)}
.topbar .spacer{flex:1}
.search{display:flex; align-items:center; gap:8px; background:var(--inset); border:1px solid var(--hair-soft); border-radius:var(--radius); padding:7px 12px; width:240px; color:var(--muted); font-size:14.5px}
.search svg{width:15px; height:15px}
.streak{display:inline-flex; align-items:center; gap:7px; border:1px solid var(--hair); border-radius:999px; padding:5px 12px; font-size:13.5px; font-weight:700; color:var(--ink)}
.streak svg{width:14px; height:14px; stroke:var(--warn)}
.content{padding:26px; max-width:1200px; width:100%; min-width:0}

/* ── Cards / grid ── */
.card{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:20px; transition:transform var(--t-fast) var(--ease),border-color var(--t-fast) var(--ease)}
.card.click{cursor:pointer}
.card.click:hover{transform:translateY(-2px); border-color:var(--ink)}
.card.anthracite{background:var(--side); color:var(--side-ink); border-color:transparent}
.card.anthracite,.card.anthracite h2,.card.anthracite h3{color:#fff}
.card.anthracite .muted{color:var(--side-muted)}
.grid{display:grid; gap:14px; min-width:0}
.g2{grid-template-columns:repeat(2,minmax(0,1fr))}
.g3{grid-template-columns:repeat(3,minmax(0,1fr))}
.g4{grid-template-columns:repeat(4,minmax(0,1fr))}
.row{display:flex; gap:14px; min-width:0}
.grow{flex:1; min-width:0}
.muted{color:var(--muted)}
.hairline{border:0; border-top:1px solid var(--hair-soft); margin:14px 0}
.chip{display:inline-flex; align-items:center; gap:6px; border:1px solid var(--hair); border-radius:999px; padding:3px 11px; font-size:12.5px; font-weight:600; color:var(--body)}
.chip.solid{background:var(--ink); color:#fff; border-color:var(--ink)}
.chip.ghost{border-color:var(--hair-soft); color:var(--muted)}
.dot{width:7px; height:7px; border-radius:50%; background:var(--good); animation:arkBlink 2.4s steps(1) infinite}
@keyframes arkBlink{0%,70%{opacity:1}71%,100%{opacity:.25}}
@keyframes arkRise{from{opacity:0; transform:translateY(10px)}to{opacity:1; transform:none}}
.rise{animation:arkRise .56s var(--ease) both}
.rise:nth-child(2){animation-delay:60ms}.rise:nth-child(3){animation-delay:120ms}.rise:nth-child(4){animation-delay:180ms}

/* ── Buttons ── */
.btn{display:inline-flex; align-items:center; gap:9px; border-radius:var(--radius); padding:10px 18px; font-size:15px; font-weight:700; border:1px solid transparent; transition:all var(--t-fast) var(--ease)}
.btn svg{width:15px;height:15px}
.btn.primary{background:var(--ink); color:#fff}
.btn.primary:hover{transform:translateY(-1px)}
.btn.inverse{background:#fff; color:var(--ink)}
.btn.inverse:hover{transform:translateY(-1px)}
.btn.ghost{border-color:var(--hair); color:var(--ink)}
.btn.ghost:hover{background:var(--hover)}
.btn.small{padding:6px 13px; font-size:13.5px}

/* ── KPI ── */
.kpi{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:16px 18px}
.kpi .num{font-family:var(--font-display); font-size:30px; color:var(--ink); line-height:1}
.kpi .lab{font-size:11px; font-weight:700; letter-spacing:.14em; text-transform:uppercase; color:var(--muted); margin-top:7px}
.kpi .delta{font-size:12.5px; font-weight:700}
.up{color:var(--good)}.down{color:var(--warn)}

/* ── Bars / XP ── */
.bar{height:9px; background:var(--hair-soft); border-radius:999px; overflow:hidden}
.bar i{display:block; height:100%; background:var(--ink); border-radius:999px; transition:width .7s var(--ease)}
.bar.light{background:rgba(255,255,255,.16)}
.bar.light i{background:#fff}

/* ── Lists ── */
.list-item{display:grid; grid-template-columns:34px 1fr auto; gap:13px; align-items:center; padding:13px 4px; border-bottom:1px solid var(--hair-soft); min-width:0}
.list-item:last-child{border-bottom:0}
.ico-btn{width:34px; height:34px; border:1px solid var(--hair); border-radius:var(--radius); display:grid; place-items:center; color:var(--muted); transition:all var(--t-fast) var(--ease); flex:0 0 34px}
.ico-btn svg{width:15px; height:15px}
.ico-btn:hover{background:var(--ink); color:#fff; border-color:var(--ink)}
.ico-btn.done{background:var(--ink); color:#fff; border-color:var(--ink)}
.done-text{text-decoration:line-through; color:var(--muted)}
.badge{font-size:11px; font-weight:700; letter-spacing:.08em; text-transform:uppercase; border-radius:var(--radius-sm); padding:3px 8px}
.badge.ink{background:var(--ink); color:#fff}
.badge.soft{background:var(--inset); border:1px solid var(--hair-soft); color:var(--muted)}
.badge.good{background:#EAF4EE; color:var(--good)}
.badge.warn{background:#FBF0E6; color:var(--warn)}

/* ── Hero carte (home) ── */
.hero{background:var(--side); border-radius:var(--radius-hero); padding:36px; color:#fff; position:relative; overflow:hidden;
  background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/10px 10px}
.hero h1{font-size:clamp(38px,4.2vw,58px); color:#fff}
.hero .sub{color:var(--side-muted); font-size:17px; max-width:560px; margin-top:10px}
.hero .kpis{display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); margin-top:28px; border-top:1px solid var(--side-hair)}
.hero .kpis>div{padding:16px 18px 0; border-left:1px solid var(--side-hair)}
.hero .kpis>div:first-child{border-left:0; padding-left:0}
.hero .kpis .n{font-family:var(--font-display); font-size:38px; color:#fff}
.hero .kpis .l{font-size:12px; letter-spacing:.12em; text-transform:uppercase; color:var(--side-muted); font-weight:700; margin-top:3px}

/* ── Player ── */
.player{background:var(--side); border-radius:var(--radius-hero); color:#fff; padding:28px; position:relative; overflow:hidden;
  background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/10px 10px}
.stage{background:var(--panel); border-radius:var(--radius); color:var(--ink); border:1px solid var(--hair); aspect-ratio:16/10.2; display:none; place-items:center; position:relative; overflow:hidden}
.stage.on{display:grid}
.stage .frame{position:absolute; inset:0; display:flex; flex-direction:column; justify-content:center; padding:7% 8%; gap:8px}
.stage .frame .k{font-size:10.5px; letter-spacing:.14em; text-transform:uppercase; font-weight:700; color:var(--muted)}
.stage .frame h4{font-size:clamp(16px,1.5vw,20px); line-height:1.15}
.stage .frame .fill{flex:0 0 1px; background:var(--hair)}
.stage .frame ul{list-style:none; display:grid; gap:6px; font-size:13px; color:var(--body)}
.stage .frame ul li{display:flex; gap:9px; align-items:baseline}
.stage .frame ul li::before{content:""; width:7px; height:7px; background:var(--ink); flex:0 0 7px; transform:translateY(-1px)}
.stage .scheme{position:absolute; inset:0; padding:5% 6%; display:flex; flex-direction:column; gap:12px; justify-content:center}
.pbar{height:5px; background:rgba(255,255,255,.18); border-radius:999px; overflow:hidden; cursor:pointer}
.pbar i{display:block; height:100%; background:#fff; border-radius:999px}
.pctrl{display:flex; align-items:center; gap:15px; margin-top:14px}
.play-btn{width:46px; height:46px; border-radius:50%; background:#fff; color:var(--ink); display:grid; place-items:center; flex:0 0 46px; transition:transform var(--t-fast) var(--ease)}
.play-btn:hover{transform:scale(1.06)}
.play-btn svg{width:17px; height:17px; margin-left:1px}
.play-btn.paused svg{margin:0}
.time{font-size:13.5px; color:var(--side-muted); font-variant-numeric:tabular-nums}
.chapters{display:grid; gap:0}
.chapter{display:grid; grid-template-columns:52px 1fr auto; gap:12px; align-items:center; padding:12px 6px; border-bottom:1px solid var(--hair-soft); cursor:pointer; transition:background var(--t-fast) var(--ease)}
.chapter:hover{background:var(--hover)}
.chapter .t{font-size:12.5px; color:var(--muted); font-variant-numeric:tabular-nums}
.chapter b{font-size:15px; font-weight:600; color:var(--ink)}
.chapter.current b{color:#fff}
.chapter.current{background:var(--ink); border-radius:var(--radius); border-bottom-color:transparent}
.chapter .ic{width:30px; height:30px; border-radius:var(--radius-sm); background:var(--inset); display:grid; place-items:center; color:var(--muted)}
.chapter .ic svg{width:13px; height:13px}
.chapter.current .ic{background:#fff; color:var(--ink)}

/* ── Skill tree ── */
.tree-wrap{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); overflow:hidden}
.tree-head{display:flex; align-items:center; gap:12px; padding:14px 18px; border-bottom:1px solid var(--hair-soft); flex-wrap:wrap}
.tree-scroll{overflow:auto; cursor:grab; max-width:100%; position:relative}
.tree-scroll:active{cursor:grabbing}
.tree-board{position:relative; width:1120px; height:660px; transform-origin:0 0}
.tree-board svg{position:absolute; inset:0; pointer-events:none}
.node{position:absolute; width:96px; transform:translate(-50%,-50%); text-align:center; cursor:pointer; z-index:2}
.node .orb{width:64px; height:64px; margin:0 auto; border-radius:50%; background:var(--panel); border:2px solid var(--hair); display:grid; place-items:center; transition:all var(--t-fast) var(--ease); position:relative}
.node .orb svg{width:24px; height:24px; stroke:var(--muted)}
.node.done .orb{border-color:var(--ink); background:var(--ink)}
.node.done .orb svg{stroke:#fff}
.node.avail .orb{border-color:var(--ink); border-style:dashed}
.node.avail .orb svg{stroke:var(--ink)}
.node.avail .orb::after{content:"+"; position:absolute; right:-4px; top:-4px; width:18px; height:18px; background:var(--ink); color:#fff; border-radius:50%; font-size:13px; font-weight:700; display:grid; place-items:center}
.node.locked .orb{border-style:dashed}
.node .nm{margin-top:7px; font-size:13.5px; font-weight:700; color:var(--ink); line-height:1.15}
.node.locked .nm{color:var(--muted); font-weight:600}
.node .sub{font-size:11px; color:var(--muted)}
.node .xp{font-size:10.5px; letter-spacing:.08em; color:var(--muted); text-transform:uppercase; font-weight:700}
.node.done .xp{color:var(--good)}
.node:hover .orb{transform:scale(1.07)}
.node.sel .orb{box-shadow:0 0 0 4px var(--hair-soft)}
.branch-lab{position:absolute; transform:translateX(-50%); font-size:10.5px; font-weight:700; letter-spacing:.16em; text-transform:uppercase; color:var(--muted); z-index:1}
.edge{stroke:var(--hair); stroke-width:2; fill:none}
.edge.open{stroke:var(--ink)}
.edge.done{stroke:var(--ink); stroke-width:2.5}
.edge.locked2{stroke:var(--hair); stroke-dasharray:5 5}
.detail{border-top:1px solid var(--hair-soft); padding:18px}
.detail .req{display:flex; gap:8px; flex-wrap:wrap; margin:10px 0 14px}

/* ── Radar (pentagone) ── */
.pent{width:100%; max-width:290px}
.pent polygon.axis{fill:none; stroke:var(--hair); stroke-width:1}
.pent line.spoke{stroke:var(--hair-soft); stroke-width:1}
.pent polygon.stats{fill:rgba(2,2,2,.08); stroke:var(--ink); stroke-width:2}
.pent text{font-family:var(--font-body); font-size:10.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase; fill:var(--muted)}
.pent circle.pt{fill:var(--ink)}

/* ── Parcours map ── */
.map{position:relative; height:520px; background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); overflow:hidden}
.map svg{position:absolute; inset:0}
.stop{position:absolute; transform:translate(-50%,-50%); text-align:center; cursor:pointer; width:120px}
.stop .pin{width:44px; height:44px; margin:0 auto; border-radius:50%; background:var(--panel); border:2px solid var(--hair); display:grid; place-items:center; transition:all var(--t-fast) var(--ease)}
.stop .pin svg{width:17px; height:17px; stroke:var(--muted)}
.stop.done .pin{background:var(--ink); border-color:var(--ink)}
.stop.done .pin svg{stroke:#fff}
.stop.current .pin{border-color:var(--ink); border-style:dashed}
.stop.current .pin::after{content:""; position:absolute; width:8px; height:8px; border-radius:50%; background:var(--ink)}
.stop b{display:block; font-size:13.5px; color:var(--ink); margin-top:6px}
.stop span{font-size:11.5px; color:var(--muted)}
.stop:hover .pin{transform:scale(1.1)}

/* ── Fiche de lecture ── */
.fiche-head{display:flex; align-items:center; gap:12px; flex-wrap:wrap; margin-bottom:14px}
.fiche-body{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:28px 30px; max-width:720px}
.fiche-body h2{font-size:24px; margin:0 0 6px}
.fiche-body p{font-size:16px; line-height:1.6; margin:14px 0; color:var(--body); max-width:64ch}
.fiche-body h3{font-size:18px; margin:26px 0 4px; padding-top:18px; border-top:1px solid var(--hair-soft)}
.fiche-callout{border-left:3px solid var(--ink); background:var(--inset); border-radius:0 var(--radius) var(--radius) 0; padding:14px 18px; margin:18px 0}
.fiche-callout b{font-size:13px; letter-spacing:.1em; text-transform:uppercase; color:var(--muted)}
.fiche-callout p{margin:4px 0 0; font-size:15px}
.fiche-nav{display:flex; gap:10px; justify-content:space-between; margin-top:18px; max-width:760px}
.toc{font-size:14px}
.toc-item{padding:8px 10px; border-radius:var(--radius); color:var(--muted); display:flex; gap:9px; align-items:center; cursor:pointer}
.toc-item:hover{background:var(--hover); color:var(--ink)}
.toc-item.cur{background:var(--ink); color:#fff}
.toc-item .tn{font-size:12px; opacity:.7; font-variant-numeric:tabular-nums; width:26px}

/* ── Quiz ── */
.quiz-q{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:22px 24px; max-width:760px}
.quiz-q .qn{font-size:12px; font-weight:700; letter-spacing:.12em; text-transform:uppercase; color:var(--muted)}
.quiz-q h3{font-size:19px; margin:8px 0 14px}
.q-opt{display:flex; gap:12px; align-items:center; border:1px solid var(--hair); border-radius:var(--radius); padding:12px 15px; margin-top:9px; cursor:pointer; transition:all var(--t-fast) var(--ease); font-size:15px}
.q-opt:hover{border-color:var(--ink)}
.q-opt.sel{border-color:var(--ink); background:var(--inset)}
.q-opt .rd{width:17px; height:17px; border-radius:50%; border:2px solid var(--hair); flex:0 0 17px; display:grid; place-items:center}
.q-opt.sel .rd{border-color:var(--ink)}
.q-opt.sel .rd::after{content:""; width:9px; height:9px; border-radius:50%; background:var(--ink)}
.q-opt.right{border-color:var(--good); background:#EAF4EE}
.q-opt.wrong{border-color:var(--warn); background:#FBF0E6}
.quiz-side{display:grid; gap:14px; align-content:start}

/* ── Onboarding / diagnostic ── */
.ob-steps{display:flex; gap:0; margin-bottom:20px}
.ob-steps>div{flex:1; text-align:center; position:relative; padding-top:16px; font-size:12.5px; font-weight:700; color:var(--muted); text-transform:uppercase; letter-spacing:.08em}
.ob-steps>div::before{content:""; position:absolute; top:0; left:50%; transform:translateX(-50%); width:11px; height:11px; border-radius:50%; background:var(--panel); border:2px solid var(--hair)}
.ob-steps>div::after{content:""; position:absolute; top:5px; left:calc(50% + 8px); right:calc(-50% + 8px); height:1px; background:var(--hair)}
.ob-steps>div:last-child::after{display:none}
.ob-steps>div.on{color:var(--ink)}
.ob-steps>div.on::before{background:var(--panel); border-color:var(--ink); border-width:3px; box-shadow:inset 0 0 0 3px var(--panel), inset 0 0 0 5px var(--ink)}
.ob-steps>div.done::before{background:var(--ink); border-color:var(--ink)}
.ob-steps>div.done{color:var(--muted)}
.ob-hero{background:var(--side); border-radius:var(--radius-hero); padding:32px; color:#fff;
  background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/10px 10px}
.ob-hero h1{font-size:clamp(26px,3vw,40px); color:#fff}
.ob-dim{margin-bottom:14px}
.ob-dim .bar{height:11px; margin-top:6px}
.ob-note{font-size:12.5px; color:var(--muted)}

/* ── Profil public ── */
.pub-hero{background:var(--side); border-radius:var(--radius-hero); padding:34px; color:#fff; display:flex; gap:22px; align-items:center; flex-wrap:wrap;
  background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/10px 10px}
.pub-hero .avatar{width:76px; height:76px; font-size:30px; flex-basis:76px}
.pub-hero h1{font-size:clamp(24px,2.6vw,34px); color:#fff}
.pub-chip{border:1px solid var(--side-hair); border-radius:999px; padding:5px 13px; font-size:12.5px; color:var(--side-muted)}
.pent.sm{max-width:210px}
.share-row{display:flex; gap:8px; align-items:center; background:var(--inset); border:1px solid var(--hair-soft); border-radius:var(--radius); padding:9px 12px; font-size:13.5px; color:var(--muted); overflow:hidden}
.share-row code{font-family:ui-monospace,monospace; white-space:nowrap}

.tier{position:relative; display:flex; flex-direction:column; gap:0}
.tier .price{font-family:var(--font-display); font-size:44px; color:var(--ink); line-height:1}
.tier ul{list-style:none; display:grid; gap:9px; font-size:15px; margin:16px 0}
.tier ul li{display:flex; gap:9px; align-items:baseline}
.tier ul li svg{width:14px; height:14px; flex:0 0 14px; transform:translateY(2px)}
.tier ul li.no{color:var(--muted)}
.tier .flag{position:absolute; top:-12px; right:16px}

/* ── Hauts faits ── */
.feat{display:flex; gap:13px; align-items:flex-start; padding:14px 4px; border-bottom:1px solid var(--hair-soft)}
.feat:last-child{border-bottom:0}
.feat .medal{width:40px; height:40px; border-radius:var(--radius); display:grid; place-items:center; flex:0 0 40px; border:1px solid var(--hair)}
.feat .medal svg{width:17px; height:17px; stroke:var(--muted)}
.feat.on .medal{background:var(--ink); border-color:var(--ink)}
.feat.on .medal svg{stroke:#fff}
.feat b{font-size:15px; color:var(--ink); display:block}
.feat p{font-size:13.5px; color:var(--muted)}
.feat .date{margin-left:auto; font-size:12px; color:var(--muted); white-space:nowrap}

/* ── Logbook / timeline ── */
.tl{position:relative; padding-left:24px}
.tl::before{content:""; position:absolute; left:6px; top:6px; bottom:6px; width:1px; background:var(--hair)}
.tl-item{position:relative; padding:0 0 20px}
.tl-item::before{content:""; position:absolute; left:-23px; top:5px; width:11px; height:11px; border-radius:50%; background:var(--panel); border:2px solid var(--ink)}
.tl-item.mut::before{border-color:var(--hair)}
.tl-item .d{font-size:12px; color:var(--muted); font-weight:700; letter-spacing:.08em; text-transform:uppercase}

/* ── Tables ── */
table{width:100%; border-collapse:collapse; font-size:14.5px}
th{text-align:left; font-size:11.5px; font-weight:700; text-transform:uppercase; letter-spacing:.1em; color:var(--muted); padding:9px 12px; border-bottom:1px solid var(--hair)}
td{padding:11px 12px; border-bottom:1px solid var(--hair-soft)}
tr:last-child td{border-bottom:0}

/* ── Toast haut fait ── */
.toast{position:fixed; right:22px; bottom:22px; z-index:99; background:var(--ink); color:#fff; border-radius:var(--radius-lg); padding:14px 18px; display:flex; gap:12px; align-items:center; max-width:360px; transform:translateY(12px); opacity:0; pointer-events:none; transition:all var(--t-slow) var(--ease)}
.toast.on{transform:none; opacity:1}
.toast svg{width:22px; height:22px; stroke:#fff; flex:0 0 22px}
.toast b{display:block; font-size:11px; letter-spacing:.14em; text-transform:uppercase; color:var(--side-muted)}
.toast span{font-size:15px; font-weight:700}

/* ── Landing ── */
.land-hero{background:var(--side); border-radius:var(--radius-hero); padding:64px 48px; color:#fff; position:relative; overflow:hidden;
  background-image:repeating-conic-gradient(rgba(255,255,255,.05) 0% 25%,transparent 0% 50%) 0 0/10px 10px}
.land-hero h1{font-size:clamp(44px,5vw,72px); color:#fff; max-width:760px}
.land-hero .sub{color:var(--side-muted); font-size:19px; max-width:560px; margin-top:14px}
.pillars{display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:14px}
.pillar{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:24px; transition:all var(--t-fast) var(--ease)}
.pillar:hover{transform:translateY(-2px); border-color:var(--ink)}
.pillar .n{font-family:var(--font-display); font-size:15px; color:var(--muted)}
.pillar h3{font-size:22px; margin:8px 0 8px}
.pillar p{font-size:15px; color:var(--muted)}
.strip{display:flex; gap:0; border:1px solid var(--hair); border-radius:var(--radius-lg); overflow:hidden; background:var(--panel)}
.strip>div{flex:1; padding:18px 22px; border-left:1px solid var(--hair-soft); min-width:0}
.strip>div:first-child{border-left:0}
.screenshot{border:1px solid var(--side-hair); border-radius:var(--radius); overflow:hidden; background:var(--side); color:var(--side-muted); font-size:12.5px}
.screenshot .bar2{display:flex; gap:6px; padding:10px 14px; border-bottom:1px solid var(--side-hair)}
.screenshot .bar2 i{width:8px; height:8px; border-radius:50%; background:rgba(255,255,255,.25)}
.screenshot .body{padding:18px 20px; color:#fff; font-size:14px; display:grid; gap:8px}
.screenshot .body .mut{color:var(--side-muted)}

/* ── Checkout ── */
.co-wrap{max-width:860px; margin:0 auto}
.co-box{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); padding:26px}
.co-line{display:flex; justify-content:space-between; gap:14px; padding:10px 0; font-size:15px; border-bottom:1px solid var(--hair-soft)}
.co-line.total{border-bottom:0; font-size:17px; font-weight:700; color:var(--ink)}
.co-field{border:1px solid var(--hair); border-radius:var(--radius); padding:11px 14px; font-size:14.5px; color:var(--muted); background:var(--inset)}
.co-src{font-size:12.5px; color:var(--muted); background:var(--inset); border:1px solid var(--hair-soft); border-radius:var(--radius); padding:8px 12px}
.co-src code{font-family:ui-monospace,monospace; color:var(--ink)}

/* ── Guilde ── */
.msg{display:flex; gap:12px; padding:14px 4px; border-bottom:1px solid var(--hair-soft)}
.msg:last-child{border-bottom:0}
.msg .avatar{width:36px; height:36px; font-size:14px; flex-basis:36px}
.msg .who{font-size:13px; color:var(--muted)}
.msg .who b{color:var(--ink); font-size:14.5px}
.msg p{font-size:15px; margin-top:3px; line-height:1.5}
.composer{display:flex; gap:10px; margin-top:14px}
.composer input{flex:1; border:1px solid var(--hair); border-radius:var(--radius); padding:11px 14px; font-size:14.5px; background:var(--panel)}
.composer input:focus{outline:2px solid var(--ink); outline-offset:-1px}

/* ── Emails ── */
.mail{background:var(--panel); border:1px solid var(--hair); border-radius:var(--radius-lg); overflow:hidden; max-width:640px}
.mail .mh{padding:14px 18px; border-bottom:1px solid var(--hair-soft); background:var(--inset)}
.mail .mh .from{font-size:13px; color:var(--muted)}
.mail .mh .subj{font-size:15.5px; font-weight:700; color:var(--ink); margin-top:2px}
.mail .mb{padding:20px 22px; font-size:14.5px; line-height:1.6}
.mail .mb p{margin:10px 0}
.mail .mb .btn{margin-top:6px}
.mail .mf{padding:12px 18px; border-top:1px solid var(--hair-soft); font-size:12px; color:var(--muted)}

/* ── Mobile ── */
.mobilenav{display:none}
@media (max-width:1080px){
  .g4{grid-template-columns:repeat(2,minmax(0,1fr))} .g3{grid-template-columns:repeat(2,minmax(0,1fr))} .pillars{grid-template-columns:1fr}
  .row{flex-wrap:wrap}
}
@media (max-width:860px){
  .sidebar{display:none}
  .g2,.g3,.g4{grid-template-columns:1fr}
  .row{flex-direction:column}
  .mobilenav{display:flex; gap:8px; overflow-x:auto; padding:10px 14px; background:var(--panel); border-bottom:1px solid var(--hair-soft); -webkit-overflow-scrolling:touch}
  .mobilenav a{flex:0 0 auto; border:1px solid var(--hair); border-radius:999px; padding:7px 14px; font-size:13.5px; font-weight:600; color:var(--body); white-space:nowrap; cursor:pointer}
  .mobilenav a.cur{background:var(--ink); color:#fff; border-color:var(--ink)}
  .player .row{flex-direction:column}
  .stage{display:none !important}
  .stage.on{display:none !important}
  .content{padding:14px}
  .hero{padding:24px}
  .hero .kpis{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero .kpis>div{padding:12px 12px 0; border-left:1px solid var(--side-hair)}
  .hero .kpis>div:nth-child(odd){border-left:0; padding-left:0}
  .fiche-body{padding:20px}
  .pub-hero{padding:24px}
  .strip{flex-direction:column}
  .strip>div{border-left:0; border-top:1px solid var(--hair-soft)}
  .strip>div:first-child{border-top:0}
}
@media (prefers-reduced-motion:reduce){ *{animation:none !important; transition:none !important} }