/* Kayas Era : styles repris de la maquette v8c (mockups/src/maquette_v8.tpl.html), sans style en ligne ni URI de données (CSP style-src/img-src 'self').
   Polices : fonts.css (auto-hébergées) est chargé avant ce fichier ; sans elle, la pile système prend le relais. */
:root{
  color-scheme:light;
  --ground:#F5F1E4; --surface:#FBF8EE; --upcoming:#E8DFC2; --upcoming-2:#DDD2AE;
  --now:#F5E211; --on-now:#2C2E2A; --now-soft:rgba(255,255,255,.52);
  --done:#8ED462; --on-done:#1F2A16;
  --sky:#2BA0FF; --lilac:#EBC1FF; --coral:#FF705D; --on-tint:#2C2E2A;
  --text:#2C2E2A; --text-2:#54574E; --line:#2C2E2A; --rule:rgba(44,46,42,.16);
  --veil:rgba(44,46,42,.42); --land-1:#B9E39A; --land-2:#9FD3FF; --land-3:#FFC1B6;
  --shadow:0 18px 40px -22px rgba(44,46,42,.55);
  --ui:"Bricolage Grotesque",ui-sans-serif,system-ui,sans-serif;
  --sun:#F5E211; --ink:#2C2E2A;
  --ease:cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme:dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --ground:#10251B; --surface:#183526; --upcoming:#25432F; --upcoming-2:#2F5039; --now:#E2CE12; --sun:#E2CE12;
    --text:#F3EEDD; --text-2:#CFCBB8; --line:#F3EEDD; --rule:rgba(243,238,221,.18);
    --veil:rgba(4,12,8,.62); --shadow:0 18px 40px -22px rgba(0,0,0,.8); --land-1:#1A3D29; --land-2:#173A35; --land-3:#21452F;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --ground:#10251B; --surface:#183526; --upcoming:#25432F; --upcoming-2:#2F5039; --now:#E2CE12; --sun:#E2CE12;
  --text:#F3EEDD; --text-2:#CFCBB8; --line:#F3EEDD; --rule:rgba(243,238,221,.18);
  --veil:rgba(4,12,8,.62); --shadow:0 18px 40px -22px rgba(0,0,0,.8); --land-1:#1A3D29; --land-2:#173A35; --land-3:#21452F;
}
*{box-sizing:border-box;margin:0;padding:0}
[hidden]{display:none!important}
html{background:var(--ground);-webkit-text-size-adjust:100%;scrollbar-color:var(--upcoming-2) var(--ground)}
body{background:var(--ground);color:var(--text);font:450 15px/1.4 var(--ui);font-optical-sizing:auto;min-height:100dvh;caret-color:var(--sky)}
::selection{background:var(--lilac);color:var(--on-tint)}
:focus-visible{outline:3px solid var(--text);outline-offset:3px;border-radius:14px;box-shadow:0 0 0 6px var(--sky)}
a{color:inherit;text-underline-offset:3px;text-decoration-thickness:1.5px}
b,strong{font-weight:750}
.num{font-variant-numeric:tabular-nums lining-nums}
svg.i{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round}
button,input,select{font:inherit;color:inherit}
button{background:none;border:0;cursor:pointer;text-align:inherit}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}


/* Capsules */
.cap{display:inline-flex;align-items:center;gap:6px;min-height:28px;padding:3px 12px;border-radius:999px;font-size:13px;font-weight:700;line-height:1.2;color:var(--on-tint)}
.cap svg.i{width:15px;height:15px}
.cap.ok{background:var(--done)}
.cap.sky{background:var(--sky)}
.cap.lil{background:var(--lilac)}
.cap.warn{background:var(--coral)}
.cap.quiet{background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor}
.cap.ex{min-height:22px;padding:1px 9px;font-size:12px;background:transparent;color:inherit;box-shadow:inset 0 0 0 1.5px currentColor;font-weight:650}
button.cap{min-height:44px}

/* Land masses : flat areas at the page edges, never under text */
.land{display:none;position:absolute;left:0;right:0;top:0;bottom:0;z-index:0;pointer-events:none;overflow:hidden}
.land svg{position:absolute;display:block;height:auto}
.app{position:relative;z-index:1}
@media (min-width:1320px){body{position:relative}.land{display:block}.land .m3{width:280px;left:-150px;top:150px}.land .m1{width:300px;left:-150px;bottom:60px}.land .m2{width:300px;right:-150px;top:420px}}
/* App frame */
.app{max-width:460px;margin:0 auto;min-height:100dvh;padding:0 16px calc(92px + env(safe-area-inset-bottom))}
.top{display:flex;align-items:center;gap:8px;padding:10px 0 4px}
.mark{display:flex;align-items:center;gap:8px;font-weight:800;font-size:16px;letter-spacing:-.02em;margin-right:auto;white-space:nowrap}
#logo svg{display:block;width:32px;height:32px}
.wm{display:flex;flex-direction:column;line-height:1.05}
.wm small{font-size:12px;font-weight:650;letter-spacing:0;color:var(--text-2);margin-top:2px}
.iconbtn{display:grid;place-items:center;width:44px;height:44px;flex:none;border-radius:999px;color:var(--text)}
.iconbtn:hover{background:var(--surface)}
.vcap{max-width:58vw;min-width:0;flex:0 1 auto}
.top>*{min-width:0}
@media (max-width:359px){.mark{flex:none}.vcap{max-width:34vw}.wm small{display:none}.top{gap:4px}}
.not-yet{padding-left:18px;margin-top:6px}.not-yet li{margin-bottom:6px;font-size:15px;color:var(--text-2);max-width:52ch}
.vcap span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

