/* /public_html/assets/css/app.css — PaieCI v2 Design System */
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&display=swap');

:root {
  --primary:      #0A66C2;
  --primary-d:    #084fa0;
  --primary-l:    #e8f1fb;
  --accent:       #00B3A4;
  --accent-d:     #008f83;
  --ok:           #1a7f5a;
  --ok-bg:        #e8f5ee;
  --warn:         #b45309;
  --warn-bg:      #fef3c7;
  --err:          #b91c1c;
  --err-bg:       #fef2f2;
  --info:         #0369a1;
  --info-bg:      #e0f2fe;
  --text:         #0f172a;
  --text-m:       #64748b;
  --text-l:       #94a3b8;
  --bg:           #f1f5f9;
  --surface:      #ffffff;
  --surface-alt:  #f8fafc;
  --border:       #e2e8f0;
  --border-s:     #cbd5e1;
  --sidebar-w:    240px;
  --header-h:     60px;
  --r:            8px;
  --r-sm:         4px;
  --r-lg:         12px;
  --sh:           0 1px 3px rgba(0,0,0,.08);
  --sh-m:         0 4px 12px rgba(0,0,0,.10);
  --sh-lg:        0 8px 24px rgba(0,0,0,.12);
  --tr:           .18s ease;
}

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px;-webkit-text-size-adjust:100%}
body{font-family:'Inter',sans-serif;background:var(--bg);color:var(--text);line-height:1.6;min-height:100vh}
a{color:var(--primary);text-decoration:none}
a:hover{text-decoration:underline}
img{display:block;max-width:100%}
button{cursor:pointer;font-family:inherit}

/* ── LAYOUT ── */
.layout{display:flex;min-height:100vh}
.main-wrap{margin-left:var(--sidebar-w);flex:1;display:flex;flex-direction:column;min-height:100vh}
.main-content{padding:28px 32px;flex:1}

