/* ── Variables & reset ──────────────────────────────────── */
:root {
  --rose:#c9a0a0; --rose-light:#f5eded; --rose-mid:#e8d0d0; --rose-dark:#8b5e5e;
  --gold:#b8975a; --gold-light:#f7f0e4; --gold-dark:#7a5e2a;
  --green-light:#eaf5ea; --green-dark:#3a6e3a;
  --blue-light:#eaebf5; --blue-dark:#3a3e8b;
  --gray-light:#f8f7f5; --gray-mid:#e8e6e2; --gray-dark:#5a5855;
  --text:#2c2c2a; --text-sub:#6b6965; --text-hint:#9e9b97;
  --bg:#ffffff; --bg2:#f8f7f5; --bg3:#f1efe8;
  --border:rgba(0,0,0,0.09); --border2:rgba(0,0,0,0.16);
  --radius:8px; --radius-lg:12px;
  --shadow:0 1px 3px rgba(0,0,0,0.07),0 1px 2px rgba(0,0,0,0.04);
  --font:-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html,body{height:100%;font-family:var(--font);font-size:14px;color:var(--text);background:var(--bg3);overflow:hidden}
a{text-decoration:none;color:inherit}
button{font-family:var(--font);cursor:pointer}
input,select,textarea{font-family:var(--font)}

/* ── Layout ─────────────────────────────────────────────── */
.layout{display:flex;height:100vh;overflow:hidden}

/* ── Sidebar ────────────────────────────────────────────── */
.sidebar{width:220px;background:var(--bg);border-right:.5px solid var(--border);display:flex;flex-direction:column;flex-shrink:0;overflow-y:auto;overflow-x:hidden}
.sidebar::-webkit-scrollbar{width:3px}
.sidebar::-webkit-scrollbar-thumb{background:var(--gray-mid);border-radius:2px}

.sidebar-logo{padding:14px 14px;border-bottom:.5px solid var(--border);text-align:center}
.sidebar-logo-img{max-width:72px;max-height:72px;margin:0 auto 4px;display:block}
.sidebar-gem{font-size:20px;color:var(--rose-dark)}
.sidebar-name{font-size:14px;font-weight:700;color:var(--rose-dark);margin-top:2px;letter-spacing:.01em;line-height:1.15}
.sidebar-sub{font-size:9px;color:var(--text-hint);text-transform:uppercase;letter-spacing:.08em;margin-top:2px}
.sidebar-clock{font-size:19px;font-weight:700;color:var(--rose-dark);margin-top:8px;font-variant-numeric:tabular-nums;letter-spacing:.02em}
.sidebar-date{font-size:12px;color:var(--text-sub);margin-top:3px;font-weight:500}
.sidebar-clock-toggle{font-size:10px;color:var(--text-hint);margin-top:4px;cursor:pointer;display:inline-block;padding:2px 8px;border-radius:8px;background:var(--bg2);border:.5px solid var(--border);user-select:none}
.sidebar-clock-toggle:hover{background:var(--rose-light);color:var(--rose-dark)}
.sidebar-logo.analog-active .sidebar-logo-holder{display:none}

/* ── Horloge à aiguilles ─────────────────────────────── */
.clock-analog{width:120px;height:120px;margin:0 auto;position:relative;border-radius:50%;background:var(--bg);border:2px solid var(--rose-mid);box-shadow:inset 0 0 10px rgba(201,160,160,.12);overflow:hidden}
.clock-analog::before{content:'';position:absolute;inset:5px;border-radius:50%;border:.5px solid var(--border);pointer-events:none;z-index:2}
.clock-bg{position:absolute;inset:8px;border-radius:50%;background-repeat:no-repeat;background-position:center;background-size:contain;opacity:.32;z-index:0;pointer-events:none}
.clock-tick{position:absolute;top:5px;left:50%;width:1.5px;height:5px;background:var(--rose-dark);transform-origin:50% 55px;z-index:3}
.clock-tick.major{width:2.5px;height:8px;background:var(--rose-dark)}
.clock-hand{position:absolute;bottom:50%;left:50%;transform-origin:bottom center;background:var(--rose-dark);border-radius:2px;z-index:4}
.clock-hand.hour{width:3.5px;height:32px;margin-left:-1.75px;background:var(--text)}
.clock-hand.minute{width:2.5px;height:46px;margin-left:-1.25px;background:var(--text)}
.clock-hand.second{width:1.5px;height:50px;margin-left:-.75px;background:var(--rose)}
.clock-center{position:absolute;top:50%;left:50%;width:8px;height:8px;margin:-4px 0 0 -4px;background:var(--rose-dark);border-radius:50%;z-index:5}

.sidebar-nav{flex:1;padding:6px 0;overflow-y:auto}
.nav-group{margin:14px 12px 4px;padding:8px 4px 4px;border-top:1px solid var(--border);font-size:10px;font-weight:700;color:var(--rose-dark);text-transform:uppercase;letter-spacing:.1em;display:flex;align-items:center;gap:7px;cursor:pointer;user-select:none}
.nav-group:first-of-type{margin-top:6px}
.nav-group-coming{opacity:.6}
.nav-group-icon{display:inline-flex}
.nav-group-caret{margin-left:auto;transition:transform .15s;font-size:11px;opacity:.7}
.nav-group.collapsed .nav-group-caret{transform:rotate(-90deg)}
.nav-group-items{overflow:hidden;max-height:600px;transition:max-height .2s ease-out}
.nav-group-items.collapsed{max-height:0}

.nav-item{display:flex;align-items:center;gap:9px;padding:8px 16px;font-size:13px;color:var(--text-sub);border-left:2px solid transparent;cursor:pointer;transition:all .12s}
.nav-item:hover{background:var(--bg2);color:var(--text)}
.nav-item.active{color:var(--rose-dark);border-left-color:var(--rose);background:var(--rose-light);font-weight:500}
.nav-item.disabled{opacity:.4;cursor:not-allowed;pointer-events:none}
.nav-icon{width:15px;height:15px;flex-shrink:0;opacity:.7}
.nav-item.active .nav-icon{opacity:1}
.badge-coming{font-size:9px;padding:1px 5px;border-radius:6px;background:var(--gray-mid);color:var(--text-hint);font-weight:500}

.sidebar-footer{padding:10px 16px;border-top:.5px solid var(--border);font-size:10px;color:var(--text-hint);line-height:1.6}

/* ── Main ───────────────────────────────────────────────── */
.main{flex:1;display:flex;flex-direction:column;overflow:hidden;min-width:0}

/* ── SCROLL FIX — critique ──────────────────────────────── */
/* Le contenu principal doit scroller, pas la fenêtre */
#page-content{flex:1;display:flex;flex-direction:column;overflow:hidden;min-height:0}
.page-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 20px;-webkit-overflow-scrolling:touch}
.page-content::-webkit-scrollbar{width:5px}
.page-content::-webkit-scrollbar-thumb{background:var(--gray-mid);border-radius:3px}
.page-content::-webkit-scrollbar-track{background:transparent}