.status{padding:4px 0 6px}
.income{display:flex;align-items:center;gap:14px}
.income .big{font-size:50px;font-weight:800;line-height:.9;letter-spacing:-.04em;white-space:nowrap}
.income .big small{font-size:26px;letter-spacing:-.02em}
.income .side2{display:flex;flex-direction:column;align-items:flex-start;gap:4px}
.income .lead{font-size:13px;color:var(--text-2)}
.paused .big{opacity:.38}

.energy{margin-top:12px}
.energy .row{display:flex;align-items:center;justify-content:space-between;gap:8px 10px;flex-wrap:wrap}
.energy .row p{font-size:14px}
.ebar{position:relative;display:flex;gap:3px;height:16px;margin-top:9px}
.ebar i{display:block;height:100%;min-width:8px;border-radius:999px;box-shadow:inset 0 0 0 2px var(--line);background:var(--upcoming);transition:background .25s var(--ease)}
.ebar i.now{background:var(--now)}
.ebar i.done{background-color:var(--done);background-image:repeating-linear-gradient(135deg,rgba(31,42,22,.45) 0 1.6px,transparent 1.6px 5.6px)}
.ebar i.rest{box-shadow:none;border:2px dashed var(--line);background:transparent;opacity:.6}
.ebar .cut{position:absolute;top:-5px;width:3px;height:26px;background:var(--line);border-radius:999px}
.eticks{position:relative;height:18px;font-size:12px;font-weight:700;margin-top:3px}
.eticks span{position:absolute;top:0;transform:translateX(-100%);white-space:nowrap}

/* One alert at most */
.alert{display:flex;gap:12px;align-items:flex-start;margin:10px 0 4px;padding:12px 14px;border-radius:22px 30px 20px 28px;background:var(--coral);color:var(--on-tint)}
.alert.info{background:var(--sky)}
.alert.calm{background:var(--lilac)}
.alert svg.i{margin-top:2px}
.alert p{font-size:15px;line-height:1.35}
.alert p+p{margin-top:4px;font-size:14px}
.alert .acts{margin-top:8px}
.alert .btn{min-height:44px;font-size:15px;padding:0 16px}
.alert input{width:100%;min-height:44px;margin-top:8px;padding:0 14px;border-radius:14px;border:2px solid var(--on-tint);background:rgba(255,255,255,.7);color:var(--on-tint)}

/* Views */
.view-title{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin:14px 0 4px}
.view-sub{font-size:15px;color:var(--text-2);max-width:52ch}

/* Passage : every step on one path, the current one open */
.stage{margin-top:12px}
.pass{list-style:none}
.pass>li+li{margin-top:14px;position:relative}
.pass>li+li::before{content:"";position:absolute;left:30px;top:-14px;height:14px;border-left:3px dotted var(--line)}
.lobe{position:relative;padding:16px 18px;border-radius:44px 28px 48px 24px/32px 44px 28px 40px;background:var(--now);color:var(--on-now)}
.pass>li:nth-child(2n) .lobe{border-radius:28px 46px 26px 44px/40px 26px 44px 30px}
.pass>li:nth-child(3n) .lobe{border-radius:46px 26px 40px 30px/28px 38px 30px 42px}
.lobe.now,.pass>li .lobe.now{border-radius:84px 30px 104px 28px/52px 88px 34px 76px}
.lobe.up{background:var(--upcoming);color:var(--text);padding:14px 16px}
.lobe.done{background:var(--done);color:var(--on-done);padding:8px 8px 8px 14px}
.lobe.locked{background:transparent;border:2px dashed var(--line);color:var(--text);padding:12px 14px}
.lobe.quiet{background:var(--lilac);color:var(--on-tint)}
.hd{display:flex;align-items:center;gap:10px}
.disc{display:grid;place-items:center;flex:none;width:30px;height:30px;border-radius:50%;background:var(--on-now);color:var(--now);font-weight:800;font-size:14px}
.disc svg.i{width:16px;height:16px}
.lobe.up .disc{background:var(--text);color:var(--upcoming)}
.lobe.done .disc{background:var(--on-done);color:var(--done)}
.lobe.locked .disc{background:transparent;color:var(--text);box-shadow:inset 0 0 0 2px var(--line)}
.cost{margin-left:auto;display:inline-flex;align-items:center;gap:4px;font-size:13px;font-weight:750;white-space:nowrap}
.cost svg.i{width:15px;height:15px}
.lobe h2{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15;text-wrap:balance}
.lobe.now h2{font-size:36px;line-height:.95;letter-spacing:-.035em;margin-top:10px;text-wrap:balance}
.lobe.done h2{font-size:16px}
.lobe.done h2{flex:1;min-width:0}
.lobe.done .what{display:block;font-size:13px;font-weight:650;letter-spacing:0;margin-top:1px}
.undo{min-height:44px;padding:0 12px;border-radius:999px;font-weight:700;font-size:13px;text-decoration:underline;text-underline-offset:3px}
.say{margin-top:8px;font-size:16px;line-height:1.38;max-width:44ch;text-wrap:pretty}
.lobe.up .say,.lobe.locked .say{font-size:14px;margin-top:6px}
.line{margin-top:6px;font-size:14px;max-width:52ch}
.why{display:block;margin-top:2px;font-size:13px;font-weight:600;opacity:.9}