/* ── SIDEBAR ── */
.sidebar{
  width:var(--sidebar-w);background:#0f172a;color:#94a3b8;
  display:flex;flex-direction:column;position:fixed;top:0;left:0;
  height:100vh;z-index:100;transition:transform var(--tr);overflow-y:auto
}
.sidebar-brand{
  padding:20px 20px 16px;border-bottom:1px solid #1e293b;
  display:flex;align-items:center;gap:10px
}
.sidebar-brand .logo{
  width:36px;height:36px;background:var(--primary);border-radius:var(--r-sm);
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:14px;color:#fff;letter-spacing:.5px;flex-shrink:0
}
.sidebar-brand .brand-name{font-weight:700;font-size:15px;color:#f1f5f9;letter-spacing:.3px}
.sidebar-brand .brand-sub{font-size:11px;color:#64748b;margin-top:1px}

.sidebar-nav{flex:1;padding:12px 0}
.nav-section{padding:16px 20px 6px;font-size:10px;font-weight:600;
  color:#475569;letter-spacing:1px;text-transform:uppercase}
.nav-item{
  display:flex;align-items:center;gap:10px;padding:9px 20px;
  font-size:13.5px;font-weight:500;color:#94a3b8;
  transition:background var(--tr),color var(--tr);cursor:pointer;
  border-left:3px solid transparent
}
.nav-item:hover{background:#1e293b;color:#f1f5f9;text-decoration:none}
.nav-item.active{background:#1e2d44;color:#fff;border-left-color:var(--primary)}
.nav-item svg{width:17px;height:17px;flex-shrink:0;opacity:.8}
.nav-item.active svg{opacity:1}
.nav-badge{
  margin-left:auto;background:var(--primary);color:#fff;
  font-size:10px;font-weight:700;padding:2px 7px;border-radius:20px
}

.sidebar-footer{
  padding:16px 20px;border-top:1px solid #1e293b;
  font-size:12px;color:#475569
}
.sidebar-footer .user-name{color:#cbd5e1;font-weight:600;font-size:13px}
.sidebar-footer .user-ent{color:#64748b;font-size:11px;margin-top:1px}
.sidebar-footer .logout-btn{
  margin-top:10px;display:flex;align-items:center;gap:6px;
  color:#64748b;font-size:12px;padding:6px 0;
  transition:color var(--tr)
}
.sidebar-footer .logout-btn:hover{color:#ef4444;text-decoration:none}

/* ── HEADER ── */
.header{
  height:var(--header-h);background:var(--surface);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between;
  padding:0 32px;position:sticky;top:0;z-index:50;box-shadow:var(--sh)
}
.header-title{font-size:16px;font-weight:600;color:var(--text)}
.header-sub{font-size:12px;color:var(--text-m);margin-top:1px}
.header-right{display:flex;align-items:center;gap:12px}

/* ── CARDS ── */
.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  box-shadow:var(--sh);overflow:hidden}
.card-header{
  padding:16px 20px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between
}
.card-title{font-size:14px;font-weight:600;color:var(--text)}
.card-body{padding:20px}
.card-footer{padding:14px 20px;border-top:1px solid var(--border);background:var(--surface-alt)}

/* ── KPI CARDS ── */
.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:28px}
.kpi{
  background:var(--surface);border:1px solid var(--border);border-radius:var(--r-lg);
  padding:20px;box-shadow:var(--sh);display:flex;flex-direction:column;gap:8px
}
.kpi-label{font-size:12px;font-weight:500;color:var(--text-m);text-transform:uppercase;letter-spacing:.5px}
.kpi-value{font-size:28px;font-weight:700;color:var(--text);line-height:1.1}
.kpi-sub{font-size:12px;color:var(--text-l)}
.kpi-icon{
  width:40px;height:40px;border-radius:var(--r);
  display:flex;align-items:center;justify-content:center;margin-bottom:4px
}
.kpi-icon.blue{background:var(--primary-l);color:var(--primary)}
.kpi-icon.green{background:var(--ok-bg);color:var(--ok)}
.kpi-icon.orange{background:var(--warn-bg);color:var(--warn)}
.kpi-icon.teal{background:#ccfbf1;color:#0d9488}

/* ── TABLES ── */
.table-wrap{overflow-x:auto;border-radius:var(--r-lg);border:1px solid var(--border)}
table{width:100%;border-collapse:collapse;background:var(--surface)}
thead tr{background:var(--surface-alt);border-bottom:2px solid var(--border)}
th{padding:11px 16px;text-align:left;font-size:11.5px;font-weight:600;
  color:var(--text-m);text-transform:uppercase;letter-spacing:.5px;white-space:nowrap}
td{padding:12px 16px;font-size:13.5px;border-bottom:1px solid var(--border);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:#fafbfc}
.td-mono{font-family:'Courier New',monospace;font-size:13px}

/* ── BADGES & STATUTS ── */
.badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 10px;border-radius:20px;font-size:11.5px;font-weight:600;white-space:nowrap
}
.badge-ok    {background:var(--ok-bg);color:var(--ok)}
.badge-err   {background:var(--err-bg);color:var(--err)}
.badge-warn  {background:var(--warn-bg);color:var(--warn)}
.badge-info  {background:var(--info-bg);color:var(--info)}
.badge-gray  {background:#f1f5f9;color:#64748b}
.badge-primary{background:var(--primary-l);color:var(--primary)}
.badge-dot::before{content:'';display:inline-block;width:6px;height:6px;border-radius:50%;background:currentColor}

/* ── BOUTONS ── */
.btn{
  display:inline-flex;align-items:center;gap:7px;padding:9px 18px;
  border-radius:var(--r);font-size:13.5px;font-weight:500;
  border:none;cursor:pointer;transition:all var(--tr);white-space:nowrap;
  text-decoration:none!important;line-height:1.4
}
.btn-primary{background:var(--primary);color:#fff}
.btn-primary:hover{background:var(--primary-d);color:#fff}
.btn-accent{background:var(--accent);color:#fff}
.btn-accent:hover{background:var(--accent-d);color:#fff}
.btn-ghost{background:transparent;color:var(--primary);border:1px solid var(--primary)}
.btn-ghost:hover{background:var(--primary-l)}
.btn-danger{background:var(--err);color:#fff}
.btn-danger:hover{background:#991b1b}
.btn-light{background:var(--surface-alt);color:var(--text);border:1px solid var(--border)}
.btn-light:hover{background:var(--border)}
.btn-sm{padding:6px 12px;font-size:12.5px}
.btn-lg{padding:12px 24px;font-size:15px}
.btn-icon{padding:8px;border-radius:var(--r-sm)}
.btn[disabled]{opacity:.5;cursor:not-allowed}

/* ── FORMULAIRES ── */
.form-group{margin-bottom:18px}
.form-label{display:block;font-size:13px;font-weight:500;color:var(--text);margin-bottom:6px}
.form-label span.req{color:var(--err)}
.form-control{
  width:100%;padding:9px 13px;border:1px solid var(--border-s);border-radius:var(--r);
  font-size:13.5px;font-family:inherit;color:var(--text);background:var(--surface);
  transition:border-color var(--tr),box-shadow var(--tr);outline:none
}
.form-control:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,102,194,.12)}
.form-control::placeholder{color:var(--text-l)}
select.form-control{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8'%3E%3Cpath d='M0 0l6 8 6-8z' fill='%2394a3b8'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;padding-right:36px}
.form-hint{font-size:12px;color:var(--text-m);margin-top:4px}
.form-err{font-size:12px;color:var(--err);margin-top:4px}
.form-control.is-err{border-color:var(--err)}
.form-grid{display:grid;gap:16px}
.form-grid-2{grid-template-columns:1fr 1fr}
.form-grid-3{grid-template-columns:1fr 1fr 1fr}
.form-section{margin-bottom:28px}
.form-section-title{font-size:13px;font-weight:600;color:var(--text-m);
  text-transform:uppercase;letter-spacing:.5px;margin-bottom:16px;
  padding-bottom:8px;border-bottom:1px solid var(--border)}

/* ── FLASH MESSAGES ── */
.flash{
  display:flex;align-items:center;gap:10px;padding:12px 16px;
  border-radius:var(--r);margin-bottom:16px;font-size:13.5px;font-weight:500
}
.flash span{font-size:16px;flex-shrink:0}
.flash-ok  {background:var(--ok-bg);color:var(--ok);border:1px solid #86efac}
.flash-err {background:var(--err-bg);color:var(--err);border:1px solid #fca5a5}
.flash-warn{background:var(--warn-bg);color:var(--warn);border:1px solid #fcd34d}
.flash-info{background:var(--info-bg);color:var(--info);border:1px solid #7dd3fc}

/* ── PAGINATION ── */
.pagination{display:flex;align-items:center;gap:6px;margin-top:20px}
.page-btn{
  padding:7px 12px;border:1px solid var(--border);border-radius:var(--r-sm);
  font-size:13px;color:var(--text);background:var(--surface);cursor:pointer;
  transition:all var(--tr);text-decoration:none
}
.page-btn:hover{border-color:var(--primary);color:var(--primary)}
.page-btn.active{background:var(--primary);color:#fff;border-color:var(--primary)}
.page-btn[disabled]{opacity:.4;cursor:not-allowed}

/* ── SECTION HEADER ── */
.page-header{display:flex;align-items:center;justify-content:space-between;margin-bottom:24px}
.page-title{font-size:20px;font-weight:700;color:var(--text)}
.page-sub{font-size:13px;color:var(--text-m);margin-top:2px}
.page-actions{display:flex;gap:10px;align-items:center}

/* ── TABLEAUX D'ABONNEMENTS (PRICING) ── */
.pricing-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:20px}
.pricing-card{
  border:2px solid var(--border);border-radius:var(--r-lg);padding:28px 24px;
  background:var(--surface);transition:all var(--tr);display:flex;flex-direction:column
}
.pricing-card:hover{border-color:var(--primary);box-shadow:var(--sh-m)}
.pricing-card.featured{border-color:var(--primary);box-shadow:var(--sh-m)}
.pricing-card.featured .pricing-badge{display:inline-block}
.pricing-badge{
  display:none;background:var(--primary);color:#fff;
  font-size:11px;font-weight:700;padding:3px 10px;border-radius:20px;margin-bottom:12px
}
.pricing-name{font-size:18px;font-weight:700;color:var(--text)}
.pricing-range{font-size:13px;color:var(--text-m);margin-top:2px}
.pricing-amount{font-size:32px;font-weight:800;color:var(--primary);margin:16px 0 4px}
.pricing-amount span{font-size:14px;font-weight:500;color:var(--text-m)}
.pricing-saving{font-size:12px;color:var(--ok);font-weight:600;margin-bottom:16px}
.pricing-cta{margin-top:auto;padding-top:20px}

/* Toggle mensuel/annuel */
.billing-toggle{display:flex;align-items:center;gap:12px;margin-bottom:32px}
.toggle-label{font-size:14px;font-weight:500;color:var(--text-m)}
.toggle-label.active{color:var(--text)}
.toggle-switch{
  position:relative;width:48px;height:26px;
  background:var(--primary);border-radius:20px;cursor:pointer;
  border:none;outline:none;transition:background var(--tr)
}
.toggle-switch::after{
  content:'';position:absolute;width:20px;height:20px;
  background:#fff;border-radius:50%;top:3px;left:3px;
  transition:transform var(--tr)
}
.toggle-switch.annual::after{transform:translateX(22px)}
.discount-pill{
  background:var(--ok-bg);color:var(--ok);
  font-size:11px;font-weight:700;padding:2px 8px;border-radius:20px
}

/* ── ABONNEMENT STATUS ── */
.abo-banner{
  background:linear-gradient(135deg,var(--primary) 0%,var(--primary-d) 100%);
  color:#fff;border-radius:var(--r-lg);padding:20px 24px;
  display:flex;align-items:center;justify-content:space-between;margin-bottom:24px
}
.abo-banner.warning{background:linear-gradient(135deg,var(--warn) 0%,#92400e 100%)}
.abo-banner.danger{background:linear-gradient(135deg,var(--err) 0%,#7f1d1d 100%)}
.abo-banner-title{font-size:15px;font-weight:700}
.abo-banner-sub{font-size:12px;opacity:.85;margin-top:2px}

/* ── MODALS ── */
.modal-backdrop{
  position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:200;
  display:flex;align-items:center;justify-content:center;
  opacity:0;pointer-events:none;transition:opacity var(--tr)
}
.modal-backdrop.open{opacity:1;pointer-events:all}
.modal{
  background:var(--surface);border-radius:var(--r-lg);width:100%;max-width:520px;
  max-height:90vh;overflow-y:auto;box-shadow:var(--sh-lg);
  transform:translateY(16px);transition:transform var(--tr)
}
.modal-backdrop.open .modal{transform:translateY(0)}
.modal-header{
  padding:20px 24px 16px;border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:space-between
}
.modal-title{font-size:16px;font-weight:700}
.modal-close{background:none;border:none;font-size:20px;color:var(--text-m);cursor:pointer;padding:4px}
.modal-close:hover{color:var(--text)}
.modal-body{padding:24px}
.modal-footer{padding:16px 24px;border-top:1px solid var(--border);
  display:flex;justify-content:flex-end;gap:10px}

/* ── SEARCH BAR ── */
.search-bar{
  display:flex;align-items:center;gap:10px;padding:8px 14px;
  border:1px solid var(--border-s);border-radius:var(--r);background:var(--surface);
  transition:border-color var(--tr)
}
.search-bar:focus-within{border-color:var(--primary)}
.search-bar input{border:none;outline:none;font-size:13.5px;
  color:var(--text);background:transparent;flex:1}
.search-bar input::placeholder{color:var(--text-l)}

/* ── EMPTY STATE ── */
.empty-state{text-align:center;padding:60px 20px;color:var(--text-m)}
.empty-state svg{width:48px;height:48px;margin:0 auto 16px;opacity:.3}
.empty-state h3{font-size:16px;font-weight:600;margin-bottom:6px;color:var(--text)}
.empty-state p{font-size:14px;margin-bottom:20px}

/* ── UTILS ── */
.flex{display:flex}.flex-col{flex-direction:column}
.items-center{align-items:center}.justify-between{justify-content:space-between}
.gap-2{gap:8px}.gap-3{gap:12px}.gap-4{gap:16px}
.mt-1{margin-top:4px}.mt-2{margin-top:8px}.mt-3{margin-top:12px}.mt-4{margin-top:16px}
.mb-4{margin-bottom:16px}.mb-6{margin-bottom:24px}
.text-right{text-align:right}.text-center{text-align:center}
.text-sm{font-size:12.5px}.text-muted{color:var(--text-m)}
.font-bold{font-weight:700}.font-medium{font-weight:500}
.w-full{width:100%}
.divider{height:1px;background:var(--border);margin:20px 0}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}

/* ── RESPONSIVE ── */
@media(max-width:768px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.open{transform:translateX(0)}
  .main-wrap{margin-left:0}
  .main-content{padding:16px}
  .form-grid-2,.form-grid-3{grid-template-columns:1fr}
  .kpi-grid{grid-template-columns:1fr 1fr}
  .page-header{flex-direction:column;align-items:flex-start;gap:12px}
  .pricing-grid{grid-template-columns:1fr}
  .abo-banner{flex-direction:column;gap:12px}
}
@media(max-width:480px){
  .kpi-grid{grid-template-columns:1fr}
  .header{padding:0 16px}
}

/* ── PRINT ── */
@media print{
  .sidebar,.header,.btn,.no-print{display:none!important}
  .main-wrap{margin-left:0}
  .card{box-shadow:none;border:1px solid #ddd}
}