/* ── Topbar ─────────────────────────────────────────────── */
.topbar{background:var(--bg);border-bottom:.5px solid var(--border);padding:11px 20px;display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.topbar-title{font-size:14px;font-weight:600;color:var(--text)}
.topbar-sub{font-size:11px;color:var(--text-hint);margin-top:1px;display:flex;align-items:center;gap:6px}
.topbar-actions{display:flex;gap:8px;align-items:center}

/* ── Boutons ────────────────────────────────────────────── */
.btn{padding:6px 12px;font-size:12px;border-radius:var(--radius);border:.5px solid var(--border2);background:var(--bg);color:var(--text);cursor:pointer;transition:all .12s;display:inline-flex;align-items:center;gap:6px}
.btn:hover{background:var(--bg2)}
.btn:active{transform:scale(.98)}
.btn-rose{background:var(--rose);color:#fff;border-color:var(--rose)}
.btn-rose:hover{background:var(--rose-dark);border-color:var(--rose-dark)}
.btn-danger{background:#fee2e2;color:#991b1b;border-color:#fca5a5}
.btn-danger:hover{background:#fecaca}
.btn-sm{padding:3px 9px;font-size:11px}
.btn:disabled{opacity:.4;cursor:not-allowed}

/* ── Grilles ────────────────────────────────────────────── */
.grid-2{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:10px}
.grid-4{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.two-col{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.two-col-7030{display:grid;grid-template-columns:70fr 30fr;gap:12px}
.two-col-6040{display:grid;grid-template-columns:60fr 40fr;gap:12px}
@media(max-width:900px){.grid-4{grid-template-columns:1fr 1fr}.two-col,.two-col-7030,.two-col-6040{grid-template-columns:1fr}}

/* ── Stats ──────────────────────────────────────────────── */
.stat-card{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius);padding:11px 13px}
.stat-label{font-size:10px;color:var(--text-hint);text-transform:uppercase;letter-spacing:.06em;margin-bottom:2px}
.stat-value{font-size:20px;font-weight:600;color:var(--text);line-height:1.2}
.stat-sub{font-size:10px;color:var(--text-hint);margin-top:2px}

/* ── Panels ─────────────────────────────────────────────── */
.panel{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);padding:14px;margin-bottom:10px}
.panel-title{font-size:13px;font-weight:600;color:var(--text);margin-bottom:10px}
.section-title{font-size:10px;font-weight:600;color:var(--text-hint);text-transform:uppercase;letter-spacing:.07em;margin-bottom:7px}

/* ── Tables ─────────────────────────────────────────────── */
.table-wrap{background:var(--bg);border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-bottom:10px}
.table-wrap table{width:100%;border-collapse:collapse;font-size:13px}
th{padding:7px 11px;text-align:left;font-size:10px;font-weight:600;color:var(--text-hint);background:var(--bg2);border-bottom:.5px solid var(--border);text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}
td{padding:8px 11px;border-bottom:.5px solid var(--border);color:var(--text)}
tr:last-child td{border-bottom:none}
tr:hover td{background:var(--bg2)}
.table-empty{text-align:center;padding:30px;color:var(--text-hint);font-size:13px}

/* ── Formulaires ────────────────────────────────────────── */
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px}
.form-group{display:flex;flex-direction:column;gap:4px}
.form-group.full{grid-column:1/-1}
.form-label{font-size:10px;color:var(--text-hint);font-weight:500;text-transform:uppercase;letter-spacing:.05em}
.form-input,.form-select,.form-textarea{padding:7px 10px;font-size:13px;border:.5px solid var(--border2);border-radius:var(--radius);background:var(--bg);color:var(--text) !important;transition:border-color .12s;width:100%}
.form-input.no-spin::-webkit-outer-spin-button,.form-input.no-spin::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
.form-input.no-spin{-moz-appearance:textfield}
select{color:var(--text) !important;background:var(--bg) !important}
.search-input{color:var(--text) !important;background:var(--bg) !important}
.form-input:focus,.form-select:focus,.form-textarea:focus{outline:none;border-color:var(--rose);box-shadow:0 0 0 3px rgba(201,160,160,.15)}
.form-textarea{resize:vertical;min-height:60px}

/* ── Badges ─────────────────────────────────────────────── */
.badge{display:inline-block;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.badge-fidele{background:var(--green-light);color:var(--green-dark)}
.badge-potentiel{background:var(--gold-light);color:var(--gold-dark)}
.badge-absent{background:var(--bg2);color:var(--text-hint)}
.badge-remise{background:var(--rose-light);color:var(--rose-dark)}
.badge-etudiant{background:var(--blue-light);color:var(--blue-dark)}
.badge-warn{background:#fff8e6;color:#7a4e1a}
.badge-danger{background:#fee2e2;color:#991b1b}
.emoji-opt{display:inline-flex;align-items:center;justify-content:center;width:32px;height:32px;border-radius:6px;border:1px solid transparent;transition:all .12s}
.emoji-opt:hover{background:var(--bg2);border-color:var(--border)}
.emoji-opt.active{background:var(--rose-light);border-color:var(--rose-mid);transform:scale(1.15)}

/* ── Périodes ───────────────────────────────────────────── */
.periode-jan{background:var(--blue-light);color:var(--blue-dark);padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}
.periode-jul{background:#fff3e0;color:#7a4e1a;padding:2px 8px;border-radius:10px;font-size:11px;font-weight:500}

/* ── Pôles ──────────────────────────────────────────────── */
.pole-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:10px;margin-bottom:14px}
.pole-card{border-radius:var(--radius-lg);padding:13px;border:.5px solid var(--border);cursor:pointer;transition:all .15s}
.pole-card:hover{transform:translateY(-2px);box-shadow:var(--shadow)}
.pole-icon{font-size:18px;margin-bottom:5px}
.pole-name{font-size:12px;font-weight:600;color:var(--text)}
.pole-desc{font-size:10px;color:var(--text-sub);margin-top:1px}
.pole-value{font-size:16px;font-weight:600;margin-top:5px}

/* ── Total prestation ───────────────────────────────────── */
.total-card{border:.5px solid var(--border);border-radius:var(--radius-lg);overflow:hidden;margin-top:10px}
.total-row{display:flex;justify-content:space-between;align-items:center;padding:7px 13px;border-bottom:.5px solid var(--border);font-size:13px}
.total-row-label{color:var(--text-sub)}
.total-row-val{font-weight:500}
.total-row-remise{color:var(--rose-dark)}
.total-final{display:flex;justify-content:space-between;align-items:center;padding:11px 13px;background:var(--bg2)}
.total-final-label{font-size:11px;color:var(--text-hint)}
.total-final-sub{font-size:11px;color:var(--rose-dark)}
.total-final-val{font-size:22px;font-weight:700;color:var(--text)}

/* ── Info boxes ─────────────────────────────────────────── */
.info-box{border-radius:var(--radius);padding:8px 11px;font-size:12px;display:flex;align-items:flex-start;gap:7px;margin-top:6px}
.info-rose{background:var(--rose-light);border:.5px solid var(--rose-mid);color:var(--rose-dark)}
.info-gold{background:var(--gold-light);border:.5px solid #e8d8b0;color:var(--gold-dark)}
.info-blue{background:var(--blue-light);border:.5px solid #c0c4e8;color:var(--blue-dark)}
.info-green{background:var(--green-light);border:.5px solid #c0d8c0;color:var(--green-dark)}
.info-warn{background:#fff8e6;border:.5px solid #f0d080;color:#7a4e1a}

/* ── Mini rows ──────────────────────────────────────────── */
.mini-row{display:flex;justify-content:space-between;padding:5px 0;border-bottom:.5px solid var(--border);font-size:12px}
.mini-row:last-child{border-bottom:none}
.mini-label{color:var(--text-sub)}
.mini-val{font-weight:500}

/* ── Tabs ───────────────────────────────────────────────── */
.tabs{display:flex;gap:4px;margin-bottom:10px;flex-wrap:wrap}
.tab{padding:4px 11px;font-size:12px;border-radius:var(--radius);cursor:pointer;border:.5px solid var(--border);background:var(--bg);color:var(--text-sub);transition:all .12s}
.tab:hover{background:var(--bg2)}
.tab.active{background:var(--rose);color:#fff;border-color:var(--rose)}

/* ── Modales ────────────────────────────────────────────── */
.modal-overlay{position:fixed;inset:0;background:rgba(0,0,0,.35);z-index:100;display:none;backdrop-filter:blur(2px);pointer-events:none}
.modal-overlay.open{display:block;pointer-events:auto}
.modal{position:fixed;top:50%;left:50%;transform:translate(-50%,-50%) scale(.96);background:var(--bg);border-radius:var(--radius-lg);border:.5px solid var(--border);z-index:101;width:92%;max-width:620px;max-height:88vh;display:flex;flex-direction:column;opacity:0;transition:all .18s;box-shadow:0 20px 60px rgba(0,0,0,.15);pointer-events:none;visibility:hidden}
.modal.open{opacity:1;transform:translate(-50%,-50%) scale(1);pointer-events:auto;visibility:visible}
.modal-header{padding:14px 18px;border-bottom:.5px solid var(--border);display:flex;align-items:center;justify-content:space-between;flex-shrink:0}
.modal-title{font-size:14px;font-weight:600}
.modal-close{background:none;border:none;font-size:16px;color:var(--text-hint);cursor:pointer;padding:2px 6px;border-radius:4px}
.modal-close:hover{background:var(--bg2);color:var(--text)}
.modal-body{padding:18px;overflow-y:auto;flex:1}
.modal-body::-webkit-scrollbar{width:4px}
.modal-body::-webkit-scrollbar-thumb{background:var(--gray-mid);border-radius:2px}
.modal-footer{padding:12px 18px;border-top:.5px solid var(--border);display:flex;justify-content:flex-end;gap:8px;flex-shrink:0}

/* ── Tooltip volant ─────────────────────────────────────── */
.tooltip-float{position:fixed;background:var(--text);color:#fff;padding:8px 12px;border-radius:var(--radius);font-size:12px;z-index:200;pointer-events:none;max-width:220px;line-height:1.5;box-shadow:var(--shadow)}

/* ── Toasts ─────────────────────────────────────────────── */
.toast-container{position:fixed;top:16px;left:50%;transform:translateX(-50%);z-index:300;display:flex;flex-direction:column;gap:7px;align-items:center;pointer-events:none}
.toast{padding:9px 14px;border-radius:var(--radius);font-size:13px;font-weight:500;box-shadow:var(--shadow);animation:slideInTop .2s ease;display:flex;align-items:center;gap:8px;min-width:200px;pointer-events:auto}
.toast-success{background:var(--green-light);color:var(--green-dark);border:.5px solid #c0d8c0}
.toast-error{background:#fee2e2;color:#991b1b;border:.5px solid #fca5a5}
.toast-info{background:var(--rose-light);color:var(--rose-dark);border:.5px solid var(--rose-mid)}
@keyframes slideInTop{from{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}

/* ── Loading ────────────────────────────────────────────── */
.loading-screen{display:flex;flex-direction:column;align-items:center;justify-content:center;height:60vh;gap:12px}
.loading-gem{font-size:28px;color:var(--rose);animation:pulse 1.5s ease-in-out infinite}
.loading-text{font-size:13px;color:var(--text-hint)}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* ── Alerts ─────────────────────────────────────────────── */
.alert{background:#fff8e6;border:.5px solid #f0d080;border-radius:var(--radius);padding:7px 11px;font-size:12px;color:#7a4e1a;margin-bottom:10px}
.alert-danger{background:#fee2e2;border-color:#fca5a5;color:#991b1b}

/* ── Password wrap / toggle ─────────────────────────────── */
.pwd-wrapper{display:flex;align-items:center;gap:4px}
.pwd-wrapper .form-input{flex:1}
.pwd-toggle{cursor:pointer;font-size:16px;padding:4px 8px;user-select:none;border-radius:4px;transition:background .12s}
.pwd-toggle:hover{background:var(--bg2)}

/* ── Search ─────────────────────────────────────────────── */
.search-bar{display:flex;gap:7px;margin-bottom:10px;flex-wrap:wrap}
.search-input{flex:1;min-width:160px;padding:7px 11px;font-size:13px;border:.5px solid var(--border2);border-radius:var(--radius);background:var(--bg);color:var(--text)}
.search-input:focus{outline:none;border-color:var(--rose)}

/* ── Avatar ─────────────────────────────────────────────── */
.avatar{width:34px;height:34px;border-radius:50%;background:var(--rose-light);color:var(--rose-dark);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:600;flex-shrink:0}

/* ── Séparateur ─────────────────────────────────────────── */
.sep{height:.5px;background:var(--border);margin:12px 0}

/* ── Params liste ───────────────────────────────────────── */
.societes-tab-btn{padding:3px 12px;border:1px solid var(--border);background:var(--bg);border-radius:var(--radius);cursor:pointer;font-size:11px;font-family:inherit;color:var(--text);transition:.15s}
.societes-tab-btn.active{background:var(--rose);color:#fff;border-color:var(--rose)}
.param-item{display:flex;align-items:center;justify-content:space-between;padding:6px 0;border-bottom:.5px solid var(--border);font-size:13px}
.param-item:last-child{border-bottom:none}
.param-actions{display:flex;gap:4px;flex-shrink:0}
.params-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin-bottom:10px}
@media(min-width:1200px){.params-grid{grid-template-columns:repeat(4,1fr)}}
@media(min-width:1600px){.params-grid{grid-template-columns:repeat(5,1fr)}}
@media(max-width:800px){.params-grid{grid-template-columns:1fr 1fr}}

/* ── Condition médicale — encadré rouge ─────────────────── */
.medical-box{border:1.5px solid #fca5a5;border-radius:var(--radius);padding:10px;background:#fff8f8;max-height:160px;overflow-y:auto}
.medical-box::-webkit-scrollbar{width:3px}
.medical-box::-webkit-scrollbar-thumb{background:#fca5a5;border-radius:2px}

/* ── User bar ───────────────────────────────────────────── */
.user-bar{display:flex;align-items:center;justify-content:flex-end;gap:10px;padding:6px 20px;background:#f9f4f0;border-bottom:.5px solid var(--border);flex-shrink:0;min-height:32px}
.user-bar-info{display:flex;align-items:center;gap:8px;font-size:12px}
.user-bar-avatar{width:26px;height:26px;border-radius:50%;background:var(--rose-light);color:var(--rose-dark);display:flex;align-items:center;justify-content:center;font-size:10px;font-weight:700;flex-shrink:0}
.user-bar-name{font-weight:500;color:var(--text)}

/* ── Login modal (overlay fixe prioritaire) ──────────────── */
#login-overlay.modal-overlay{z-index:200}
#login-modal.modal{z-index:201}
#login-modal .modal-close{display:none}
#login-error{display:none}

/* ── Pagination ─────────────────────────────────────────── */
.pagination{display:flex;justify-content:center;gap:5px;margin-top:10px;align-items:center}
.pagination span{font-size:12px;color:var(--text-hint);padding:4px 8px}