.see{display:flex;gap:10px;align-items:flex-start;margin-top:12px;padding:10px 14px;border-radius:22px 30px 20px 28px;background:var(--lilac);color:var(--on-tint)}
.see svg.i{margin-top:2px}
.see b{display:block;font-size:13px}
.see span{font-size:16px;font-weight:650}

.grid{list-style:none;margin-top:12px;display:grid;gap:6px}
.grid li{display:grid;align-content:center;gap:2px;min-height:44px;padding:8px 14px;border-radius:18px 24px 16px 22px;background:var(--now-soft);font-size:15px;line-height:1.3}
.grid .gx{font-size:13px;font-weight:650}
.gnote{margin-top:6px;font-size:13px;font-weight:600}
.hg{width:100%;margin-top:12px;border-collapse:collapse;font-size:14px;font-variant-numeric:tabular-nums}
.hg th,.hg td{padding:6px 4px;text-align:center;border-bottom:1px solid var(--rule);white-space:nowrap}
.hg th{font-size:12px;font-weight:700;color:var(--text-2)}
.hg td:first-child,.hg th:first-child{text-align:left}
.hg td.no{color:var(--text-2)}

/* Sub-steps */
.subs{list-style:none;margin-top:12px;display:grid;gap:8px}
.sub{display:grid;grid-template-columns:44px 1fr;gap:4px 8px;align-items:start;padding:8px 12px 10px 6px;border-radius:20px 26px 18px 24px;background:var(--now-soft)}
.sub.is-done{opacity:.72}
.sub.is-done .sub-t{text-decoration:line-through;text-decoration-thickness:2px}
.chk{display:grid;place-items:center;width:44px;height:44px;border-radius:999px}
.chk span{display:grid;place-items:center;width:26px;height:26px;border-radius:9px;box-shadow:inset 0 0 0 2px var(--on-now);background:var(--surface)}
.chk[aria-checked="true"] span{background:var(--on-now);color:var(--now)}
.chk svg.i{width:16px;height:16px;opacity:0}
.chk[aria-checked="true"] svg.i{opacity:1}
.sub-b{padding-top:10px;min-width:0}
.sub-t{font-weight:750;font-size:16px;line-height:1.25}
.sub-m{display:flex;flex-wrap:wrap;gap:4px 10px;margin-top:3px;font-size:13px;font-weight:700}
.sub-m span{display:inline-flex;align-items:center;gap:4px}
.sub-m svg.i{width:14px;height:14px}
.sub-x{margin-top:4px;font-size:14px}
.sub .see{margin-top:8px}
.recruit{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}

