/* Atitra — styles repris de la maquette (zotra-maquette-complete.html) */ :root{ --p1:#9FA1FF; --p2:#B5BAFF; --p3:#AEE2FF; --p4:#D9F9DF; --grad:linear-gradient(135deg,#8F92FB 0%,var(--accent) 55%,#4A4DC9 100%); --ink:#23245A; --ink-2:#34367A; --muted:#62658F; --line:#E3E5FF; --soft:#F5F6FF; --glass:rgba(255,255,255,.92); --warn:#9A5B00; --warn-bg:#FFF0D1; --err:#C62E33; --err-bg:#FFE6E6; --ok:#17875C; --ok-bg:#DDF5EA; --pen:#2F3FA8; --pen-red:#D1363B; --accent:#5B5EE0; --accent-soft:#ECEBFF; --accent-soft-2:#DCDCFF; --sh:0 10px 40px rgba(35,36,90,.06); --pattern:none; } *{box-sizing:border-box} html,body{margin:0} body{font-family:"Plus Jakarta Sans",system-ui,sans-serif;color:var(--ink);font-size:14px;line-height:1.45;min-height:100vh;-webkit-font-smoothing:antialiased; background:var(--p2)} body::before{content:"";position:fixed;inset:0;z-index:-1;pointer-events:none;transform:translateZ(0); background:var(--pattern) 0 0/190px 190px repeat, linear-gradient(135deg,var(--p1) 0%,var(--p2) 34%,var(--p3) 68%,var(--p4) 100%)} a{color:inherit} button,input,select,textarea{font:inherit;color:inherit} button{cursor:pointer} :focus-visible{outline:3px solid var(--ink);outline-offset:2px;border-radius:8px} .serif{font-family:"Instrument Serif",serif;font-style:italic;font-weight:400} .logo{display:flex;align-items:center;gap:10px;font-weight:800;font-size:24px;letter-spacing:-.035em;text-decoration:none} .logo svg{width:36px;height:28px} /* ---------- connexion ---------- */ .login{min-height:100vh;display:grid;place-items:center;padding:24px} .login-card{width:100%;max-width:420px;background:var(--glass);border-radius:30px;padding:36px;box-shadow:0 30px 60px -35px rgba(35,36,90,.7)} .login h1{font-size:34px;letter-spacing:-.04em;line-height:1.05;margin:26px 0 8px} .login p{color:var(--muted);margin:0 0 24px} .login-liens{display:flex;flex-wrap:wrap;justify-content:center;gap:4px 12px;margin-top:20px;padding-top:14px;border-top:1px solid var(--line)} .login-liens a{font-size:12px;font-weight:600;color:var(--muted);text-decoration:none} .login-liens a:hover{color:var(--accent)} .field{display:flex;flex-direction:column;gap:6px;margin-bottom:16px} .field>span,.field>label.lbl{display:block;font-size:.78rem;font-weight:700;margin:0;color:var(--ink)} .field .opt{font-weight:500;color:var(--muted)} .field input,.field select,.field textarea{width:100%;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 13px;color:var(--ink);font-size:.88rem} .field input:focus,.field select:focus,.field textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)} .field input::placeholder,.field textarea::placeholder,.tb-search input::placeholder,.search::placeholder{color:#A7AAC6} .field .input{display:flex;align-items:center;gap:9px;border:1px solid var(--line);border-radius:12px;padding:0 13px;background:#fff;transition:.2s} .field .input:focus-within{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .field .input input,.field .input select,.field .input textarea{border:0;outline:none;box-shadow:none;padding:11px 0;border-radius:0;background:none} .field .input input:focus,.field .input select:focus,.field .input textarea:focus{box-shadow:none} .field .input .pre,.field .input .suf{font-size:.78rem;font-weight:700;color:var(--muted);flex:none} .field .input.bad{border-color:var(--err);background:#FFFAFA} .field .input input[type=color]{height:40px;padding:5px 0;cursor:pointer} .field .aide{display:block;font-size:.74rem;color:var(--muted);line-height:1.5} .field .erreur{display:block;font-size:.74rem;color:var(--err);font-weight:700} .form-sect{font-size:.68rem;font-weight:800;color:var(--muted);letter-spacing:.6px;text-transform:uppercase;padding-bottom:9px;border-bottom:1px solid var(--line);margin:26px 0 16px} .form-sect:first-child{margin-top:0} .field.check{flex-direction:row;gap:10px;align-items:center} .field.check input{width:17px;height:17px;accent-color:var(--accent);flex:none} .field.check>span{font-weight:600} .errorlist{list-style:none;margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--err-bg);color:var(--err);font-weight:600;font-size:14px} /* ---------- structure : menu latéral + barre du haut (forme LiveCRM, couleurs Atitra) ---------- */ .app-shell{display:grid;grid-template-columns:250px minmax(0,1fr);min-height:100vh} .app-colonne{min-width:0} .av{width:34px;height:34px;border-radius:50%;display:grid;place-items:center;font-weight:700;color:#fff;background:var(--c,var(--p1));flex:none;font-size:13px} .sb{background:#fff;border-right:1px solid var(--line);padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:4px;overflow-y:auto;z-index:40} .sb-haut{display:flex;align-items:center;gap:6px;padding:0 0 14px} .sb-logo{display:flex;align-items:center;gap:9px;padding:2px 8px;font-weight:800;font-size:21px;letter-spacing:-.035em;color:var(--ink);text-decoration:none;flex:1;min-width:0} .sb-logo svg{width:32px;height:25px;flex:none} .sb-lbl{font-size:.66rem;font-weight:700;color:#A9ABC8;letter-spacing:.6px;padding:14px 12px 5px} .sb-link{display:flex;align-items:center;gap:11px;padding:9px 12px;border-radius:10px;color:#6C6F93;font-size:14px;font-weight:600;text-decoration:none;transition:.15s} .sb-link svg{width:18px;height:18px;stroke:#9A9DBE;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;flex:none;transition:.15s} .sb-link:hover{background:var(--soft);color:var(--ink)} .sb-link:hover svg{stroke:var(--ink)} .sb-link.on{background:var(--accent-soft);color:var(--accent)} .sb-link.on svg{stroke:var(--accent)} .sb-compteur{margin-left:auto;min-width:20px;text-align:center;background:linear-gradient(135deg,var(--p1),var(--accent));color:#fff;font-size:.66rem;font-weight:800;border-radius:20px;padding:2px 7px} .sb-plier,.sb-fermer,.tb-menu{width:34px;height:34px;border-radius:9px;border:1px solid var(--line);background:#fff;display:grid;place-items:center;cursor:pointer;flex:none;transition:.15s} .sb-plier:hover{border-color:var(--accent-soft-2);background:var(--accent-soft)} .sb-plier svg,.sb-fermer svg,.tb-menu svg{width:17px;height:17px;stroke:#9A9DBE;fill:none;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;transition:.2s} .sb-plier:hover svg{stroke:var(--accent)} .sb-fermer svg,.tb-menu svg{stroke:var(--ink);stroke-width:2} .sb-fermer,.tb-menu,.sb-voile{display:none} .sb-foot{margin-top:auto;padding:16px 10px 2px;border-top:1px solid var(--line);display:flex;flex-wrap:wrap;gap:4px 12px} .sb-foot a{font-size:.7rem;font-weight:600;color:#9A9DBE;text-decoration:none} .sb-foot a:hover{color:var(--accent)} .sb-foot span{width:100%;font-size:.66rem;color:#B5B7D3;margin-top:6px} .sb-bulle{position:fixed;z-index:95;background:var(--ink);color:#fff;font-size:.74rem;font-weight:700;padding:6px 10px;border-radius:8px;pointer-events:none;white-space:nowrap;opacity:0;transform:translateX(-4px);transition:opacity .12s,transform .12s} .sb-bulle.on{opacity:1;transform:none} @media(min-width:901px){ .app-shell{transition:grid-template-columns .22s ease} html.sb-reduit .app-shell{grid-template-columns:76px minmax(0,1fr)} html.sb-reduit .sb{padding:22px 12px} html.sb-reduit .sb-haut{flex-direction:column;gap:12px;padding-bottom:10px} html.sb-reduit .sb-logo{font-size:0;gap:0;padding:0;justify-content:center;flex:none} html.sb-reduit .sb-plier svg{transform:scaleX(-1)} html.sb-reduit .sb-lbl{font-size:0;padding:9px 0} html.sb-reduit .sb-lbl::before{content:"";display:block;height:1px;background:var(--line);margin:0 8px} html.sb-reduit .sb-txt{display:none} html.sb-reduit .sb-link{font-size:0;gap:0;justify-content:center;padding:11px 0;position:relative} html.sb-reduit .sb-link svg{width:19px;height:19px} html.sb-reduit .sb-compteur{position:absolute;top:4px;right:8px;font-size:.6rem;padding:1px 5px;min-width:0} html.sb-reduit .sb-foot{display:none} } .tb{display:flex;align-items:center;gap:16px;padding:13px 26px;background:#fff;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:30} .tb h2{font-size:15.5px;font-weight:800;color:var(--ink);margin:0;letter-spacing:-.02em} .tb-date{font-size:12px;color:var(--muted);margin-top:1px} .tb-search{flex:1;max-width:380px;display:flex;align-items:center;gap:8px;background:var(--soft);border:1px solid var(--line);border-radius:10px;padding:8px 12px;margin-left:12px} .tb-search:focus-within{border-color:var(--p1);box-shadow:0 0 0 3px var(--accent-soft)} .tb-search input{border:0;background:none;outline:none;font-size:13.5px;width:100%;color:var(--ink);padding:0} .tb-search svg{width:14px;height:14px;stroke:var(--muted);fill:none;stroke-width:2;flex:none} .tb-right{margin-left:auto;display:flex;align-items:center;gap:11px} .tb-compte{position:relative} .tb-avatar{width:34px;height:34px;border-radius:50%;border:0;background:linear-gradient(135deg,var(--p1),var(--accent));color:#fff;display:grid;place-items:center;font-size:13px;font-weight:800;flex:none} .dropdown-menu{position:absolute;right:0;top:calc(100% + 8px);z-index:60;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(35,36,90,.16);min-width:250px;padding:8px} .dd-entete{display:flex;align-items:center;gap:10px;background:var(--soft);border-radius:10px;padding:8px 10px;margin-bottom:6px} .dd-entete b{display:block;font-size:13.5px;color:var(--ink)} .dd-entete small{font-size:12px;color:var(--muted)} .dropdown-item{display:flex;align-items:center;gap:8px;width:100%;padding:8px 10px;border:0;background:none;border-radius:8px;font-size:13.5px;font-weight:600;color:var(--ink);text-decoration:none;text-align:left} .dropdown-item svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .dropdown-item:hover{background:var(--accent-soft);color:var(--accent)} .dropdown-item.danger{color:var(--err)} .dropdown-item.danger:hover{background:var(--err-bg);color:var(--err)} .app-main{padding:24px 28px 60px;min-width:0} .flash-msg{display:flex;align-items:center;gap:10px;border-radius:12px;padding:12px 16px;font-size:14px;font-weight:700;margin-bottom:12px;background:var(--accent-soft);color:var(--accent)} .flash-msg.success{background:var(--ok-bg);color:var(--ok)} .flash-msg.warning{background:var(--warn-bg);color:var(--warn)} .flash-msg.error{background:var(--err-bg);color:var(--err)} @media(max-width:900px){ .app-shell{grid-template-columns:1fr} .sb{position:fixed;left:0;top:0;bottom:0;width:min(290px,86vw);height:100%;z-index:70;transform:translateX(-105%);transition:transform .25s ease;padding:18px 14px} .sb.ouvert{transform:none;box-shadow:0 20px 60px rgba(35,36,90,.28)} .sb-plier{display:none} .sb-fermer,.tb-menu{display:grid} .sb-voile{display:block;position:fixed;inset:0;background:rgba(35,36,90,.42);z-index:65;opacity:0;pointer-events:none;transition:opacity .25s} .sb-voile.on{opacity:1;pointer-events:auto} body.sb-bloque{overflow:hidden} .tb{padding:11px 14px;gap:10px} .tb-search{display:none} .app-main{padding:16px 12px 50px} } @media(prefers-reduced-motion:reduce){.sb,.sb-voile,.app-shell{transition:none!important}} .shell{background:none;padding:0;border-radius:0;box-shadow:none} .shell + .shell{margin-top:26px} .head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:20px} .head .actions{display:flex;flex-wrap:wrap;gap:9px} h1{font-size:1.35rem;line-height:1.2;letter-spacing:-.02em;margin:0 0 3px;font-weight:800;color:var(--ink)} h2{font-size:17px;margin:0 0 12px;letter-spacing:-.015em;color:var(--ink)} .sub{color:var(--muted);margin:0} .head .sub,.page-titre .sub,.head>div>.muted{color:var(--ink-2)} .card{background:#fff;border-radius:18px;padding:18px 20px;border:1px solid var(--line);box-shadow:var(--sh)} .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:11px;padding:10px 17px;font-weight:700;font-size:.83rem;white-space:nowrap;text-decoration:none;color:var(--ink);transition:.15s} .btn svg,.btn-cta svg,.btn-outline svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.3;stroke-linecap:round;stroke-linejoin:round;flex:none} .btn:hover{border-color:var(--accent);color:var(--accent)} .btn.ink{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 6px 16px rgba(91,94,224,.28)} .btn.ink:hover{color:#fff;transform:translateY(-1px)} .btn.danger{border-color:#F5C9CB;color:var(--err)} .btn.danger:hover{background:var(--err-bg);border-color:var(--err)} .btn:disabled,.btn[aria-disabled="true"]{opacity:.4;cursor:not-allowed;transform:none;box-shadow:none} .btn.sm{padding:8px 13px;font-size:.77rem;border-radius:9px} .st{display:inline-flex;align-items:center;gap:5px;font-size:11.5px;font-weight:800;padding:4px 10px;border-radius:20px;white-space:nowrap} .st::before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor;flex:none} .st.ok{background:var(--ok-bg);color:var(--ok)} .st.ko{background:var(--err-bg);color:var(--err)} .st.wait{background:var(--warn-bg);color:var(--warn)} .st.info{background:var(--accent-soft);color:var(--accent)} .tag{display:inline-block;font-size:11.5px;font-weight:700;padding:2px 9px;border-radius:20px;margin:3px 4px 0 0;background:#ECEBFF;color:#3E3FA8} .tag.hot{background:#FFE3E3;color:var(--err)} .muted{color:var(--muted)} .grid2{display:grid;grid-template-columns:1fr 1fr;gap:20px} .grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:16px} /* tableaux */ .tw{overflow-x:auto;border-radius:18px;border:1px solid var(--line);background:#fff;box-shadow:var(--sh)} table{border-collapse:collapse;width:100%;font-size:14px} th{text-align:left;font-weight:800;font-size:.68rem;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);padding:12px 14px;border-bottom:1px solid var(--line);background:#FAFAFF;white-space:nowrap} td{padding:11px 14px;border-bottom:1px solid var(--line);vertical-align:middle;font-size:.84rem} tbody tr:hover td{background:#FCFCFF} tr:last-child td{border-bottom:0} td.num,th.num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap} .art{display:block;color:var(--muted);font-size:13px} tbody tr.click{cursor:pointer} tbody tr.click:hover td{background:#FAFAFF} /* ---------- composants de page (forme LiveCRM, couleurs Atitra) ---------- */ .page-titre{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-end;justify-content:space-between;margin-bottom:20px} .page-titre h1{margin:0 0 3px;color:var(--ink)} .page-titre .actions{display:flex;gap:9px;flex-wrap:wrap} .btn-cta{display:inline-flex;align-items:center;gap:8px;background:var(--grad);color:#fff;font-weight:700;font-size:.83rem;padding:11px 18px;border-radius:11px;text-decoration:none;border:0;box-shadow:0 6px 16px rgba(91,94,224,.32);transition:.2s;white-space:nowrap} .btn-cta:hover{transform:translateY(-1px)} .btn-cta svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round} .btn-outline{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;color:var(--ink);font-weight:700;font-size:.83rem;padding:11px 18px;border-radius:11px;text-decoration:none;transition:.2s;white-space:nowrap} .btn-outline:hover{border-color:var(--accent);color:var(--accent)} .carte{background:#fff;border:1px solid var(--line);border-radius:18px;box-shadow:var(--sh);padding:18px 20px} .carte h2{font-size:16px;margin:0 0 12px} .bandeau{display:flex;align-items:center;gap:12px;background:var(--warn-bg);color:#7a4a08;border:1px solid #F6DFB0;border-radius:14px;padding:12px 16px;font-size:14px;line-height:1.5;margin-bottom:12px} .bandeau svg{width:19px;height:19px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .bandeau b{font-weight:800} .bandeau a{margin-left:auto;background:var(--ink);color:#fff;border-radius:10px;padding:8px 14px;font-weight:700;font-size:13.5px;text-decoration:none;white-space:nowrap} .kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:13px;margin-bottom:18px} .kpi{background:#fff;border:1px solid var(--line);border-radius:16px;padding:14px 16px;box-shadow:var(--sh)} .kpi .k{font-size:.74rem;color:var(--muted);font-weight:600} .kpi .v{font-size:1.4rem;font-weight:800;color:var(--ink);margin:4px 0 2px;letter-spacing:-.03em;font-variant-numeric:tabular-nums;line-height:1.15} .kpi .v.ok{color:var(--ok)} .kpi .d{font-size:.72rem;color:var(--muted)} .kpi.alerte{background:var(--warn-bg);border-color:#F6DFB0} .kpi.alerte .k,.kpi.alerte .v{color:var(--warn)} .kpi.fort{background:var(--ink);border-color:var(--ink)} .kpi.fort .k,.kpi.fort .d{color:#C9CBF2} .kpi.fort .v{color:#fff} .alert{display:flex;align-items:center;gap:12px;flex-wrap:wrap;background:var(--warn-bg);color:#7a4a08;border:1px solid #F6DFB0;border-radius:14px;padding:12px 16px;margin-bottom:14px;font-weight:600;font-size:14px} .alert .btn{margin-left:auto;border-color:var(--warn);color:var(--warn)} .alert.info{background:var(--accent-soft);color:var(--accent);border-color:var(--accent-soft-2)} .alert.err{background:var(--err-bg);color:var(--err);border-color:#F5C9CB} .bar{height:9px;border-radius:999px;background:var(--soft);overflow:hidden;display:flex} .bar i{display:block;height:100%} .zrow{display:grid;grid-template-columns:120px 1fr 60px;gap:12px;align-items:center;padding:8px 0;font-size:14px} .zrow b{display:flex;align-items:center;gap:7px;font-weight:700} .zrow .muted{text-align:right;font-size:13px;font-variant-numeric:tabular-nums} .pastille{width:9px;height:9px;border-radius:50%;display:inline-block;flex:none} .legende{display:flex;gap:14px;font-size:12.5px;color:var(--muted);margin:10px 0 0} .legende i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:5px;vertical-align:0} .feed{list-style:none;margin:0;padding:0} .feed li{display:grid;grid-template-columns:48px 1fr;gap:10px;padding:9px 0;border-top:1px solid var(--line);font-size:13.5px} .feed li:first-child{border-top:0} .feed time{font-weight:700;font-variant-numeric:tabular-nums;color:var(--muted)} /* ---------- vérification ---------- */ .valid{display:grid;grid-template-columns:minmax(220px,340px) minmax(0,1fr);gap:24px;align-items:start} .valid>*{min-width:0} .hint{background:var(--warn-bg);color:#7a4a08;border:1px solid #F6DFB0;padding:10px 14px;border-radius:12px;font-size:13.5px;margin-bottom:12px} .hint.done{background:var(--ok-bg);color:var(--ok);border-color:#BFE7D4} td.warn{background:var(--warn-bg)} td.err{background:var(--err-bg);color:var(--err);font-weight:600} .note{display:block;font-size:12px;font-weight:500;margin-top:2px} td.warn .note{color:var(--warn)} .sums{display:flex;gap:24px;flex-wrap:wrap} .sum b{display:block;font-size:24px;letter-spacing:-.02em;line-height:1} .sum span{font-size:13px;color:var(--muted)} /* ---------- livraisons ---------- */ .filters{display:flex;flex-wrap:wrap;gap:8px;align-items:center;margin-bottom:14px} .fb{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--line);background:#fff;border-radius:50px;padding:8px 15px;font-weight:700;font-size:.79rem;text-decoration:none;color:var(--ink);transition:.15s} .fb:hover{border-color:var(--accent);color:var(--accent)} .fb b{font-size:11px;font-weight:800;background:var(--soft);color:var(--muted);border-radius:20px;padding:1px 7px} .fb[aria-pressed="true"]{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(91,94,224,.26)} .fb[aria-pressed="true"] b{background:rgba(255,255,255,.22);color:#fff} .search{margin-left:auto;border:1px solid var(--line);border-radius:12px;padding:9px 13px;min-width:240px;background:#fff} .search:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)} .filters select{border:1px solid var(--line);border-radius:12px;padding:8px 12px;background:#fff;font-weight:600;font-size:13px;color:var(--ink)} /* ---------- tournées ---------- */ .zones{display:grid;grid-template-columns:repeat(4,1fr);gap:14px} .zone{background:#fff;border:1px solid var(--line);border-top:5px solid var(--c);border-radius:16px;padding:16px;box-shadow:var(--sh)} .zone h3{margin:0;font-size:17px} .drv{display:flex;align-items:center;gap:8px;margin:8px 0 10px;font-size:13.5px;color:var(--muted)} .drv .av{width:26px;height:26px;font-size:11px} .stop{display:flex;gap:8px;align-items:flex-start;padding:8px 0;border-top:1px dashed var(--line);font-size:14px} .stop .mk{flex:none;width:18px;height:18px;border-radius:50%;display:grid;place-items:center;font-size:11px;font-weight:800;margin-top:2px;background:var(--soft)} .mk.ok{background:var(--ok-bg);color:var(--ok)} .mk.ko{background:var(--err-bg);color:var(--err)} .stop small{display:block;color:var(--muted)} .zone .tot{border-top:1px solid var(--line);margin-top:6px;padding-top:10px;display:flex;justify-content:space-between;font-weight:700;font-size:14px} .gare{margin-top:16px;background:#fff;border:1px solid var(--line);border-radius:16px;padding:16px 18px;box-shadow:var(--sh);display:flex;flex-wrap:wrap;gap:10px 30px} .gare h3{margin:0;font-size:16px;flex-basis:100%} /* ---------- boutiques ---------- */ .shops{display:grid;grid-template-columns:repeat(2,1fr);gap:16px} .shop{background:#fff;border-radius:18px;padding:18px 20px;border:1px solid var(--line);box-shadow:var(--sh)} .shop-h{display:flex;gap:12px;align-items:center;margin-bottom:14px} .shop-h b{font-size:18px;letter-spacing:-.02em;display:block} .shop-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px;margin-bottom:14px} .shop-stats div{background:var(--soft);border-radius:12px;padding:10px 12px} .shop-stats b{display:block;font-size:20px;letter-spacing:-.02em} .shop-stats span{font-size:12px;color:var(--muted)} .freq{display:flex;gap:10px;align-items:center;flex-wrap:wrap;font-size:13.5px} .freq select{border:1.5px solid var(--line);border-radius:12px;padding:7px 10px;background:#fff} /* ---------- comptes-rendus ---------- */ .cr{display:grid;grid-template-columns:300px 1fr;gap:20px;align-items:start} .crl{display:flex;flex-direction:column;gap:8px} .cri{border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;box-shadow:var(--sh);text-align:left;text-decoration:none;display:block} .cri[aria-current="true"]{border-color:var(--accent);background:var(--accent-soft);box-shadow:none} .cri b{display:block} .cri small{color:var(--muted);display:block;margin:2px 0 6px} .cr-actions{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:14px} /* ---------- équipe, paramètres ---------- */ .quota{height:14px;border-radius:999px;background:var(--soft);overflow:hidden;margin:10px 0 6px} .quota i{display:block;height:100%;background:linear-gradient(90deg,var(--p1),var(--p3));border-radius:999px} .row{display:flex;justify-content:space-between;align-items:center;gap:14px;padding:12px 0;border-top:1px solid var(--line)} .row:first-of-type{border-top:0} textarea{width:100%;min-height:110px;border:1px solid var(--line);border-radius:12px;padding:12px;font:inherit;resize:vertical} /* bandeau module verrouillé */ /* modale */ dialog{border:0;border-radius:18px;padding:24px;max-width:480px;width:calc(100% - 32px);box-shadow:0 30px 60px -20px rgba(35,36,90,.6)} dialog::backdrop{background:rgba(35,36,90,.4)} .toast{position:fixed;left:50%;bottom:26px;transform:translate(-50%,140px);background:var(--ink);color:#fff;padding:14px 22px;border-radius:16px;font-weight:600;transition:transform .35s ease;z-index:99;max-width:90vw} .toast{visibility:hidden;transition:transform .35s ease,visibility 0s .35s} .toast.show{transform:translate(-50%,0);visibility:visible;transition:transform .35s ease,visibility 0s} /* ---------- responsive ---------- */ @media (max-width:1100px){ .kpis{grid-template-columns:1fr 1fr} .zones{grid-template-columns:1fr 1fr} .valid,.cr,.grid2{grid-template-columns:1fr} .grid3{grid-template-columns:1fr 1fr} } @media (max-width:820px){ h1{font-size:22px} .zones,.shops,.grid3{grid-template-columns:1fr} .search{margin-left:0;min-width:0;width:100%} } @media (prefers-reduced-motion:reduce){*{transition:none!important}} /* ---------- fiche compte-rendu (maquette) ---------- */ .fiche{background:#fff;color:#1E1F4B;border-radius:6px;max-width:720px;margin:0 auto;padding:40px 44px;box-shadow:0 20px 50px -30px rgba(35,36,90,.7);font-size:14px} .f-top{display:flex;justify-content:space-between;align-items:flex-start;gap:20px;padding-bottom:18px;border-bottom:3px solid var(--ink)} .f-top .logo{font-size:22px} .f-ag{text-align:right;font-size:13px;color:var(--muted)} .f-ag b{color:var(--ink);font-size:14px} .f-title{margin:24px 0 4px;font-size:28px;letter-spacing:-.035em;font-weight:800;line-height:1.1} .f-meta{color:var(--muted);margin:0 0 22px} .f-sum{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-bottom:26px} .f-sum div{border-radius:14px;padding:14px 16px} .f-sum .a{background:var(--ok-bg);color:var(--ok)} .f-sum .b{background:var(--err-bg);color:var(--err)} .f-sum b{display:block;font-size:30px;letter-spacing:-.03em;line-height:1} .f-sec{display:flex;align-items:center;gap:10px;font-size:16px;font-weight:700;margin:22px 0 8px} .f-sec i{width:12px;height:12px;border-radius:50%;display:inline-block} .fiche table{font-size:13.5px} .fiche th{background:transparent;border-bottom:1.5px solid #D5D7F5;padding:8px 8px} .fiche td{padding:8px 8px} .f-totaux{margin-top:22px;max-width:340px;margin-left:auto} .f-totaux td{border-bottom:1px solid var(--line)} .f-verser td{font-weight:800;font-size:17px;border-top:2px solid var(--ink);border-bottom:0} .f-foot{margin-top:30px;padding-top:14px;border-top:1px solid var(--line);display:flex;justify-content:space-between;gap:20px;font-size:12.5px;color:var(--muted)} @media (max-width:820px){.fiche{padding:24px 18px}.f-top{flex-direction:column}.f-ag{text-align:left}} /* ---------- édition au double-clic (tableur.js) ---------- */ [data-tableur]:not([data-modifiable="0"]) .ed{cursor:text;border-radius:6px;padding:1px 3px;margin:-1px -3px} [data-tableur]:not([data-modifiable="0"]) .ed:hover{box-shadow:inset 0 0 0 1.5px var(--p1);background:#fff} .ed .cellule{min-width:90px} .cellule{width:100%;border:1.5px solid var(--line);border-radius:8px;padding:5px 7px;font-size:13.5px;background:#fff} .art.vide{opacity:0} tr:hover .art.vide{opacity:.55} /* ---------- chargement pendant la lecture IA ---------- */ .chargement{position:fixed;inset:0;z-index:200;display:grid;place-items:center;background:rgba(35,36,90,.35);padding:16px} .chargement[hidden]{display:none} .chargement-carte{background:#fff;border-radius:24px;padding:26px 30px;display:flex;flex-direction:column;align-items:center;gap:6px;text-align:center;max-width:360px;box-shadow:0 30px 60px -20px rgba(35,36,90,.6)} .chargement-carte b{font-size:17px;margin-top:4px} .chargement-carte .muted{font-size:13.5px} /* From Uiverse.io by FazlahmadHotaki — classes rattachées à .loader pour ne pas déborder sur le reste de l'application */ .loader{display:flex;justify-content:center;align-items:center} .loader .container{overflow:visible} .loader .track,.loader .car{fill:none;stroke-width:2.5} .loader .track{stroke:#d0d0d0} .loader .car{stroke:#4f8cff;stroke-linecap:round;stroke-dasharray:25 75;animation:borderMove 2s linear infinite} .loader .keys rect{fill:#666;animation:typing 1.2s infinite} .loader .keys rect:nth-child(2n){animation-delay:.15s} .loader .keys rect:nth-child(3n){animation-delay:.3s} .loader .keys rect:nth-child(4n){animation-delay:.45s} @keyframes borderMove{from{stroke-dashoffset:100}to{stroke-dashoffset:0}} @keyframes typing{0%,100%{opacity:.35}50%{opacity:1}} /* ---------- pages publiques (visiteur non connecté) ---------- */ .pub{max-width:1160px;margin:0 auto;padding:18px 20px;display:flex;align-items:center;gap:14px} .pub .sb-logo{flex:none} .pub-liens{margin-left:auto;display:flex;gap:16px;align-items:center} .pub-liens a{font-size:14px;font-weight:700;color:var(--ink);text-decoration:none;white-space:nowrap} .pub-liens a:hover{color:var(--accent)} .pub-liens a.pub-cta{background:linear-gradient(135deg,var(--accent) 0%,var(--ink-2) 100%);color:#fff;border-radius:10px;padding:8px 14px} .pub-main{max-width:1160px;margin:0 auto;padding:6px 20px 50px} .pub-pied{max-width:1160px;margin:0 auto;padding:18px 20px 30px;display:flex;flex-wrap:wrap;gap:6px 16px;font-size:12.5px} .pub-pied a{color:var(--ink-2);font-weight:600;text-decoration:none} .pub-pied a:hover{color:var(--accent)} .pub-pied span{margin-left:auto;color:var(--ink-2)} @media(max-width:560px){.pub-liens{gap:10px}.pub-pied span{margin-left:0;width:100%}} /* ---------- documentation ---------- */ .doc{max-width:1160px} .doc-entete{background:linear-gradient(135deg,var(--accent) 0%,var(--ink-2) 100%);border-radius:20px;padding:22px 24px;color:#fff;margin-bottom:20px;position:relative;overflow:hidden;box-shadow:0 12px 30px rgba(91,94,224,.25)} .doc-entete::after{content:"";pointer-events:none;position:absolute;width:280px;height:280px;border-radius:50%;border:1px dashed rgba(255,255,255,.25);right:-120px;top:-140px} .doc-entete h1{color:#fff;font-size:24px;position:relative} .doc-entete p{font-size:14px;color:rgba(255,255,255,.9);margin:4px 0 0;position:relative;max-width:640px;line-height:1.55} .doc-cherche{display:flex;align-items:center;gap:8px;background:#fff;border-radius:12px;padding:10px 13px;margin-top:16px;max-width:460px;position:relative} .doc-cherche svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:2;flex:none} .doc-cherche input{border:0;outline:none;font-size:14px;width:100%;background:none;color:var(--ink);padding:0} .doc-groupe{margin-bottom:20px} .doc-groupe h2,.doc-nav h2{font-size:11px;font-weight:800;color:var(--ink-2);letter-spacing:.6px;margin:0 0 9px 2px;text-transform:uppercase} .doc-fiches{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px} .doc-fiche{background:#fff;border:1px solid var(--line);border-radius:16px;padding:15px 17px;text-decoration:none;color:inherit;display:flex;flex-direction:column;gap:5px;transition:.2s;box-shadow:var(--sh)} .doc-fiche:hover{border-color:var(--accent-soft-2);box-shadow:0 12px 30px rgba(35,36,90,.09);transform:translateY(-2px)} .doc-fiche b{font-size:15px;font-weight:800;color:var(--ink)} .doc-fiche span{font-size:13px;color:var(--muted);line-height:1.5} .doc-fiche i{font-style:normal;font-size:12.5px;font-weight:700;color:var(--accent);margin-top:auto;padding-top:4px} .doc-rien{display:none;background:#fff;border:1px solid var(--line);border-radius:16px;padding:28px;text-align:center;color:var(--muted)} .doc-cadre{display:grid;grid-template-columns:250px minmax(0,1fr);gap:18px;align-items:start} .doc-nav{background:#fff;border:1px solid var(--line);border-radius:18px;padding:12px;position:sticky;top:84px;box-shadow:var(--sh)} .doc-nav h2{color:#A9ABC8;padding:10px 10px 4px;margin:0} .doc-nav a{display:block;padding:7px 10px;border-radius:9px;font-size:13.5px;font-weight:600;color:#6C6F93;text-decoration:none} .doc-nav a:hover{background:var(--soft);color:var(--ink)} .doc-nav a.on{background:var(--accent-soft);color:var(--accent)} .doc-article{background:#fff;border:1px solid var(--line);border-radius:18px;padding:24px 28px;box-shadow:var(--sh);min-width:0} .doc-fil{font-size:12.5px;color:var(--muted);margin-bottom:10px} .doc-fil a{color:var(--accent);font-weight:700;text-decoration:none} .doc-article h1{font-size:24px} .doc-article h2{font-size:17px;margin:22px 0 8px} .doc-article h3{font-size:15px;margin:14px 0 6px} .doc-article .resume{font-size:15px;color:var(--muted);margin:5px 0 18px;line-height:1.55} .doc-article p,.doc-article li{font-size:15px;line-height:1.7} .doc-article p{margin:0 0 12px} .doc-article b{font-weight:800} .doc-article a{color:var(--accent);font-weight:700} .doc-article code{background:var(--accent-soft);color:var(--accent);border-radius:5px;padding:1px 6px;font-family:ui-monospace,monospace;font-weight:700;font-size:13px} .doc-article ul{margin:0 0 14px;padding:0;list-style:none} .doc-article ul li{position:relative;padding-left:18px;margin-bottom:6px} .doc-article ul li::before{content:"";position:absolute;left:3px;top:.72em;width:6px;height:6px;border-radius:50%;background:var(--accent)} .doc-article ol{margin:0 0 14px;padding:0;list-style:none;counter-reset:etape} .doc-article ol li{counter-increment:etape;position:relative;padding-left:38px;margin-bottom:10px;min-height:26px} .doc-article ol li::before{content:counter(etape);position:absolute;left:0;top:0;width:26px;height:26px;border-radius:50%;background:linear-gradient(135deg,var(--accent),var(--ink-2));color:#fff;display:grid;place-items:center;font-size:12px;font-weight:800} .encart{display:flex;gap:11px;border-radius:14px;padding:12px 15px;margin:0 0 14px;font-size:14.5px;line-height:1.6} .encart svg{width:17px;height:17px;stroke:currentColor;fill:none;stroke-width:2;flex:none;margin-top:3px} .encart.tip{background:var(--ok-bg);color:#145c40} .encart.warn{background:var(--warn-bg);color:#7a4a08} .encart b{color:inherit} .doc-tbl{margin:0 0 16px;box-shadow:none} .doc-tbl td{font-size:14px;line-height:1.6} .doc-suite{display:flex;justify-content:space-between;gap:12px;margin-top:22px;padding-top:16px;border-top:1px solid var(--line)} .doc-suite a{display:flex;flex-direction:column;gap:2px;text-decoration:none;border:1px solid var(--line);border-radius:12px;padding:10px 14px;max-width:48%} .doc-suite a:hover{border-color:var(--accent)} .doc-suite a span{font-size:12px;color:var(--muted);font-weight:600} .doc-suite a b{font-size:14px;color:var(--ink);font-weight:800} .doc-suite a.apres{margin-left:auto;text-align:right} @media(max-width:900px){.doc-cadre{grid-template-columns:1fr}.doc-nav{position:static}.doc-article{padding:18px}} /* ---------- pages légales ---------- */ .legal .maj{display:inline-block;font-size:12px;font-weight:700;color:var(--muted);background:var(--soft);border-radius:50px;padding:4px 11px;margin:0 0 16px} .legal .manque{background:var(--warn-bg);color:#7a4a08;border-radius:5px;padding:0 5px;font-weight:700} .legal dl{display:grid;grid-template-columns:minmax(170px,auto) 1fr;gap:8px 16px;margin:0 0 14px;font-size:15px;line-height:1.6} .legal dt{font-weight:800} .legal dd{margin:0} @media(max-width:560px){.legal dl{grid-template-columns:1fr;gap:2px}.legal dd{margin-bottom:8px}} /* ---------- abonnement : bandeau, cadenas du menu ---------- */ .bandeau-abo{display:flex;align-items:center;gap:12px;border-radius:14px;padding:12px 16px;font-size:14px;line-height:1.5;margin-bottom:16px;font-weight:600;background:var(--accent-soft);color:var(--accent);border:1px solid var(--accent-soft-2)} .bandeau-abo svg{width:18px;height:18px;stroke:currentColor;fill:none;stroke-width:2;stroke-linecap:round;stroke-linejoin:round;flex:none} .bandeau-abo a{margin-left:auto;background:var(--ink);color:#fff;border-radius:10px;padding:8px 14px;font-weight:700;text-decoration:none;white-space:nowrap} .bandeau-abo.warn{background:var(--warn-bg);color:#7a4a08;border-color:#F6DFB0} .bandeau-abo.err{background:var(--err-bg);color:var(--err);border-color:#F5C9CB} /* décompte des lectures d'une réception */ .decompte-lectures{display:inline-flex;gap:6px;align-items:center;background:var(--accent-soft);color:var(--ink);border-radius:999px;padding:6px 14px;font-size:13.5px;font-weight:600;margin-bottom:12px} .decompte-lectures .muted{font-weight:500} /* livraison offerte (promotion de la boutique) */ .offerte{display:inline-block;font-size:10.5px;font-weight:700;padding:1px 7px;border-radius:999px;background:#DDF5EA;color:#17875C;vertical-align:1px} /* ---------- modale d'ajout / de modification (modèle « modal de partage ») ---------- */ .mdl-fond{position:fixed;inset:0;z-index:80;display:grid;place-items:center;padding:16px;background:rgba(245,246,255,.45); opacity:0;pointer-events:none;visibility:hidden;transition:opacity .25s ease,visibility 0s .25s} .mdl-fond.on{opacity:1;pointer-events:auto;visibility:visible;transition:opacity .25s ease; backdrop-filter:blur(6px);-webkit-backdrop-filter:blur(6px)} .mdl-verre{width:100%;max-width:446px;padding:12px;border-radius:24px;background:rgba(255,255,255,.35);border:1px solid rgba(255,255,255,.9); box-shadow:0 30px 70px -30px rgba(35,36,90,.45),inset 0 0 0 1px rgba(227,229,255,.6);transform:translateY(12px) scale(.98);transition:transform .25s ease} .mdl-verre.large{max-width:780px} .mdl-fond.on .mdl-verre{transform:none} .mdl{background:rgba(255,255,255,.9);border-radius:18px;border:1px solid rgba(255,255,255,.95);box-shadow:0 8px 30px -18px rgba(35,36,90,.3); display:flex;flex-direction:column;max-height:calc(100vh - 56px)} .mdl>form{display:flex;flex-direction:column;min-height:0} .mdl-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:18px 20px;border-bottom:1px solid var(--line)} .mdl-head h2{margin:0;font-size:16px;font-weight:700;color:var(--ink);letter-spacing:-.01em} .mdl-x{border:0;background:transparent;width:30px;height:30px;border-radius:8px;display:grid;place-items:center;color:var(--ink);cursor:pointer;flex:none} .mdl-x:hover{background:var(--accent-soft)} .mdl-body{padding:20px;overflow:auto} .mdl-body .field{margin-bottom:14px} .mdl-body .field>span,.mdl-body .field>label.lbl,.mdl-label{display:block;font-weight:700;font-size:13px;color:var(--ink);margin:0 0 6px} .mdl-body .field .input{border-radius:10px} .mdl-body .field .input input,.mdl-body .field .input select,.mdl-body .field .input textarea{padding:10px 0;font-size:13.5px} .mdl-body .field.check input{width:auto} .mdl-body .field ul{list-style:none;padding:0;margin:0;columns:2;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff} .mdl-body .field ul label{display:flex;gap:8px;font-size:13px;padding:3px 0} .mdl-body .field ul input{width:auto} .mdl-jours{border:1px solid var(--line);border-radius:10px;overflow:hidden;background:#fff} .mdl-jours table{width:100%;border-collapse:collapse;font-size:13px} .mdl-jours th,.mdl-jours td{padding:7px 10px;border-bottom:1px solid var(--line);text-align:left} .mdl-jours tr:last-child td{border-bottom:0} .mdl-jours select{border:1px solid var(--line);border-radius:8px;padding:6px 8px;background:#fff;width:100%;font-size:13px} .mdl-texte{margin:0;color:var(--muted);font-size:14px} .mdl-foot{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;padding:16px 20px 20px;border-top:1px solid var(--line)} .mdl-hint{font-size:12px;color:var(--muted)} .mdl-opts{display:flex;gap:12px;margin-top:8px} .mdl-opt{width:36px;height:36px;border-radius:50%;border:1px solid var(--line);background:#fff;display:grid;place-items:center;color:var(--accent); box-shadow:0 6px 14px -10px rgba(91,94,224,.5);cursor:pointer} .mdl-opt:hover{background:var(--accent-soft)} .mdl-opt.danger{color:var(--err)} .mdl-opt.danger:hover{background:var(--err-bg)} .mdl-actions{display:flex;gap:10px} .mdl-sec{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;font-weight:600;color:var(--accent);cursor:pointer; box-shadow:0 6px 16px -12px rgba(91,94,224,.5)} .mdl-sec:hover{background:var(--accent-soft)} .mdl-pri{border:0;border-radius:10px;padding:11px 26px;font-weight:700;color:#fff;cursor:pointer; background:linear-gradient(135deg,var(--p1),var(--accent));box-shadow:0 10px 22px -10px rgba(91,94,224,.8)} .mdl-pri.danger{background:linear-gradient(135deg,#E25A5F,var(--err));box-shadow:0 10px 22px -10px rgba(198,46,51,.7)} .mdl-pri:disabled{opacity:.45;cursor:not-allowed} body.mdl-ouverte{overflow:hidden} @media (max-width:480px){.mdl-foot{flex-wrap:wrap}.mdl-actions{width:100%}.mdl-actions button{flex:1}.mdl-body .field ul{columns:1}} /* cases à cocher multiples (Django 5 : div > div > label > input) */ .mdl-body .field input[type=checkbox]{width:auto;padding:0} .mdl-body .field>div:has(input[type=checkbox]){display:grid;grid-template-columns:1fr 1fr;gap:0 16px;max-height:260px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:8px 12px;background:#fff} .mdl-body .field>div:has(input[type=checkbox]) label{display:flex;gap:8px;align-items:center;font-size:13px;font-weight:500;padding:4px 0;color:var(--ink)} @media (max-width:480px){.mdl-body .field>div:has(input[type=checkbox]){grid-template-columns:1fr}} /* ---------- boutons-icônes et menus « ⋮ » (forme gestion de commande) ---------- */ .actions-cell{display:flex;gap:6px;justify-content:flex-end;align-items:center} .ico{width:31px;height:31px;border-radius:9px;border:1px solid var(--line);background:#fff;display:inline-grid;place-items:center;transition:.15s;position:relative;cursor:pointer;color:var(--muted);text-decoration:none;padding:0;flex:none} .ico:hover{border-color:var(--accent);background:var(--accent-soft);color:var(--accent)} .ico svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9} .ico.plein{background:var(--grad);border-color:transparent;color:#fff;box-shadow:0 4px 12px rgba(91,94,224,.26)} .ico.plein:hover{color:#fff;transform:translateY(-1px)} .ico.danger:hover{border-color:var(--err);background:var(--err-bg);color:var(--err)} .ico[data-info]:hover::after{content:attr(data-info);position:absolute;bottom:124%;right:0;background:var(--ink);color:#fff;font-size:.68rem;font-weight:600;padding:5px 9px;border-radius:7px;white-space:nowrap;z-index:30;pointer-events:none} .menu{position:relative;display:inline-flex} .menu-list{display:none;position:fixed;z-index:85;background:#fff;border:1px solid var(--line);border-radius:12px;box-shadow:0 12px 34px rgba(35,36,90,.16);padding:5px;min-width:212px} .menu.on .menu-list{display:block} .menu-list form{margin:0} .menu-list a,.menu-list button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 10px;border:0;background:none;border-radius:8px;font-size:.79rem;font-weight:600;color:var(--ink);text-align:left;text-decoration:none;cursor:pointer;white-space:nowrap} .menu-list a:hover,.menu-list button:hover,.menu-list a:focus-visible,.menu-list button:focus-visible{background:var(--accent-soft);color:var(--accent);outline:none} .menu-list .danger{color:var(--err)} .menu-list .danger:hover{background:var(--err-bg);color:var(--err)} .menu-list hr{border:0;border-top:1px solid var(--line);margin:4px 0} .menu-list svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:1.9;flex:none} /* ---------- fenêtre de confirmation (forme « modal_dialogs » de gestion de commande) ---------- */ .lcm{position:fixed;inset:0;z-index:200;display:flex;align-items:center;justify-content:center;padding:16px} .lcm-fond{position:fixed;inset:0;background:rgba(35,36,90,.4);backdrop-filter:blur(2px);-webkit-backdrop-filter:blur(2px);animation:lcmFond .2s ease-out} .lcm-carte{position:relative;z-index:1;width:100%;max-width:360px;background:#fff;border:1px solid #f3f4f6;border-radius:16px;padding:28px;box-shadow:0 25px 50px -12px rgba(35,36,90,.3);animation:lcmIn .25s cubic-bezier(.16,1,.3,1)} .lcm-x{position:absolute;top:14px;right:14px;width:20px;height:20px;border-radius:50%;background:#8C8FAE;color:#fff;border:0;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0} .lcm-x:hover{background:var(--ink)} .lcm-x svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:2.5;stroke-linecap:round} .lcm-ic{width:48px;height:48px;border-radius:50%;display:flex;align-items:center;justify-content:center;margin:0 auto 16px} .lcm-ic svg{width:20px;height:20px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;stroke-linejoin:round} .lcm-delete .lcm-ic{background:#fff1f2;color:#f43f5e} .lcm-warning .lcm-ic{background:#fffbeb;color:#f59e0b} .lcm-success .lcm-ic{background:#ecfdf5;color:#10b981} .lcm-t{text-align:center;font-size:17px;font-weight:700;color:var(--ink);letter-spacing:-.01em;margin:0} .lcm-m{text-align:center;font-size:12.5px;color:var(--muted);margin:6px 0 24px;line-height:1.55;white-space:pre-line} .lcm-m:empty{margin-top:0} .lcm-b{display:flex;gap:12px} .lcm-b button{flex:1;padding:10px 16px;border:0;border-radius:12px;font-size:12.5px;font-weight:700;cursor:pointer;transition:background .15s} .lcm-non{background:#F1F2F8;color:var(--ink)} .lcm-non:hover{background:#E4E6F2} .lcm-oui{color:#fff} .lcm-delete .lcm-oui{background:#D74853}.lcm-delete .lcm-oui:hover{background:#C23B45} .lcm-warning .lcm-oui{background:var(--accent)}.lcm-warning .lcm-oui:hover{background:#4A4DC9} .lcm-success .lcm-oui{background:#42B883}.lcm-success .lcm-oui:hover{background:#359D6F} .lcm-b button:focus-visible{outline:none;box-shadow:0 0 0 2px #fff,0 0 0 4px var(--accent-soft-2)} @keyframes lcmIn{from{opacity:0;transform:scale(.94) translateY(8px)}to{opacity:1;transform:none}} @keyframes lcmFond{from{opacity:0}to{opacity:1}} /* ---------- formulaire pleine page (forme « nouvel article » de gestion de commande) ---------- */ .form-page{max-width:840px} .fil{font-size:.76rem;color:var(--ink-2);margin-bottom:14px} .fil a{color:var(--accent);text-decoration:none;font-weight:700} .form-carte{background:#fff;border-radius:20px;box-shadow:0 10px 40px rgba(35,36,90,.06);overflow:hidden;border:1px solid var(--line)} .form-head{background:var(--grad);color:#fff;padding:22px 26px;position:relative;overflow:hidden} .form-head::after{content:"";pointer-events:none;position:absolute;width:220px;height:220px;border-radius:50%;border:1px dashed rgba(255,255,255,.25);right:-90px;top:-110px} .form-head h1{font-size:1.25rem;color:#fff;margin:0;position:relative} .form-head p{font-size:.82rem;color:rgba(255,255,255,.88);margin:3px 0 0;position:relative} .form-corps{padding:26px} .form-corps .grille-champs{display:grid;grid-template-columns:1fr 1fr;gap:0 16px} .form-actions{display:flex;gap:11px;align-items:center;flex-wrap:wrap;margin-top:24px;padding-top:20px;border-top:1px solid var(--line)} .form-actions .btn{border-radius:50px;padding:12px 24px} @media(max-width:900px){.form-head,.form-corps{padding:20px 18px}.form-corps .grille-champs{grid-template-columns:1fr}} /* champ fichier (logo…) : bouton dans la forme des boutons Atitra */ .field input[type=file]{padding:9px 12px;font-size:.82rem;color:var(--muted);cursor:pointer} .field input[type=file]::file-selector-button{border:1px solid var(--line);background:var(--accent-soft);color:var(--accent);border-radius:9px;padding:7px 13px;font-weight:700;font-size:.78rem;margin-right:12px;cursor:pointer;font-family:inherit} .field input[type=file]::file-selector-button:hover{background:var(--accent-soft-2)} /* cartes d'indicateurs : 3 ou 5 par ligne, carte « chiffre d'affaires » */ .kpis.cinq{grid-template-columns:repeat(5,1fr)} .kpis.trois{grid-template-columns:repeat(3,1fr)} .kpi.ca{background:var(--grad);border-color:transparent;box-shadow:0 10px 24px -12px rgba(91,94,224,.7)} .kpi.ca .k,.kpi.ca .d{color:rgba(255,255,255,.88)} .kpi.ca .v{color:#fff} .kpi.ca .d b{color:#fff;font-weight:800} @media (max-width:1100px){.kpis.cinq,.kpis.trois{grid-template-columns:1fr 1fr}} @media (max-width:520px){.kpis,.kpis.cinq,.kpis.trois{grid-template-columns:1fr 1fr;gap:10px}.kpi .v{font-size:1.15rem}} /* dépôts en gare (tournées) */ .gare table.depots{width:100%;flex-basis:100%} .gare table.depots td,.gare table.depots th{padding:8px 10px} .sel-livreur{border:1px solid var(--line);border-radius:10px;padding:6px 8px;background:#fff;font-size:.82rem} /* modale à deux colonnes (formulaires longs : saisie manuelle d'une livraison) */ .mdl.colonnes .mdl-body{display:grid;grid-template-columns:1fr 1fr;gap:0 16px;align-content:start} .mdl.colonnes .mdl-body>.errorlist,.mdl.colonnes .mdl-body>.field:has(textarea){grid-column:1/-1} @media (max-width:640px){.mdl.colonnes .mdl-body{grid-template-columns:1fr}} /* ---------- modale : forme des pages connexion / inscription (bandeau dégradé en haut) ---------- */ .mdl-fond{background:rgba(35,36,90,.28)} .mdl-verre{padding:0;border:0;background:none;box-shadow:none;max-width:480px} .mdl-verre.large{max-width:800px} .mdl{background:#fff;border:0;border-radius:28px;overflow:hidden;box-shadow:0 30px 70px -20px rgba(35,36,90,.45)} .mdl-head{background:var(--grad);color:#fff;padding:24px 26px 22px;border-bottom:0;position:relative;overflow:hidden;align-items:flex-start} .mdl-head::after{content:"";pointer-events:none;position:absolute;width:240px;height:240px;border-radius:50%;border:1px dashed rgba(255,255,255,.28);right:-90px;top:-130px} .mdl-head::before{content:"";pointer-events:none;position:absolute;width:150px;height:150px;border-radius:50%;background:rgba(255,255,255,.08);left:-60px;bottom:-90px} .mdl-head>div{position:relative;z-index:1} .mdl-head h2{color:#fff;font-size:1.25rem;font-weight:800;letter-spacing:-.02em} .mdl-head p{margin:4px 0 0;font-size:.8rem;color:rgba(255,255,255,.88)} .mdl.danger .mdl-head{background:linear-gradient(135deg,#F07B7F 0%,#D74853 55%,#B83440 100%)} .mdl-x{position:relative;z-index:1;background:rgba(255,255,255,.18);color:#fff;border-radius:50%;width:32px;height:32px} .mdl-x:hover{background:rgba(255,255,255,.3)} .mdl-body{padding:24px 26px} .mdl-body .field>span,.mdl-body .field>label.lbl,.mdl-label{font-size:.88rem;font-weight:800;color:var(--ink);margin:0} .mdl-body .field .input{border-radius:12px;padding:0 13px} .mdl-body .field .input input,.mdl-body .field .input select,.mdl-body .field .input textarea{padding:11px 0;font-size:.88rem} .mdl-foot{border-top:1px solid var(--line);padding:18px 26px 22px;align-items:center} .mdl-sec{border-radius:50px;padding:12px 22px;font-weight:700;font-size:.85rem;color:var(--muted);box-shadow:none} .mdl-sec:hover{color:var(--ink);background:#fff;border-color:var(--accent-soft-2)} .mdl-pri{border-radius:50px;padding:12px 24px;font-size:.85rem;display:inline-flex;align-items:center;gap:8px; background:var(--grad);box-shadow:0 6px 18px rgba(91,94,224,.32)} .mdl-pri:hover{transform:translateY(-1px)} .mdl-pri svg{width:13px;height:13px;stroke:currentColor;fill:none;stroke-width:2.6} .mdl-pri.danger{background:linear-gradient(135deg,#E25A5F,var(--err))} .mdl-texte{font-size:.88rem;line-height:1.55} /* icône devant les champs (formulaires et modales, comme la connexion) */ .field .input>svg{width:15px;height:15px;stroke:var(--muted);fill:none;stroke-width:1.8;flex:none} .field .input:focus-within>svg{stroke:var(--accent)} /* réaffecter un arrêt depuis les tournées */ .stop{position:relative} .stop>div{flex:1;min-width:0} .stop-menu .ico{width:26px;height:26px;border-radius:8px} .stop-menu .ico svg{width:13px;height:13px} .menu-titre{display:block;padding:6px 10px 4px;font-size:.7rem;font-weight:800;color:var(--muted);text-transform:uppercase;letter-spacing:.4px} .av.mini{width:20px;height:20px;font-size:10px} /* arrêt d'une tournée : le lieu et les consignes d'abord, le client ensuite */ .arret{display:flex;flex-direction:column;gap:3px} .arret-lieu{font-size:.98rem;font-weight:800;color:var(--ink);line-height:1.25} .arret-reperes{font-size:.82rem;color:var(--ink-2);line-height:1.35} .arret-consignes{display:flex;flex-wrap:wrap;gap:4px;margin-top:2px} .arret-consignes .tag{margin:0;font-size:.74rem;padding:3px 9px} .arret-consignes .tag.heure{background:#E6F4FF;color:#1E5D8C} .arret-client{font-size:.76rem;color:var(--muted)} .arret-haut{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:space-between;gap:2px 10px} .arret-haut .arret-client{white-space:nowrap;text-align:right} .zone-tete{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:8px} .zone-tete .actions-cell{margin-left:auto} .ico.avec-texte{width:auto;display:inline-flex;gap:6px;padding:0 10px;font-size:.74rem;font-weight:700;white-space:nowrap;color:var(--ink)} .ico.avec-texte.plein{color:#fff} .zone-tete .ico[data-info]:hover::after{right:0;bottom:auto;top:124%} .zones.tournees{grid-template-columns:repeat(auto-fill,minmax(320px,1fr))} .zones.tournees>.zone{min-width:0} @media (max-width:820px){.zones.tournees{grid-template-columns:1fr}} /* cartes « Sans livreur » et gares (tournées) */ .zone.carte-attente{--c:#E59838;background:#FFFBF3} .zone.carte-gare{--c:#2E8B78} .zone .drv .av svg{width:14px;height:14px;stroke:#fff;fill:none;stroke-width:2} .tag.attente{background:var(--warn-bg);color:var(--warn)} .tag.ok{background:var(--ok-bg);color:var(--ok)} .tag.livreur{background:#fff;border:1px solid var(--c);color:var(--ink)} /* ---------- Tournées : bannière (calendrier + indicateurs), forme de l'en-tête des modales ---------- */ .banniere-tournees{position:relative;overflow:hidden;display:grid;grid-template-columns:330px minmax(0,1fr);gap:22px;align-items:stretch; background:var(--grad);border-radius:26px;padding:22px;margin-bottom:22px;box-shadow:0 20px 50px -24px rgba(35,36,90,.55)} .banniere-tournees::after{content:"";pointer-events:none;position:absolute;width:360px;height:360px;border-radius:50%;border:1px dashed rgba(255,255,255,.28);right:-120px;top:-190px} .banniere-tournees::before{content:"";pointer-events:none;position:absolute;width:220px;height:220px;border-radius:50%;background:rgba(255,255,255,.08);left:260px;bottom:-140px} .banniere-tournees>*{position:relative;z-index:1} /* calendrier (maquette « date picker » : carte sombre, flèches rondes, jour entouré) */ .calendrier{background:#161616;color:#fff;border-radius:22px;padding:18px 18px 14px;box-shadow:0 16px 34px -18px rgba(0,0,0,.6)} .cal-tete{display:flex;align-items:center;justify-content:space-between;margin-bottom:12px} .cal-tete b{font-size:1.02rem;font-weight:700;letter-spacing:-.01em} .cal-nav{width:36px;height:36px;border-radius:50%;border:0;background:#5E5E5E;color:#fff;display:grid;place-items:center;cursor:pointer;transition:background .15s} .cal-nav:hover{background:#787878} .cal-nav svg{width:16px;height:16px;stroke:currentColor;fill:none;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round} .cal-semaine,.cal-jours{display:grid;grid-template-columns:repeat(7,1fr);text-align:center} .cal-semaine span{font-size:.72rem;color:#8C8C8C;padding:6px 0 8px} .cal-jours{row-gap:4px} .cal-jours .jour{position:relative;display:grid;place-items:center;height:36px;width:36px;margin:0 auto;border-radius:50%;color:#fff; text-decoration:none;font-size:.86rem;font-variant-numeric:tabular-nums;transition:background .15s} .cal-jours .jour:hover{background:rgba(255,255,255,.12)} .cal-jours .jour.autre{color:#5C5C5C} .cal-jours .jour.aujourdhui{color:var(--p3);font-weight:800} .cal-jours .jour.avec::after{content:"";position:absolute;bottom:4px;width:4px;height:4px;border-radius:50%;background:var(--p1)} .cal-jours .jour.choisi{background:#161616;color:#fff;font-weight:700;box-shadow:0 0 0 4px #fff,0 0 0 9px rgba(255,255,255,.18)} .cal-jours .jour.choisi::after{background:#fff} .cal-jours .jour:focus-visible{outline:2px solid var(--p3);outline-offset:2px} .cal-aujourdhui{display:block;text-align:center;margin-top:10px;font-size:.76rem;font-weight:700;color:var(--p3);text-decoration:none} .cal-aujourdhui:hover{text-decoration:underline} .calendrier noscript a{color:#fff} /* indicateurs sur deux colonnes, « À encaisser » en dégradé */ .banniere-tournees .kpis.deux{grid-template-columns:1fr 1fr;margin:0;align-content:stretch} .banniere-tournees .kpi{display:flex;flex-direction:column;justify-content:center;border:0;box-shadow:0 10px 24px -16px rgba(35,36,90,.6)} .banniere-tournees .kpi .v{font-size:1.6rem} .kpi.encaisser{background:linear-gradient(135deg,var(--p3) 0%,#C4F0E8 50%,var(--p4) 100%)} .kpi.encaisser .k,.kpi.encaisser .d{color:#1F5A4E} .kpi.encaisser .v{color:#123B33} @media (max-width:980px){.banniere-tournees{grid-template-columns:1fr}.calendrier{max-width:380px;width:100%;margin:0 auto}} @media (max-width:520px){.banniere-tournees{padding:14px;border-radius:20px}.banniere-tournees .kpi .v{font-size:1.2rem}} /* ---------- Tournées : calendrier et cases aux couleurs d'Atitra (cases « mini » de « Mon abonnement » LiveCRM) ---------- */ .calendrier{background:rgba(255,255,255,.15);color:#fff;border:1px solid rgba(255,255,255,.22);box-shadow:none} .cal-nav{background:rgba(255,255,255,.22)} .cal-nav:hover{background:rgba(255,255,255,.34)} .cal-semaine span{color:rgba(255,255,255,.78);font-weight:600} .cal-jours .jour{color:#fff;font-weight:600} .cal-jours .jour:hover{background:rgba(255,255,255,.18)} .cal-jours .jour.autre{color:rgba(255,255,255,.38);font-weight:500} .cal-jours .jour.aujourdhui{color:var(--p4);font-weight:800} .cal-jours .jour.avec::after{background:#fff;opacity:.85} .cal-jours .jour.choisi{background:#fff;color:var(--accent);font-weight:800;box-shadow:0 0 0 4px rgba(255,255,255,.28),0 8px 18px -6px rgba(35,36,90,.55)} .cal-jours .jour.choisi::after{background:var(--accent)} .cal-jours .jour:focus-visible{outline:2px solid #fff} .cal-aujourdhui{color:#fff;opacity:.92} .banniere-tournees .kpi{background:rgba(255,255,255,.15);border:1px solid rgba(255,255,255,.22);border-radius:16px;box-shadow:none;padding:16px 18px} .banniere-tournees .kpi .k{color:rgba(255,255,255,.86);font-size:.74rem;font-weight:700} .banniere-tournees .kpi .v{color:#fff;font-size:1.7rem;font-weight:800;letter-spacing:-.02em} .banniere-tournees .kpi .d{color:rgba(255,255,255,.82)} .banniere-tournees .kpi.alerte{background:rgba(255,226,122,.24);border-color:rgba(255,226,122,.55)} .banniere-tournees .kpi.alerte .k,.banniere-tournees .kpi.alerte .v{color:#FFF1C2} .banniere-tournees .kpi .jauge{height:6px;border-radius:6px;background:rgba(255,255,255,.22);overflow:hidden;margin-top:10px} .banniere-tournees .kpi .jauge i{display:block;height:100%;border-radius:6px;background:#fff} .banniere-tournees .kpi.encaisser{background:linear-gradient(135deg,var(--p3) 0%,#C4F0E8 50%,var(--p4) 100%);border-color:rgba(255,255,255,.6); box-shadow:0 12px 26px -14px rgba(18,59,51,.55)} .banniere-tournees .kpi.encaisser .k,.banniere-tournees .kpi.encaisser .d{color:#1F5A4E} .banniere-tournees .kpi.encaisser .v{color:#123B33} /* ---------- Tournées : bannière dans la forme « Mon abonnement » de LiveCRM ---------- */ .banniere-tournees{grid-template-columns:300px minmax(0,1fr);gap:24px;padding:20px 22px} .calendrier{padding:14px 14px 10px;border-radius:18px} .cal-tete{margin-bottom:6px} .cal-tete b{font-size:.95rem} .cal-nav{width:30px;height:30px} .cal-nav svg{width:14px;height:14px} .cal-semaine span{font-size:.68rem;padding:4px 0 6px} .cal-jours{row-gap:2px} .cal-jours .jour{width:32px;height:32px;font-size:.8rem} .cal-jours .jour.avec::after{bottom:3px} .ban-droite{display:flex;flex-direction:column;gap:16px;min-width:0;color:#fff} .ban-tete{display:flex;align-items:flex-start;gap:16px;flex-wrap:wrap} .ban-pl{display:inline-block;font-size:.68rem;font-weight:800;background:rgba(255,255,255,.22);border-radius:20px;padding:4px 12px;letter-spacing:.5px} .ban-tete h2{font-size:1.7rem;font-weight:800;margin:9px 0 3px;color:#fff;letter-spacing:-.02em} .ban-sous{font-size:.84rem;color:rgba(255,255,255,.9);margin:0} .ban-cta{margin-left:auto;display:flex;gap:9px;flex-wrap:wrap} .ban-btn{border-radius:11px;padding:10px 16px;font-size:.81rem;font-weight:700;display:inline-flex;align-items:center;gap:7px;text-decoration:none;transition:.2s;white-space:nowrap} .ban-btn svg{width:14px;height:14px;stroke:currentColor;fill:none;stroke-width:2.2} .ban-btn.blanc{background:#fff;color:var(--accent)} .ban-btn.blanc:hover{transform:translateY(-1px)} .ban-btn.verre{background:rgba(255,255,255,.2);color:#fff} .ban-btn.verre:hover{background:rgba(255,255,255,.3)} .ban-jauge .l{display:flex;justify-content:space-between;font-size:.74rem;color:rgba(255,255,255,.88);font-weight:700;margin-bottom:7px} .ban-jauge .b{height:8px;border-radius:8px;background:rgba(255,255,255,.22);overflow:hidden} .ban-jauge .b i{display:block;height:100%;background:#fff;border-radius:8px} .ban-mini{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:auto} .ban-mini>div{background:rgba(255,255,255,.15);border-radius:13px;padding:11px 14px;min-width:0} .ban-mini span{display:block;font-size:.68rem;color:rgba(255,255,255,.85);font-weight:600} .ban-mini b{display:block;font-size:1.05rem;font-weight:800;color:#fff;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ban-mini small{display:block;font-size:.66rem;color:rgba(255,255,255,.75);margin-top:1px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .ban-mini .alerte{background:rgba(255,226,122,.26)} .ban-mini .alerte b,.ban-mini .alerte span{color:#FFF1C2} .ban-mini .encaisser{background:linear-gradient(135deg,var(--p3) 0%,#C4F0E8 50%,var(--p4) 100%)} .ban-mini .encaisser span,.ban-mini .encaisser small{color:#1F5A4E} .ban-mini .encaisser b{color:#123B33} @media (max-width:1250px){.ban-mini{grid-template-columns:1fr 1fr}} @media (max-width:980px){.banniere-tournees{grid-template-columns:1fr}.calendrier{max-width:340px}.ban-cta{margin-left:0}} @media (max-width:520px){.ban-tete h2{font-size:1.3rem}.ban-btn{white-space:normal}} /* calendrier en mode période (comptes-rendus) : bande entre le premier et le dernier jour */ .cal-jours .jour.dans{border-radius:8px;width:100%;background:rgba(255,255,255,.2)} .cal-jours .jour.debut,.cal-jours .jour.fin{background:#fff;color:var(--accent);font-weight:800} .cal-aide{margin:8px 0 0;text-align:center;font-size:.72rem;color:rgba(255,255,255,.85)} /* boutons de la bannière : même rendu pour et