/* Charte inspirée d'Efficy : barre sombre #333, menu #575757, vert #4ca928, turquoise #008ead, police Noto Sans */
[v-cloak]{display:none}
:root{--top:#333;--menu:#575757;--menu-d:#464646;--green:#4ca928;--teal:#008ead;--orange:#f08a24;--btn:#e4e4e4;--btn-h:#d6d6d6;--line:#ddd;--bg:#fff;--txt:#222;--sub:#555;--mut:#a0a0a0;--panel:#f9f9f9}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;font:13px/1.4 "Noto Sans",Helvetica,Arial,sans-serif;color:var(--txt);background:var(--bg)}
a{color:inherit}
button,input,select,textarea{font:inherit;color:inherit}
input,select,textarea{border:1px solid #ccc;background:#fff;padding:6px 8px;border-radius:0;width:100%;min-width:0}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);box-shadow:0 0 0 1px var(--teal)}
input[type=checkbox]{width:auto}
.err{background:#fdecea;color:#b71c1c;border-left:4px solid #e53935;padding:8px 12px;margin:0 0 10px;cursor:pointer}
.c{text-align:center}.sp{flex:1}
small{color:var(--mut)}

/* ---------- connexion ---------- */
.login{display:grid;place-items:center;height:100vh;background:var(--top)}
.login form{background:#fff;padding:30px 34px;display:grid;gap:12px;width:320px}
.login h1{margin:0 0 6px;font-size:22px;font-weight:700;letter-spacing:1px}

/* ---------- structure ---------- */
.top{position:fixed;top:0;left:0;right:0;height:45px;background:var(--top);color:#e8e8e8;display:flex;align-items:center;z-index:30}
.top .burger{width:45px;height:45px;display:grid;place-items:center;cursor:pointer;font-size:16px}
.top .logo{font-size:20px;font-weight:700;letter-spacing:.5px;color:#fff;padding:0 22px 0 4px}
.top .logo i{color:var(--green);margin-right:6px}
.top .qs{display:flex;align-items:center;height:100%}
.top .qs input{width:125px;height:26px;background:#575757;border:0;color:#fff;padding:0 8px;box-shadow:none}
.top .qs input::placeholder{color:#aaa}
.top .qs button{background:none;border:0;color:#e8e8e8;width:36px;height:45px;cursor:pointer;font-size:15px}
.top .qs button:hover,.top .ib:hover{background:var(--menu-d)}
.top .right{margin-left:auto;display:flex;align-items:center;height:100%}
.top .ib{width:38px;height:45px;display:grid;place-items:center;cursor:pointer;background:none;border:0;color:#e8e8e8}
.top .who{padding:0 14px;text-align:right;line-height:1.15}.top .who b{display:block;font-weight:400;font-size:13px}.top .who i{font-size:10px;color:#bbb}
.shell{display:flex;padding-top:45px;height:100vh}
nav.menu{width:220px;flex:none;background:var(--menu);color:#e8e8e8;overflow:auto;padding-bottom:30px}
nav.menu.off{display:none}
nav.menu a.item{display:flex;align-items:center;height:42px;padding:0 10px;text-transform:uppercase;font-size:11.5px;letter-spacing:.2px;cursor:pointer;border-bottom:1px solid #00000012;text-decoration:none}
nav.menu a.item i.ic{width:22px;text-align:center;margin-right:6px;font-size:13px}
nav.menu a.item .dots{margin-left:auto;opacity:.7}
nav.menu a.item:hover{background:var(--menu-d)}
nav.menu a.item.on{background:var(--green);color:#fff}
nav.menu .rhead{background:var(--menu-d);font-size:10px;text-transform:uppercase;color:#bbb;padding:5px 10px;margin-top:6px}
nav.menu a.rec{display:flex;align-items:center;height:28px;padding:0 10px;font-size:11px;cursor:pointer;white-space:nowrap;overflow:hidden;text-decoration:none}
nav.menu a.rec i{width:20px;color:#ccc}nav.menu a.rec span{overflow:hidden;text-overflow:ellipsis}
nav.menu a.rec:hover{background:var(--menu-d)}
main{flex:1;min-width:0;overflow:auto;padding:10px 14px 40px;position:relative}
main>section>header.h{display:none}

/* ---------- barres d'outils ---------- */
.tb{display:flex;gap:2px;align-items:center;margin-bottom:12px;flex-wrap:wrap}
.btn{display:inline-flex;align-items:center;gap:7px;height:32px;padding:0 14px;background:var(--btn);border:0;color:#333;cursor:pointer;font-size:13px;white-space:nowrap;border-bottom:3px solid transparent}
.btn:hover{background:var(--btn-h)}
.btn.sq{width:32px;padding:0;justify-content:center}
.btn.pri{background:var(--teal);color:#fff}.btn.pri:hover{background:#007894}
.btn.on{border-bottom-color:var(--green)}
.btn.dng{color:#c62828}
.btn:disabled{opacity:.45;cursor:default}
.tb .gap{width:10px}
.title{font-size:13px;margin:0 0 10px}.title b{font-size:15px;font-weight:600}.title small{margin-left:6px}

/* ---------- grille ---------- */
.gtb{display:flex;align-items:center;gap:2px;margin:0 0 0 0;padding:4px;background:#fff}
.gtb .btn{height:26px;padding:0 9px;font-size:12px}.gtb .btn.sq{width:28px}
.gtb .cnt{background:var(--btn);height:26px;line-height:26px;padding:0 12px;font-size:11px;min-width:92px;text-align:center}
.gtb .qf{width:140px;height:26px;padding:0 8px;font-size:12px}
.grid-box{border:1px solid var(--line);background:#fff}
table.g{width:100%;border-collapse:collapse}
table.g th{font-size:12px;font-weight:700;color:#5c5c5c;text-align:left;padding:10px 6px 10px 12px;white-space:nowrap;cursor:pointer;user-select:none}
table.g th .ar{font-size:9px;color:#999;margin-left:4px}
table.g td{padding:9px 12px;border-top:1px solid #eee;font-size:13px}
table.g tbody tr:nth-child(even){background:#fafafa}
table.g tbody tr{cursor:pointer}
table.g tbody tr:hover{background:#eef6f8}
table.g td.k{width:28px;padding:9px 0 9px 8px;color:#888}
table.g td.rowact{text-align:right;white-space:nowrap}
.empty{color:var(--mut);text-align:center;padding:16px}
.pager{margin:8px 0;display:flex;gap:6px;align-items:center;font-size:12px;color:var(--sub)}

/* ---------- consultation ---------- */
.head{display:flex;gap:30px;padding:2px 0 14px;align-items:flex-start;flex-wrap:wrap}
.head h1{font-size:16px;font-weight:700;margin:6px 0 0;flex:1 1 300px;color:#222}
.head h1 small{display:block;font-size:11px;font-weight:400;margin-top:2px}
.head .info{flex:1 1 260px;display:grid;gap:4px;font-size:13px}
.head .info a{text-decoration:none;color:#0a5f78}.head .info a:hover{text-decoration:underline}
.head .info i{width:20px;color:#333}
.head .addr{flex:1 1 220px;line-height:1.5;font-size:13px}
.det{display:flex;gap:40px;flex-wrap:wrap;margin:0 0 14px;padding:8px 0;border-top:1px solid #eee;border-bottom:1px solid #eee}
.det .col{min-width:200px;font-size:13px}.det .col h4{margin:0 0 4px;font-size:11px;font-style:italic;color:var(--sub);font-weight:600}
.det dl{margin:0;display:grid;grid-template-columns:auto 1fr;gap:3px 10px}.det dt{color:var(--mut);font-size:11.5px;padding-top:1px}.det dd{margin:0;word-break:break-word}.det dd.wide{white-space:pre-wrap}
.tabs{display:flex;gap:1px}
.tabs a{display:flex;align-items:center;gap:7px;height:30px;padding:0 14px;background:var(--menu);color:#fff;cursor:pointer;font-size:12.5px;text-decoration:none}
.tabs a:hover{background:var(--menu-d)}.tabs a.on{background:var(--green)}
.tabs .badge{background:#ffffff33;border-radius:9px;padding:0 6px;font-size:10.5px}
.tabbody{border:1px solid var(--line);background:#fff;padding:4px 4px 8px}

/* ---------- edition ---------- */
.ed{max-width:1700px}
.namebar{display:flex;align-items:center;gap:8px;margin:0 0 16px}
.namebar .sq{width:14px;height:14px;border:2px solid var(--green);background:#c5e7b5;flex:none}
.namebar input{font-weight:700;font-size:14px;padding:7px 10px}
.edwrap{display:flex;gap:0;align-items:flex-start}
.edmain{flex:1;min-width:0}
.cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:0 36px;border:1px solid var(--line);background:var(--panel);padding:8px 12px 16px}
.cols h4{margin:6px 0 10px;font-style:italic;font-size:12px;font-weight:600;color:#444;border-bottom:1px solid #ccc;padding:2px 0 3px 6px}
.fld{margin-bottom:9px}.fld>span{display:block;font-size:11px;color:#444;margin-bottom:2px}.fld>span i{color:#c00;font-style:normal}
.fld input[type=checkbox]{width:16px;height:16px}
.users{width:260px;flex:none;background:var(--menu);color:#fff;min-height:200px;margin-left:12px}
.users h5{margin:0;padding:7px 12px;font-size:11px;font-weight:400;color:#ddd;display:flex;gap:6px;align-items:center}
.users .u{display:flex;align-items:center;gap:8px;padding:6px 12px;background:#464646;font-size:12px}
.users .u i.g{color:var(--green)}
.users .u button{margin-left:auto;background:none;border:0;color:#ddd;cursor:pointer}
.users select{margin:8px 12px;width:calc(100% - 24px);font-size:12px}

/* ---------- recherche ---------- */
.sbar{display:flex;gap:0;margin:2px 0 14px;max-width:760px}
.sbar input{height:38px;font-size:14px}.sbar button{width:110px;border:0;background:var(--teal);color:#fff;cursor:pointer;font-size:15px}
.crit{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 20px;border:1px solid var(--line);background:var(--panel);padding:10px 14px 14px;margin-bottom:12px}
.rcols{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:6px}
.rcols h4{font-size:11px;text-transform:uppercase;margin:0 0 6px;padding:6px 0}
.rl a{display:flex;gap:8px;align-items:center;height:30px;padding:0 6px;cursor:pointer;font-size:13px}.rl a:nth-child(odd){background:#fff}.rl a:hover{background:#eef6f8}.rl i{color:#888;width:16px}

/* ---------- agenda ---------- */
.cal{border:1px solid var(--line);margin-top:6px;overflow:auto}
.cal .hd{display:grid;background:#f4f4f4;border-bottom:1px solid var(--line);position:sticky;top:0;z-index:3}
.cal .hd>div{font-size:12px;font-weight:700;text-align:center;padding:2px 0;border-left:1px solid var(--line)}
.cal .hd>div.today{background:var(--green);color:#fff}
.cal .allday{display:grid;border-bottom:2px solid #ccc;min-height:34px}
.cal .allday>div{border-left:1px solid var(--line);padding:2px}
.cal .allday .lbl,.cal .hours .lbl{font-size:11px;text-align:center;border-left:0;color:#333}
.cal .body{display:grid;position:relative}
.cal .hours>div{height:56px;font-size:11px;text-align:right;padding:2px 4px;border-top:1px solid #ddd}
.cal .daycol{position:relative;border-left:1px solid #ccc;background-image:linear-gradient(#ddd 1px,transparent 1px),linear-gradient(#eee 1px,transparent 1px);background-size:100% 56px,100% 28px}
.cal .ev{position:absolute;left:2px;right:2px;background:#d8ecf2;border-left:4px solid var(--teal);padding:2px 5px;font-size:11.5px;overflow:hidden;cursor:pointer;z-index:2}
.cal .ev.done{opacity:.55;text-decoration:line-through}
.cal .ev.task{position:static;margin:1px 0;background:#e6f3d9;border-left-color:var(--green)}
.cal .now{position:absolute;left:0;right:0;height:2px;background:var(--green);z-index:4;pointer-events:none}
.cal .now:before{content:"";position:absolute;left:-6px;top:-4px;border:5px solid transparent;border-left-color:var(--green)}

/* ---------- pipeline, admin ---------- */
.kanban{display:flex;gap:8px;overflow:auto;padding-bottom:10px}
.kanban .col{min-width:210px;flex:1;background:#f0f0f0;padding:6px}
.kanban h4{margin:0 0 8px;font-size:11px;text-transform:uppercase;padding:4px 2px;color:#444;border-bottom:3px solid var(--green)}
.kanban .card{background:#fff;padding:8px;margin-bottom:6px;cursor:grab;border-left:4px solid var(--teal);box-shadow:0 1px 2px #0002;font-size:12.5px}
.grid4{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:2px 18px}
.members{display:grid;grid-template-columns:repeat(3,1fr);gap:4px 14px;padding:6px}
.chk{display:flex;gap:6px;align-items:center;font-size:13px}.chk input{width:auto}
.actions{display:flex;gap:8px;justify-content:flex-end;margin-top:12px}.actions.left{justify-content:flex-start;margin:8px 4px 0}
label.inl{display:inline-block;margin:6px 4px 8px;min-width:200px}label.inl span{display:block;font-size:11px}
h3.sec{font-size:12px;font-style:italic;margin:14px 6px 6px;color:#444}
select[multiple]{height:90px}

/* panneau de droite de l'edition, selecteur d'entite, onglets compacts */
.users h5 .add,.users .rel .add{margin-left:auto;background:none;border:0;color:#ddd;cursor:pointer;width:22px;height:22px}
.users h5 .add:hover,.users .rel .add:hover{background:var(--menu-d);color:#fff}
.users .rel{display:flex;align-items:center;gap:8px;padding:7px 12px;font-size:12.5px;color:#fff;border-top:1px solid #00000020;background:var(--menu)}
.users .rel i{width:16px;color:#ddd}
.users .u.sub{background:#4d4d4d;padding-left:36px;font-size:11.5px}
.users .u .role{margin-left:auto;font-size:10.5px;color:#cfcfcf}
.users .u .role+button{margin-left:6px}
.tabs.sq a{width:34px;justify-content:center;padding:0}
.memo textarea{min-height:420px;border:1px solid var(--line);background:#fff;padding:10px;font-size:13px}
.picker{position:fixed;z-index:60;width:320px;background:#fff;border:1px solid #bbb;box-shadow:0 4px 14px #0003}
.picker .ph{display:flex;align-items:center;gap:0;background:#f4f4f4;border-bottom:1px solid var(--line)}
.picker .ph .t{width:34px;height:34px;display:grid;place-items:center;color:#fff;background:var(--green)}
.picker .ph input{border:0;height:34px;background:#f4f4f4;box-shadow:none}
.picker .ph button{width:34px;height:34px;border:0;background:none;cursor:pointer}
.picker .pl{max-height:260px;overflow:auto}
.picker .pl a{display:flex;align-items:center;gap:8px;height:28px;padding:0 10px;cursor:pointer;font-size:12.5px}
.picker .pl a:nth-child(even){background:#fafafa}.picker .pl a:hover{background:#e3f1f5}.picker .pl i{color:#777;width:16px}

/* fenetre Securite */
.modal{position:fixed;inset:0;background:#0006;z-index:50;display:grid;place-items:start center;padding-top:70px}
.dlg{background:#fff;width:640px;max-width:94vw;padding:16px 20px 14px;box-shadow:0 6px 24px #0005}
.dlg h4{margin:0 0 12px;font-style:italic;font-weight:600;font-size:14px;border-bottom:1px solid #ccc;padding-bottom:6px}
.dlg .note{font-size:11px;color:#667;margin:10px 0 0}

.namebar .sq{cursor:pointer}.namebar .sq.off{background:#fff;border-color:#999}
.fn{font-weight:400}.title small i{margin:0 4px 0 10px;color:#4ca928}

/* sexe en boutons radio, historique, impression */
.radios{display:flex;gap:18px;padding:4px 0}.radios label{display:flex;gap:6px;align-items:center;font-size:13px;color:#1b1f24}.radios input{width:auto}
.dlg.wide{width:760px}.hist{max-height:60vh;overflow:auto}
.he{border-bottom:1px solid #eee;padding:8px 0}.hh small{color:#889;margin-left:10px;font-weight:400}
.hc{font-size:12.5px;padding-left:14px}.hc span{display:inline-block;min-width:150px;color:#667}
@media print{.top,nav.menu,.tb,.tabs,.gtb,.picker,.modal,.users{display:none!important}.shell{padding-top:0}main{overflow:visible;padding:0}}

/* menu des trois points */
table.g td.k{cursor:pointer}table.g td.k:hover{color:var(--teal)}
.rowmenu{position:fixed;z-index:60;min-width:230px;background:#fff;border:1px solid #bbb;box-shadow:0 4px 14px #0003;padding:4px 0}
.rowmenu a{display:flex;align-items:center;gap:10px;height:30px;padding:0 14px;cursor:pointer;font-size:13px}
.rowmenu a i{width:16px;color:#666}.rowmenu a:hover{background:#e3f1f5}.rowmenu a.dng,.rowmenu a.dng i{color:#c62828}

/* menu des trois points d'une entite + selecteur de vue */
nav.menu a.item .dots{padding:12px 8px;margin-right:-8px}nav.menu a.item .dots:hover{opacity:1;color:#fff}
.entmenu{position:fixed;z-index:60;width:280px;max-height:340px;overflow:auto;background:#575757;color:#e8e8e8;box-shadow:0 4px 14px #0004}
.entmenu .rhead{margin-top:0}.entmenu a{display:flex;align-items:center;height:28px;padding:0 10px;font-size:12px;cursor:pointer;white-space:nowrap;overflow:hidden}
.entmenu a i{width:20px;color:#ccc}.entmenu a span{overflow:hidden;text-overflow:ellipsis}.entmenu a:hover{background:#464646}.entmenu .empty{padding:6px 12px;font-size:11px;color:#bbb}
.gtb .vsel{height:26px;font-size:12px;margin-right:4px;max-width:180px}

/* assistant de vue personnalisee */
.qvbox{background:#f8f8f8;border:1px solid #e3e3e3;padding:4px 12px 14px;margin-top:6px}
.qvbox h4{font-style:italic;font-weight:400;font-size:12px;color:#444;border-bottom:1px solid #ddd;padding:8px 0 4px;margin:6px 0 10px}
.qvbox h4 small{color:#888}
.qcards{display:flex;flex-wrap:wrap;gap:8px}
.qcard{width:150px;background:#fff;border:1px solid #ddd;box-shadow:0 1px 3px #0001;padding:6px 8px;font-size:11.5px;cursor:grab}
.qcard.menu{display:flex;align-items:center;justify-content:center;color:#666;cursor:default}
.qcard b{display:block;text-align:center;margin-bottom:5px}.qcard .grip{color:#bbb;margin-right:5px;font-size:10px}
.qcard label{display:flex;flex-direction:column;color:#777;font-size:10.5px;margin-bottom:3px}
.qcard label.chk{flex-direction:row;align-items:center;gap:5px}
.qcard select{font-size:11px;height:22px;color:#2e8b12}
.qcard .mv{display:flex;justify-content:space-between;margin-top:4px}
.qcard .mv button{background:none;border:0;color:#999;cursor:pointer;padding:2px 6px}.qcard .mv button:hover:not(:disabled){color:var(--teal)}.qcard .mv button:disabled{opacity:.3;cursor:default}
.qavail{display:flex;flex-wrap:wrap;gap:6px;max-height:240px;overflow:auto;padding:4px}
.qtab{width:100%;font-size:10.5px;font-weight:700;text-transform:uppercase;color:#555;margin-top:6px}.qtab small{font-weight:400;color:#999}
.qchip{display:inline-flex;align-items:center;gap:6px;background:#fff;border:1px solid #ddd;box-shadow:0 1px 2px #0001;padding:4px 10px;font-size:11.5px;cursor:pointer;font-weight:600}
.qchip i{color:var(--green);font-size:10px}.qchip:hover{background:#e3f1f5}
table.qf{width:100%;border-collapse:separate;border-spacing:0 4px}
table.qf td{padding:0 3px}table.qf select,table.qf input{width:100%;font-size:12px;height:26px}
table.qf td.ic{width:30px}table.qf td.bo{width:60px}table.qf td.br{width:62px}table.qf td.op{width:170px}table.qf td.fd{width:32%}
table.qf button{background:none;border:0;color:#888;cursor:pointer;height:26px;width:26px}table.qf button:hover{color:var(--teal)}
.qsort{display:grid;grid-template-columns:1fr 1fr;gap:6px 14px}.qsort div{display:flex;align-items:center;gap:6px}.qsort select{flex:1;height:26px;font-size:12px}
.qtree{display:flex;flex-wrap:wrap;gap:12px;align-items:flex-start}
.qrope{background:#ccf;padding:6px 12px;text-align:center;font-size:12px;border:2px outset #fff;min-width:130px}
.qrope.rel{background:#bbe}.qrope small{color:#557}
.qact{display:flex;gap:4px;justify-content:center;margin-top:5px}.qact button{background:#fff;border:1px solid #99c;font-size:10.5px;cursor:pointer;padding:2px 7px}
.qlink{margin-top:14px;display:flex;gap:6px}.qlink select{min-width:340px;height:28px}
.users .u .nm{flex:1;overflow:hidden;text-overflow:ellipsis}.users .u select.lv{margin:0;width:120px;font-size:11px}
.users .u select.lv{color:#222;background:#fff;height:24px}

/* edition : panneau de droite sur toute la hauteur ; assistant de vue plus lisible */
.edwrap{align-items:stretch}.users{min-height:calc(100vh - 170px)}
.qcard{width:168px}
.qcard select{font-size:11.5px;height:26px;padding:0 6px;line-height:24px;width:100%}
.qcards{position:relative;min-height:60px;padding:2px}
.qcards.dragging{outline:2px dashed #9fd28a;outline-offset:2px;background:#f1f9ec}
.qcard{position:relative}
.qcard.drop-before::before,.qcard.drop-after::after{content:"";position:absolute;top:-4px;bottom:-4px;width:5px;background:var(--green);box-shadow:0 0 6px var(--green);z-index:5}
.qcard.drop-before::before{left:-7px}.qcard.drop-after::after{right:-7px}
.qchip[draggable=true]{cursor:grab}

/* panneau de droite de l'edition : du haut a la hauteur complete, comme Efficy */
.ed{padding-right:278px}
.ed .users{position:fixed;top:45px;right:0;bottom:0;width:262px;min-height:0;margin:0;overflow:auto;z-index:5}
/* ordre des jointures */
.qtree2{display:flex;flex-direction:column;gap:8px}
.qrow{display:flex;align-items:center;gap:8px}
.qno{flex:none;width:24px;height:24px;border-radius:50%;background:var(--teal);color:#fff;font-size:12px;font-weight:700;display:grid;place-items:center}
.qarrow{color:#8a8ac8;font-size:14px}
.qrope.master small,.qrope.rel small{font-size:10.5px}
.qlink select{height:32px;line-height:30px;padding:0 8px}.qlink .btn{height:32px}