/* Drawn move */
.swapmap{margin:10px 0 0}
.swapmap svg{display:block;width:100%;max-width:380px;height:auto;overflow:visible}
.swapmap .pl{font:750 14px var(--ui);fill:var(--text)}
.swapmap .nmk{font:800 14px var(--ui);fill:currentColor}
.swap{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:6px;margin-top:8px}
.who{padding:8px 12px;border-radius:18px 24px 16px 22px;background:var(--surface);color:var(--text);font-size:13px;line-height:1.25}
.who b{display:block;font-size:15px}
.who.b{border-radius:24px 16px 22px 18px}
.swap svg.i{width:28px;height:28px}
.stay{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.pinned{display:inline-flex;align-items:center;gap:6px;min-height:30px;padding:3px 12px 3px 6px;border-radius:999px;background:var(--surface);color:var(--text);font-size:13px}
.pinned i{width:18px;height:18px;border-radius:50%;background:var(--line);box-shadow:inset 0 0 0 4px var(--surface)}

/* Buttons */
.acts{display:flex;flex-wrap:wrap;gap:8px;margin-top:14px}
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:48px;padding:0 20px;border-radius:999px;font-weight:750;font-size:16px;border:2px solid currentColor;transition:transform .15s var(--ease),background .2s var(--ease),opacity .2s}
.btn:active{transform:scale(.98)}
.btn.pri{flex:1 1 170px;background:var(--on-now);color:var(--now);border-color:var(--on-now)}
.lobe.up .btn.pri,.sheet .btn.pri,.plan .btn.pri,.alert .btn.pri{background:var(--text);color:var(--ground);border-color:var(--text)}
.alert .btn.pri{background:var(--on-tint);color:var(--surface);border-color:var(--on-tint)}
.btn.sec{background:transparent}
.btn[disabled]{opacity:.55;cursor:not-allowed}
.btn.busy{opacity:.75}
.link{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin-top:4px;font-weight:650;text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1.5px}
.lock-note{display:flex;gap:8px;align-items:flex-start;margin-top:8px;font-size:14px}

/* Cards : the one under your eyes, then the list in screen order */
.co-h{display:flex;align-items:center;gap:8px;margin:14px 0 4px;font-size:13px;font-weight:800;line-height:1.2;letter-spacing:0}
.co-h::after{content:"";flex:1;border-top:2px dotted currentColor;opacity:.4}
.hands{list-style:none;display:grid;gap:6px}
.hand{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:4px 6px;min-height:48px;padding:2px 4px 2px 0;border-top:1px solid rgba(44,46,42,.22);width:100%;text-align:left}
.hand .nm{font-weight:750;font-size:15px}
.hand .cd{font-weight:650;font-size:15px}
.hand .go{display:grid;place-items:center;width:32px;height:32px;border-radius:999px}
.hand.is-taken .cd{font-weight:550}
.hand.is-current{background:var(--surface);box-shadow:inset 0 0 0 2px var(--on-now)}
.hand.is-held{background:transparent;box-shadow:inset 0 0 0 2px var(--on-now)}
.hand .tick{display:grid;place-items:center;width:36px;height:44px}
.hand .tick span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--on-now)}
.hand.is-taken .tick span{background:var(--on-now);color:var(--now)}
.hand .tick svg.i{width:14px;height:14px;opacity:0}
.hand.is-taken .tick svg.i{opacity:1}
.fence{display:flex;gap:8px;align-items:flex-start;margin-top:10px;padding-top:10px;border-top:3px dashed var(--on-now);font-size:15px;font-weight:750}
.reading{display:flex;align-items:center;gap:10px;margin-top:12px;font-weight:700}
.wait{position:relative;flex:none;width:44px;height:6px;border-radius:999px;background:var(--rule);overflow:hidden}
.wait i{position:absolute;inset:0;border-radius:999px;background:currentColor;transform-origin:left;animation:fill 1.7s var(--ease) both}
@keyframes fill{from{transform:scaleX(.05)}to{transform:scaleX(1)}}
.moves{list-style:none;margin-top:10px;display:grid;gap:6px}
.moves li{display:flex;align-items:center;gap:8px;flex-wrap:wrap;min-height:44px;padding:6px 14px;border-radius:18px 24px 16px 22px;background:var(--now-soft);font-size:15px}
.moves .arr svg.i{width:16px;height:16px;vertical-align:-3px}

/* Card pattern : how (once), then one row per training */
.where{display:flex;align-items:center;gap:5px;font-size:14px;font-weight:650;letter-spacing:0;margin-top:3px}
.where svg.i{width:15px;height:15px}
.lobe.now h2 .where{font-size:16px}
.how{margin:12px 0 0 0;padding:0;list-style:none;display:grid;gap:6px}
.how li{display:grid;grid-template-columns:22px 1fr;gap:8px;align-items:start;font-size:15px}
.how li svg.i{margin-top:1px}
.hands .co-h{list-style:none}
.hands li{list-style:none}
.hand.is-future{grid-template-columns:1fr;min-height:44px;padding-left:36px}
.hand.is-future .nm{font-weight:650}
.hand-now{margin:8px 0;padding:12px 14px;border-radius:24px 32px 22px 30px;background:var(--surface);color:var(--text);border:2px solid var(--on-now)}
.hn-t{font-size:16px;display:flex;flex-wrap:wrap;align-items:center;gap:6px}
.pick{margin-top:6px;font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05}
.hand-now .reading{margin-top:8px;color:var(--text-2)}
.hand-now .btn.pri{background:var(--text);color:var(--ground);border-color:var(--text)}

