/* ===================== APPRENDRE LE JEU ===================== */
  .gl-q{display:inline-grid; place-items:center; width:15px; height:15px; margin-left:5px; border-radius:50%; font-size:.6rem; font-weight:800; line-height:1; letter-spacing:0; text-transform:none;
    color:var(--text-muted); border:1px solid color-mix(in srgb,var(--text-muted) 60%,transparent); cursor:help; vertical-align:1px; position:relative; flex:none;}
  .gl-q:hover,.gl-q:focus-visible{color:var(--text); border-color:var(--accent-strong); outline:none;}
  .gl-q.fresh::after{content:''; position:absolute; top:-3px; right:-3px; width:6px; height:6px; border-radius:50%; background:#F2C14E;}
  .hud-stat.has-gl{cursor:help;} .hud-stat.has-gl:focus-visible{outline:2px solid var(--accent-strong); outline-offset:2px; border-radius:6px;}
  #gloss-pop{position:fixed; z-index:400; width:min(340px,calc(100vw - 24px)); background:var(--surface); color:var(--text); border:1px solid var(--border); border-radius:14px; padding:12px 14px 14px;
    box-shadow:0 12px 40px rgba(0,0,0,.55);}
  #gloss-pop.sheet{left:12px !important; right:12px; bottom:calc(12px + env(safe-area-inset-bottom,0px)); top:auto !important; width:auto;}
  .gp-h{display:flex; align-items:center; justify-content:space-between; gap:8px;} .gp-h b{font-size:1rem;}
  .gp-x{background:none; border:0; color:var(--text-muted); font-size:1.3rem; line-height:1; cursor:pointer; padding:2px 6px;}
  .gp-tabs{display:flex; gap:4px; margin:8px 0 10px; padding:3px; border-radius:10px; background:var(--surface-2);}
  .gp-tabs button{flex:1; background:none; border:0; border-radius:8px; padding:6px 4px; font:inherit; font-size:.72rem; color:var(--text-muted); cursor:pointer;}
  .gp-tabs button.on{background:var(--accent-soft); color:var(--text); font-weight:800;}
  .gp-b p{margin:0 0 8px; font-size:.84rem; line-height:1.45;} .gp-b .gp-l1{color:var(--text); font-weight:700;}
  .gp-d{margin:0; padding-left:18px; font-size:.8rem; color:var(--text-muted); display:flex; flex-direction:column; gap:4px;}
  .tuto{border:1px solid color-mix(in srgb,var(--cat) 55%,transparent); background:color-mix(in srgb,var(--cat) 9%,var(--surface)); border-radius:14px; padding:12px 14px; margin:0 0 12px; display:flex; flex-direction:column; gap:6px;}
  .tuto-h{display:flex; align-items:center; gap:10px; flex-wrap:wrap;} .tuto-h b{font-size:1rem;}
  .tuto-k{font-size:.64rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; color:var(--cat); display:inline-flex; align-items:center; gap:4px;}
  .tuto p{margin:0; font-size:.86rem;}
  .tuto-f{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:6px 14px; margin:4px 0 0;}
  .tuto-f div{min-width:0;} .tuto-f dt{font-size:.66rem; font-weight:800; text-transform:uppercase; letter-spacing:.06em; color:var(--text-muted);} .tuto-f dd{margin:1px 0 0; font-size:.8rem;}
  .tuto-more summary{cursor:pointer; font-size:.78rem; color:var(--text-muted);}
  .tuto-b{display:flex; justify-content:flex-end;}
  .now-card{display:flex; flex-direction:column; gap:10px;}
  .now-card .now-main > div{display:flex; flex-direction:column; gap:3px; min-width:0;}
  .now-why{font-size:.78rem; color:var(--text-muted);} .now-rew{font-size:.76rem; color:#F2C14E; display:inline-flex; align-items:center; gap:5px;}
  .now-step{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap; padding:9px 12px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);}
  .now-step > span{font-size:.82rem; min-width:0;} .now-step small{display:block; margin-top:2px;}
  .now-tip{padding:10px 12px; border-radius:10px; border:1px dashed color-mix(in srgb,#F2C14E 55%,transparent); background:color-mix(in srgb,#F2C14E 6%,transparent);}
  .now-tip-k{font-size:.66rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; color:#F2C14E; display:inline-flex; align-items:center; gap:4px;}
  .now-tip p{margin:4px 0 8px; font-size:.82rem;} .now-tip-b{display:flex; gap:8px; align-items:center; flex-wrap:wrap;}
  .now-all summary{cursor:pointer; font-size:.78rem; color:var(--text-muted);}
  .now-done{margin:0; font-size:.8rem; display:flex; align-items:center; gap:6px;}
  #home-more{margin:-4px 0 12px; font-size:.8rem;}
  .csq{display:flex; flex-direction:column; gap:5px; padding:10px 12px; margin-top:8px; border-radius:10px; background:var(--surface-2); border:1px solid var(--border);}
  .csq-r{display:grid; grid-template-columns:14px 118px minmax(0,1fr); gap:8px; align-items:start; font-size:.78rem;}
  .csq-r > span{color:var(--text-muted);} .csq-r b{font-weight:700; min-width:0;}
  .csq-spend .bi{color:#FF8A8A;} .csq-gain .bi{color:#3BD17A;} .csq-risk .bi{color:#F2C14E;} .csq-unl .bi{color:#F2C14E;}
  .csq.compact{padding:7px 10px; gap:3px;} .csq.compact .csq-r{grid-template-columns:14px 96px minmax(0,1fr); font-size:.74rem;}
  .dept-csq{flex-direction:row; flex-wrap:wrap; align-items:center; gap:4px 8px; font-size:.74rem;} .dept-csq > span{color:var(--text-muted);} .dept-csq .bi{color:#3BD17A;} .dept-csq small{color:var(--text-muted);}
  @media (max-width:560px){ .csq-r{grid-template-columns:14px minmax(0,1fr);} .csq-r b{grid-column:2;} }
  .lvl-d{border:1px solid var(--border); border-radius:14px; background:var(--surface); margin:0;}
  .lvl-d > summary{cursor:pointer; padding:12px 14px; font-weight:700; font-size:.9rem; list-style:none; display:flex; align-items:center; gap:8px;}
  .lvl-d > summary::-webkit-details-marker{display:none;} .lvl-d > summary::after{content:'›'; margin-left:auto; transition:transform .15s;} .lvl-d[open] > summary::after{transform:rotate(90deg);}
  .lvl-d[open]{padding-bottom:10px;} .lvl-d[open] > :not(summary){margin:0 10px 10px;}
  .lvl-tag{font-size:.6rem; font-weight:800; letter-spacing:.08em; text-transform:uppercase; padding:2px 7px; border-radius:999px; border:1px solid var(--border); color:var(--text-muted);}
  .lvl-avance .lvl-tag{border-color:#B48CF2; color:#B48CF2;} .lvl-utile .lvl-tag{border-color:#4FA3E5; color:#4FA3E5;}
  .ov-next{display:flex; align-items:center; gap:10px; padding:10px 12px; margin:8px 0; border-radius:12px; border:1px solid color-mix(in srgb,var(--accent-strong) 50%,transparent); background:color-mix(in srgb,var(--accent-strong) 8%,var(--surface));}
  .ov-next > div{flex:1; min-width:0; display:flex; flex-direction:column; gap:2px;} .ov-next b{font-size:.86rem;} .ov-next small{font-size:.76rem; color:var(--text-muted);}
  .ov-next.compact{padding:6px 10px;} .ov-next:empty{display:none;}
  #ov-tabs .tab-btn.rec{position:relative;} #ov-tabs .tab-btn.rec::after{content:'Recommandé'; position:absolute; top:-8px; right:-4px; font-size:.54rem; font-weight:800; letter-spacing:.04em; padding:1px 5px; border-radius:6px; background:#3BD17A; color:#06170d;}
  .gd-top{display:flex; flex-direction:column; gap:8px;} .gd-m{display:flex; align-items:center; justify-content:space-between; gap:10px;} .gd-m > div{display:flex; flex-direction:column;} .gd-m b{font-size:1.2rem;}
  .gd-row{display:flex; align-items:center; gap:10px; padding:8px 0; border-bottom:1px solid var(--border);} .gd-row:last-child{border-bottom:0;}
  .gd-row > div{flex:1; min-width:0; display:flex; flex-direction:column;} .gd-row small{color:var(--text-muted); font-size:.74rem;}
  .gd-ic{width:30px; height:30px; border-radius:9px; display:grid; place-items:center; flex:none; background:var(--surface-2); border:1px solid var(--border);}
  .gd-row.ok .gd-ic{color:#3BD17A; border-color:color-mix(in srgb,#3BD17A 50%,transparent);} .gd-row.lock{opacity:.72;} .gd-row.lock .gd-ic{color:var(--text-muted);}
  .gd-lex{display:grid; grid-template-columns:repeat(auto-fill,minmax(220px,1fr)); gap:8px;}
  .gd-term{text-align:left; display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:10px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer;}
  .gd-term small{color:var(--text-muted); font-size:.74rem;} .gd-term:hover{border-color:var(--accent-strong);}
  .ex-sw{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px;}
  .ex-opt{text-align:left; display:flex; flex-direction:column; gap:3px; padding:10px 12px; border-radius:12px; border:1px solid var(--border); background:var(--surface-2); color:var(--text); font:inherit; cursor:pointer;}
  .ex-opt small{color:var(--text-muted); font-size:.74rem;} .ex-opt.on{border-color:var(--accent-strong); background:var(--accent-soft);}
  #settings-learn{display:flex; flex-direction:column; gap:8px;} .set-row{display:flex; align-items:center; gap:8px; font-size:.82rem; color:var(--text-muted);} .set-btns{display:flex; gap:8px; flex-wrap:wrap;}
  #settings-how > summary{cursor:pointer; font-weight:800; margin-bottom:8px;}
  .ln-modes{display:grid; grid-template-columns:repeat(auto-fit,minmax(240px,1fr)); gap:12px;}
  .ln-mode{text-align:left; display:flex; flex-direction:column; gap:8px;} .ln-mode ul{margin:0; padding-left:18px; font-size:.8rem; color:var(--text-muted); display:flex; flex-direction:column; gap:3px;}
  .ln-mode .ln-tag{align-self:flex-start; font-size:.62rem; font-weight:800; letter-spacing:.07em; text-transform:uppercase; padding:2px 8px; border-radius:999px; border:1px solid currentColor;}
  .ln-mode[data-ln-mode="simple"] .ln-tag{color:#3BD17A;} .ln-mode[data-ln-mode="full"] .ln-tag{color:#B48CF2;}
  #btn-autopilot.locked{opacity:.6;}
  .toast.learn{border-color:#F2C14E;}
  @media (prefers-reduced-motion: reduce){ .lvl-d > summary::after{transition:none;} }
  .ln-mode.sel{border-color:var(--accent); background:linear-gradient(160deg,rgba(255,92,152,.12),transparent 70%); box-shadow:0 0 0 1px var(--accent) inset;}