/* MD BEST PARTNER — styles extraits de app.html (Phase 0, 2026-06-27) */
/* Bloc principal */
:root{
--blue:#2563EB;--blue-dark:#1D4ED8;--blue-light:#EFF6FF;--blue-mid:#DBEAFE;
--green:#16A34A;--green-light:#F0FDF4;--green-mid:#BBF7D0;
--red:#DC2626;--red-light:#FEF2F2;--red-mid:#FECACA;
--orange:#D97706;--orange-light:#FFFBEB;--orange-mid:#FDE68A;
--purple:#7C3AED;--purple-light:#F5F3FF;--purple-mid:#DDD6FE;
--teal:#0891B2;--teal-light:#ECFEFF;
--gray-50:#F9FAFB;--gray-100:#F3F4F6;--gray-200:#E5E7EB;
--gray-300:#D1D5DB;--gray-400:#9CA3AF;--gray-500:#6B7280;
--gray-600:#4B5563;--gray-700:#374151;--gray-800:#1F2937;--gray-900:#111827;
--white:#FFFFFF;
--shadow-sm:0 1px 2px rgba(0,0,0,.05);
--shadow:0 1px 3px rgba(0,0,0,.1),0 1px 2px rgba(0,0,0,.06);
--shadow-md:0 4px 6px rgba(0,0,0,.07),0 2px 4px rgba(0,0,0,.06);
--shadow-lg:0 10px 25px rgba(0,0,0,.1),0 4px 10px rgba(0,0,0,.07);
--r:10px;--rs:6px;
}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
body{font-family:'DM Sans',sans-serif;background:var(--gray-50);color:var(--gray-800);font-size:14px;line-height:1.5;min-height:100vh}
/* HEADER */
.header{background:var(--white);border-bottom:1px solid var(--gray-200);padding:0 28px;height:56px;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100}
.header-brand{display:flex;align-items:center;gap:10px}
.header-logo{width:34px;height:34px;background:var(--blue);border-radius:8px;display:flex;align-items:center;justify-content:center;color:white;font-weight:700;font-size:13px;flex-shrink:0}
.brand-name{font-size:13px;font-weight:600;color:var(--gray-800);line-height:1.2}
.brand-role{font-size:11px;color:var(--gray-500)}
.header-right{display:flex;align-items:center;gap:10px}
.status-pill{display:flex;align-items:center;gap:6px;background:var(--green-light);color:var(--green);padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500}
.status-dot{width:7px;height:7px;background:var(--green);border-radius:50%;animation:pulse 2s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.5}}
.btn{display:inline-flex;align-items:center;gap:7px;padding:7px 14px;border-radius:var(--rs);font-size:13px;font-weight:500;cursor:pointer;transition:all .15s;border:none;font-family:inherit;text-decoration:none}
.btn-sm{padding:5px 11px;font-size:12px}
.btn-xs{padding:3px 9px;font-size:11px}
.btn-outline{background:var(--white);border:1px solid var(--gray-200);color:var(--gray-700)}
.btn-outline:hover{background:var(--gray-50);border-color:var(--gray-300)}
.btn-primary{background:var(--blue);color:white}
.btn-primary:hover{background:var(--blue-dark)}
.btn-danger{background:var(--red-light);color:var(--red);border:1px solid var(--red-mid)}
.btn-danger:hover{background:#FEE2E2}
.btn-success{background:var(--green-light);color:var(--green);border:1px solid var(--green-mid)}
.btn-orange{background:var(--orange-light);color:var(--orange);border:1px solid var(--orange-mid)}
.btn-purple{background:var(--purple-light);color:var(--purple);border:1px solid var(--purple-mid)}
.btn-teal{background:var(--teal-light);color:var(--teal);border:1px solid #A5F3FC}
.notif-btn{position:relative;width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);background:white;border:1px solid var(--gray-200);cursor:pointer;transition:all .15s;font-size:17px}
.notif-btn:hover{background:var(--gray-50)}
.notif-badge{position:absolute;top:-4px;right:-4px;width:17px;height:17px;background:var(--red);color:white;border-radius:50%;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid white}
/* MAIN */
.main{max-width:1240px;margin:0 auto;padding:28px 20px}
.page-head{display:flex;align-items:flex-end;justify-content:space-between;margin-bottom:0}
.page-title{font-size:24px;font-weight:700;color:var(--gray-900)}
.page-sub{color:var(--gray-500);font-size:13px;margin-top:2px}
/* TABS */
.tabs{display:flex;gap:2px;margin-top:18px;border-bottom:1px solid var(--gray-200);overflow-x:auto}
.tabs::-webkit-scrollbar{height:0}
.tab{padding:9px 15px;font-size:13px;font-weight:500;cursor:pointer;color:var(--gray-500);display:flex;align-items:center;gap:6px;border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s;white-space:nowrap;flex-shrink:0}
.tab:hover{color:var(--gray-700)}
.tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.tab-badge{background:var(--red);color:white;border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;line-height:1.4}
.tab-badge-blue{background:var(--blue-mid);color:var(--blue);border-radius:10px;font-size:10px;font-weight:700;padding:1px 6px;line-height:1.4}
/* TAB CONTENT */
.tab-content{display:none;animation:fadeIn .2s ease}
.tab-content.active{display:block}
@keyframes fadeIn{from{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}
/* CARDS */
.kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:20px}
.kpi-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r);padding:18px 20px;box-shadow:var(--shadow-sm)}
.kpi-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px}
.kpi-label{font-size:12px;color:var(--gray-500);font-weight:500}
.kpi-value{font-size:26px;font-weight:700;color:var(--gray-900);font-family:'DM Mono',monospace}
.kpi-change{font-size:11px;margin-top:4px}
.up{color:var(--green)}.down{color:var(--red)}
.alert-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:14px;margin-top:14px}
.alert-card{background:var(--white);border-radius:var(--r);padding:16px 18px;box-shadow:var(--shadow-sm)}
.alert-card.warn{border:1px solid var(--orange-mid);background:var(--orange-light)}
.alert-card.danger{border:1px solid var(--red-mid);background:var(--red-light)}
.alert-card.info{border:1px solid var(--blue-mid);background:var(--blue-light)}
.alert-header{display:flex;align-items:center;gap:7px;margin-bottom:8px}
.alert-title{font-size:12px;font-weight:600;color:var(--gray-700)}
.alert-value{font-size:28px;font-weight:700;color:var(--gray-900);font-family:'DM Mono',monospace}
.alert-sub{font-size:11px;color:var(--gray-500);margin-top:3px}
.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px}
.chart-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r);padding:20px;box-shadow:var(--shadow-sm)}
.chart-title{font-size:14px;font-weight:600;color:var(--gray-800)}
.chart-sub{font-size:11px;color:var(--gray-400);margin-top:2px}
.chart-wrap{margin-top:14px;height:175px;position:relative}
/* TABLE CARD */
.table-card{background:var(--white);border:1px solid var(--gray-200);border-radius:var(--r);margin-top:14px;box-shadow:var(--shadow-sm);overflow:hidden}
.table-header{padding:14px 18px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-100);flex-wrap:wrap;gap:10px}
.table-title{font-size:14px;font-weight:600;color:var(--gray-800)}
.table-sub{font-size:11px;color:var(--gray-400);margin-top:2px}
.table-actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}
table{width:100%;border-collapse:collapse}
thead th{padding:10px 14px;text-align:left;font-size:11px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.05em;background:var(--gray-50);border-bottom:1px solid var(--gray-200)}
tbody tr{transition:background .1s;cursor:pointer}
tbody tr:hover{background:var(--gray-50)}
tbody td{padding:11px 14px;font-size:13px;color:var(--gray-700);border-bottom:1px solid var(--gray-100);vertical-align:middle}
.badge{display:inline-flex;align-items:center;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600}
.bg{background:var(--green-light);color:var(--green)}
.bb{background:var(--blue-light);color:var(--blue)}
.bo{background:var(--orange-light);color:var(--orange)}
.br{background:var(--red-light);color:var(--red)}
.bgr{background:var(--gray-100);color:var(--gray-600)}
.bp{background:var(--purple-light);color:var(--purple)}
.bt{background:var(--teal-light);color:var(--teal)}
.avatar{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;flex-shrink:0}
.client-cell{display:flex;align-items:center;gap:10px}
.cname{font-weight:600;color:var(--gray-800);font-size:13px}
.cemail{font-size:11px;color:var(--gray-400)}
.pagination{padding:11px 14px;display:flex;align-items:center;justify-content:space-between;border-top:1px solid var(--gray-100)}
.page-info{font-size:12px;color:var(--gray-400)}
.page-btns{display:flex;gap:4px}
.page-btn{width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:var(--rs);font-size:12px;cursor:pointer;border:1px solid var(--gray-200);background:white;color:var(--gray-600);transition:all .1s}
.page-btn:hover,.page-btn.active{background:var(--blue);color:white;border-color:var(--blue)}
/* SEARCH */
.search-wrap{position:relative}
.search-icon{position:absolute;left:10px;top:50%;transform:translateY(-50%);color:var(--gray-400);font-size:13px;pointer-events:none}
.search-input{padding:6px 12px 6px 32px;border:1px solid var(--gray-200);border-radius:var(--rs);font-size:12px;font-family:inherit;color:var(--gray-700);outline:none;background:var(--gray-50);width:210px;transition:all .15s}
.search-input:focus{border-color:var(--blue);background:white;box-shadow:0 0 0 3px rgba(37,99,235,.1)}
/* FORM */
.form-row{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.form-group{display:flex;flex-direction:column;gap:4px;margin-bottom:12px}
.form-label{font-size:12px;font-weight:600;color:var(--gray-600)}
.form-input,.form-select,.form-textarea{padding:8px 12px;border:1px solid var(--gray-200);border-radius:var(--rs);font-size:13px;font-family:inherit;color:var(--gray-800);outline:none;transition:all .15s;background:white}
.form-input:focus,.form-select:focus,.form-textarea:focus{border-color:var(--blue);box-shadow:0 0 0 3px rgba(37,99,235,.1)}
.form-textarea{resize:vertical;min-height:75px}
.form-select-sm{padding:6px 10px;font-size:12px}
/* MODAL */
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1000;align-items:center;justify-content:center}
.modal-overlay.open{display:flex}
.modal{background:white;border-radius:12px;padding:26px;width:520px;max-width:95vw;max-height:90vh;overflow-y:auto;position:relative;box-shadow:var(--shadow-lg);animation:slideUp .2s ease}
.modal-lg{width:640px}
#modal-settings .modal{width:900px;max-width:96vw}
#modal-settings .inner-tabs{flex-wrap:wrap;row-gap:4px}
#set-utilisateurs-body .data-table{width:100%}
@keyframes slideUp{from{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}
.modal-title{font-size:17px;font-weight:700;color:var(--gray-900)}
.modal-sub{font-size:13px;color:var(--gray-500);margin-top:3px;margin-bottom:18px}
.modal-close{position:absolute;top:16px;right:16px;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gray-100);border:none;cursor:pointer;color:var(--gray-500);font-size:14px;transition:all .15s}
.modal-close:hover{background:var(--gray-200)}
.modal-footer{display:flex;gap:10px;justify-content:flex-end;margin-top:18px;padding-top:14px;border-top:1px solid var(--gray-100)}
.divider{height:1px;background:var(--gray-100);margin:14px 0}
.section-label{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
/* DETAIL PANEL */
.detail-panel{position:fixed;right:0;top:0;bottom:0;width:400px;background:white;border-left:1px solid var(--gray-200);box-shadow:-4px 0 20px rgba(0,0,0,.08);z-index:200;overflow-y:auto;transform:translateX(100%);transition:transform .25s ease}
.detail-panel.open{transform:translateX(0)}
.dp-header{padding:18px 20px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:12px}
.dp-close{margin-left:auto;width:28px;height:28px;display:flex;align-items:center;justify-content:center;border-radius:50%;background:var(--gray-100);border:none;cursor:pointer;font-size:13px;color:var(--gray-500)}
.dp-body{padding:18px 20px}
.dp-section{margin-bottom:18px}
.dp-section-title{font-size:11px;font-weight:700;color:var(--gray-400);text-transform:uppercase;letter-spacing:.06em;margin-bottom:10px}
.dp-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--gray-100);font-size:13px}
.dp-key{color:var(--gray-500)}
.dp-val{font-weight:500;color:var(--gray-800);text-align:right}
.act-item{display:flex;gap:10px;padding:7px 0}
.act-dot{width:7px;height:7px;border-radius:50%;background:var(--blue);margin-top:5px;flex-shrink:0}
.act-text{font-size:12px;color:var(--gray-600)}
.act-date{font-size:11px;color:var(--gray-400)}
.overlay{position:fixed;inset:0;background:rgba(0,0,0,.2);z-index:199;display:none}
.overlay.open{display:block}
/* MAIL FILTERS */
.filter-pills{display:flex;gap:7px;flex-wrap:wrap;margin-bottom:14px}
.filter-pill{padding:5px 12px;border-radius:20px;font-size:12px;font-weight:500;border:1px solid var(--gray-200);background:white;cursor:pointer;color:var(--gray-600);transition:all .15s}
.filter-pill.active{background:var(--blue);color:white;border-color:var(--blue)}
.filter-pill:hover:not(.active){background:var(--gray-50)}
/* NOTIFICATION CENTER */
.notif-dropdown{position:absolute;top:52px;right:20px;width:360px;background:white;border:1px solid var(--gray-200);border-radius:var(--r);box-shadow:var(--shadow-lg);z-index:300;display:none}
.notif-dropdown.open{display:block}
.nd-header{padding:14px 16px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--gray-100)}
.nd-title{font-size:14px;font-weight:600;color:var(--gray-800)}
.nd-item{padding:12px 16px;display:flex;align-items:flex-start;gap:12px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .1s}
.nd-item:hover{background:var(--gray-50)}
.nd-item.unread{background:var(--blue-light)}
.nd-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.nd-text{font-size:12px;color:var(--gray-700);line-height:1.5}
.nd-time{font-size:11px;color:var(--gray-400);margin-top:3px}
/* WHATSAPP WIDGET */
.wa-btn{position:fixed;bottom:28px;right:28px;width:56px;height:56px;background:#25D366;border-radius:50%;display:flex;align-items:center;justify-content:center;cursor:pointer;box-shadow:0 4px 20px rgba(37,211,102,.4);z-index:500;transition:transform .2s;border:none}
.wa-btn:hover{transform:scale(1.08)}
.wa-btn svg{width:28px;height:28px;fill:white}
.wa-count{position:absolute;top:-4px;right:-4px;width:20px;height:20px;background:var(--red);color:white;border-radius:50%;font-size:10px;font-weight:700;display:flex;align-items:center;justify-content:center;border:2px solid white}
.wa-panel{position:fixed;bottom:0;right:0;width:380px;height:100vh;background:white;box-shadow:-4px 0 20px rgba(0,0,0,.1);z-index:600;transform:translateX(100%);transition:transform .25s ease;display:flex;flex-direction:column}
.wa-panel.open{transform:translateX(0)}
.wa-header{background:#075E54;padding:14px 16px;display:flex;align-items:center;gap:12px}
.wa-logo{width:36px;height:36px;background:rgba(255,255,255,.2);border-radius:50%;display:flex;align-items:center;justify-content:center}
.wa-logo svg{width:20px;height:20px;fill:white}
.wa-header-text h3{font-size:14px;font-weight:600;color:white;line-height:1.2}
.wa-header-text p{font-size:11px;color:rgba(255,255,255,.7)}
.wa-close{margin-left:auto;background:none;border:none;cursor:pointer;color:rgba(255,255,255,.8);font-size:18px;padding:4px}
.wa-tabs{display:flex;background:#128C7E;border-bottom:1px solid rgba(255,255,255,.1)}
.wa-tab{flex:1;padding:10px;text-align:center;font-size:12px;font-weight:600;color:rgba(255,255,255,.7);cursor:pointer;border-bottom:2px solid transparent;transition:all .15s}
.wa-tab.active{color:white;border-bottom-color:white}
.wa-list{flex:1;overflow-y:auto;background:#ECE5DD}
.wa-conv{padding:12px 14px;background:white;margin:4px 6px;border-radius:8px;cursor:pointer;display:flex;gap:10px;align-items:center;box-shadow:0 1px 2px rgba(0,0,0,.05);transition:background .1s}
.wa-conv:hover{background:#f5f5f5}
.wa-avatar{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700;flex-shrink:0}
.wa-conv-name{font-size:13px;font-weight:600;color:#1a1a1a}
.wa-conv-msg{font-size:12px;color:#667781;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:200px}
.wa-conv-time{font-size:11px;color:#667781;margin-left:auto;flex-shrink:0}
.wa-unread{background:#25D366;color:white;border-radius:10px;font-size:10px;font-weight:700;padding:2px 7px;margin-left:auto}
.wa-chat{display:none;flex-direction:column;flex:1;min-height:0}
.wa-chat.active{display:flex}
.wa-chat-header{padding:12px 14px;background:white;border-bottom:1px solid var(--gray-200);display:flex;align-items:center;gap:10px}
.wa-back{background:none;border:none;cursor:pointer;font-size:16px;color:var(--gray-500);padding:4px}
.wa-messages{flex:1;min-height:0;overflow-y:auto;padding:12px;background:#ECE5DD;display:flex;flex-direction:column;gap:6px}
.wa-msg{max-width:75%;padding:8px 12px;border-radius:8px;font-size:13px;line-height:1.5;position:relative}
.wa-msg.out{background:#DCF8C6;align-self:flex-end;border-bottom-right-radius:2px}
.wa-msg.in{background:white;align-self:flex-start;border-bottom-left-radius:2px;box-shadow:0 1px 2px rgba(0,0,0,.05)}
.wa-msg-time{font-size:10px;color:#667781;display:flex;justify-content:flex-end;margin-top:3px;gap:4px}
.wa-input-bar{padding:10px 12px;background:white;border-top:1px solid var(--gray-200);display:flex;align-items:center;gap:8px;flex-shrink:0}
.wa-input{flex:1;padding:8px 14px;border:1px solid var(--gray-200);border-radius:20px;font-size:13px;font-family:inherit;outline:none}
.wa-send{width:36px;height:36px;background:#25D366;border:none;border-radius:50%;cursor:pointer;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.wa-send svg{width:16px;height:16px;fill:white}
/* TOAST */
.toast{position:fixed;bottom:24px;left:50%;transform:translateX(-50%) translateY(80px);background:var(--gray-900);color:white;padding:11px 18px;border-radius:var(--r);font-size:13px;display:flex;align-items:center;gap:10px;z-index:9999;opacity:0;transition:all .3s;pointer-events:none;max-width:340px;box-shadow:var(--shadow-md)}
.toast.show{transform:translateX(-50%) translateY(0);opacity:1}
/* DOMICILE CARD */
.dom-card{background:white;border:1px solid var(--gray-200);border-radius:var(--rs);padding:13px 16px;display:flex;align-items:center;justify-content:space-between}
.dom-info{display:flex;align-items:center;gap:12px}
/* SWITCH TOGGLE */
.toggle{position:relative;width:40px;height:22px;flex-shrink:0}
.toggle input{opacity:0;width:0;height:0}
.toggle-slider{position:absolute;inset:0;background:var(--gray-300);border-radius:22px;cursor:pointer;transition:.3s}
.toggle-slider::before{position:absolute;content:'';width:16px;height:16px;left:3px;bottom:3px;background:white;border-radius:50%;transition:.3s}
.toggle input:checked+.toggle-slider{background:var(--green)}
.toggle input:checked+.toggle-slider::before{transform:translateX(18px)}
/* TABS INSIDE PANEL */
.inner-tabs{display:flex;border-bottom:1px solid var(--gray-200);margin-bottom:14px}
.inner-tab{padding:8px 14px;font-size:12px;font-weight:500;cursor:pointer;color:var(--gray-500);border-bottom:2px solid transparent;margin-bottom:-1px;transition:all .15s}
.inner-tab.active{color:var(--blue);border-bottom-color:var(--blue)}
.inner-content{display:none}
.inner-content.active{display:block}
/* EXPERT card */
.expert-card{background:white;border:1px solid var(--gray-200);border-radius:var(--r);padding:16px 18px;margin-bottom:10px;display:flex;align-items:center;gap:14px;box-shadow:var(--shadow-sm);cursor:pointer;transition:border-color .15s}
.expert-card:hover{border-color:var(--blue)}
.expert-info{flex:1}
.expert-name{font-weight:600;font-size:14px;color:var(--gray-800)}
.expert-meta{font-size:12px;color:var(--gray-400);margin-top:2px}
.expert-stats{display:flex;gap:14px;text-align:center}
.estat{font-size:18px;font-weight:700;color:var(--gray-900);font-family:'DM Mono',monospace}
.estat-label{font-size:11px;color:var(--gray-400)}
/* DOSSIER STEPS */
.steps{display:flex;align-items:center;gap:0;margin:14px 0}
.step{flex:1;text-align:center;position:relative}
.step::after{content:'';position:absolute;top:12px;left:50%;right:-50%;height:2px;background:var(--gray-200);z-index:0}
.step:last-child::after{display:none}
.step-dot{width:24px;height:24px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:11px;font-weight:700;margin:0 auto 5px;position:relative;z-index:1}
.step-dot.done{background:var(--green);color:white}
.step-dot.active{background:var(--blue);color:white;box-shadow:0 0 0 4px var(--blue-mid)}
.step-dot.pending{background:var(--gray-200);color:var(--gray-500)}
.step-label{font-size:10px;color:var(--gray-400);font-weight:500}
/* NOTIF TEMPLATES */
.tmpl-card{background:white;border:1px solid var(--gray-200);border-radius:var(--r);padding:14px 16px;margin-bottom:10px;box-shadow:var(--shadow-sm)}
.tmpl-head{display:flex;align-items:center;gap:10px;margin-bottom:8px}
.tmpl-icon{width:32px;height:32px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:14px}
.tmpl-title{font-size:13px;font-weight:600;color:var(--gray-800)}
.tmpl-meta{font-size:11px;color:var(--gray-400);margin-top:2px}
.tmpl-body{font-size:12px;color:var(--gray-600);background:var(--gray-50);padding:10px 12px;border-radius:var(--rs);line-height:1.6;border:1px solid var(--gray-100);font-family:'DM Mono',monospace}
.tmpl-channels{display:flex;gap:6px;margin-top:10px}
/* FINANCE */
.fin-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-top:18px;margin-bottom:14px}
.fin-card{background:white;border:1px solid var(--gray-200);border-radius:var(--r);padding:16px 18px}
.fin-label{font-size:11px;font-weight:600;color:var(--gray-500);text-transform:uppercase;letter-spacing:.04em}
.fin-value{font-size:24px;font-weight:700;color:var(--gray-900);font-family:'DM Mono',monospace;margin-top:6px}
/* RESPONSIVE */
@media(max-width:900px){
.kpi-grid{grid-template-columns:repeat(2,1fr)}
.alert-grid{grid-template-columns:1fr}
.charts-row{grid-template-columns:1fr}
.fin-kpis{grid-template-columns:1fr}
.form-row{grid-template-columns:1fr}
.wa-panel{width:100%}
.detail-panel{width:100%}
}
.empty-cell{text-align:center;color:var(--gray-400);padding:32px;font-size:13px}
/* ============================================================
MODERN SAAS POLISH LAYER (v2)
- Plus de finesse, plus d'air, micro-interactions
- 100% responsive mobile
============================================================ */
:root{
--brand-grad:linear-gradient(135deg,#2563EB 0%,#7C3AED 100%);
--surface:#FFFFFF;
--surface-2:#FAFBFD;
--ring:0 0 0 3px rgba(37,99,235,.12);
--shadow-soft:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
--shadow-elev:0 12px 32px -8px rgba(16,24,40,.12),0 4px 12px -4px rgba(16,24,40,.08);
--r-lg:14px;
}
html{scroll-behavior:smooth}
body{background:linear-gradient(180deg,#F6F8FB 0%,#F9FAFB 220px) fixed;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
::selection{background:rgba(37,99,235,.18)}
*::-webkit-scrollbar{width:10px;height:10px}
*::-webkit-scrollbar-thumb{background:#D7DCE3;border-radius:8px;border:2px solid transparent;background-clip:padding-box}
*::-webkit-scrollbar-thumb:hover{background:#B7C0CC;background-clip:padding-box;border:2px solid transparent}
*::-webkit-scrollbar-track{background:transparent}
/* Header refresh */
.header{backdrop-filter:saturate(180%) blur(12px);background:rgba(255,255,255,.85);box-shadow:0 1px 0 rgba(16,24,40,.05);border-bottom:1px solid rgba(229,231,235,.7)}
.header-logo{background:var(--brand-grad)!important;box-shadow:0 4px 12px -2px rgba(37,99,235,.4);position:relative;overflow:hidden}
.header-logo::after{content:"";position:absolute;inset:0;background:linear-gradient(135deg,rgba(255,255,255,.25),transparent 60%)}
.brand-name{letter-spacing:-.01em}
/* Buttons – plus tactiles */
.btn{transition:transform .12s ease,box-shadow .15s ease,background .15s ease,border-color .15s ease;will-change:transform}
.btn:active{transform:translateY(1px)}
.btn-primary{background:var(--brand-grad);box-shadow:0 4px 14px -4px rgba(37,99,235,.5)}
.btn-primary:hover{filter:brightness(1.05);box-shadow:0 8px 20px -6px rgba(37,99,235,.55)}
.btn-outline:hover{box-shadow:var(--shadow-soft)}
.btn:focus-visible{outline:none;box-shadow:var(--ring)}
/* KPI / cards lift */
.kpi-card,.alert-card,.chart-card,.table-card,.expert-card,.tmpl-card,.fin-card,.dsb-card,.dom-card,.doc-card{
border-radius:var(--r-lg);
transition:transform .18s ease,box-shadow .18s ease,border-color .18s ease;
}
.kpi-card:hover,.fin-card:hover,.dsb-card:hover{transform:translateY(-2px);box-shadow:var(--shadow-elev);border-color:#DCE3EE}
.kpi-value,.fin-value,.alert-value,.dsb-val{letter-spacing:-.02em}
/* Tabs – snap + soft underline */
.tabs{scroll-snap-type:x mandatory;gap:4px;padding:0 2px}
.tab{scroll-snap-align:start;border-radius:8px 8px 0 0}
.tab:hover{background:rgba(37,99,235,.04)}
.tab.active{background:linear-gradient(180deg,rgba(37,99,235,.06),transparent)}
/* Inputs */
.form-input,.form-select,.form-textarea,.search-input{transition:border-color .15s,box-shadow .15s,background .15s}
.form-input:hover,.form-select:hover,.form-textarea:hover{border-color:var(--gray-300)}
/* Modal refinements */
.modal-overlay{backdrop-filter:blur(4px);background:rgba(15,23,42,.5)}
.modal{border-radius:18px;box-shadow:0 24px 60px -12px rgba(16,24,40,.35);padding:24px}
.modal-close:hover{transform:rotate(90deg)}
.modal-close{transition:transform .25s ease,background .15s}
/* Detail panel & WA: softer borders */
.detail-panel,.wa-panel{border-radius:18px 0 0 18px}
/* Toast */
.toast{border-radius:14px;background:linear-gradient(135deg,#111827,#1F2937);box-shadow:0 18px 40px -8px rgba(0,0,0,.45)}
/* Table rows */
tbody tr{transition:background .12s,box-shadow .12s}
tbody tr:hover{background:linear-gradient(90deg,rgba(37,99,235,.04),transparent)}
/* ===== MOBILE TOGGLE & HELP ===== */
.menu-toggle{display:none;width:38px;height:38px;align-items:center;justify-content:center;border:1px solid var(--gray-200);background:white;border-radius:10px;font-size:18px;cursor:pointer;margin-right:6px}
.help-btn{width:36px;height:36px;display:flex;align-items:center;justify-content:center;border-radius:10px;background:white;border:1px solid var(--gray-200);cursor:pointer;font-size:15px;font-weight:700;color:var(--blue);transition:all .15s}
.help-btn:hover{background:var(--blue-light);transform:translateY(-1px)}
/* ===== 100% RESPONSIVE MOBILE ===== */
@media(max-width:768px){
.header{padding:0 14px;height:54px}
.menu-toggle{display:inline-flex}
.brand-role{display:none}
.brand-name{font-size:12px;max-width:140px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.header-right .btn:not(.btn-primary){display:none}
.status-pill{display:none}
.main{padding:18px 14px}
.page-title{font-size:20px}
.page-head{flex-direction:column;align-items:flex-start;gap:8px}
.tabs{margin-top:14px;overflow-x:auto;-webkit-overflow-scrolling:touch;background:white;border-radius:12px;padding:6px;border:1px solid var(--gray-200);box-shadow:var(--shadow-soft)}
.tabs::-webkit-scrollbar{display:none}
.tab{padding:8px 12px;border-radius:8px;font-size:12px;border-bottom:none!important}
.tab.active{background:var(--blue);color:white!important}
.tab.active .tab-badge,.tab.active .tab-badge-blue{background:white;color:var(--blue)}
.kpi-grid,.dsb,.fin-kpis,.alert-grid,.charts-row{grid-template-columns:1fr!important;gap:10px}
.kpi-card,.alert-card,.chart-card,.fin-card{padding:14px}
.kpi-value{font-size:22px}
.table-card{border-radius:12px}
.table-header{padding:12px 14px;flex-direction:column;align-items:stretch}
.search-input{width:100%}
thead th,tbody td{padding:9px 10px;font-size:12px}
.modal{width:100%;max-width:100%;border-radius:18px 18px 0 0;max-height:92vh;position:fixed;bottom:0;left:0;right:0;animation:slideUpFull .25s ease}
.modal-overlay.open{align-items:flex-end}
@keyframes slideUpFull{from{transform:translateY(100%)}to{transform:translateY(0)}}
.form-row{grid-template-columns:1fr}
.detail-panel,.wa-panel{width:100%;border-radius:0}
.notif-dropdown{width:calc(100vw - 20px);right:10px;left:10px}
.wa-btn{bottom:18px;right:18px;width:52px;height:52px}
.header-logo{width:32px;height:32px;font-size:11px}
.doc-grid{grid-template-columns:repeat(2,1fr)}
.steps{overflow-x:auto;padding-bottom:6px}
}
@media(max-width:420px){
.doc-grid{grid-template-columns:1fr}
.tab{font-size:11px;padding:7px 10px}
}
/* Mobile drawer for switching tabs */
.mobile-drawer{position:fixed;top:0;left:0;bottom:0;width:84%;max-width:320px;background:white;z-index:2000;transform:translateX(-100%);transition:transform .25s ease;box-shadow:8px 0 32px rgba(0,0,0,.18);display:flex;flex-direction:column;overflow-y:auto}
.mobile-drawer.open{transform:translateX(0)}
.mobile-drawer-overlay{position:fixed;inset:0;background:rgba(0,0,0,.45);z-index:1999;display:none;backdrop-filter:blur(2px)}
.mobile-drawer-overlay.open{display:block}
.md-head{padding:18px 18px 12px;border-bottom:1px solid var(--gray-100);display:flex;align-items:center;gap:10px}
.md-head .header-logo{width:30px;height:30px;font-size:11px}
.md-link{display:flex;align-items:center;gap:12px;padding:13px 18px;font-size:14px;font-weight:500;color:var(--gray-700);cursor:pointer;border-left:3px solid transparent;transition:all .12s}
.md-link:hover{background:var(--gray-50)}
.md-link.active{background:var(--blue-light);color:var(--blue);border-left-color:var(--blue);font-weight:600}
/* ===== GUIDED TOUR (first-visit demo) ===== */
.tour-overlay{position:fixed;inset:0;background:rgba(11,18,32,.62);backdrop-filter:blur(3px);z-index:5000;display:none;align-items:center;justify-content:center;padding:20px;animation:fadeIn .25s ease}
.tour-overlay.open{display:flex}
.tour-card{background:white;border-radius:20px;max-width:460px;width:100%;padding:28px;box-shadow:0 30px 80px -10px rgba(0,0,0,.5);position:relative;animation:tourPop .35s cubic-bezier(.2,.9,.3,1.2)}
@keyframes tourPop{from{transform:scale(.92) translateY(20px);opacity:0}to{transform:scale(1) translateY(0);opacity:1}}
.tour-emoji{font-size:42px;display:inline-block;background:var(--blue-light);width:72px;height:72px;border-radius:18px;display:flex;align-items:center;justify-content:center;margin-bottom:14px}
.tour-title{font-size:20px;font-weight:700;color:var(--gray-900);margin-bottom:6px;letter-spacing:-.01em}
.tour-text{font-size:14px;color:var(--gray-600);line-height:1.6}
.tour-dots{display:flex;gap:6px;margin:18px 0 6px}
.tour-dot{width:8px;height:8px;border-radius:50%;background:var(--gray-200);transition:all .2s}
.tour-dot.active{background:var(--blue);width:22px;border-radius:4px}
.tour-actions{display:flex;justify-content:space-between;align-items:center;margin-top:18px;gap:8px}
.tour-skip{background:none;border:none;color:var(--gray-500);font-size:13px;cursor:pointer;padding:8px 6px;font-family:inherit}
.tour-skip:hover{color:var(--gray-700)}
.tour-next{background:var(--brand-grad);color:white;border:none;border-radius:10px;padding:10px 22px;font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 6px 18px -4px rgba(37,99,235,.5);font-family:inherit;transition:transform .15s}
.tour-next:hover{transform:translateY(-1px)}
.tour-close{position:absolute;top:14px;right:14px;width:30px;height:30px;border:none;background:var(--gray-100);border-radius:50%;cursor:pointer;color:var(--gray-500);font-size:14px;display:flex;align-items:center;justify-content:center}
.tour-close:hover{background:var(--gray-200);color:var(--gray-800)}
/* ===== GED / DOCUMENTS ===== */
.upload-zone{border:2px dashed var(--gray-300);border-radius:var(--r);padding:36px 20px;text-align:center;cursor:pointer;transition:all .2s;background:var(--gray-50);position:relative}
.upload-zone:hover,.upload-zone.dragover{border-color:var(--blue);background:var(--blue-light)}
.upload-zone input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.uz-icon{font-size:36px;margin-bottom:8px;display:block}
.uz-title{font-size:14px;font-weight:600;color:var(--gray-700)}
.uz-sub{font-size:12px;color:var(--gray-400);margin-top:5px}
.doc-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(158px,1fr));gap:12px}
.doc-card{background:white;border:1px solid var(--gray-200);border-radius:var(--r);overflow:hidden;cursor:pointer;transition:all .18s;box-shadow:var(--shadow-sm)}
.doc-card:hover{border-color:var(--blue);transform:translateY(-2px);box-shadow:var(--shadow-md)}
.doc-thumb{height:100px;background:var(--gray-50);display:flex;align-items:center;justify-content:center;font-size:36px;overflow:hidden;position:relative}
.doc-thumb img{width:100%;height:100%;object-fit:cover}
.doc-overlay{position:absolute;inset:0;background:transparent;transition:background .15s;display:flex;align-items:center;justify-content:center;gap:8px;opacity:0}
.doc-card:hover .doc-overlay{background:rgba(37,99,235,.12);opacity:1}
.doc-info{padding:9px 12px}
.doc-name{font-size:12px;font-weight:600;color:var(--gray-800);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.doc-meta{font-size:10px;color:var(--gray-400);margin-top:2px}
.doc-footer{display:flex;align-items:center;gap:4px;padding:7px 10px;border-top:1px solid var(--gray-100)}
.doc-list-row{display:flex;align-items:center;gap:14px;padding:11px 16px;border-bottom:1px solid var(--gray-100);cursor:pointer;transition:background .1s}
.doc-list-row:hover{background:var(--gray-50)}
.doc-list-icon{width:36px;height:36px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:18px;flex-shrink:0}
.dsb{display:grid;grid-template-columns:repeat(4,1fr);gap:12px;margin-bottom:14px}
.dsb-card{background:white;border:1px solid var(--gray-200);border-radius:var(--r);padding:12px 16px;display:flex;align-items:center;gap:10px}
.dsb-icon{width:34px;height:34px;border-radius:8px;display:flex;align-items:center;justify-content:center;font-size:16px;flex-shrink:0}
.dsb-val{font-size:20px;font-weight:700;color:var(--gray-900);font-family:'DM Mono',monospace;line-height:1.2}
.dsb-lbl{font-size:11px;color:var(--gray-400)}
.view-toggle{display:flex;gap:2px;background:var(--gray-100);border-radius:var(--rs);padding:3px}
.vt-btn{width:28px;height:26px;display:flex;align-items:center;justify-content:center;border-radius:4px;cursor:pointer;border:none;background:none;color:var(--gray-400);font-size:13px;transition:all .15s}
.vt-btn.active{background:white;color:var(--gray-700);box-shadow:var(--shadow-sm)}
.mini-upload{border:1.5px dashed var(--gray-300);border-radius:var(--rs);padding:11px 14px;display:flex;align-items:center;gap:10px;cursor:pointer;transition:all .2s;background:var(--gray-50);position:relative}
.mini-upload:hover{border-color:var(--blue);background:var(--blue-light)}
.mini-upload input[type=file]{position:absolute;inset:0;opacity:0;cursor:pointer;width:100%;height:100%}
.attached-files{display:flex;flex-wrap:wrap;gap:6px;margin-top:8px}
.af-item{display:flex;align-items:center;gap:6px;padding:4px 10px;background:white;border:1px solid var(--gray-200);border-radius:20px;font-size:11px;font-weight:500;color:var(--gray-700);cursor:pointer}
.af-item:hover{border-color:var(--blue);color:var(--blue)}
.af-rm{color:var(--gray-400);cursor:pointer;margin-left:2px;font-size:12px}
.af-rm:hover{color:var(--red)}
.dcl-item{display:flex;align-items:center;gap:10px;padding:9px 12px;background:var(--gray-50);border:1px solid var(--gray-200);border-radius:var(--rs);margin-bottom:6px}
.dcl-dot{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.dcl-ok{background:var(--green-light);color:var(--green)}
.dcl-wait{background:var(--orange-light);color:var(--orange)}
.dcl-miss{background:var(--red-light);color:var(--red)}
.dcl-name{font-size:12px;font-weight:500;color:var(--gray-700);flex:1}
/* ===== PREVIEW MODAL (FULL SCREEN) ===== */
.preview-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.93);z-index:3000;flex-direction:column}
.preview-overlay.open{display:flex;animation:fadeIn .2s ease}
.prev-toolbar{background:rgba(20,20,20,.9);padding:11px 20px;display:flex;align-items:center;gap:12px;flex-shrink:0;border-bottom:1px solid rgba(255,255,255,.08)}
.prev-info{flex:1;display:flex;align-items:center;gap:10px;min-width:0}
.prev-fname{color:white;font-weight:600;font-size:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.prev-fmeta{color:rgba(255,255,255,.45);font-size:11px;margin-top:1px;white-space:nowrap}
.prev-actions{display:flex;gap:6px;flex-shrink:0}
.prev-btn{display:flex;align-items:center;gap:5px;padding:6px 12px;border-radius:var(--rs);font-size:12px;font-weight:500;cursor:pointer;transition:all .15s;border:1px solid rgba(255,255,255,.18);background:rgba(255,255,255,.08);color:white;font-family:inherit}
.prev-btn:hover{background:rgba(255,255,255,.18)}
.prev-btn-primary{background:var(--blue);border-color:var(--blue)}
.prev-btn-primary:hover{background:var(--blue-dark)}
.prev-btn-green{background:rgba(22,163,74,.3);border-color:rgba(22,163,74,.5);color:#86efac}
.prev-body{flex:1;display:flex;align-items:center;justify-content:center;overflow:hidden;padding:20px;position:relative}
.prev-img{max-width:100%;max-height:calc(100vh - 155px);border-radius:6px;object-fit:contain;transition:transform .2s;user-select:none}
.prev-iframe{width:100%;height:calc(100vh - 155px);border:none;border-radius:6px;background:white}
.prev-doc-wrap{background:white;border-radius:var(--r);padding:32px 36px;max-width:620px;width:100%;max-height:calc(100vh - 155px);overflow-y:auto}
.prev-nav-bar{display:flex;align-items:center;justify-content:center;gap:16px;padding:10px;background:rgba(0,0,0,.5);flex-shrink:0}
.nav-btn{width:34px;height:34px;border-radius:50%;background:rgba(255,255,255,.12);border:none;color:white;cursor:pointer;font-size:16px;display:flex;align-items:center;justify-content:center;transition:background .15s}
.nav-btn:hover{background:rgba(255,255,255,.28)}
.prev-pg-info{color:rgba(255,255,255,.6);font-size:12px;min-width:60px;text-align:center}
.zoom-indicator{position:absolute;bottom:24px;right:24px;background:rgba(0,0,0,.5);color:white;font-size:11px;padding:4px 10px;border-radius:20px;pointer-events:none;opacity:0;transition:opacity .3s}
.zoom-indicator.show{opacity:1}
/* ── Client cards view ─────────────────────────────────────── */
#clients-cards-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:14px;padding:16px 0 8px}
.cl-card{background:#fff;border:1px solid var(--gray-200);border-radius:14px;box-shadow:0 1px 4px rgba(0,0,0,.06);cursor:pointer;transition:box-shadow .18s,transform .18s;overflow:hidden;position:relative;border-left:4px solid #e5e7eb}
.cl-card:hover{box-shadow:0 6px 20px rgba(37,99,235,.13);transform:translateY(-2px);border-color:#c7d2fe;border-left-color:inherit}
.cl-card.cl-actif{border-left-color:#22c55e}
.cl-card.cl-attente{border-left-color:#f59e0b}
.cl-card.cl-suspendu{border-left-color:#ef4444}
.cl-card.cl-encours{border-left-color:#3b82f6}
.cl-card-head{display:flex;align-items:flex-start;gap:10px;padding:14px 14px 10px}
.cl-card-av{width:40px;height:40px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:13px;font-weight:700;color:#fff;flex-shrink:0;box-shadow:0 2px 6px rgba(0,0,0,.18)}
.cl-card-info{flex:1;min-width:0}
.cl-card-name{font-weight:700;font-size:13.5px;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;line-height:1.2}
.cl-card-email{font-size:11px;color:var(--gray-400);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.cl-card-ref{font-size:11px;font-family:'DM Mono',monospace;color:var(--blue);font-weight:600;margin-top:3px}
.cl-chips{display:flex;flex-wrap:wrap;gap:5px;padding:0 14px 8px}
.cl-chip{display:inline-flex;align-items:center;gap:3px;padding:3px 8px;border-radius:20px;font-size:10.5px;font-weight:500;white-space:nowrap}
.cl-chip-blue{background:#eff6ff;color:#1d4ed8;border:1px solid #bfdbfe}
.cl-chip-green{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0}
.cl-chip-orange{background:#fff7ed;color:#c2410c;border:1px solid #fed7aa}
.cl-chip-red{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}
.cl-chip-gray{background:#f8fafc;color:var(--gray-600);border:1px solid var(--gray-200)}
.cl-chip-purple{background:#f5f3ff;color:#6d28d9;border:1px solid #ddd6fe}
.cl-compta{display:flex;align-items:center;gap:6px;padding:6px 14px;background:#f8fafc;border-top:1px solid #f1f5f9;font-size:11px;color:var(--gray-600)}
.cl-compta-av{width:22px;height:22px;border-radius:50%;background:#e0e7ff;color:#3730a3;font-size:9px;font-weight:700;display:flex;align-items:center;justify-content:center;flex-shrink:0}
.cl-card-footer{display:flex;gap:5px;flex-wrap:wrap;align-items:center;padding:8px 10px;border-top:1px solid #f1f5f9;background:#fafafa}
.cl-card-footer .btn{font-size:10.5px;padding:4px 9px;border-radius:8px}
.cl-relance-urgent{position:absolute;top:10px;right:10px}
.cl-view-toggle{display:flex;background:var(--gray-100);border-radius:8px;padding:2px;gap:2px}
.cl-view-btn{border:none;background:transparent;border-radius:6px;padding:4px 10px;font-size:12px;cursor:pointer;color:var(--gray-500);transition:all .15s;font-family:inherit}
.cl-view-btn.active{background:#fff;color:var(--blue);font-weight:600;box-shadow:0 1px 3px rgba(0,0,0,.12)}
@media(max-width:640px){#clients-cards-grid{grid-template-columns:1fr}}
/* Zebra striping table clients uniquement */
#clients-tbody tr:nth-child(even){background:#f8fafc}
#clients-tbody tr:nth-child(odd){background:#fff}
#clients-tbody tr:hover{background:#eff6ff !important}
/* En-tête clients : gras, foncé, sticky vertical */
#clients-table-wrap thead th{
color:var(--gray-900);font-weight:700;font-size:11px;
position:sticky;top:0;z-index:20;
background:var(--gray-50);
box-shadow:0 2px 0 var(--gray-200);
}
/* Dropdown actions clients */
#_cl-act-menu button:hover{opacity:.85}
.cl-act-trigger{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border:1px solid var(--gray-200);border-radius:8px;background:#fff;cursor:pointer;font-size:11.5px;color:var(--gray-700);font-family:inherit;white-space:nowrap;transition:all .15s}
.cl-act-trigger:hover{background:var(--gray-50);border-color:var(--gray-300)}
/* Bloc login (animations) */
@keyframes blobFloat {
0%,100% { transform: translateY(0) scale(1); }
50% { transform: translateY(-30px) scale(1.05); }
}
@keyframes ringPulse {
0%,100% { opacity:.5; transform: translate(-50%,-50%) scale(1); }
50% { opacity:.15; transform: translate(-50%,-50%) scale(1.04); }
}
.login-role { transition: all .2s; }
.login-role.active { background:#EFF6FF !important; border-color:#2563EB !important; }
.login-role.active div:nth-child(2) { color:#1E40AF !important; }
@media(max-width:768px) {
#login-page > div:first-child { display:none !important; }
#login-page > div:last-child { width:100% !important; padding:28px 24px !important; }
.mobile-logo-only { display:block !important; }
}
/* ===== Left sidebar navigation (desktop) ===== */
@media(min-width:901px){
.main{max-width:none;margin:0;padding:28px 32px 40px 252px;overflow-x:hidden;min-width:0}
.page-head{margin-bottom:20px}
.tab-content{width:100%;min-width:0}
.tabs{position:fixed;top:56px;left:0;bottom:0;width:220px;flex-direction:column;align-items:stretch;gap:3px;background:#fff;border-right:1px solid var(--gray-200);border-bottom:none;padding:18px 12px;overflow-y:auto;z-index:50;margin-top:0;box-shadow:1px 0 0 rgba(16,24,40,.02)}
.tabs::before{content:"Navigation";display:block;font-size:10px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--gray-400);padding:4px 10px 10px}
.tab{border-bottom:none!important;border-radius:10px;padding:10px 12px;margin:0;justify-content:flex-start;font-size:13.5px;color:var(--gray-600);background:transparent!important;border-left:3px solid transparent;transition:all .15s}
.tab:hover{background:rgba(37,99,235,.06)!important;color:var(--gray-800)}
.tab.active{background:linear-gradient(90deg,rgba(37,99,235,.14),rgba(37,99,235,.04))!important;color:var(--blue)!important;border-left:3px solid var(--blue)!important;font-weight:600}
.tab .tab-badge,.tab .tab-badge-blue{margin-left:auto}
#nav-toggle{display:inline-flex!important;align-items:center;justify-content:center}
#nav-toggle:hover{background:var(--gray-100,#f3f4f6)}
.tabs{transition:transform .22s ease}
.main{transition:padding-left .22s ease}
body.nav-collapsed .tabs{transform:translateX(-100%)}
body.nav-collapsed .main{padding-left:32px}
}
/* ===== Documents table — responsive ===== */
.doc-table-card{overflow:hidden}
.doc-table-wrap{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}
.doc-table{width:100%;border-collapse:collapse;table-layout:auto}
.doc-table th,.doc-table td{padding:10px 12px;vertical-align:middle}
.doc-table .col-doc{min-width:220px;max-width:380px}
.doc-table .col-actions{text-align:right;white-space:nowrap}
@media(max-width:1200px){
.doc-table .col-ref{display:none}
}
@media(max-width:980px){
.doc-table .col-size,.doc-table .col-date{display:none}
}
@media(max-width:760px){
.doc-table .col-cat,.doc-table .col-client{display:none}
.doc-table .doc-meta-sm{display:block!important}
.doc-table .col-doc{min-width:160px}
}
@media(max-width:520px){
.doc-table th,.doc-table td{padding:8px 8px;font-size:12px}
.doc-table .col-actions .btn{padding:4px 6px;font-size:11px}
}
/* ======= CLIENT SEARCH AUTOCOMPLETE ======= */
.csearch-wrap{position:relative;width:100%}
.csearch-row{position:relative;display:flex;align-items:center}
.csearch-input{width:100%;padding:7px 34px 7px 32px;border:1px solid var(--gray-200);border-radius:var(--rs);font-size:13px;font-family:inherit;outline:none;background:#fff;transition:border-color .15s;box-sizing:border-box}
.csearch-input:focus{border-color:var(--blue);box-shadow:0 0 0 3px #DBEAFE}
.csearch-ico{position:absolute;left:9px;top:50%;transform:translateY(-50%);font-size:13px;pointer-events:none;color:var(--gray-400)}
.csearch-clr{position:absolute;right:7px;top:50%;transform:translateY(-50%);background:none;border:none;cursor:pointer;color:var(--gray-400);font-size:12px;padding:2px 5px;border-radius:3px;line-height:1;display:none;transition:color .15s}
.csearch-clr:hover{color:var(--red);background:var(--red-light)}
.csearch-clr.on{display:block}
.csearch-dd{position:absolute;top:calc(100% + 3px);left:0;right:0;background:#fff;border:1px solid var(--gray-200);border-radius:var(--r);max-height:240px;overflow-y:auto;z-index:3000;box-shadow:var(--shadow-lg);display:none}
.csearch-dd.open{display:block}
.csearch-item{padding:9px 12px;cursor:pointer;display:flex;gap:10px;align-items:center;border-bottom:1px solid var(--gray-100);transition:background .1s}
.csearch-item:last-child{border-bottom:none}
.csearch-item:hover,.csearch-item.foc{background:var(--blue-light)}
.csearch-av{width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0;text-transform:uppercase}
.csearch-iname{font-size:13px;font-weight:500}
.csearch-isub{font-size:11px;color:var(--gray-500);margin-top:2px;display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.csearch-none{padding:14px 12px;text-align:center;color:var(--gray-400);font-size:12px;font-style:italic}
.csearch-info{}
.csearch-badge{display:flex;align-items:center;gap:10px;background:var(--blue-light);border:1px solid var(--blue-mid);border-radius:var(--rs);padding:8px 12px;margin-top:7px;animation:fadeIn .2s}
.csearch-badge-av{width:34px;height:34px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:#fff;font-size:11px;font-weight:700;flex-shrink:0}
.csearch-badge-body{flex:1;min-width:0}
.csearch-badge-name{font-size:13px;font-weight:600;color:var(--blue)}
.csearch-badge-sub{font-size:11px;color:var(--gray-500);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
mark{background:#FEF08A;border-radius:2px;padding:0 1px}
/* ── Location Position ─────────────────────────────── */
.lp-kpi-row{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.lp-kpi{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:14px 20px;min-width:140px}
.lp-kpi-val{font-size:26px;font-weight:800;color:var(--gray-900)}
.lp-kpi-lbl{font-size:12px;color:var(--gray-500);margin-top:2px}
.lp-kpi.lp-ca .lp-kpi-val{color:#16a34a}
.lp-room-grid{display:flex;gap:12px;flex-wrap:wrap;margin-bottom:16px}
.lp-room-card{background:#fff;border:1px solid var(--gray-200);border-radius:12px;padding:14px;min-width:180px;flex:1}
.lp-room-title{font-weight:700;font-size:14px;margin-bottom:8px}
.lp-room-bar-wrap{background:#e5e7eb;border-radius:6px;height:8px;overflow:hidden;margin-bottom:6px}
.lp-room-bar{background:#3b82f6;height:100%;border-radius:6px;transition:width .4s}
.lp-room-stats{display:flex;justify-content:space-between;font-size:12px;margin-bottom:6px}
.lp-occ{color:#2563eb;font-weight:600}
.lp-dispo{color:#16a34a;font-weight:600}
.lp-room-clients{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.lp-room-client{background:#eff6ff;color:#1d4ed8;border-radius:4px;font-size:11px;padding:2px 6px}
.lp-table{width:100%;border-collapse:collapse;font-size:13px}
.lp-table thead th{background:#f1f5f9;padding:8px 10px;text-align:left;font-weight:700;color:#374151;white-space:nowrap;position:sticky;top:0;z-index:10;border-bottom:2px solid #e5e7eb;box-shadow:0 1px 0 #e5e7eb}
.lp-table tbody tr:nth-child(even){background:#f8fafc}
.lp-table tbody tr:hover{background:#f0f9ff}
.lp-table tbody td{padding:8px 10px;border-bottom:1px solid #f1f5f9;vertical-align:middle}
.lp-table tbody tr.lp-row-resilié{opacity:.6}
.lp-salle-badge{display:inline-block;padding:2px 9px;border-radius:9999px;font-size:11px;font-weight:700}
.lp-s1{background:#dbeafe;color:#1d4ed8}
.lp-s2{background:#d1fae5;color:#065f46}
.lp-s3{background:#fef3c7;color:#92400e}
.badge-actif{background:#dcfce7;color:#166534;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600;white-space:nowrap}
.badge-résilié{background:#f3f4f6;color:#6b7280;padding:2px 8px;border-radius:9999px;font-size:11px;font-weight:600;white-space:nowrap}
.lp-label{display:block;font-size:12px;font-weight:600;color:#374151;margin-bottom:4px}
.lp-input{width:100%;box-sizing:border-box;padding:8px 10px;border:1px solid #d1d5db;border-radius:6px;font-size:13px;background:#fff;font-family:inherit}
.lp-input:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 2px rgba(59,130,246,.2)}
/* ── Paramètres du logiciel — page complète ─────────── */
.settings-page{background:#fff;border:1px solid var(--gray-200);border-radius:16px;box-shadow:0 1px 2px rgba(16,24,40,.04),0 8px 24px -12px rgba(16,24,40,.08);overflow:hidden;margin-top:18px}
.settings-page-head{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:22px 26px;background:linear-gradient(135deg,#0E2347 0%,#0B3D6B 60%,#0C4A80 100%);color:#fff}
.settings-page-head-left{display:flex;align-items:center;gap:14px;min-width:0}
.settings-page-icon{width:46px;height:46px;flex-shrink:0;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:24px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.settings-page-title{font-size:20px;font-weight:700;margin:0;color:#fff;letter-spacing:-.2px}
.settings-page-sub{font-size:13px;margin:2px 0 0;color:rgba(255,255,255,.78)}
.settings-back-btn{flex-shrink:0;background:rgba(255,255,255,.12);border:1px solid rgba(255,255,255,.22);color:#fff;padding:8px 16px;border-radius:9px;font-size:13px;font-weight:600;cursor:pointer;transition:all .15s;white-space:nowrap}
.settings-back-btn:hover{background:rgba(255,255,255,.22)}
.settings-tabnav{display:flex;flex-wrap:nowrap;gap:2px;overflow-x:auto;padding:0 18px;margin:0;border-bottom:1px solid var(--gray-200);background:#fafbfc}
.settings-tabnav::-webkit-scrollbar{height:0}
.settings-tabnav .inner-tab{padding:14px 16px;font-size:13px;font-weight:600;white-space:nowrap;border-bottom:2px solid transparent;margin-bottom:-1px;flex-shrink:0}
.settings-tabnav .inner-tab:hover{color:var(--gray-800);background:rgba(37,99,235,.03)}
.settings-tabnav .inner-tab.active{color:var(--blue);border-bottom-color:var(--blue);background:#fff}
.settings-page .inner-content{padding:26px 28px}
.settings-page-footer{display:flex;gap:10px;justify-content:flex-end;padding:16px 26px;border-top:1px solid var(--gray-100);background:#fafbfc;margin-top:0}
@media (max-width:760px){
.settings-page-head{padding:18px}
.settings-page-title{font-size:17px}
.settings-page .inner-content{padding:18px 16px}
.settings-page-footer{padding:14px 16px}
}
/* ── Modal Support — Espace Client (indépendant de WhatsApp) ───────── */
#support-modal .sup-card{width:920px;max-width:96vw;height:82vh;max-height:700px;background:#fff;border-radius:18px;overflow:hidden;display:flex;flex-direction:column;box-shadow:0 24px 60px -12px rgba(16,24,40,.45);position:relative;animation:slideUp .2s ease}
.sup-head{display:flex;align-items:center;gap:14px;padding:18px 22px;background:linear-gradient(135deg,#0E2347 0%,#0B3D6B 60%,#0C4A80 100%);color:#fff;flex-shrink:0}
.sup-head-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,.14);display:flex;align-items:center;justify-content:center;font-size:21px;box-shadow:inset 0 0 0 1px rgba(255,255,255,.18)}
.sup-head-txt h3{margin:0;font-size:17px;font-weight:700}
.sup-head-txt p{margin:2px 0 0;font-size:12px;color:rgba(255,255,255,.78)}
.sup-head-close{margin-left:auto;width:32px;height:32px;border-radius:50%;border:1px solid rgba(255,255,255,.25);background:rgba(255,255,255,.12);color:#fff;cursor:pointer;font-size:14px;transition:all .15s}
.sup-head-close:hover{background:rgba(255,255,255,.25);transform:rotate(90deg)}
.sup-body{flex:1;display:flex;min-height:0}
.sup-list{width:320px;flex-shrink:0;border-right:1px solid var(--gray-200);display:flex;flex-direction:column;background:#fafbfc}
.sup-list-head{padding:12px 14px 8px;border-bottom:1px solid var(--gray-100)}
.sup-list-head .sup-count{font-size:11px;color:var(--gray-500);font-weight:600;margin-bottom:7px;text-transform:uppercase;letter-spacing:.04em}
.sup-search{width:100%;box-sizing:border-box;padding:8px 12px;border:1px solid var(--gray-200);border-radius:9px;font-size:13px;background:#fff;font-family:inherit}
.sup-search:focus{outline:none;border-color:var(--blue);box-shadow:0 0 0 2px rgba(37,99,235,.15)}
.sup-conv-scroll{flex:1;overflow-y:auto;padding:6px}
.sup-conv{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;cursor:pointer;transition:background .12s}
.sup-conv:hover{background:#eef2f7}
.sup-conv.active{background:#e0edff}
.sup-avatar{width:40px;height:40px;flex-shrink:0;border-radius:50%;color:#fff;display:flex;align-items:center;justify-content:center;font-size:14px;font-weight:700}
.sup-conv-main{flex:1;min-width:0}
.sup-conv-name{font-size:13px;font-weight:600;color:var(--gray-900);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sup-conv-msg{font-size:12px;color:var(--gray-500);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;margin-top:1px}
.sup-conv-meta{display:flex;flex-direction:column;align-items:flex-end;gap:4px;flex-shrink:0}
.sup-conv-time{font-size:10px;color:var(--gray-400)}
.sup-unread{background:var(--blue);color:#fff;border-radius:9999px;font-size:10px;font-weight:700;min-width:18px;height:18px;padding:0 5px;display:flex;align-items:center;justify-content:center}
.sup-empty-list{padding:26px 16px;text-align:center;font-size:12px;color:var(--gray-400)}
.sup-chat{flex:1;display:flex;flex-direction:column;min-width:0;background:#f4f6f9}
.sup-chat-empty{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;color:var(--gray-400);font-size:13px;gap:10px}
.sup-chat-empty .sup-big{font-size:46px;opacity:.5}
.sup-chat-active{flex:1;display:flex;flex-direction:column;min-height:0}
.sup-chat-head{display:flex;align-items:center;gap:11px;padding:12px 16px;background:#fff;border-bottom:1px solid var(--gray-200);flex-shrink:0}
.sup-chat-head .sup-avatar{width:38px;height:38px;font-size:13px}
.sup-chat-name{font-size:14px;font-weight:600;color:var(--gray-900)}
.sup-chat-status{font-size:11px;color:var(--green);font-weight:500}
.sup-messages{flex:1;overflow-y:auto;padding:18px 18px 8px;display:flex;flex-direction:column;gap:6px}
.sup-msg{max-width:74%;padding:8px 12px;border-radius:14px;font-size:13px;line-height:1.45;position:relative;word-wrap:break-word}
.sup-msg.in{align-self:flex-start;background:#fff;color:var(--gray-900);border-bottom-left-radius:4px;box-shadow:0 1px 1px rgba(16,24,40,.06)}
.sup-msg.out{align-self:flex-end;background:#2563EB;color:#fff;border-bottom-right-radius:4px}
.sup-msg-time{font-size:9px;opacity:.7;margin-top:3px;text-align:right}
.sup-tick{margin-left:3px}.sup-tick.sent{color:#a5d8ff}
.sup-no-msg{margin:auto;text-align:center;color:var(--gray-400);font-size:12px}
.sup-inputbar{display:flex;align-items:center;gap:8px;padding:12px 14px;background:#fff;border-top:1px solid var(--gray-200);flex-shrink:0}
.sup-input{flex:1;padding:10px 14px;border:1px solid var(--gray-200);border-radius:9999px;font-size:13px;font-family:inherit;background:#f4f6f9}
.sup-input:focus{outline:none;border-color:var(--blue);background:#fff;box-shadow:0 0 0 2px rgba(37,99,235,.12)}
.sup-send{width:42px;height:42px;flex-shrink:0;border-radius:50%;border:none;background:#2563EB;color:#fff;font-size:17px;cursor:pointer;display:flex;align-items:center;justify-content:center;transition:background .15s}
.sup-send:hover{background:#1d4ed8}
@media (max-width:760px){
#support-modal .sup-card{height:90vh;max-height:none}
.sup-list{width:130px}
.sup-conv-msg,.sup-conv-time{display:none}
}