.take{display:grid;grid-template-columns:1fr 44px;align-items:center;border-top:1px solid rgba(44,46,42,.22)}
.take .tk{display:grid;grid-template-columns:36px 1fr;align-items:center;gap:4px 6px;min-height:52px;padding:4px 0;width:100%;text-align:left}
.take .tick{display:grid;place-items:center;width:36px;height:44px}
.take .tick span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--on-now)}
.take .tick svg.i{width:14px;height:14px;opacity:0}
.take.is-taken .tick span{background:var(--on-now);color:var(--now)}
.take.is-taken .tick svg.i{opacity:1}
.take .nm{font-weight:750;font-size:15px}
.take .cd{font-weight:650;font-size:15px}
.take .ar svg.i{width:14px;height:14px;vertical-align:-2px}
.take .go{display:grid;place-items:center;width:44px;height:44px;border-radius:999px}
.take.is-taken .nm,.take.is-taken .cd{opacity:.75}

/* Decision card (reset, retirement) */
.facts{list-style:none;margin-top:12px}
.facts li{display:grid;gap:1px;padding:8px 0;border-top:1px solid rgba(44,46,42,.2);font-size:15px}
.facts li:last-child{border-bottom:1px solid rgba(44,46,42,.2)}
.facts li span:first-child{font-size:13px;font-weight:650;opacity:.85}
.facts li span:last-child{font-weight:750}
.lobe:not(.now) .facts li,.sheet .facts li,.panel .facts li{border-color:var(--rule)}
@media (min-width:600px){.facts li{grid-template-columns:170px 1fr;gap:12px;align-items:baseline}}
.range{font-size:13px;font-weight:600}

/* À venir */
.later{margin-top:22px}
.later h2,.plan h2{font-size:19px;font-weight:800;letter-spacing:-.02em}
.later ul{list-style:none;margin-top:8px;display:grid;gap:6px}
.later li{display:flex;gap:10px;align-items:baseline;padding:10px 14px;border-radius:18px 24px 16px 22px;background:var(--surface);font-size:15px}
.later li .d{flex:none;width:58px;font-weight:800;font-size:14px}

/* Plan */
.plan{margin-top:6px}
.plan section{margin-top:18px}
.chart{margin-top:10px;padding:14px 12px 8px;border-radius:26px 34px 24px 32px;background:var(--surface)}
.chart svg{display:block;width:100%;height:auto}
.chart text{font-family:var(--ui);font-size:12px;font-weight:650;fill:var(--text-2)}
.chart .lbl{fill:var(--text);font-weight:800}
.legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:6px;font-size:13px;font-weight:650}
.legend span{display:inline-flex;align-items:center;gap:6px}
.legend i{display:inline-block;width:18px;height:10px;border-radius:999px}
.miles{list-style:none;margin-top:8px;display:grid;gap:6px}
.miles li{display:flex;gap:12px;align-items:baseline;padding:10px 14px;border-radius:18px 24px 16px 22px;background:var(--upcoming);font-size:15px}
.miles li .d{flex:none;width:58px;font-weight:800;font-size:14px}
.miles li .v{margin-left:auto;font-weight:800;white-space:nowrap}
.dec{margin-top:8px;padding:14px 16px;border-radius:28px 46px 26px 44px/40px 26px 44px 30px;background:var(--upcoming)}
.dec h3{font-size:19px;font-weight:800;letter-spacing:-.02em;line-height:1.15}
.dec p{margin-top:4px;font-size:14px}
.kv{list-style:none;margin-top:10px}
.kv li{display:grid;gap:1px;padding:8px 0;border-top:1px solid var(--rule);font-size:15px}
.kv li span:first-child{font-size:13px;font-weight:650;color:var(--text-2)}
.kv li span:last-child{font-weight:750}
@media (min-width:600px){.kv li{grid-template-columns:200px 1fr;gap:12px;align-items:baseline}}
details.fold{margin-top:8px;border-radius:22px 30px 20px 28px;background:var(--surface)}
details.fold summary{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:52px;padding:8px 16px;cursor:pointer;font-weight:750;list-style:none}
details.fold summary::-webkit-details-marker{display:none}
details.fold summary svg.i{transition:transform .2s var(--ease)}
details.fold[open] summary svg.i{transform:rotate(180deg)}
details.fold .in{padding:0 16px 14px;font-size:14px}
.emps{list-style:none;display:grid;gap:4px}
.emps li{display:grid;grid-template-columns:1fr auto;gap:2px 10px;padding:8px 0;border-top:1px solid var(--rule)}
.emps li .r{font-size:13px;color:var(--text-2);grid-column:1/-1}
.emps li .v{font-weight:750}

