/* ===================== NAVIGATION PRINCIPALE & PAGES ===================== */
  :root{--cat:#E3698F;}
  .hud-sub{font-size:.62rem; color:var(--text-muted); font-family:var(--font-mono);}
  .bell{position:relative; width:42px; height:42px; border-radius:12px; background:var(--surface-2); border:1px solid var(--border); font-size:1.15rem; flex:none;}
  .bell:hover{border-color:var(--accent);}
  .hud-btns{display:flex; gap:8px; flex:none; align-items:center;}
  .bell b{position:absolute; top:-6px; right:-6px; min-width:18px; height:18px; padding:0 4px; border-radius:9px; background:#FF5A5A; color:#fff; font-size:.62rem; line-height:18px; font-family:var(--font-mono);}
  .mainnav{display:flex; gap:4px; margin-top:12px; padding-top:10px; border-top:1px solid var(--border); overflow-x:auto; scrollbar-width:none;}
  .mainnav::-webkit-scrollbar{display:none;}
  .nav-item{flex:1 1 0; min-width:max-content; display:flex; align-items:center; justify-content:center; gap:7px; background:none; border:1px solid transparent; border-radius:10px; padding:8px 10px; color:var(--text-muted); font-size:.8rem; font-weight:700; transition:background .15s, color .15s;}
  .nav-item:hover{color:var(--text); background:var(--surface-2);}
  .nav-item.active{color:#fff; background:color-mix(in srgb, var(--cat) 22%, transparent); border-color:color-mix(in srgb, var(--cat) 60%, transparent); box-shadow:inset 0 -2px 0 var(--cat);}
  .nav-ic{font-size:1.05rem; line-height:1;}
  .nav-more{display:none;}
  .nav-set{flex:0 0 auto;} .nav-set .nav-lb{display:none;}
  #pages{display:flex; flex-direction:column;}
  .page{display:flex; flex-direction:column; gap:16px;}
  .page[hidden]{display:none;}
  .page-head{display:flex; align-items:center; gap:14px; padding:6px 2px 0;}
  .page-ic{width:48px; height:48px; border-radius:14px; display:grid; place-items:center; font-size:1.5rem; background:color-mix(in srgb, var(--cat) 18%, var(--surface)); border:1px solid color-mix(in srgb, var(--cat) 55%, transparent); flex:none;}
  .page-head h1{font-family:var(--font-display); font-weight:400; font-size:1.7rem; color:var(--cat); margin:0;}
  .page-head p{margin:2px 0 0; font-size:.8rem; color:var(--text-muted);}
  .subnav{display:flex; gap:6px; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--border); padding-bottom:10px;}
  .subnav:empty{display:none;}
  .subnav::-webkit-scrollbar{display:none;}
  .sub-btn{background:none; border:1px solid var(--border); border-radius:999px; padding:7px 14px; font-size:.8rem; font-weight:700; color:var(--text-muted); white-space:nowrap;}
  .sub-btn:hover{color:var(--text);}
  .sub-btn.active{color:#fff; background:color-mix(in srgb, var(--cat) 24%, transparent); border-color:var(--cat);}
  .sub-btn b{font-family:var(--font-mono); color:var(--cat); margin-left:3px;}
  .sub, .stack{display:flex; flex-direction:column; gap:16px;}
  #mus-creation{grid-template-columns:repeat(auto-fill,minmax(400px,1fr));}
  @media (max-width:520px){ #mus-creation{grid-template-columns:1fr;} }
  .sub[hidden]{display:none;}
  .sub > .panel, .page > .panel{grid-column:auto;}
  .card{background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:16px; display:flex; flex-direction:column; gap:10px; min-width:0;}
  .card.hl{border-color:color-mix(in srgb, var(--cat) 55%, var(--border)); background:linear-gradient(160deg, color-mix(in srgb, var(--cat) 8%, var(--surface)), var(--surface));}
  .card h3{margin:0; font-family:var(--font-display); font-weight:400; font-size:1.05rem; display:flex; align-items:center; gap:8px;}
  .card-h{display:flex; align-items:center; gap:10px;}
  .card-h b{display:block;} .card-h small{display:block; color:var(--text-muted); font-size:.72rem;}
  .card-h .chip{margin-left:auto;}
  .card-h{flex-wrap:wrap; min-width:0;} .card-h > div{min-width:0; flex:1 1 120px;} .card-h b{overflow-wrap:anywhere;}
  .two{display:grid; grid-template-columns:1fr 1fr; gap:16px;}
  .grid2{display:grid; grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); gap:16px;}
  @media (max-width:760px){ .two{grid-template-columns:1fr;} }
  .home-grid{display:grid; grid-template-columns:1.25fr 1fr; gap:16px; align-items:start;}
  .home-grid > .wide{grid-column:1/-1;}
  @media (max-width:760px){ .home-grid{grid-template-columns:1fr;} }
  .kpi-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:10px;}
  .kpi{display:flex; flex-direction:column; gap:3px; text-align:left; background:var(--surface); border:1px solid var(--border); border-radius:var(--radius); padding:12px 14px; color:var(--text); position:relative; overflow:hidden;}
  .kpi[data-go]:hover{border-color:var(--cat);}
  .kpi::after{content:''; position:absolute; left:0; top:0; bottom:0; width:3px; background:var(--cat); opacity:.7;}
  .kpi-ic{font-size:1.1rem;} .kpi-lb{font-size:.66rem; text-transform:uppercase; letter-spacing:.07em; color:var(--text-muted); font-weight:800;}
  .kpi-v{font-family:var(--font-mono); font-size:1.12rem;} .kpi small{font-size:.68rem; color:var(--text-muted);}
  .kpi.bad .kpi-v{color:var(--bad);} .kpi.good small{color:#3BD17A;} .kpi.bad small{color:#FF8A8A;}
  .goal{display:flex; flex-direction:column; gap:5px; margin-bottom:10px;}
  .goal-h{display:flex; justify-content:space-between; gap:8px; font-size:.8rem;} .goal-h small{color:var(--text-muted); white-space:nowrap;}
  .goal .meter-track{height:7px;}
  .todo{display:flex; align-items:center; gap:10px; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; color:var(--text); font-size:.8rem; margin-bottom:6px;}
  .todo[data-go]:hover{border-color:var(--cat);} .todo i{margin-left:auto; font-style:normal; color:var(--text-muted);}
  .chip{display:inline-flex; align-items:center; font-size:.68rem; font-weight:800; padding:3px 9px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted); background:var(--surface-2); white-space:nowrap;}
  .chip.on{color:#3BD17A; border-color:#27553a;} .chip.warn{color:#F2C14E; border-color:#6b5520; cursor:pointer;} .chip.bad{color:#FF8A8A; border-color:#6a1d24;} .chip.gold{color:#1a1206; background:linear-gradient(90deg,#F2C14E,#FFE9A8); border-color:#F2C14E;}
  .mini-av{width:38px; height:38px; border-radius:10px; overflow:hidden; display:inline-block; flex:none; vertical-align:middle;}
  .crea-acts{display:grid; grid-template-columns:repeat(4,1fr); gap:8px;}
  @media (max-width:520px){ .crea-acts{grid-template-columns:repeat(2,1fr);} }
  .act{display:flex; flex-direction:column; align-items:center; gap:4px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:12px 6px; color:var(--text); font-size:1.3rem;}
  .act span{font-size:.72rem; font-weight:700;} .act:hover{border-color:var(--cat); background:color-mix(in srgb, var(--cat) 10%, var(--surface-2));}
  .toolbar{display:flex; flex-wrap:wrap; gap:8px; align-items:center;}
  .toolbar select{background:var(--surface-2); border:1px solid var(--border); color:var(--text); border-radius:8px; padding:7px 10px; font:inherit; font-size:.8rem;}
  .muted{color:var(--text-muted); font-size:.76rem;}
  .tbl{display:flex; flex-direction:column; border:1px solid var(--border); border-radius:12px; overflow:hidden;}
  .tbl .tr{display:grid; grid-template-columns:2fr 1.3fr 1fr .9fr .9fr 1.1fr; gap:8px; align-items:center; padding:9px 12px; font-size:.78rem; border-top:1px solid var(--border);}
  .tbl .tr:first-child{border-top:none;} .tbl .th{background:var(--surface-2); font-size:.64rem; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted); font-weight:800;}
  .tbl .tr small{display:block; color:var(--text-muted); font-size:.66rem;}
  .tbl .tr > span{min-width:0; overflow:hidden; text-overflow:ellipsis;}
  .tbl.perf .tr{grid-template-columns:2fr 1fr 1fr 1fr .7fr .9fr;}
  #biz-rev .tbl .tr{grid-template-columns:1.6fr 1fr 1fr 1fr 1fr;}
  @media (max-width:640px){ .tbl .tr{grid-template-columns:1.6fr 1fr 1fr; } .tbl .tr > span:nth-child(n+4){display:none;} #biz-rev .tbl .tr{grid-template-columns:1.4fr 1fr 1fr;} }
  .q{display:inline-block; width:34px; height:5px; border-radius:3px; margin-right:6px; vertical-align:middle; background:linear-gradient(90deg, var(--cat) var(--q), var(--border) var(--q));}
  .good{color:#3BD17A;} .bad{color:#FF8A8A;}
  .timeline{display:flex; flex-direction:column;}
  .tl{display:grid; grid-template-columns:44px 1fr; gap:8px; padding:8px 0; border-bottom:1px dashed var(--border); font-size:.8rem;}
  .tl-w{font-family:var(--font-mono); color:var(--cat); font-size:.72rem;} .tl small{display:block; color:var(--text-muted); font-size:.7rem;}
  .chart-list{list-style:none; margin:0; padding:0; display:flex; flex-direction:column; gap:3px; counter-reset:none;}
  .chart-list li{display:grid; grid-template-columns:24px 42px 1fr auto; gap:6px; align-items:center; padding:6px 8px; border-radius:8px; font-size:.78rem;}
  .chart-list li.mine{background:color-mix(in srgb, var(--cat) 16%, transparent); border:1px solid color-mix(in srgb, var(--cat) 50%, transparent);}
  .chart-list .pos{font-family:var(--font-mono); font-weight:900; text-align:right;} .chart-list .ttl small{display:block; color:var(--text-muted); font-size:.68rem;}
  .mv{font-size:.62rem; font-family:var(--font-mono); color:var(--text-muted);} .mv.up{color:#3BD17A;} .mv.down{color:#FF8A8A;}
  .rank-row{display:grid; grid-template-columns:26px 1fr auto; gap:8px; align-items:center; font-size:.8rem; padding:6px 0; border-bottom:1px dashed var(--border);}
  .rank-row small{display:block; color:var(--text-muted); font-size:.68rem;} .rank-row .pos{font-family:var(--font-mono); color:var(--cat); font-weight:900;}
  .kv{display:flex; justify-content:space-between; gap:10px; font-size:.78rem; padding:5px 0; border-bottom:1px dotted var(--border);}
  .kv span{color:var(--text-muted);} .kv b{text-align:right;}
  .row-acts{display:flex; gap:8px; flex-wrap:wrap;}
  .stat-row{display:flex; flex-wrap:wrap; gap:6px 14px; font-size:.74rem; color:var(--text-muted);} .stat-row b{color:var(--text); font-family:var(--font-mono);}
  .mini-hist{font-size:.72rem; color:var(--text-muted); display:flex; flex-direction:column; gap:3px;} .mini-hist em{font-style:normal; color:var(--cat); font-family:var(--font-mono);}
  .city-row{display:flex; align-items:center; gap:12px; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:9px 12px; color:var(--text); font-size:.8rem; margin-bottom:6px;}
  .city-row:hover{border-color:var(--cat);} .city-row > span:first-child{flex:1; min-width:0;} .city-row small{display:block;} .city-row em{font-style:normal; color:var(--text-muted);}
  .mini-m{width:110px; flex:none; display:flex; flex-direction:column; gap:3px;} .mini-m small{font-size:.64rem; color:var(--text-muted);}
  .mini-m i{display:block; height:5px; border-radius:3px; background:var(--cat);}
  @media (max-width:520px){ .mini-m{width:70px;} }
  .dot{display:inline-block; width:10px; height:10px; border-radius:50%;}
  .tone{width:8px; height:8px; border-radius:50%; background:var(--border); flex:none;} .tone.pos{background:#3BD17A;} .tone.neg{background:#FF5A5A;}
  .bars{width:100%; height:auto; color:var(--text);}
  .legend{display:flex; gap:14px; font-size:.7rem; color:var(--text-muted);} .legend i{display:inline-block; width:10px; height:10px; border-radius:3px; margin-right:5px; vertical-align:-1px;}
  .ladder{display:grid; grid-template-columns:repeat(auto-fit,minmax(130px,1fr)); gap:8px;}
  .rung{border:1px solid var(--border); border-radius:10px; padding:10px; display:flex; flex-direction:column; gap:2px; opacity:.55; font-size:.78rem;}
  .rung.done{opacity:.85;} .rung.cur{opacity:1; border-color:var(--cat); background:color-mix(in srgb, var(--cat) 14%, transparent);}
  .rung-n{font-family:var(--font-mono); color:var(--cat); font-size:.7rem;} .rung small{color:var(--text-muted); font-size:.66rem;}
  .team-inline .tm-card{margin-bottom:8px;}
  /* notifications */
  .notif{display:flex; align-items:flex-start; gap:10px; width:100%; text-align:left; background:var(--surface-2); border:1px solid var(--border); border-left:3px solid var(--nc); border-radius:10px; padding:9px 12px; color:var(--text); font-size:.78rem; margin-bottom:6px;}
  .notif.read{opacity:.55;} .notif-ic{font-size:1rem;} .notif-t{flex:1;} .notif-t small{display:block; color:var(--nc); font-size:.64rem; font-weight:800; text-transform:uppercase; letter-spacing:.05em;}
  .notif-dot{width:8px; height:8px; border-radius:50%; background:var(--nc); flex:none; margin-top:5px;}
  #notif-filters{display:flex; flex-wrap:wrap; gap:6px;}
  #notif-list{display:flex; flex-direction:column; max-height:60vh; max-height:60dvh; overflow-y:auto;}
  /* feuilles (actions rapides, menu Plus) */
  .sheet-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); gap:8px;}
  .sheet-act{display:flex; flex-direction:column; align-items:center; gap:6px; background:var(--surface-2); border:1px solid var(--border); border-radius:12px; padding:14px 8px; color:var(--text); font-size:.78rem; font-weight:700;}
  .sheet-act span{font-size:1.5rem;} .sheet-act:hover, .sheet-act.on{border-color:var(--cat, var(--accent));}
  .btn-quick{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); height:48px; padding:0 14px; color:var(--text); font-weight:800; font-size:.85rem; white-space:nowrap;}
  .btn-quick:hover{border-color:var(--accent);}
  /* mobile : navigation en barre inférieure, action de semaine juste au-dessus */
  @media (max-width:760px){
    .topbar{padding:10px 12px;}
    .topbar-inner{display:grid; grid-template-columns:1fr auto; align-items:center; gap:8px;}
    .topbar-inner .hud-btns{grid-column:2; grid-row:1;}
    .brand-label{font-size:1.2rem;}
    .hud-stats{grid-column:1/-1; grid-row:2; flex-wrap:nowrap; overflow-x:auto; gap:14px; scrollbar-width:none; width:100%;}
    .hud-val{font-size:.92rem;} .rank-progress{margin-top:6px;}
    .hud-stats::-webkit-scrollbar{display:none;}
    .hud-stat{align-items:flex-start; flex:none;}
    .rank-next{display:none;}
    .mainnav{position:fixed; left:0; right:0; bottom:0; z-index:40; margin:0; padding:6px 6px calc(6px + env(safe-area-inset-bottom,0px)); background:rgba(12,10,12,.97); border-top:1px solid var(--border); backdrop-filter:blur(8px); overflow:visible;}
    .nav-item{flex-direction:column; gap:2px; padding:6px 2px; font-size:.62rem; min-width:0;}
    .nav-item.nav-extra{display:none;} .nav-more{display:flex;}
    .nav-ic{font-size:1.2rem;}
    .actionbar{position:fixed; left:8px; right:8px; bottom:calc(64px + env(safe-area-inset-bottom,0px)); z-index:39;}
    #app{padding-bottom:140px;}
    #toast-wrap{bottom:calc(140px + env(safe-area-inset-bottom,0px));}
    .page-head h1{font-size:1.4rem;} .page-ic{width:40px; height:40px; font-size:1.25rem;}
  }

  /* ---------- toasts ---------- */
  #toast-wrap{position:fixed; bottom:calc(80px + env(safe-area-inset-bottom,0px)); left:0; right:0; display:flex; flex-direction:column; align-items:center; gap:6px; z-index:60; pointer-events:none;}
  .toast{background:var(--text); color:var(--bg); padding:8px 16px; border-radius:999px; font-size:.82rem; font-weight:600; opacity:0; transform:translateY(6px); transition:opacity .25s, transform .25s; box-shadow:var(--shadow);}
  .toast.show{opacity:1; transform:translateY(0);}
  .toast.levelup{background:linear-gradient(135deg,var(--accent),var(--buzz)); color:#fff; font-weight:700; font-size:.9rem; padding:10px 20px;}

  /* ---------- avatar ---------- */
  .avatar-thumb{border-radius:22%; overflow:hidden; display:block; background:var(--surface-2); flex-shrink:0;}
  .avatar-btn{border:2px solid var(--border); padding:0; cursor:pointer; transition:transform .12s ease, border-color .15s ease;}
  .avatar-btn:hover{border-color:var(--accent); transform:scale(1.04);}
  .avatar-btn.size-topbar{width:44px; height:44px; border-radius:26%;}
  .avatar-btn.size-hero{width:112px; height:112px; border-radius:24%; margin:0 auto;}
  .avatar-thumb.size-card{width:38px; height:38px; border-radius:24%;}
  .brand-row{display:flex; align-items:center; gap:10px;}
  .avatar-hero-wrap{display:flex; flex-direction:column; align-items:center; gap:8px;}
  .avatar-hero-wrap p{margin:0; font-size:.76rem; color:var(--text-muted);}
  .avatar-builder{display:flex; flex-direction:column; gap:14px;}
  .avatar-builder-preview{display:flex; flex-direction:column; align-items:center; gap:8px; position:sticky; top:-18px; z-index:2; background:var(--surface); padding-block:6px;}
  .avatar-options{display:flex; flex-direction:column; gap:14px;}
  .opt-grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(74px,1fr)); gap:8px;}
  .opt-thumb{background:var(--surface-2); border:2px solid var(--border); border-radius:10px; padding:4px 4px 6px; display:flex; flex-direction:column; align-items:center; gap:4px; color:var(--text-muted); cursor:pointer;}
  .opt-thumb:hover{border-color:var(--accent-strong);}
  .opt-thumb.selected{border-color:var(--accent); color:var(--accent-strong);}
  .opt-svg{width:62px; height:62px; border-radius:8px; overflow:hidden; display:block;}
  .opt-label{font-size:.68rem; font-weight:700; line-height:1.1; text-align:center;}
  .swatch-row{display:flex; gap:8px; flex-wrap:wrap;}
  .swatch-round{width:32px; height:32px; border-radius:50%; border:2px solid transparent; padding:0; cursor:pointer; box-shadow:inset 0 0 0 1px var(--border);}
  .swatch-round.selected{border-color:var(--surface); box-shadow:0 0 0 2px var(--accent);}
  .swatch-bg{width:36px; height:36px; border-radius:10px; border:2px solid transparent; padding:0; cursor:pointer;}
  .swatch-bg.selected{border-color:var(--accent);}
  .opt-grid.hair-grid{grid-template-columns:repeat(auto-fill,minmax(92px,1fr));}
  .hair-cat{font-size:.66rem; font-weight:900; letter-spacing:.08em; text-transform:uppercase; color:var(--accent-strong); margin:10px 0 6px;}
  .hair-rar{display:inline-block; width:7px; height:7px; border-radius:50%; margin-right:4px; vertical-align:1px;}
  .hair-info{display:flex; flex-wrap:wrap; gap:4px 12px; align-items:center; font-size:.74rem; color:var(--text-muted); background:var(--surface-2); border:1px solid var(--border); border-radius:10px; padding:8px 10px;}
  .hair-info b{color:var(--text); font-size:.84rem;}
  .avatar-field-label{font-size:.72rem; font-weight:700; color:var(--text-muted); text-transform:uppercase; letter-spacing:.05em; margin-bottom:6px; display:block;}
  .role-summary{background:var(--surface-2); border:1px solid var(--border); border-radius:var(--radius); padding:10px 14px; font-size:.85rem;}
  .role-summary strong{color:var(--accent);}
  #start-step-details{display:flex; flex-direction:column; gap:16px;}
  #btn-back-role{padding-left:0; align-self:flex-start;}

  [hidden]{display:none!important;}
  /* ---------- carte du monde ---------- */
  .map-panel{grid-column:1/-1; padding-bottom:10px;}
  .map-preview{display:block; width:100%; padding:0; border:1px solid var(--border); border-radius:10px; overflow:hidden; background:radial-gradient(120% 90% at 50% 30%,#1a0d17,#070407); cursor:pointer; position:relative; text-align:left; color:var(--text);}
  .map-preview:hover{border-color:var(--accent);}
  .map-preview svg{display:block; width:100%; height:clamp(130px,26vw,220px);}
  .map-preview .mm-city{animation:mmPulse 2.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
  .map-preview .mm-here{animation:mmPulse 1.6s ease-in-out infinite; transform-box:fill-box; transform-origin:center;}
  .map-preview .mm-route{stroke-dasharray:4 6; animation:wmFlow 1.4s linear infinite;}
  @keyframes mmPulse{50%{opacity:.55; transform:scale(1.25);}}
  .map-mini-stats{display:flex; flex-wrap:wrap; gap:4px 14px; padding:8px 12px 10px; font-size:.76rem; color:var(--text-muted); border-top:1px solid var(--border); background:rgba(0,0,0,.35);}
  .map-mini-stats b{color:var(--text);} .map-mini-stats .mm-live{color:#F2C14E; font-weight:700;}

  .wm-overlay{position:fixed; inset:0; z-index:50; background:#050305; display:flex;}