/* ETS BMB — feuille de style reprise fidèlement du prototype */

  /* Palette ETS BMB — bleu du logo (royal + navy) */
  :root{
    --teal:#1F4FE0; --teal-d:#10256B; --teal-bg:#EAF0FF; --teal-line:#9FB6F2;
    --gold:#C9A227; --red:#B23A2E; --green:#1E7B34;
    --ink:#18213a; --muted:#68728a; --line:#dde3f2; --bg:#f3f5fb; --white:#fff;
  }
  body[data-theme="dark"]{
    --teal:#5A82F6; --teal-d:#0B1430; --teal-bg:#17223f; --teal-line:#33508f;
    --gold:#d9b94a; --red:#e0705f; --green:#46a566;
    --ink:#e7ecf6; --muted:#93a0bd; --line:#243049; --bg:#0b111f; --white:#151d30;
  }
  body[data-theme="dark"] .fld input, body[data-theme="dark"] .fld select, body[data-theme="dark"] .fld textarea,
  body[data-theme="dark"] .dash-filters input, body[data-theme="dark"] .dash-filters select,
  body[data-theme="dark"] .tools input, body[data-theme="dark"] .tools select,
  body[data-theme="dark"] .art-tbl input, body[data-theme="dark"] .usr-inp, body[data-theme="dark"] .role-sel,
  body[data-theme="dark"] #pinZone input, body[data-theme="dark"] .dp-input, body[data-theme="dark"] .range-btn,
  body[data-theme="dark"] .chip, body[data-theme="dark"] .mode, body[data-theme="dark"] .dp-pop,
  body[data-theme="dark"] .modal, body[data-theme="dark"] .user-chip, body[data-theme="dark"] .seg button,
  body[data-theme="dark"] .btn.ghost, body[data-theme="dark"] .btn.danger, body[data-theme="dark"] .btn.val,
  body[data-theme="dark"] .profile-btn{
    background:var(--white)!important; color:var(--ink); border-color:var(--line);
  }
  body[data-theme="dark"] input::placeholder, body[data-theme="dark"] textarea::placeholder{color:var(--muted)}
  body[data-theme="dark"] .fld label{color:var(--muted)}
  body[data-theme="dark"] .btn.ghost, body[data-theme="dark"] .btn.val{border-color:var(--teal-line)}
  body[data-theme="dark"] .login-card{background:#151d30;color:var(--ink)}
  body[data-theme="dark"] .dp-day{color:var(--ink)}
  body[data-theme="dark"] .toast{background:#0a1020}
  body[data-theme="dark"] .pay-card,body[data-theme="dark"] .op-circuit{background:#101a30}
  .th-sun{display:none}
  body[data-theme="dark"] .th-moon{display:none}
  body[data-theme="dark"] .th-sun{display:inline}
  *{box-sizing:border-box;margin:0;padding:0}
  body{font-family:"Segoe UI",system-ui,Arial,sans-serif;background:var(--bg);color:var(--ink);font-size:14.5px;line-height:1.5}
  button{font-family:inherit;cursor:pointer}
  .app{display:flex;min-height:100vh}

  /* ---- Sidebar ---- */
  .side{width:210px;background:var(--teal-d);color:#cdd9f5;display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh}
  .side .logo{padding:18px 16px 14px;text-align:center;border-bottom:1px solid rgba(255,255,255,.08)}
  .side .logo img{width:124px;border-radius:12px;opacity:1;box-shadow:0 2px 10px rgba(0,0,0,.28)}
  .side nav{padding:10px 0;flex:1}
  .side nav button,.navbtn{display:flex;align-items:center;gap:10px;width:100%;border:0;background:none;color:#b8c6ee;
    padding:12px 18px;font-size:14.5px;text-align:left;border-left:3px solid transparent;text-decoration:none;cursor:pointer}
  .side nav button .ic,.navbtn .ic{font-size:17px;width:20px;text-align:center}
  .side nav button:hover,.navbtn:hover{background:rgba(255,255,255,.06);color:#fff}
  .side nav button.active,.navbtn.active{background:rgba(255,255,255,.10);color:#fff;border-left-color:var(--gold);font-weight:600}
  .side .foot{padding:12px 16px;font-size:11px;color:#7f8db8;border-top:1px solid rgba(255,255,255,.08)}

  /* ---- Main ---- */
  .main{flex:1;display:flex;flex-direction:column;min-width:0}
  .top{background:var(--white);border-bottom:1px solid var(--line);padding:14px 24px;display:flex;
    justify-content:space-between;align-items:center;gap:14px}
  .top h1{font-size:19px;color:var(--teal);font-weight:700}
  .top .sub{font-size:12.5px;color:var(--muted)}
  .content{padding:22px 24px;flex:1}

  /* ---- Cards ---- */
  .cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:14px;margin-bottom:22px}
  .card{background:var(--white);border:1px solid var(--line);border-radius:11px;padding:16px 18px;position:relative;overflow:hidden;cursor:pointer;transition:transform .12s,box-shadow .12s;text-decoration:none;color:inherit}
  .cards .card{text-align:center}
  .card:hover{transform:translateY(-2px);box-shadow:0 7px 18px rgba(0,0,0,.13)}
  .card.sel{box-shadow:0 0 0 3px rgba(31,79,224,.5),0 7px 18px rgba(0,0,0,.18)}
  .card .lab{font-size:12px;color:var(--muted);text-transform:uppercase;letter-spacing:.4px}
  .card .val{font-size:23px;font-weight:700;margin-top:6px}
  .card .val small{font-size:13px;font-weight:600;color:var(--muted)}
  .card.solde{background:var(--teal);color:#fff}
  .card.solde .lab{color:#bfe0db}
  .card.enc .val{color:var(--green)}
  .card.ops{background:#1d6fa5;color:#fff}
  .card.wait{background:#C9A227;color:#fff}
  .card.dec{background:var(--green);color:#fff}
  .card.compta{background:var(--teal-d);color:#fff}
  .card.refus{background:var(--red);color:#fff}
  .card.solde .lab,.card.ops .lab,.card.wait .lab,.card.dec .lab,.card.compta .lab{color:rgba(255,255,255,.82)}
  .card.ops .val,.card.wait .val,.card.dec .val,.card.compta .val{color:#fff}
  .card.solde .card-ic,.card.ops .card-ic,.card.wait .card-ic,.card.dec .card-ic,.card.compta .card-ic{color:rgba(255,255,255,.85);opacity:.85}
  .card .bar{position:absolute;left:0;top:0;bottom:0;width:4px}
  .card.enc .bar{background:var(--green)}.card.dec .bar{background:var(--red)}.card.ops .bar{background:var(--gold)}

  .panel{background:var(--white);border:1px solid var(--line);border-radius:12px;padding:0;overflow:hidden;margin-bottom:20px}
  .panel h2{font-size:15px;color:var(--teal);padding:14px 18px;border-bottom:1px solid var(--line);display:flex;justify-content:space-between;align-items:center}
  .panel .body{padding:18px}
  .form-panel{background:var(--teal-bg);border-color:var(--teal-line)}
  .form-panel h2{border-bottom-color:var(--teal-line)}

  /* ---- Form ---- */
  .grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px 18px}
  .fld{display:flex;flex-direction:column;gap:5px;margin-bottom:14px}
  .fld label{font-size:12.5px;font-weight:600;color:#3a4a4b}
  .fld input,.fld select,.fld textarea{padding:9px 11px;border:1px solid #cdd9d7;border-radius:8px;font-size:14.5px;font-family:inherit;background:#fff;color:var(--ink)}
  .fld input:focus,.fld select:focus,.fld textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 3px rgba(31,79,224,.14)}
  .fld .hint{font-size:12px;color:var(--muted);min-height:1em;font-style:italic}
  .seg{display:flex;gap:0;border:1px solid var(--teal);border-radius:9px;overflow:hidden;width:fit-content}
  .seg button{padding:9px 20px;border:0;background:#fff;color:var(--teal);font-weight:600;font-size:14px}
  .seg button.on.enc{background:var(--green);color:#fff}
  .seg button.on.dec{background:var(--red);color:#fff}
  .amount{font-size:20px!important;font-weight:700;color:var(--teal)}
  .btns{display:flex;gap:10px;flex-wrap:wrap;margin-top:6px}
  .btn{padding:10px 18px;border:0;border-radius:9px;font-size:14px;font-weight:600;background:var(--teal);color:#fff;display:inline-flex;align-items:center;gap:7px}
  .btn:hover{background:var(--teal-d)}
  .btn.ghost{background:#fff;color:var(--teal);border:1px solid var(--teal)}
  .btn.gold{background:var(--gold);color:#22303a}
  .btn.sm{padding:6px 11px;font-size:12.5px;border-radius:7px}
  .btn.danger{background:#fff;color:var(--red);border:1px solid #e3b4ae}
  .btn.danger:hover{background:var(--red);color:#fff}

  /* ---- Table ---- */
  .tools{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:14px}
  .tools input,.tools select{padding:8px 10px;border:1px solid #cdd9d7;border-radius:8px;font-size:13.5px}
  .tbl-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:10px}
  table{width:100%;border-collapse:collapse;font-size:13.5px;min-width:760px}
  th,td{padding:9px 11px;text-align:left;border-bottom:1px solid #eef3f2;white-space:nowrap}
  .tbl-wrap table{min-width:0;font-size:12.5px;table-layout:auto}
  .tbl-wrap th,.tbl-wrap td{padding:8px 8px;vertical-align:middle}
  .tbl-wrap td[data-label="Fournisseur"],.tbl-wrap td[data-label="Demandeur"],.tbl-wrap td[data-label="Demandeur"] .dem-cell{white-space:normal}
  th{background:var(--teal);color:#fff;font-weight:600;font-size:12.5px;text-transform:uppercase;letter-spacing:.3px;position:sticky;top:0}
  tbody tr:nth-child(even){background:#f8fbfa}
  tbody tr:hover{background:var(--teal-bg)}
  td.r,th.r{text-align:right}
  .tag{padding:2px 9px;border-radius:20px;font-size:11.5px;font-weight:600}
  .tag.enc{background:#e3f3e7;color:var(--green)}
  .tag.dec{background:#fbe7e3;color:var(--red)}
  .pos{color:var(--green);font-weight:600}.neg{color:var(--red);font-weight:600}
  tfoot td{font-weight:700;background:var(--teal-bg);border-top:2px solid var(--teal)}
  .empty{padding:40px;text-align:center;color:var(--muted)}

  .toast{position:fixed;bottom:22px;right:22px;background:var(--teal-d);color:#fff;padding:13px 18px;border-radius:10px;
    box-shadow:0 8px 26px rgba(0,0,0,.22);opacity:0;transform:translateY(12px);transition:.25s;z-index:50;font-size:14px}
  .toast.show{opacity:1;transform:none}

  .hide{display:none!important}

  /* ---- Icônes SVG ---- */
  .svgic{flex-shrink:0;vertical-align:middle;display:inline-block}
  .i{display:inline-flex;align-items:center;justify-content:center}
  .side nav button .i,.navbtn .i{width:20px}

  /* ---- Date picker élégant ---- */
  .dp{position:relative}
  .dp-input{cursor:pointer;background:#fff;padding-right:36px!important;width:100%}
  .dp-ico{position:absolute;right:11px;top:50%;transform:translateY(-50%);color:var(--teal);pointer-events:none;display:flex}
  .dp-pop{position:absolute;z-index:40;top:calc(100% + 6px);left:0;background:#fff;border:1px solid var(--line);
    border-radius:13px;box-shadow:0 14px 40px rgba(22,49,52,.18);padding:13px;width:268px;display:none}
  .dp-pop.show{display:block;animation:dpin .14s ease}
  @keyframes dpin{from{opacity:0;transform:translateY(-4px)}to{opacity:1;transform:none}}
  .dp-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:9px}
  .dp-head span{font-weight:700;color:var(--teal);font-size:14.5px}
  .dp-head button{width:30px;height:30px;border:0;background:var(--teal-bg);color:var(--teal);border-radius:8px;
    display:flex;align-items:center;justify-content:center;font-size:16px}
  .dp-head button:hover{background:var(--teal);color:#fff}
  .dp-wd{display:grid;grid-template-columns:repeat(7,1fr);gap:2px;margin-bottom:4px}
  .dp-wd span{text-align:center;font-size:11px;font-weight:600;color:var(--muted);padding:3px 0}
  .dp-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:2px}
  .dp-day{border:0;background:none;border-radius:8px;height:32px;font-size:13px;color:var(--ink);font-family:inherit}
  .dp-day:hover:not(:disabled){background:var(--teal-bg)}
  .dp-day.out{color:transparent;pointer-events:none}
  .dp-day.today{box-shadow:inset 0 0 0 1.5px var(--teal-line);font-weight:700;color:var(--teal)}
  .dp-day.sel{background:var(--teal);color:#fff;font-weight:700}
  .dp-foot{display:flex;justify-content:flex-end;margin-top:9px;padding-top:9px;border-top:1px solid var(--line)}
  .dp-foot button{border:0;background:none;color:var(--teal);font-weight:600;font-size:13px;padding:5px 10px;border-radius:7px;font-family:inherit}
  .dp-foot button:hover{background:var(--teal-bg)}
  .card .card-ic{position:absolute;right:14px;top:14px;opacity:.5}
  .modes{display:flex;gap:9px;flex-wrap:wrap}
  .mode{display:inline-flex;align-items:center;gap:9px;padding:10px 16px;border:1.4px solid #cdd9d7;background:#fff;
    border-radius:11px;font-size:14px;font-weight:600;color:#3a4a4b;font-family:inherit}
  .mode:hover{border-color:var(--teal)}
  .mode.on{border-color:var(--teal);background:var(--teal-bg);color:var(--teal);box-shadow:0 0 0 2px rgba(38,84,88,.1)}
  .m-ic{display:inline-flex}
  .mc-cash{color:#1E7B34}.mc-om{color:#ff7900}.mc-eco{color:#0a5bb5}
  .rc-mic{display:inline-flex;vertical-align:-3px;margin-right:4px}
  /* ---- Connexion & utilisateurs ---- */
  #loginScreen{position:fixed;inset:0;z-index:200;background:linear-gradient(135deg,var(--teal-d),var(--teal));display:flex;align-items:center;justify-content:center;padding:20px}
  .login-card{background:#fff;border-radius:18px;padding:30px 28px;width:362px;max-width:100%;box-shadow:0 22px 60px rgba(0,0,0,.35);text-align:center}
  .login-logo{height:96px;width:96px;object-fit:cover;border-radius:16px;margin-bottom:10px;box-shadow:0 3px 12px rgba(16,37,107,.18)}
  .login-card h2{color:var(--teal);font-size:21px;margin:2px 0}
  .login-sub{color:var(--muted);font-size:12.5px;margin-bottom:18px}
  .login-eb{display:block;font-size:20px;font-weight:800;color:var(--teal);letter-spacing:.4px;line-height:1.18;margin-bottom:3px;text-transform:uppercase}
  .login-notif{display:flex;align-items:center;justify-content:center;gap:9px;background:#fef6e0;border:1px solid var(--gold);color:#7a5b00;border-radius:10px;padding:11px 14px;font-size:13px;font-weight:600;margin-bottom:16px;text-align:left}
  .login-notif svg{stroke:var(--gold);flex:0 0 auto}
  .login-notif b{color:#7a5b00}
  .login-card .fld{text-align:left;margin-bottom:12px}
  .login-err{color:var(--red);font-size:12.5px;min-height:1.2em;margin-bottom:8px}
  .user-chip{display:inline-flex;align-items:center;gap:9px;background:#fff;border:1px solid var(--line);border-radius:11px;padding:6px 13px}
  .user-chip .dot{width:9px;height:9px;border-radius:50%;background:var(--muted);flex-shrink:0}
  body[data-role="comptable"] .user-chip .dot{background:var(--gold)}
  body[data-role="directrice"] .user-chip .dot{background:var(--green)}
  body[data-role="admin"] .user-chip .dot{background:#7c4dff}
  .user-chip .uc-txt{display:flex;flex-direction:column;line-height:1.15;text-align:left}
  .user-chip b{font-size:13px;color:var(--ink)}
  .user-chip small{font-size:10.5px;color:var(--muted)}
  #notifBtn{position:relative}
  .notif-badge{position:absolute;top:-5px;right:-5px;min-width:17px;height:17px;padding:0 4px;background:var(--red);color:#fff;border-radius:9px;font-size:10.5px;font-weight:700;display:flex;align-items:center;justify-content:center;line-height:1;border:2px solid var(--white)}
  .notif-panel{position:absolute;top:calc(100% + 8px);right:0;width:326px;max-width:88vw;max-height:62vh;overflow:auto;background:var(--white);border:1px solid var(--line);border-radius:12px;box-shadow:0 14px 40px rgba(0,0,0,.18);z-index:80;display:none;padding:8px}
  .notif-panel.show{display:block}
  .notif-head{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:6px 8px 8px;border-bottom:1px solid var(--line);margin-bottom:6px}
  .notif-head b{font-size:13.5px;color:var(--teal)}
  .notif-mark{font-size:11.5px;color:var(--teal);background:none;border:none;cursor:pointer;font-family:inherit;font-weight:600;white-space:nowrap}
  .notif-item{display:block;width:100%;text-align:left;border:none;background:none;padding:9px 8px;border-radius:8px;cursor:pointer;font-family:inherit}
  .notif-item:hover{background:var(--teal-bg)}
  .notif-item .ni-t{font-size:13px;color:var(--ink);font-weight:600}
  .notif-item .ni-s{font-size:11.5px;color:var(--muted);margin-top:2px}
  .notif-empty{padding:18px 8px;text-align:center;color:var(--muted);font-size:12.5px}
  .role-sel{padding:6px 9px;border:1px solid #cdd9d7;border-radius:8px;font-size:13px;font-family:inherit;background:#fff;color:var(--ink)}
  .card.solde .card-ic{opacity:.8;color:#bfe0db}

  @media(max-width:780px){
    .side{width:60px}.side .logo img{width:40px}.side nav button span.txt,.navbtn span.txt{display:none}.side .foot{display:none}
    .side nav button,.navbtn{justify-content:center;padding:14px 0}
    .grid2{grid-template-columns:1fr}
  }

  /* ---- Profil & validation ---- */
  .profile-btn{display:inline-flex;align-items:center;gap:7px;background:#fff;border:1px solid var(--teal);
    color:var(--teal);padding:8px 13px;border-radius:9px;font-size:13.5px;font-weight:600}
  .profile-btn .dot{width:9px;height:9px;border-radius:50%;background:var(--muted)}
  body[data-role="comptable"] .profile-btn .dot{background:var(--gold)}
  body[data-role="directrice"] .profile-btn .dot{background:var(--green)}
  .vb{padding:3px 9px;border-radius:20px;font-size:11.5px;font-weight:700;white-space:nowrap}
  .vb.wait{background:#FFD60A;color:#4a3800;border:1px solid #e0b400}.vb.mid{background:#8a6d12;color:#fff}.vb.ok{background:var(--green);color:#fff}
  .vb.no{background:var(--red);color:#fff}
  .num-chip{display:inline-block;background:var(--teal);color:#fff;font-weight:700;font-size:12px;letter-spacing:.4px;padding:3px 10px;border-radius:7px}
  .op-refus{background:#fbe3e0;border:1px solid #e3b4ae;color:#8a2a1e;border-radius:10px;padding:12px 14px;font-size:13px;line-height:1.45;margin-bottom:14px}
  .btn.val{background:#fff;color:var(--green);border:1px solid #a9d6b4}
  .btn.val:hover{background:var(--green);color:#fff}
  .card.wait .bar{background:#d68a2e}

  .modal-bg{position:fixed;inset:0;background:rgba(15,30,31,.5);display:none;align-items:center;justify-content:center;z-index:60;padding:20px}
  .modal-bg.show{display:flex}
  .modal{background:#fff;border-radius:14px;padding:22px;width:340px;max-width:100%;box-shadow:0 18px 50px rgba(0,0,0,.3)}
  .modal h3{color:var(--teal);font-size:17px;margin-bottom:14px}
  .prof-list{display:flex;flex-direction:column;gap:8px}
  .prof-list button{display:flex;align-items:center;padding:12px 14px;border:1px solid var(--line);background:#fff;border-radius:10px;text-align:left;font-size:14.5px;font-weight:600;color:var(--ink)}
  .prof-list button:hover{border-color:var(--teal);background:var(--teal-bg)}
  #pinZone{margin-top:14px;display:flex;flex-direction:column;gap:9px}
  #pinZone label{font-size:13px;font-weight:600;color:#3a4a4b}
  #pinZone input{padding:10px 12px;border:1px solid #cdd9d7;border-radius:9px;font-size:16px;letter-spacing:2px}
  .modal-btns{display:flex;gap:9px;justify-content:flex-end}

  /* ---- Autocomplete Fournisseur ---- */
  .tiers-wrap{position:relative}
  .tiers-drop{position:absolute;top:calc(100% + 2px);left:0;right:0;background:var(--white);border:1px solid var(--line);border-radius:8px;box-shadow:0 6px 22px rgba(0,0,0,.12);z-index:50;max-height:220px;overflow-y:auto}
  .tiers-opt{padding:9px 14px;cursor:pointer;font-size:14px;border-bottom:1px solid var(--line)}
  .tiers-opt:last-child{border-bottom:0}
  .tiers-opt:hover{background:var(--teal-bg)}
  .tiers-opt b{color:var(--text);font-weight:600}
  .tiers-opt span{color:var(--muted);font-size:12px}

  /* ---- Saisie multi-articles ---- */
  .art-wrap{border:1px solid var(--line);border-radius:8px;overflow:hidden}
  .art-tbl{width:100%;border-collapse:collapse;font-size:13.5px}
  .art-tbl th{background:var(--teal-bg);color:var(--teal);font-size:11.5px;font-weight:600;text-transform:uppercase;letter-spacing:.3px;padding:7px 8px;text-align:left}
  .art-tbl th.qcol{width:74px}.art-tbl th.pcol{width:140px}.art-tbl th.tcol{width:120px;text-align:right}.art-tbl th.xcol{width:38px}
  .art-tbl td{padding:5px 6px;border-top:1px solid var(--line);vertical-align:middle}
  .art-tbl input{width:100%;border:1px solid #cdd9d7;border-radius:6px;padding:7px 8px;font-size:13.5px;font-family:inherit;color:var(--ink)}
  .art-tbl .art-qte,.art-tbl .art-pu{text-align:right}
  .art-lt{text-align:right;font-weight:600;white-space:nowrap}
  .art-del{border:none;background:#f3e3e0;color:var(--red);width:28px;height:28px;border-radius:6px;cursor:pointer;font-size:17px;line-height:1;display:flex;align-items:center;justify-content:center;margin:0 auto}
  .art-del:hover{background:var(--red);color:#fff}
  .pieces-btns{display:flex;gap:10px;flex-wrap:wrap;margin-bottom:10px}
  .pj-btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--teal-line);background:var(--white);color:var(--teal);border-radius:8px;padding:9px 14px;font-size:13.5px;font-weight:600;cursor:pointer;font-family:inherit}
  .pj-btn:hover{background:var(--teal-bg)}
  .pieces-grid{display:flex;flex-wrap:wrap;gap:10px}
  .pj-thumb{position:relative;width:86px;height:86px;border-radius:8px;overflow:hidden;border:1px solid var(--line);background:var(--teal-bg)}
  .pj-thumb img{width:100%;height:100%;object-fit:cover;cursor:pointer;display:block}
  .pj-del{position:absolute;top:3px;right:3px;width:22px;height:22px;border:none;background:rgba(178,58,46,.92);color:#fff;border-radius:50%;cursor:pointer;font-size:15px;line-height:1;display:flex;align-items:center;justify-content:center;padding:0}
  .op-pieces-sec{margin:12px 0}
  .pj-viewer{position:fixed;inset:0;background:rgba(8,16,16,.88);z-index:300;display:none;align-items:center;justify-content:center;padding:18px}
  .pj-viewer.show{display:flex}
  .pj-viewer img{max-width:96vw;max-height:92vh;border-radius:8px;box-shadow:0 12px 44px rgba(0,0,0,.55)}
  .art-actions{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-top:9px;flex-wrap:wrap}
  .art-total{display:flex;align-items:baseline;gap:9px;font-size:15px;margin-left:auto}
  .art-total b{color:var(--teal);font-size:19px}
  .usr-sd{display:flex;flex-direction:column;gap:4px}
  .usr-inp{border:1px solid #cdd9d7;border-radius:6px;padding:5px 7px;font-size:12.5px;font-family:inherit;width:160px;color:var(--ink)}
  .avatar{border-radius:50%;object-fit:cover;display:inline-flex;align-items:center;justify-content:center;vertical-align:middle;background:var(--teal-bg);color:var(--teal);font-weight:700;flex:0 0 auto;overflow:hidden;line-height:1}
  .dem-cell{display:flex;align-items:center;gap:8px}
  #opModal .modal{width:920px;max-width:96vw;max-height:90vh;overflow:auto}
  .op-grid{display:grid;grid-template-columns:1fr 1fr;gap:11px 18px;margin:15px 0;font-size:13.5px}
  .op-k{font-size:10.5px;text-transform:uppercase;letter-spacing:.4px;color:var(--muted);display:block;margin-bottom:3px}
  .op-tbl{width:100%;border-collapse:collapse;font-size:13px;margin-bottom:8px}
  .op-tbl th{background:var(--teal-bg);color:var(--teal);text-align:left;padding:6px 8px;font-size:11px;text-transform:uppercase;letter-spacing:.3px}
  .op-tbl td{border-bottom:1px solid var(--line);padding:6px 8px}
  .op-tbl .r{text-align:right}
  .op-tbl tfoot td{border-top:2px solid var(--teal);border-bottom:0;padding-top:8px}
  /* Tableau récap. de la fenêtre de validation.
     Grand écran : vrai tableau qui tient entièrement dans la fenêtre élargie (pas de défilement horizontal).
     La colonne Article peut revenir à la ligne ; les colonnes chiffrées restent sur une ligne. */
  .op-tbl{width:100%;min-width:0;table-layout:auto}
  .op-tbl th:first-child,.op-tbl td:first-child{white-space:normal;word-break:break-word}
  .op-tbl th.r,.op-tbl td.r{white-space:nowrap;text-align:right;padding-left:16px}
  /* Petit écran (téléphone) : passage en cartes empilées, label à gauche / valeur à droite */
  @media(max-width:680px){
  .op-tbl{display:block;min-width:0;max-width:100%}
  .op-tbl thead{display:none}
  .op-tbl tbody,.op-tbl tfoot,.op-tbl tr,.op-tbl td{display:block;width:auto;max-width:100%}
  .op-tbl tbody tr{border:1px solid var(--line);border-radius:8px;padding:5px 11px;margin-bottom:8px}
  .op-tbl tbody td{display:flex;justify-content:space-between;align-items:baseline;gap:12px;padding:4px 0;border:none;text-align:right;white-space:normal;word-break:break-word}
  .op-tbl tbody td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:11.5px;text-align:left;flex:0 0 auto}
  .op-tbl tfoot tr{display:flex;justify-content:space-between;align-items:center;background:var(--teal-bg);border:1px solid var(--teal-line);border-radius:8px;padding:8px 11px}
  .op-tbl tfoot td{display:inline-block;border:none;padding:0;width:auto;max-width:none}
  }
  .op-lettres{font-style:italic;color:#3a4a4b;font-size:12.5px;margin:0 0 16px}
  .op-circuit{display:flex;flex-direction:column;gap:12px;background:var(--bg);border:1px solid var(--line);border-radius:10px;padding:14px;margin-bottom:16px}
  .op-step{display:flex;align-items:center;gap:12px}
  .op-dot{width:30px;height:30px;border-radius:50%;background:#c4d2d0;color:#fff;display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;flex:0 0 auto}
  .op-step.done .op-dot{background:var(--green)}
  .op-actions{display:flex;gap:9px;flex-wrap:wrap;margin-bottom:4px}
  .u-photo-row{display:flex;align-items:center;gap:16px;margin-bottom:16px}
  .u-avatar{width:66px;height:66px;border-radius:50%;background:var(--teal-bg);color:var(--teal);display:flex;align-items:center;justify-content:center;cursor:pointer;overflow:hidden;border:2px solid var(--teal-line)}
  .u-avatar img{width:100%;height:100%;object-fit:cover}
  .dash-filters{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-end;background:var(--white);border:1px solid var(--line);border-radius:12px;padding:13px 16px;margin-bottom:16px}
  .dash-filters .ff{display:flex;flex-direction:column;gap:4px}
  .dash-filters label{font-size:11.5px;color:var(--muted);font-weight:600;text-transform:uppercase;letter-spacing:.3px}
  .dash-filters input,.dash-filters select{border:1px solid #cdd9d7;border-radius:8px;padding:8px 10px;font-size:14px;font-family:inherit;color:var(--ink);background:#fff}
  .ff-chips{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
  .chip{border:1px solid #cdd9d7;background:#fff;color:var(--ink);border-radius:99px;padding:8px 15px;font-size:13px;font-weight:600;cursor:pointer;font-family:inherit;transition:.15s}
  .chip:hover{border-color:var(--teal)}
  .chip.on{background:var(--teal);border-color:var(--teal);color:#fff}
  .range-btn{display:flex;align-items:center;justify-content:space-between;gap:10px;border:1px solid #cdd9d7;border-radius:8px;padding:8px 11px;background:#fff;font-size:14px;font-family:inherit;color:var(--ink);cursor:pointer;min-width:215px;text-align:left}
  .range-btn:hover{border-color:var(--teal)}
  .range-btn .dp-ico{position:static;transform:none;color:var(--teal)}
  .dp-day.r-edge{background:var(--teal)!important;color:#fff!important;border-radius:8px}
  .dp-day.r-in{background:var(--teal-bg);border-radius:0}
  .dash-filters .btn{margin-bottom:1px}
  .pay-kpis{display:grid;grid-template-columns:repeat(3,1fr);gap:14px}
  .pay-card{border:2px solid var(--pc);border-radius:10px;padding:13px 16px;background:var(--white);text-align:center}
  .pay-top{display:flex;align-items:center;gap:8px;margin-bottom:7px;justify-content:center}
  .pay-top b{font-size:13.5px}
  .pay-ic{color:var(--pc);display:inline-flex}
  .pay-pct{font-size:12.5px;font-weight:700;color:var(--pc)}
  .pay-amt{font-size:20px;font-weight:700;color:var(--ink);line-height:1.1}
  .pay-amt small{font-size:11.5px;color:var(--muted);font-weight:500}
  .pay-sub{font-size:12.5px;color:var(--muted);margin-top:3px}
  .pay-bar{height:6px;background:var(--teal-bg);border-radius:99px;margin-top:10px;overflow:hidden}
  .pay-bar span{display:block;height:100%;background:var(--pc);border-radius:99px}
  @media(max-width:640px){.pay-kpis{grid-template-columns:1fr}}
  /* Labels nav : version courte masquée par défaut (desktop) */
  .nav-short{display:none}
  .nav-full{display:inline}

  @media(max-width:680px){
    .app{flex-direction:column}
    .side{position:fixed;left:0;right:0;bottom:0;top:auto;width:100%!important;height:auto;flex-direction:row;z-index:60;border-top:1px solid rgba(255,255,255,.12);box-shadow:0 -4px 20px rgba(0,0,0,.35)}
    .side .logo,.side .foot{display:none}
    .side nav{display:flex;flex-direction:row;width:100%;padding:0 4px;flex:none;gap:2px}
    .side nav button,.navbtn{flex:1;flex-direction:column;gap:4px;padding:8px 4px 6px!important;border-left:0!important;border-top:0!important;justify-content:center;align-items:center;border-radius:10px;margin:4px 0}
    /* Icône dans un badge arrondi */
    .side nav button .i,.navbtn .i{width:36px;height:32px;border-radius:10px;display:flex;align-items:center;justify-content:center;transition:background .18s,color .18s}
    /* État actif : badge coloré + label doré */
    .side nav button.active,.navbtn.active{background:transparent}
    .side nav button.active .i,.navbtn.active .i{background:rgba(201,162,39,.22)}
    .side nav button.active span.txt,.navbtn.active span.txt{color:var(--gold)}
    .side nav button:not(.active):active .i,.navbtn:not(.active):active .i{background:rgba(255,255,255,.12)}
    /* Labels */
    .side nav button span.txt,.navbtn span.txt{display:block!important;font-size:10.5px;line-height:1.1;font-weight:600;color:rgba(255,255,255,.65);text-align:center;white-space:nowrap}
    .side nav button.active span.txt,.navbtn.active span.txt{color:var(--gold);font-weight:700}
    /* Afficher label court seulement sur mobile */
    .nav-short{display:inline}
    .nav-full{display:none}
    .main{padding-bottom:68px}
    .top{flex-wrap:wrap;gap:8px;padding:11px 13px}
    .top h1{font-size:17px}
    .top .sub{display:none}
    #newBtn{display:none!important}
    .user-chip{padding:5px 9px}.user-chip .uc-txt small{display:none}
    .content{padding:14px 12px}
    .panel h2{padding:12px 14px;font-size:14px}
    .cards{grid-template-columns:1fr;gap:11px;margin-bottom:16px}
    .pay-kpis{grid-template-columns:1fr}
    .dash-filters{padding:12px;gap:10px}
    .dash-filters .ff,.dash-filters .ff-chips{width:100%}
    .ff-chips{justify-content:space-between}
    .chip{flex:1;text-align:center;padding:9px 5px}
    .range-btn,#dashWho{min-width:0;width:100%}
    .dash-filters>button{width:100%;justify-content:center}
    .fld input,.fld select,.fld textarea,.dash-filters input,.dash-filters select,.tools input,#pinZone input,.art-tbl input{font-size:16px}
    .grid2{grid-template-columns:1fr}
    .tools{flex-wrap:wrap}.tools input{width:100%}
    .tbl-wrap{overflow:visible;border:0;border-radius:0}
    .tbl-wrap table{min-width:0}
    .tbl-wrap thead{display:none}
    .tbl-wrap tbody,.tbl-wrap tbody tr,.tbl-wrap tbody td{display:block;width:100%}
    .tbl-wrap tbody tr{border:1px solid var(--line);border-radius:11px;margin-bottom:11px;padding:8px 13px;background:var(--white);box-shadow:0 1px 4px rgba(0,0,0,.05)}
    .tbl-wrap tbody td{border:0!important;padding:5px 0;display:flex;justify-content:space-between;align-items:flex-start;gap:12px;white-space:normal;word-break:break-word;overflow-wrap:anywhere;text-align:right}
    .tbl-wrap tbody td::before{content:attr(data-label);font-weight:600;color:var(--muted);text-align:left;font-size:12px;flex:0 0 auto;padding-top:2px}
    .tbl-wrap tbody td:last-child{justify-content:flex-end;border-top:1px solid var(--line)!important;margin-top:6px;padding-top:9px}
    .tbl-wrap tbody td:last-child::before{display:none}
    /* Cellule Nom avec avatar : photo à gauche, label "Nom" masqué */
    .tbl-wrap tbody td[data-label="Nom"]{flex-direction:row;align-items:center}
    .tbl-wrap tbody td[data-label="Nom"]::before{display:none}
    .tbl-wrap tbody td[data-label="Nom"] .dem-cell{justify-content:flex-start;width:100%}
    /* Cellules valeur : peuvent se rétrécir et wrapper */
    .tbl-wrap tbody td > span,.tbl-wrap tbody td > b,.tbl-wrap tbody td > div:not(.dem-cell){min-width:0;flex-shrink:1}
    .tbl-wrap tfoot tr{display:flex;justify-content:space-between;background:var(--teal-bg);border-radius:10px;padding:11px 13px;font-weight:700;color:var(--teal-d)}
    .tbl-wrap tfoot td{display:none;padding:0;border:0}
    .tbl-wrap tfoot td:first-child,.tbl-wrap tfoot td:nth-child(2){display:block}
    .modal{width:94vw!important;max-width:94vw!important;max-height:88vh;overflow:auto}
    #opModal .modal,#userModal .modal{width:94vw!important;max-width:94vw!important}
    .op-grid{grid-template-columns:1fr 1fr}
    .dp-pop{width:min(92vw,300px)!important;left:0;right:auto}
    .art-tbl thead{display:none}
    .art-tbl,.art-tbl tbody,.art-tbl tr,.art-tbl td{display:block;width:auto}
    .art-tbl tr{border:1px solid var(--teal-line);border-radius:10px;padding:10px 12px;margin-bottom:11px;background:var(--white)}
    .art-tbl td{padding:6px 0;border-top:none}
    .art-tbl td[data-label]::before{content:attr(data-label);display:block;font-size:12px;color:var(--muted);font-weight:600;margin-bottom:4px}
    .art-tbl td input{width:100%;max-width:none;text-align:left;position:relative;z-index:1;background:var(--white)}
    .art-tbl td.art-lt{display:flex;align-items:center;justify-content:space-between;font-weight:700;color:var(--teal);border-top:1px dashed var(--line);padding-top:9px;margin-top:3px}
    .art-tbl td.art-lt::before{margin-bottom:0}
    .art-tbl td.art-c-del{padding-top:6px}
    .art-tbl td.art-c-del button{margin:0 0 0 auto}
    .btns .btn{flex:1;justify-content:center}
    .modal-btns .btn{flex:1;justify-content:center}
  }

  /* ============ FORMULAIRE DE DEMANDE DU PAIEMENT (écran + impression) ============ */
  #printArea{display:none}
  .form-doc{width:100%;max-width:194mm;min-height:279mm;margin:0 auto;background:#fff;color:#111;border:1pt solid #111;
    font-family:"DejaVu Sans",Arial,sans-serif;font-size:9pt;line-height:1.35;display:flex;flex-direction:column}
  .fd-top{display:flex;justify-content:space-between;align-items:center;padding:6px 12px;border-bottom:1pt solid #111}
  .fd-logo{height:48px}
  .fd-dn{font-size:10pt;font-weight:bold;text-align:right}
  .fd-dn div{margin:3px 0}
  .fd-dn u{display:inline-block;min-width:95px;text-decoration:none;border-bottom:1px solid #111;text-align:center;padding:0 6px}
  .fd-title{text-align:center;font-size:14pt;font-weight:bold;text-transform:uppercase;letter-spacing:.5px;
    padding:6px;border-bottom:1pt solid #111;color:var(--teal)}
  .fd-pay{display:flex;border-bottom:1pt solid #111}
  .fd-pay-l{flex:1.4;padding:7px 12px;border-right:1pt solid #111}
  .fd-pay-r{flex:1;padding:7px 12px;display:flex;flex-direction:column;justify-content:center}
  .fd-pay b{display:block;margin-bottom:5px}
  .fd-mline{display:flex;align-items:center;justify-content:space-between;gap:12px;margin:3px 0;max-width:230px}
  .fd-box.pay-on{background:var(--green);color:#fff;border-color:var(--green);print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .fd-box{width:15px;height:15px;border:1pt solid #111;display:inline-flex;align-items:center;justify-content:center;
    font-weight:bold;color:var(--teal);flex-shrink:0;font-size:11px}
  .fd-sec{background:var(--teal);color:#fff;font-weight:bold;text-align:center;padding:4px;font-size:10.5pt}
  .fd-row{display:flex;align-items:baseline;gap:8px;padding:5px 12px;font-size:9.5pt}
  .fd-row b{white-space:nowrap}
  .fd-val{flex:1;border-bottom:1px dotted #555;min-height:1.05em;font-weight:bold;padding-left:4px}
  .fd-signs{display:flex;gap:30px;padding:10px 12px 8px;justify-content:space-around}
  .fd-sign{text-align:right;flex:1;font-size:8.5pt;font-weight:bold;padding-right:6px}
  .fd-sp{height:30px;border-bottom:1px solid #111;margin-bottom:3px}
  .fd-approver{font-weight:normal;font-size:9pt;margin-top:5px;min-height:14px}
  .fd-apdate{font-weight:normal;font-size:8pt;color:#444;margin-top:2px}
  .fd-tbl{width:100%;border-collapse:separate;border-spacing:0;border-top:.8pt solid #111;border-left:.8pt solid #111;font-size:8.5pt;table-layout:fixed;print-color-adjust:exact;-webkit-print-color-adjust:exact}
  .fd-tbl th,.fd-tbl td{border-right:.8pt solid #111;border-bottom:.8pt solid #111;padding:2px 6px;text-align:center;line-height:1.15}
  .fd-tbl tbody tr{height:19px}
  .fd-tbl thead tr,.fd-tbl tr.tot{height:auto}
  .fd-tbl th{background:var(--teal-bg);color:var(--teal);font-size:7.8pt;text-transform:none;word-wrap:break-word}
  .fd-tbl td.l{overflow-wrap:anywhere}
  .fd-tbl td.l{text-align:left}
  .fd-tbl tr.tot td{font-weight:bold;text-align:right}
  .fd-tbl tr.tot td:last-child{text-align:center}
  .fd-cert{font-style:italic;padding:5px 16px 2px;margin-top:138px;font-size:8.8pt;text-align:center}
  .fd-nb{padding:4px 16px 6px;font-size:8pt;text-align:justify}
  .fd-compta{border-top:1pt solid #111;margin-top:auto}
  .fd-compta-h{background:#e8edec;border-bottom:1pt solid #111;text-align:center;font-weight:bold;padding:4px;font-size:9.5pt}
  .fd-compta-grid{display:flex}
  .fd-cc{flex:.5;border-right:1pt solid #111;padding:10px 12px;display:flex;flex-direction:column;justify-content:center;gap:10px}
  .fd-cc2{flex:1.5;padding:7px 14px}
  .fd-row.sm{padding:4px 0;font-size:8.8pt}
  .fd-just{border-top:1pt solid #111;padding:5px 16px;font-size:8pt;font-weight:bold}

  /* ============ AMÉLIORATIONS PWA / MOBILE ============ */

  /* Feedback tactile sur tous les éléments cliquables */
  @media(hover:none){
    .btn:active{opacity:.78;transform:scale(.97)}
    .navbtn:active,.card:active{opacity:.82}
    .chip:active{transform:scale(.95)}
    .tbl-wrap tbody tr:active{background:var(--teal-bg)}
  }

  /* Safe-area iPhone X+ (encoche + barre home) */
  @supports(padding-bottom:env(safe-area-inset-bottom)){
    @media(max-width:680px){
      .side{padding-bottom:env(safe-area-inset-bottom)}
      .main{padding-bottom:calc(66px + env(safe-area-inset-bottom))}
      .toast{bottom:calc(22px + env(safe-area-inset-bottom))}
    }
  }

  /* Flash messages */
  .flash{display:flex;align-items:center;gap:10px;padding:13px 16px;border-radius:10px;font-size:14.5px;font-weight:500;margin:0 0 14px;border-left:4px solid transparent}
  .flash-success{background:#e6f4ea;color:#1a5e2a;border-color:#1E7B34}
  .flash-error,.flash-danger{background:#fdecea;color:#7b1a1a;border-color:#B23A2E}
  .flash-warning{background:#fef8e6;color:#5c430a;border-color:#C9A227}
  .flash-info{background:#e8f0f8;color:#0d3460;border-color:#2563eb}
  body[data-theme="dark"] .flash-success{background:#0e2e17;color:#5eba78;border-color:#1E7B34}
  body[data-theme="dark"] .flash-error,body[data-theme="dark"] .flash-danger{background:#2e0e0e;color:#e0705f;border-color:#B23A2E}
  body[data-theme="dark"] .flash-warning{background:#2a1e05;color:#d9b94a;border-color:#C9A227}
  body[data-theme="dark"] .flash-info{background:#0d1e36;color:#7ab3f0;border-color:#2563eb}
  @media(max-width:680px){
    .flash{margin:0 0 10px;border-radius:9px;font-size:13.5px}
  }

  /* Pagination responsive */
  .pagination{display:flex;align-items:center;gap:6px;justify-content:center;padding:12px 0;flex-wrap:wrap}
  @media(max-width:680px){
    .pagination .btn{flex:1;justify-content:center;min-width:90px;padding:10px 8px}
    .pagination span{font-size:12.5px;width:100%;text-align:center;order:-1}
  }

  /* Modes de paiement en colonne sur très petit écran */
  @media(max-width:400px){
    .modes{flex-direction:column}
    .mode{width:100%;justify-content:center}
  }

  /* Bouton "Ajouter un article" pleine largeur sur mobile */
  @media(max-width:680px){
    .art-actions{flex-direction:column;align-items:stretch}
    .art-actions .btn{justify-content:center}
    .art-total{justify-content:space-between;background:var(--teal-bg);border-radius:8px;padding:10px 13px}
    .art-total b{font-size:17px}
  }

  /* Pièces jointes : grille adaptive */
  @media(max-width:680px){
    .pieces-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(80px,1fr));gap:8px}
    .pj-thumb{width:auto;height:80px}
  }

  /* op-grid en colonne sur très petit écran */
  @media(max-width:400px){
    .op-grid{grid-template-columns:1fr}
  }

  /* Top bar : masquer les boutons secondaires sur mobile pour gagner de la place */
  @media(max-width:400px){
    #themeBtn{display:none}
  }

  /* Bouton notif : zone de tap plus large */
  @media(max-width:680px){
    .top .btn.ghost.sm{min-width:38px;min-height:38px;justify-content:center}
  }

  /* Bouton d'installation PWA */
  .pwa-install-btn{background:var(--gold);color:#1a1200;border:none;font-weight:600;gap:5px;animation:pwa-pulse 2s ease-in-out infinite}
  .pwa-install-btn:hover{background:#b8911f}
  @keyframes pwa-pulse{0%,100%{box-shadow:0 0 0 0 rgba(201,162,39,.45)}50%{box-shadow:0 0 0 6px rgba(201,162,39,0)}}
  @media(max-width:480px){.pwa-install-lbl{display:none}}

  @media print{
    @page{size:A4 portrait;margin:7mm}
    .app,#loginScreen,.toast,.modal-bg{display:none!important}
    #printArea{display:block!important}
    .form-doc{width:100%;max-width:none}
  }