/* Tabs */
.tabs{position:fixed;left:0;right:0;bottom:0;z-index:5;display:flex;justify-content:center;gap:8px;padding:6px 16px calc(6px + env(safe-area-inset-bottom));background:var(--ground);border-top:2px solid var(--line)}
.tab{display:flex;flex-direction:column;align-items:center;gap:2px;min-width:120px;min-height:54px;padding:4px 10px;font-size:13px;font-weight:600;color:var(--text);border-radius:999px}
.tab span{display:grid;place-items:center;width:58px;height:30px;border-radius:999px}
.tab[aria-current="page"]{font-weight:800}
.tab[aria-current="page"] span{background:var(--lilac);color:var(--on-tint)}

/* Sheets : bottom on phone, side panel on desktop */
.veil{position:fixed;inset:0;z-index:20;background:var(--veil);opacity:0;transition:opacity .2s var(--ease)}
.veil.on{opacity:1}
.sheet{position:fixed;z-index:21;left:0;right:0;bottom:0;max-height:88dvh;overflow:auto;padding:10px 18px calc(22px + env(safe-area-inset-bottom));background:var(--ground);color:var(--text);border-radius:30px 30px 0 0;box-shadow:var(--shadow);transform:translateY(16px);opacity:0;transition:transform .25s var(--ease),opacity .2s var(--ease)}
.sheet.on{transform:none;opacity:1}
.sheet .grab{width:44px;height:5px;border-radius:999px;background:var(--rule);margin:2px auto 10px}
.sheet .sh-hd{display:flex;align-items:flex-start;gap:10px}
.sheet h2{font-size:26px;font-weight:800;letter-spacing:-.03em;line-height:1.05;margin-right:auto;padding-top:8px;text-wrap:balance}
.sheet h3{font-size:16px;font-weight:800;margin-top:16px}
.sheet p{margin-top:6px;font-size:15px;max-width:56ch}
.sheet .note{font-size:13px;color:var(--text-2)}
.gc{list-style:none;display:grid;gap:8px;margin-top:12px}
.gc li{padding:12px 14px;border-radius:22px 30px 20px 28px;background:var(--upcoming)}
.gc li.best{background:var(--now);color:var(--on-now)}
.gc .t{display:flex;justify-content:space-between;gap:8px;font-weight:800;font-size:16px}
.gc .rr{position:relative;height:14px;margin-top:10px;border-radius:999px;background:var(--rule)}
.gc .rr i{position:absolute;top:0;bottom:0;border-radius:999px;background:currentColor;opacity:.35}
.gc .rr b{position:absolute;top:-3px;width:4px;height:20px;border-radius:999px;background:currentColor}
.gc .rv{display:flex;justify-content:space-between;margin-top:4px;font-size:13px;font-weight:650}
.scale{display:flex;justify-content:space-between;margin-top:6px;font-size:12px;font-weight:650;color:var(--text-2)}
.qi{width:100%;border-collapse:separate;border-spacing:0 6px;margin-top:8px;font-size:14px}
.qi th{font-size:12px;font-weight:700;text-align:left;color:var(--text-2);padding:0 4px}
.qi td{padding:0 3px}
.qi input{width:100%;min-height:44px;padding:0 8px;border-radius:14px;border:2px solid var(--rule);background:var(--surface);text-align:center}
.qi input:focus{border-color:var(--sky);outline:0}
.qi .vd{font-weight:750;font-size:13px;text-align:left;min-width:92px}
.opt{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.opt label{position:relative}
.opt input{position:absolute;opacity:0;width:1px;height:1px}
.opt span{display:inline-flex;flex-direction:column;justify-content:center;min-height:48px;padding:4px 14px;border-radius:18px;border:2px solid var(--line);font-weight:700;font-size:14px;cursor:pointer}
.opt span small{font-size:12px;font-weight:600}
.opt input:checked+span{background:var(--now);color:var(--on-now);border-color:var(--on-now)}
.opt input:focus-visible+span{outline:3px solid var(--text);outline-offset:3px}
.tog{display:flex;align-items:center;gap:12px;min-height:48px;margin-top:6px;cursor:pointer;font-size:15px}
.tog input{width:24px;height:24px;accent-color:var(--text)}

/* Motion : one moment, a step arrives */
@keyframes arrive{from{opacity:0;transform:translateY(14px)}to{opacity:1;transform:none}}
.enter{animation:arrive .32s var(--ease) both}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}

