*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%;background:#F5F7FF;font-family:'Inter',sans-serif;font-size:15px;color:#1A1D2E;overflow:hidden}
#app{height:100%;display:flex;flex-direction:column;overflow:hidden}
.view{display:none;height:100%;flex-direction:column;overflow:hidden}
.view.active{display:flex}
.scroll{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;padding:16px 16px 28px}
.scroll::-webkit-scrollbar{display:none}
:root{
  --bg:#F5F7FF;--white:#FFFFFF;--border:#EAECF5;--border2:#D5D9EE;
  --blue:#4361EE;--blue-l:#EEF1FF;--blue-m:#C5CEFF;
  --text:#1A1D2E;--t2:#6B7280;--t3:#9CA3AF;
  --green:#16A34A;--green-l:#DCFCE7;
  --red:#DC2626;--red-l:#FEE2E2;
  --gold:#D97706;--gold-l:#FEF3C7;
  --purple:#7C3AED;--purple-l:#F3EEFF;
  --r:16px;--rs:12px;--rsm:8px;
}
.topbar{display:flex;align-items:center;padding:max(66px,calc(env(safe-area-inset-top) + 56px)) 20px 14px;background:var(--white);gap:12px;flex-shrink:0;border-bottom:1px solid var(--border)}
.topbar h1{font-size:24px;font-weight:800;color:var(--text);flex:1}
.topbar h2{font-size:18px;font-weight:700;color:var(--text);flex:1}
.topbar-back{cursor:pointer;color:var(--t2);padding:2px 6px;line-height:1;display:flex;align-items:center}
.nav{display:flex;background:var(--white);border-top:1px solid var(--border);padding-bottom:max(10px,env(safe-area-inset-bottom));flex-shrink:0}
.nav-btn{flex:1;display:flex;flex-direction:column;align-items:center;padding:10px 4px 6px;cursor:pointer;color:var(--t3);font-size:10px;font-weight:500;gap:3px;transition:color .15s}
.nav-btn.on{color:var(--blue)}
svg.ico{width:24px;height:24px;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
svg.icos{width:18px;height:18px;stroke-width:1.8;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
svg.icol{width:28px;height:28px;stroke-width:1.6;fill:none;stroke:currentColor;stroke-linecap:round;stroke-linejoin:round}
.card{background:var(--white);border-radius:var(--r);padding:16px;border:1px solid var(--border)}
.card+.card{margin-top:10px}
.btn{border:none;border-radius:var(--r);font-family:'Inter',sans-serif;cursor:pointer;transition:all .15s;display:flex;align-items:center;justify-content:center;gap:8px;font-weight:600}
.btn:active{transform:scale(.97)}
.btn-primary{background:linear-gradient(135deg,#4361EE 0%,#3451D1 100%);box-shadow:0 4px 14px rgba(67,97,238,.28);color:#fff;font-size:15px;padding:15px;width:100%}
.btn-ghost{background:var(--bg);border:1px solid var(--border2);color:var(--text);font-size:14px;padding:12px 16px;border-radius:var(--rs);width:100%}
.btn-danger{background:transparent;border:1.5px solid var(--red);color:var(--red);font-size:14px;padding:13px;width:100%;border-radius:var(--r)}
.start-btn{background:linear-gradient(135deg,#16A34A 0%,#15803D 100%);color:#fff;border-radius:20px;padding:20px 22px;font-size:17px;font-weight:700;width:100%;border:none;cursor:pointer;display:flex;align-items:center;justify-content:space-between;box-shadow:0 4px 20px rgba(22,163,74,.35);transition:all .15s;letter-spacing:.2px}
.start-btn:active{transform:scale(.98);box-shadow:0 2px 10px rgba(22,163,74,.25)}
.inp{width:100%;background:var(--bg);border:1.5px solid var(--border);border-radius:var(--rs);color:var(--text);padding:12px 14px;font-family:'Inter',sans-serif;font-size:15px;outline:none;transition:border-color .2s}
.inp:focus{border-color:var(--blue);background:var(--white)}
.inp-label{font-size:11px;color:var(--t2);text-transform:uppercase;letter-spacing:1px;margin-bottom:6px;display:block;font-weight:600}
.inp-wrap{margin-bottom:16px}
.chips{display:flex;flex-wrap:wrap;gap:7px;margin-top:8px}
.chip{padding:7px 14px;border-radius:20px;font-size:13px;background:var(--white);border:1.5px solid var(--border2);cursor:pointer;color:var(--t2);font-weight:500;transition:all .15s}
.chip.on{background:var(--blue);border-color:var(--blue);color:#fff}
.chip.multi.on{background:var(--blue-l);border-color:var(--blue-m);color:var(--blue)}
.sec-lbl{font-size:11px;color:var(--t3);text-transform:uppercase;letter-spacing:1.5px;margin:18px 0 10px;font-weight:700}
.prog-bg{height:7px;background:var(--bg);border-radius:4px;overflow:hidden}
.prog-fill{height:100%;border-radius:4px;transition:width .6s ease}
/* MODULE CARD */
.mod-card{background:var(--white);border-radius:var(--r);padding:15px 16px;border:1px solid var(--border);display:flex;align-items:center;gap:14px;margin-bottom:8px;cursor:pointer;transition:background .12s}
.mod-card:active{background:var(--bg)}
.mod-ico{width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;background:var(--blue-l);color:var(--blue)}
/* PILIER ACCORDION */
.pilier-card{background:var(--white);border-radius:var(--r);border:1px solid var(--border);overflow:hidden;margin-bottom:8px}
.pilier-hdr{display:flex;align-items:center;gap:12px;padding:14px 16px;cursor:pointer;transition:background .1s}
.pilier-hdr:active{background:var(--bg)}
.pilier-num{width:28px;height:28px;border-radius:8px;background:var(--blue-l);color:var(--blue);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;flex-shrink:0}
.pilier-title{flex:1;font-size:13px;font-weight:700;text-transform:uppercase;letter-spacing:.5px}
.pilier-count{font-size:11px;color:var(--t3)}
.p-chev{transition:transform .2s;flex-shrink:0;color:var(--t3)}
.p-chev.open{transform:rotate(180deg)}
.pilier-body{border-top:1px solid var(--border)}
/* SUB-CATEGORY */
.subcat{border-bottom:1px solid var(--border)}
.subcat:last-child{border-bottom:none}
.subcat-hdr{display:flex;align-items:center;gap:10px;padding:11px 16px;background:var(--bg);cursor:pointer;transition:background .1s}
.subcat-hdr:active{background:#E8EDFF}
.subcat-title{flex:1;font-size:13px;font-weight:600}
.sc-chev{transition:transform .2s;flex-shrink:0;color:var(--t3)}
.sc-chev.open{transform:rotate(180deg)}
.item-row{display:flex;align-items:center;gap:12px;padding:11px 16px 11px 24px;border-bottom:1px solid var(--border)}
.item-row:last-child{border-bottom:none}
.item-lbl{flex:1;font-size:13px;line-height:1.4}
.item-sub{font-size:11px;color:var(--t3);margin-top:2px}
.si{font-size:20px;cursor:pointer;opacity:.2;transition:opacity .1s;color:var(--gold)}
.si.on{opacity:1}
.star-row-item{display:flex;gap:2px}
.vx-grp{display:flex;gap:5px}
.vx{width:30px;height:30px;border-radius:8px;border:1.5px solid var(--border2);background:var(--white);cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;transition:all .15s;flex-shrink:0;color:var(--t2)}
.vx.v{background:var(--green-l);border-color:#86EFAC;color:var(--green)}
.vx.x{background:var(--red-l);border-color:#FCA5A5;color:var(--red)}
/* SESSION */
.timer{font-size:50px;font-weight:800;color:var(--text);letter-spacing:1px;line-height:1;font-variant-numeric:tabular-nums}
.live-pill{display:inline-flex;align-items:center;gap:6px;background:var(--green-l);border-radius:20px;padding:5px 12px;font-size:11px;font-weight:700;color:var(--green)}
.live-dot{width:7px;height:7px;border-radius:50%;background:currentColor;animation:pulse 1.4s infinite}
@keyframes pulse{0%,100%{opacity:1;transform:scale(1)}50%{opacity:.4;transform:scale(.65)}}
.qeval{display:grid;grid-template-columns:1fr 1fr 1fr;gap:8px}
.qbtn{background:var(--white);border:1.5px solid var(--border2);border-radius:var(--r);padding:13px 6px;text-align:center;cursor:pointer;transition:all .12s}
.qbtn:active{transform:scale(.92)}
.qbtn .ql{font-size:9px;color:var(--t3);text-transform:uppercase;letter-spacing:.5px;font-weight:700;margin-top:4px}
.qbtn.ok{border-color:#86EFAC;background:var(--green-l)}
.qbtn.warn{border-color:#FCD34D;background:var(--gold-l)}
.qbtn.err{border-color:#FCA5A5;background:var(--red-l)}
/* GPS */
.gps-bar{display:flex;align-items:center;gap:8px;padding:8px 16px;background:var(--white);border-bottom:1px solid var(--border);font-size:11px;flex-shrink:0}
.gps-d{width:7px;height:7px;border-radius:50%;background:var(--t3);flex-shrink:0}
.gps-d.acq{background:var(--gold);animation:pulse 1s infinite}
.gps-d.ok{background:var(--green)}
.gps-d.err{background:var(--red)}
.env-banner{margin:8px 16px 0;border-radius:var(--rsm);padding:7px 12px;font-size:12px;font-weight:600;display:flex;align-items:center;gap:7px;transition:all .3s}
.ev-agglo{background:var(--gold-l);color:var(--gold);border:1px solid #FCD34D}
.ev-hors{background:var(--green-l);color:var(--green);border:1px solid #86EFAC}
.ev-auto{background:var(--red-l);color:var(--red);border:1px solid #FCA5A5}
.ev-man{background:var(--purple-l);color:var(--purple);border:1px solid #C4B5FD}
.ev-unk{background:var(--bg);color:var(--t3);border:1px solid var(--border)}
.seg-chips{display:flex;gap:5px;flex-wrap:wrap;padding:0 16px;margin-top:5px}
.sc{font-size:10px;padding:3px 9px;border-radius:10px;font-weight:700}
.sc-agglo{background:var(--gold-l);color:var(--gold)}
.sc-hors{background:var(--green-l);color:var(--green)}
.sc-auto{background:var(--red-l);color:var(--red)}
.sc-man{background:var(--purple-l);color:var(--purple)}
.elog-item{display:flex;align-items:center;gap:9px;padding:7px 0;border-bottom:1px solid var(--border);font-size:12px}
.elog-item:last-child{border-bottom:none}
.elog-time{color:var(--t3);width:38px;font-size:11px;font-weight:600}
.elog-txt{flex:1;color:var(--t2)}
.sync-bar{display:flex;align-items:center;gap:8px;padding:7px 16px;background:var(--blue-l);border-bottom:1px solid var(--blue-m);font-size:11px;color:var(--blue);flex-shrink:0;font-weight:600}
.rb-line{font-size:13px;color:var(--text);background:var(--gold-l);border-radius:var(--rsm);padding:10px 12px;margin-bottom:7px;border-left:3px solid var(--gold);line-height:1.5}
.star-db{font-size:30px;cursor:pointer;opacity:.2;transition:opacity .12s;color:var(--gold)}
.star-db.on{opacity:1}
.eval-row{display:flex;align-items:center;padding:10px 0;border-bottom:1px solid var(--border)}
.eval-row:last-child{border-bottom:none}
/* PROFILE */
.prof-av{width:68px;height:68px;border-radius:50%;background:var(--blue-l);display:flex;align-items:center;justify-content:center;margin:0 auto 12px;color:var(--blue)}
.partner-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.add-btn{background:var(--white);border:1.5px dashed var(--border2);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer}
.menu-item{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px;cursor:pointer}
.menu-item:active{background:var(--bg)}
/* AUTH */
.tab-row{display:flex;background:var(--bg);border-radius:12px;padding:4px;margin-bottom:20px}
.tab{flex:1;padding:9px;text-align:center;border-radius:9px;cursor:pointer;font-size:13px;font-weight:600;color:var(--t3);transition:all .15s}
.tab.on{background:var(--white);color:var(--text);box-shadow:0 1px 4px rgba(0,0,0,.08)}
.role-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:18px}
.role-card{background:var(--white);border:1.5px solid var(--border);border-radius:var(--r);padding:18px 12px;text-align:center;cursor:pointer;transition:all .15s}
.role-card.on{border-color:var(--blue);background:var(--blue-l)}
.rn{font-size:14px;font-weight:700;margin-top:8px}
.rs{font-size:11px;color:var(--t3);margin-top:3px}
.err-msg{color:var(--red);font-size:13px;text-align:center;padding:6px;min-height:20px}
/* BADGE */
.badge-card{background:var(--white);border:1px solid var(--border);border-radius:var(--r);padding:14px 16px;display:flex;align-items:center;gap:12px;margin-bottom:8px}
.badge-ico{width:40px;height:40px;border-radius:12px;background:var(--blue-l);display:flex;align-items:center;justify-content:center;flex-shrink:0;color:var(--blue)}
.badge-done{background:var(--gold-l);color:var(--gold)}
.bs{font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;white-space:nowrap}
.bs-done{background:var(--gold-l);color:var(--gold)}
.bs-todo{background:var(--bg);color:var(--t3)}
/* PAIR MODAL */
.pair-code-display{font-size:32px;font-weight:800;color:var(--blue);letter-spacing:8px;text-align:center;padding:14px;background:var(--blue-l);border-radius:var(--rsm);margin:10px 0}
/* TOAST */
#toast{position:fixed;bottom:86px;left:50%;transform:translateX(-50%) translateY(16px);background:rgba(26,29,46,.9);color:#fff;padding:10px 20px;border-radius:24px;font-size:13px;opacity:0;transition:all .28s;z-index:999;pointer-events:none;white-space:nowrap;font-weight:500}
#toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
/* MODAL */
.modal-ov{display:none;position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:200;align-items:flex-end;justify-content:center}
.modal-ov.open{display:flex}
.modal{background:var(--white);border-radius:20px 20px 0 0;padding:22px;width:100%;max-width:500px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
.modal h3{font-size:17px;font-weight:700;margin-bottom:14px}
.modal-btns{display:flex;gap:9px;margin-top:14px}
.modal-btns button{flex:1}
/* ANIMATIONS */
@keyframes slideUp{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
@keyframes slideDown{from{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:none}}
.anim-in{animation:slideUp .22s ease both}
.anim-list > *{animation:slideUp .2s ease both}
.anim-list > *:nth-child(1){animation-delay:.03s}
.anim-list > *:nth-child(2){animation-delay:.06s}
.anim-list > *:nth-child(3){animation-delay:.09s}
.anim-list > *:nth-child(4){animation-delay:.12s}
.anim-list > *:nth-child(5){animation-delay:.15s}
.pilier-body,.subcat-body{animation:slideDown .18s ease both}
/* PICTOGRAMS */
.pico{width:40px;height:40px;border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;font-size:20px}
.pico-blue{background:#EEF1FF}
.pico-green{background:#DCFCE7}
.pico-purple{background:#F3EEFF}
.pico-gold{background:#FEF3C7}
.pico-red{background:#FEE2E2}
.pico-teal{background:#CCFBF1}
/* SUGGESTION CARD */
.sug-card{background:var(--white);border-radius:var(--r);padding:14px 15px;border:1px solid var(--border);display:flex;align-items:flex-start;gap:12px;margin-bottom:8px;animation:slideUp .2s ease both}
.sug-pill{font-size:10px;font-weight:700;padding:3px 8px;border-radius:20px;white-space:nowrap;margin-bottom:4px;display:inline-block}
.sug-pill-high{background:#FEE2E2;color:#DC2626}
.sug-pill-med{background:#FEF3C7;color:#D97706}
.sug-pill-low{background:#DCFCE7;color:#16A34A}
/* DRAWER */
#drawer-ov{position:fixed;inset:0;background:rgba(0,0,0,.48);z-index:500;opacity:0;pointer-events:none;transition:opacity .25s}
#drawer-ov.open{opacity:1;pointer-events:all}
#drawer{position:fixed;top:0;left:0;bottom:0;width:min(300px,88vw);background:var(--white);z-index:501;transform:translateX(-100%);transition:transform .3s cubic-bezier(.4,0,.2,1);overflow-y:auto;overflow-x:hidden;-webkit-overflow-scrolling:touch;box-shadow:4px 0 32px rgba(0,0,0,.18)}
#drawer.open{transform:translateX(0)}
/* LONG PRESS OVERLAY */
.lp-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:150;display:flex;align-items:flex-end;justify-content:center;animation:fi .18s ease}
.lp-sheet{background:var(--white);border-radius:20px 20px 0 0;padding:22px;width:100%;max-width:500px;padding-bottom:max(22px,env(safe-area-inset-bottom))}
.lp-action{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--border);cursor:pointer;transition:opacity .12s}
.lp-action:last-child{border-bottom:none}
.lp-action:active{opacity:.65}
/* PRINT STYLES */
@media print{
  body{background:#fff;font-size:12px}
  #app{display:none}
  #print-area{display:block!important}
  .print-header{font-size:18px;font-weight:700;margin-bottom:16px}
  .print-session{border:1px solid #ccc;border-radius:8px;padding:12px;margin-bottom:10px;page-break-inside:avoid}
  .print-line{font-family:monospace;font-size:11px;background:#FEF3C7;padding:8px;border-left:3px solid #D97706;margin:4px 0;border-radius:4px}
  .print-eval{margin-top:8px;font-size:11px}
  .print-eval td{padding:3px 8px;border:1px solid #eee}
}
@media screen{#print-area{display:none}}
/* MANUAL SESSION FORM */
.manual-form{background:var(--white);border-radius:var(--r);padding:16px;border:1px solid var(--border);margin-bottom:10px}
/* EVAL STARS */
.eval-stars{display:flex;gap:5px}
.ev-s{font-size:22px;cursor:pointer;opacity:.2;transition:all .12s;color:var(--gold)}
.ev-s.on{opacity:1;transform:scale(1.05)}
/* APP NAME BAR — gradient + shadow */
#app-name-bar{background:linear-gradient(135deg,#4361EE 0%,#3451D1 100%)!important;box-shadow:0 2px 18px rgba(67,97,238,.28)}
/* CHIP selected — subtle gradient */
.chip.on{background:linear-gradient(135deg,#4361EE 0%,#3451D1 100%);border-color:transparent;color:#fff}
/* LOADING */
#loading{position:fixed;inset:0;background:var(--bg);display:flex;flex-direction:column;align-items:center;justify-content:center;z-index:500;gap:14px}
/* ── Brand typography : toujours identique à travers l'app ── */
.db-name{font-family:'Outfit','Inter',sans-serif;letter-spacing:-0.4px}
.db-name .db-drive{font-weight:800}
.db-name .db-book{font-weight:300}
#loading .logo{font-size:28px;color:var(--blue)}
.spinner{width:28px;height:28px;border:2.5px solid var(--blue-m);border-top-color:var(--blue);border-radius:50%;animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@keyframes fi{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:none}}
/* STAT GRID */
.stat-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:14px}
.stat-card{background:var(--white);border-radius:var(--r);padding:16px;border:1px solid var(--border)}