/* ...existing code... */

/* Styles généraux - Design moderne 2026 */
:root{
  --bg: linear-gradient(135deg, #f0f4f8 0%, #e2e8f0 100%);
  --bg-solid:#f0f4f8;
  --card:#ffffff;
  --card-hover: rgba(255,255,255,0.95);
  --muted:#64748b;
  --accent:#3b82f6;
  --accent-2:#8b5cf6;
  --accent-gradient: linear-gradient(135deg, #3b82f6 0%, #8b5cf6 100%);
  --line:#e2e8f0;
  --text:#0f172a;
  --shadow: 0 10px 40px rgba(16,24,40,0.08);
  --shadow-hover: 0 20px 60px rgba(16,24,40,0.12);
  --success:#10b981;
  --warning:#f59e0b;
  --danger:#ef4444;
  --info:#06b6d4;
  --radius:16px;
  --transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  /* Sidebar sizes */
  --sidebar-w:280px;
  --sidebar-collapsed-w:80px;
}

*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
html,body{height:100%;font-family:'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;background:var(--bg-solid);color:var(--text);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
body{background:var(--bg)}
a{color:var(--accent);text-decoration:none;transition:var(--transition)}
a:hover{color:var(--accent-2);text-decoration:none;transform:translateY(-1px)}

/* Animations modernes */
@keyframes fadeInUp{from{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}
@keyframes slideIn{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
@keyframes pulse{0%, 100%{opacity:1}50%{opacity:0.7}}
@keyframes float{0%, 100%{transform:translateY(0)}50%{transform:translateY(-10px)}}

.fade-in{animation:fadeInUp 0.6s ease-out}
.slide-in{animation:slideIn 0.5s ease-out}

/* Conteneur */
.wrapper{max-width:1100px;margin:24px auto;padding:18px}
h1{margin:0 0 12px;font-size:20px;color:var(--accent)}
nav{margin-bottom:14px}
nav a{margin-right:12px;color:var(--accent-2);font-weight:600}

/* Cards / KPI - Glassmorphism moderne */
.cards{display:grid;grid-template-columns:repeat(auto-fit, minmax(240px, 1fr));gap:20px;margin:24px 0}
.card{
  background:rgba(255,255,255,0.8);
  backdrop-filter:blur(20px);
  -webkit-backdrop-filter:blur(20px);
  border:1px solid rgba(255,255,255,0.3);
  padding:24px;
  border-radius:var(--radius);
  box-shadow:var(--shadow);
  transition:var(--transition);
  position:relative;
  overflow:hidden;
  animation:fadeInUp 0.6s ease-out;
}
.card::before{
  content:'';
  position:absolute;
  top:0;left:0;right:0;
  height:4px;
  background:var(--accent-gradient);
  transform:scaleX(0);
  transition:var(--transition);
}
.card:hover{
  transform:translateY(-8px);
  box-shadow:var(--shadow-hover);
  background:var(--card-hover);
}
.card:hover::before{transform:scaleX(1)}
.card h3{margin:0 0 12px 0;font-size:13px;color:var(--muted);text-transform:uppercase;letter-spacing:1px;font-weight:600}
.card .value{font-size:32px;font-weight:800;background:var(--accent-gradient);-webkit-background-clip:text;-webkit-text-fill-color:transparent;margin:12px 0}
.card small{display:block;color:var(--muted);margin-top:8px;font-size:13px}

/* Layout sections */
.section-flex{display:flex;gap:18px;align-items:flex-start}
.section-flex > div{background:var(--card);padding:12px;border-radius:var(--radius);border:1px solid var(--line);box-shadow:0 4px 12px rgba(16,24,40,0.03)}
.section-flex h2{margin:0 0 12px 0;font-size:15px;color:var(--muted)}

/* Tableaux */
.table-compact{width:100%;border-collapse:collapse}
.table-compact th,.table-compact td{border:1px solid #eee;padding:8px;text-align:left;font-size:14px}
.table-compact th{background:#fafafa;color:var(--muted);font-weight:600}
.table-compact tr:nth-child(even){background:#fbfdff}

/* Formulaires */
form{display:block;margin:6px 0}
.form-row{display:flex;gap:8px;flex-wrap:wrap}
.form-row .form-field{flex:1;min-width:160px}
input[type="text"],input[type="number"],input[type="date"],select,textarea{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:8px;background:#fff;color:var(--text);
}
textarea{min-height:100px;resize:vertical}
label{display:block;font-size:13px;color:var(--muted);margin-bottom:6px}

/* Boutons modernes avec effets */
.btn{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:12px 24px;
  border-radius:12px;
  border:none;
  cursor:pointer;
  font-weight:600;
  font-size:14px;
  transition:var(--transition);
  position:relative;
  overflow:hidden;
}
.btn::before{
  content:'';
  position:absolute;
  top:50%;left:50%;
  width:0;height:0;
  border-radius:50%;
  background:rgba(255,255,255,0.3);
  transform:translate(-50%, -50%);
  transition:width 0.6s, height 0.6s;
}
.btn:hover::before{width:300px;height:300px}
.btn:active{transform:scale(0.95)}
.btn-primary{
  background:var(--accent-gradient);
  color:#fff;
  box-shadow:0 4px 16px rgba(59,130,246,0.3);
}
.btn-primary:hover{box-shadow:0 8px 24px rgba(59,130,246,0.4);transform:translateY(-2px)}
.btn-ghost{
  background:transparent;
  border:2px solid var(--line);
  color:var(--accent);
}
.btn-ghost:hover{background:rgba(59,130,246,0.05);border-color:var(--accent)}
.btn-danger{background:var(--danger);color:#fff;box-shadow:0 4px 16px rgba(239,68,68,0.3)}
.btn-success{background:var(--success);color:#fff;box-shadow:0 4px 16px rgba(16,185,129,0.3)}
.btn-warning{background:var(--warning);color:#fff;box-shadow:0 4px 16px rgba(245,158,11,0.3)}

/* Helpers */
.kv{display:flex;justify-content:space-between;align-items:center}
.muted{color:var(--muted);font-size:13px}
.small{font-size:12px;color:var(--muted)}

/* Responsive */
@media (max-width:880px){
  .section-flex{flex-direction:column}
  .cards{flex-direction:column}
  .card{min-width:100%}
}

/* Tiny printable adjustments */
@media print{
  body{background:#fff;color:#000}
  nav, .btn, .toolbar{display:none}
  .card{box-shadow:none;border:1px solid #ddd}
}



  .layout{display:flex;min-height:100vh;background:var(--bg-solid)}
  .sidebar{
    width:var(--sidebar-w);
    background:linear-gradient(180deg, #1e293b 0%, #0f172a 100%);
    color:#fff;
    padding:24px 16px;
    box-shadow:4px 0 24px rgba(0,0,0,0.1);
    display:flex;flex-direction:column;gap:16px;
    transition:var(--transition);
    position:relative;
    z-index:100;
    overflow-y: auto;
    overflow-x: hidden;
  }
  .sidebar::before{
    content:'';
    position:absolute;
    top:0;left:0;right:0;bottom:0;
    background:url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.02'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity:0.05;
    pointer-events:none;
  }
  .sidebar.collapsed{width:var(--sidebar-collapsed-w)}
  .sidebar .brand{
    display:flex;align-items:center;gap:12px;
    padding:12px;
    border-radius:12px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    transition:var(--transition);
  }
  .sidebar .brand:hover{background:rgba(255,255,255,0.08)}
  .brand .logo{
    width:48px;height:48px;
    border-radius:12px;
    background:var(--accent-gradient);
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:24px;
    box-shadow:0 8px 16px rgba(59,130,246,0.3);
    color:#fff;
  }
  .brand .title{font-weight:700;font-size:18px;letter-spacing:-0.5px}
  .sidebar.collapsed .title,.sidebar.collapsed .small{display:none}
  .nav-section{margin-top:8px;display:flex;flex-direction:column;gap:4px}
  .nav-link{
    display:flex;align-items:center;gap:12px;
    padding:14px 16px;
    border-radius:12px;
    color:rgba(255,255,255,.9);
    text-decoration:none;
    font-weight:600;
    font-size:14px;
    transition:var(--transition);
    position:relative;
    overflow:hidden;
  }
  .nav-link::before{
    content:'';
    position:absolute;
    left:0;top:0;bottom:0;
    width:4px;
    background:var(--accent-gradient);
    transform:scaleY(0);
    transition:var(--transition);
  }
  .nav-link:hover{
    background:rgba(59,130,246,0.15);
    color:#fff;
    transform:translateX(4px);
  }
  .nav-link:hover::before{transform:scaleY(1)}
  .nav-link.active{
    background:rgba(59,130,246,0.2);
    color:#fff;
  }
  .nav-link.active::before{transform:scaleY(1)}
  .nav-link .icon{
    width:24px;height:24px;
    display:flex;align-items:center;justify-content:center;
    font-size:16px;
    color:#93c5fd;
    transition:var(--transition);
  }
  .nav-link .icon i{
    font-size:16px;
  }
  .nav-link:hover .icon{color:#fff;transform:scale(1.1)}
  .nav-divider{height:1px;background:rgba(255,255,255,0.1);margin:12px 0;border-radius:2px}
  .sidebar .user{
    margin-top:auto;
    display:flex;align-items:center;gap:12px;
    padding:14px;
    border-radius:12px;
    background:rgba(255,255,255,0.05);
    backdrop-filter:blur(10px);
    border:1px solid rgba(255,255,255,0.1);
    transition:var(--transition);
  }
  .sidebar .user:hover{background:rgba(255,255,255,0.08);border-color:rgba(255,255,255,0.2)}
  .user .avatar{
    width:44px;height:44px;
    border-radius:12px;
    background:var(--accent-gradient);
    color:#fff;
    display:flex;align-items:center;justify-content:center;
    font-weight:800;font-size:18px;
    box-shadow:0 4px 12px rgba(59,130,246,0.3);
  }
  .sidebar.collapsed .user .name,.sidebar.collapsed .user .small{display:none}
  .user .name{font-weight:700;font-size:14px}
  .user .small{font-size:12px;color:rgba(255,255,255,0.6);margin-top:2px}
  .sidebar .search{display:flex;gap:8px;position:relative}
  .sidebar .search input{
    flex:1;
    padding:12px 16px;
    border-radius:12px;
    border:1px solid rgba(255,255,255,0.1);
    background:rgba(255,255,255,0.05);
    color:#fff;
    font-size:14px;
    transition:var(--transition);
  }
  .sidebar .search input::placeholder{color:rgba(255,255,255,0.4)}
  .sidebar .search input:focus{
    outline:none;
    background:rgba(255,255,255,0.08);
    border-color:rgba(59,130,246,0.5);
    box-shadow:0 0 0 3px rgba(59,130,246,0.1);
  }
  .main-content{
    flex:1;
    padding:32px;
    overflow:auto;
    background:transparent;
    width: 100%;
    max-width: 100%;
  }
  .main-content h1{
    font-size:32px;
    font-weight:800;
    margin-bottom:24px;
    background:var(--accent-gradient);
    -webkit-background-clip:text;
    -webkit-text-fill-color:transparent;
    animation:fadeInUp 0.5s ease-out;
  }

  /* Container pour le contenu principal */
  .container {
    width: 100%;
    max-width: 100%;
    margin: 0;
    padding: 0;
  }
  
  /* Tableaux modernes */
  .table-compact{
    width:100%;
    border-collapse:separate;
    border-spacing:0;
    background:rgba(255,255,255,0.8);
    backdrop-filter:blur(20px);
    border-radius:var(--radius);
    overflow:hidden;
    box-shadow:var(--shadow);
  }
  .table-compact th,.table-compact td{
    padding:16px;
    text-align:left;
    font-size:14px;
    border-bottom:1px solid var(--line);
  }
  .table-compact th{
    background:rgba(59,130,246,0.05);
    color:var(--text);
    font-weight:700;
    text-transform:uppercase;
    font-size:12px;
    letter-spacing:0.5px;
  }
  .table-compact tbody tr{
    transition:var(--transition);
  }
  .table-compact tbody tr:hover{
    background:rgba(59,130,246,0.03);
    transform:scale(1.01);
  }
  .table-compact tbody tr:last-child td{border-bottom:none}
  /* Floating hamburger (mobile) */
  #toggleSidebar{
    display:none;
    position:fixed;
    top:12px;
    left:12px;
    z-index:50;
    padding:8px 10px;
    border-radius:8px;
    background:#fff;
    border:1px solid var(--line);
    box-shadow:0 2px 6px rgba(0,0,0,0.08);
  }
  /* responsive */
  .mobile-overlay{display:none;position:fixed;inset:0;background:rgba(2,6,23,.45);z-index:35}
  @media (max-width:900px){
    .sidebar{
      position:fixed;
      left:0;
      top:50px;
      bottom:0;
      z-index:1050;
      transform:translateX(-100%);
      transition:transform .22s ease,width .22s;
      height: calc(100vh - 50px);
      max-height: calc(100vh - 50px);
      overflow-y: auto;
      overflow-x: hidden;
      -webkit-overflow-scrolling: touch;
      padding-bottom: 20px;
    }
    .sidebar.open{transform:translateX(0)}
    #toggleSidebar{display:inline-flex;align-items:center;justify-content:center}
    .mobile-overlay{display:none}
    .mobile-overlay.active{display:block}
    .content{padding:12px}
  }