/* Desktop : state on the left, the passage on the right */
@media (min-width:980px){
  .app{position:relative;max-width:1200px;display:grid;grid-template-columns:380px minmax(0,1fr);column-gap:44px;align-items:start;padding:0 32px 48px}
  .top{grid-column:1/-1;padding:16px 0 8px}
  .side{grid-column:1;position:sticky;top:12px}
  .main{grid-column:2;min-width:0}
  .vcap{max-width:none}
  .income .big{font-size:62px}
  .lobe.now{padding:30px 34px 28px;border-radius:120px 40px 150px 36px/70px 120px 44px 100px}
  .lobe.now h2{font-size:56px}
  .say{font-size:18px}
  .tabs{position:absolute;top:14px;left:50%;right:auto;bottom:auto;transform:translateX(-50%);border:0;background:transparent;padding:0}
  .tab{flex-direction:row;min-width:0;min-height:44px;gap:6px;padding:0 8px}
  .sheet{left:auto;top:0;width:470px;max-height:none;border-radius:34px 0 0 34px;padding:22px 26px 30px;transform:translateX(24px)}
  .sheet .grab{display:none}
}
@media (max-width:979px){.later.desk{display:none}}
@media (min-width:980px){.later.mob{display:none}}
/* Candidate chain and reroll */
.chain{list-style:none;display:flex;flex-wrap:wrap;gap:6px;margin:10px 0 2px}
.chain li{display:inline-flex;align-items:center;gap:4px;min-height:30px;padding:3px 12px;border-radius:999px;font-size:13px;background:var(--now-soft);color:var(--on-now)}
.chain li.is-done{background:var(--done);color:var(--on-done)}
.round{font-size:19px;font-weight:800;letter-spacing:-.02em;margin-top:12px}
.take.is-reroll .tk{cursor:default}
.take .rr-ic>span{background:var(--lilac)!important;color:var(--on-tint)!important}
.take .rr-ic svg.i{opacity:1!important}
.rr-act{display:block;margin-top:8px}
.btn.sm{min-height:44px;padding:0 16px;font-size:14px}
.take .cap.lil.chk-tag{min-height:24px;padding:1px 9px;font-size:12px;margin-right:4px;vertical-align:1px}
.fb{display:block;margin-top:4px;font-size:14px;font-weight:650}
/* Info block inside a sub-step list : no checkbox */
.sub.info{grid-template-columns:1fr;padding:10px 14px 12px}
.sub.info .sub-b{padding-top:0}
/* Tappable term : inline, enlarged hit area without moving the line */
.term{display:inline-block;padding:12px 0;margin:-12px 0;font:inherit;color:inherit;text-decoration:underline dotted 1.5px;text-underline-offset:3px;cursor:help}
/* Card-opening : primary button stays reachable on phone */
@media (max-width:979px){.lobe.now .acts.stick{position:sticky;bottom:calc(76px + env(safe-area-inset-bottom));z-index:3;margin-left:-6px;margin-right:-6px;padding:10px 6px 8px;background:linear-gradient(to bottom,transparent,var(--surface) 35%)}}
/* End : done steps folded */
.end{padding:22px 20px}
.lobe.done h2.end-t{font-size:36px;font-weight:800;line-height:.95;letter-spacing:-.035em;text-wrap:balance}
.end-l{margin-top:8px;font-size:15px;max-width:52ch;text-wrap:pretty}
.end-l.big{margin-top:12px;font-size:16px;line-height:1.38}
.end-warn{margin-top:12px;padding:10px 14px;border-radius:22px 30px 20px 28px;background:var(--coral);color:var(--on-tint);font-size:15px;font-weight:700;max-width:52ch;text-wrap:pretty}
.end-l.sec{font-size:14px;font-weight:600}
.end-l .cap{vertical-align:middle}
/* Welcome (first open) */
.field{display:block;margin-top:12px}
.field>span{display:block;font-size:13px;font-weight:750}
.field input{width:100%;min-height:48px;margin-top:6px;padding:0 14px;border-radius:14px;border:2px solid var(--on-now);background:rgba(255,255,255,.7);color:var(--on-now)}
.field input:focus{outline:3px solid var(--on-now);outline-offset:2px}
.help{margin-top:6px;font-size:14px;max-width:48ch}
.lobe.now .tog input{accent-color:var(--on-now)}
.classed{display:flex;gap:10px;align-items:flex-start;flex-wrap:wrap;margin:4px 0 12px;padding:10px 14px;border-radius:22px 30px 20px 28px;background:var(--surface);color:var(--text);font-size:15px}
.classed p{flex:1 1 220px;padding-top:2px}
.classed .link{margin-top:-8px;margin-bottom:-8px}
.premiere-note{margin-top:6px;font-size:15px;color:var(--text-2);max-width:40ch}
/* Real switch */
.switch{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:48px;margin-top:6px;cursor:pointer;font-size:15px;font-weight:650}
.switch input{appearance:none;-webkit-appearance:none;position:relative;flex:none;width:52px;height:32px;margin:6px 0;border-radius:999px;border:2px solid var(--line);background:var(--upcoming);cursor:pointer;transition:background .2s var(--ease)}
.switch input::after{content:"";position:absolute;top:3px;left:3px;width:22px;height:22px;border-radius:50%;background:var(--line);transition:transform .2s var(--ease)}
.switch input:checked{background:var(--now);border-color:var(--on-now)}
.switch input:checked::after{transform:translateX(20px);background:var(--on-now)}
/* Open counter : each hand ticks itself as you open it */
.count{margin-top:10px;font-size:16px;font-weight:650;line-height:1.3}
.count b{font-weight:800}
.orow{display:grid;grid-template-columns:36px 1fr auto;align-items:center;gap:4px 6px;min-height:44px;padding:0 10px 0 0;border-top:1px solid rgba(44,46,42,.22)}
.orow .nm{font-weight:750;font-size:15px}
.orow .st{font-size:13px;font-weight:700}
.orow .tick,.take .tick{display:grid;place-items:center;width:36px;height:44px}
.orow .tick span{display:grid;place-items:center;width:24px;height:24px;border-radius:50%;box-shadow:inset 0 0 0 2px var(--on-now)}
.orow .tick svg.i{width:14px;height:14px;opacity:0}
.orow.is-open .tick span{background:var(--on-now);color:var(--now)}
.orow.is-open .tick svg.i{opacity:1}
.is-next{background:var(--now-soft);border-radius:14px;border-top-color:transparent!important;box-shadow:inset 0 0 0 2px var(--on-now)}
.is-next+li{border-top-color:transparent}
.acts.stick .btn.sec{background:var(--now)}
@media (max-width:979px){.lobe.now .acts.stick{margin:10px -14px 0;padding:8px 14px;background:var(--now)}}
/* Long current step : yellow only on its header and on the next row */
.lobe.now.long{padding:0;overflow:clip;background:var(--surface);color:var(--text);box-shadow:inset 0 0 0 4px var(--sun)}
.lobe.now.long .lh{padding:16px 18px 14px;background:var(--sun);color:var(--ink)}
.lobe.now.long .lb{padding:2px 18px 30px;--on-now:var(--text);--now:var(--surface);--now-soft:var(--upcoming)}
.lobe.now.long .lb .take,.lobe.now.long .lb .orow,.lobe.now.long .lb .hand{border-top-color:var(--rule)}
.lobe.now.long .lb .is-next{background:var(--sun);color:var(--ink);--on-now:var(--ink);--now:var(--sun);box-shadow:none}
@media (min-width:980px){.lobe.now.long{padding:0}.lobe.now.long .lh{padding:30px 34px 22px}.lobe.now.long .lb{padding:4px 34px 40px}}
/* Tappable capsule (opens an explanation) */
.cap.tap{text-decoration:underline dotted 1.5px;text-underline-offset:3px;cursor:help}
/* Two sub-steps inside one step */
.chain li.is-now{box-shadow:inset 0 0 0 2px var(--on-now)}

/* Ajouts J3 */
.sprite{position:absolute}
.sheet .note.tight{margin-top:4px}
.sheet .facts{margin-top:12px}
.qi .vd.yes{font-weight:800}
.relire{min-height:44px;margin-top:-6px;font-size:13px}
.relire[disabled]{opacity:.6;cursor:default;text-decoration:none}
.plan-note{margin-top:10px}
.field input[type=password],.field input[type=text]{font-size:16px}
.take .why,.hand-now .why{display:block}
noscript p{padding:16px}

/* Plan : états, repères de légende, tableau de la courbe (AJOUT J5) */
.plan-range{color:var(--text-2)}
.plan-start{margin-top:4px}
.plan-banner{margin-top:10px;padding:10px 14px;border-radius:20px 28px 18px 26px;background:var(--surface)}
.plan-banner .plan-wait{margin-top:6px}
.plan-wait{margin-top:8px}
.pbar{display:block;width:100%;max-width:420px;height:12px;margin:8px 0;appearance:none;-webkit-appearance:none;border:2px solid var(--line);border-radius:999px;background:var(--surface);overflow:hidden}
.pbar::-webkit-progress-bar{background:var(--surface)}
.pbar::-webkit-progress-value{background:var(--now);border-radius:999px}
.pbar::-moz-progress-bar{background:var(--now)}
.legend i.k-now{background:var(--now);box-shadow:inset 0 0 0 2px var(--line)}
.legend i.k-zone{background:var(--lilac)}
.legend i.k-base{height:0;border-radius:0;border-top:3px dashed var(--line)}
.miles li .d{width:auto;min-width:58px;white-space:nowrap}
.ctab{width:100%;border-collapse:collapse;font-size:13px}
.ctab caption{text-align:left;font-weight:700;padding-bottom:6px}
.ctab th,.ctab td{padding:8px 4px;text-align:right;border-top:1px solid var(--rule);font-weight:600}
.ctab thead th{font-size:12px;color:var(--text-2);vertical-align:bottom}
.ctab th[scope=row],.ctab thead th:first-child{text-align:left}
.not-yet-box{margin-top:26px}