<!DOCTYPE html>
<html>

<head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <title><?php echo $page_title; ?></title>
  <!-- Tell the browser to be responsive to screen width -->
  <meta content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" name="viewport">
  <!-- Bootstrap 3.3.7 -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/bootstrap/dist/css/bootstrap.min.css') ?>">
  <!-- Font Awesome -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/font-awesome/css/font-awesome.min.css') ?>">
  <!-- Ionicons -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/Ionicons/css/ionicons.min.css') ?>">
  <!-- Theme style -->
  <link rel="stylesheet" href="<?php echo base_url('assets/dist/css/AdminLTE.min.css') ?>">
  <!-- AdminLTE Skins. Choose a skin from the css/skins
       folder instead of downloading all of them to reduce the load. -->
  <link rel="stylesheet" href="<?php echo base_url('assets/dist/css/skins/_all-skins.min.css') ?>">
  <!-- Morris chart -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/morris.js/morris.css') ?>">
  <!-- jvectormap -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/jvectormap/jquery-jvectormap.css') ?>">
  <!-- Date Picker -->
  <link rel="stylesheet"
    href="<?php echo base_url('assets/bower_components/bootstrap-datepicker/dist/css/bootstrap-datepicker.min.css') ?>">
  <!-- Daterange picker -->
  <link rel="stylesheet"
    href="<?php echo base_url('assets/bower_components/bootstrap-daterangepicker/daterangepicker.css') ?>">
  <!-- bootstrap wysihtml5 - text editor -->
  <link rel="stylesheet"
    href="<?php echo base_url('assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.min.css') ?>">
  <link rel="stylesheet"
    href="<?php echo base_url('assets/bower_components/datatables.net-bs/css/dataTables.bootstrap.min.css') ?>">
  <!-- Select2 -->
  <link rel="stylesheet" href="<?php echo base_url('assets/bower_components/select2/dist/css/select2.min.css') ?>">
  <link rel="stylesheet" href="<?php echo base_url('assets/plugins/fileinput/fileinput.min.css') ?>">
  <script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
  <!-- icheck -->
  <!-- iCheck for checkboxes and radio inputs -->
  <!-- <link rel="stylesheet" href="<?php echo base_url('assets/plugins/iCheck/all.css') ?>"> -->

  <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
  <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
  <!--[if lt IE 9]>
  <script src="https://oss.maxcdn.com/html5shiv/3.7.3/html5shiv.min.js"></script>
  <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
  <![endif]-->

  <!-- Google Font -->
  <!-- <link rel="stylesheet" href="https://fonts.googleapis.com/css?family=Source+Sans+Pro:300,400,600,700,300italic,400italic,600italic"> -->
  <!-- <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.2/css/all.min.css"> -->

  <!-- jQuery 3 -->
  <script src="<?php echo base_url('assets/bower_components/jquery/dist/jquery.min.js') ?>"></script>
  <script src="<?php echo base_url('assets/bower_components/jquery-ui/jquery-ui.min.js') ?>"></script>
  <!-- Resolve conflict in jQuery UI tooltip with Bootstrap tooltip -->
  <script>
    $.widget.bridge('uibutton', $.ui.button);
  </script>
  <!-- Bootstrap 3.3.7 -->
  <script src="<?php echo base_url('assets/bower_components/bootstrap/dist/js/bootstrap.min.js') ?>"></script>
  <!-- Morris.js charts -->
  <script src="<?php echo base_url('assets/bower_components/raphael/raphael.min.js') ?>"></script>
  <script src="<?php echo base_url('assets/bower_components/morris.js/morris.min.js') ?>"></script>
  <!-- Sparkline -->
  <script
    src="<?php echo base_url('assets/bower_components/jquery-sparkline/dist/jquery.sparkline.min.js') ?>"></script>
  <!-- jvectormap -->
  <script src="<?php echo base_url('assets/plugins/jvectormap/jquery-jvectormap-1.2.2.min.js') ?>"></script>
  <script src="<?php echo base_url('assets/plugins/jvectormap/jquery-jvectormap-world-mill-en.js') ?>"></script>
  <!-- jQuery Knob Chart -->
  <script src="<?php echo base_url('assets/bower_components/jquery-knob/dist/jquery.knob.min.js') ?>"></script>
  <!-- daterangepicker -->
  <script src="<?php echo base_url('assets/bower_components/moment/min/moment.min.js') ?>"></script>
  <script src="<?php echo base_url('assets/bower_components/bootstrap-daterangepicker/daterangepicker.js') ?>"></script>
  <!-- datepicker -->
  <script
    src="<?php echo base_url('assets/bower_components/bootstrap-datepicker/dist/js/bootstrap-datepicker.min.js') ?>"></script>
  <!-- Bootstrap WYSIHTML5 -->
  <script src="<?php echo base_url('assets/plugins/bootstrap-wysihtml5/bootstrap3-wysihtml5.all.min.js') ?>"></script>
  <!-- Slimscroll -->
  <script src="<?php echo base_url('assets/bower_components/jquery-slimscroll/jquery.slimscroll.min.js') ?>"></script>
  <!-- FastClick -->
  <script src="<?php echo base_url('assets/bower_components/fastclick/lib/fastclick.js') ?>"></script>
  <!-- Select2 -->
  <script src="<?php echo base_url('assets/bower_components/select2/dist/js/select2.full.min.js') ?>"></script>
  <!-- AdminLTE App -->
  <script src="<?php echo base_url('assets/dist/js/adminlte.min.js') ?>"></script>
  <!-- AdminLTE dashboard demo (This is only for demo purposes) -->
  <script src="<?php echo base_url('assets/dist/js/pages/dashboard.js') ?>"></script>
  <!-- AdminLTE for demo purposes -->
  <script src="<?php echo base_url('assets/dist/js/demo.js') ?>"></script>
  <script src="<?php echo base_url('assets/plugins/fileinput/fileinput.min.js') ?>"></script>
  <!-- <script src="https://cdn.jsdelivr.net/npm/@fortawesome/fontawesome-free/js/all.min.js"></script> -->
  <!-- jQuery UI 1.11.4 -->
  <script src="<?php echo base_url('assets/plugins/iCheck/icheck.min.js') ?>"></script>

  <!-- DataTables -->
  <script src="<?php echo base_url('assets/bower_components/datatables.net/js/jquery.dataTables.min.js') ?>"></script>
  <script
    src="<?php echo base_url('assets/bower_components/datatables.net-bs/js/dataTables.bootstrap.min.js') ?>"></script>

    

    

    

</head>

<body class="hold-transition skin-blue sidebar-mini">
  <div class="wrapper">
    <style>
    /* Styles de base */
    body {
            margin: 0;
            padding: 0;
            font-family: 'Source Sans Pro', sans-serif;
            overflow-x: hidden;
            min-height: 100vh;
            background-color: #ecf0f5;
        }

        /* Wrapper principal */
        .wrapper {
            display: flex;
            flex-direction: column;
            min-height: 100vh;
            position: relative;
        }

        /* Contenu principal */
        .content-wrapper {
            flex: 1;
            overflow-y: auto;
            padding-bottom: 60px;
            margin-left: 230px;
            padding-top: 50px;
            transition: margin-left 0.3s ease;
        }

        /* Footer fixe - Même taille et position que le content-wrapper */
        .main-footer {
            position: fixed;
            bottom: 0;
            left: 230px; /* collé à la sidebar */
            margin-left: 2px; /* petit espace de 2px */
            right: 0;
            z-index: 1000;
            background-color: #ecf0f5;
            padding: 10px 15px;
            border-top: 1px solid #d2d6de;
            display: flex;
            align-items: center;
            justify-content: space-between;
            transition: left 0.3s ease, margin-left 0.3s ease;
        }

        /* Sidebar */
        .main-sidebar {
            position: fixed;
            top: 0;
            left: 0;
            height: 100vh;
            overflow-y: auto;
            z-index: 810;
            width: 230px;
            background-color: #222d32;
            transition: width 0.3s ease;
        }

        /* Header */
        .main-header {
            position: fixed;
            top: 0;
            left: 0;
            width: 100%;
            z-index: 1000;
            background-color: #3c8dbc;
            height: 50px;
            transition: margin-left 0.3s ease;
        }

        /* Logo */
        .logo {
            display: block;
            padding: 15px;
            text-align: center;
            background-color: #367fa9;
            color: white;
            font-size: 18px;
            font-weight: bold;
            overflow: hidden;
            white-space: nowrap;
            transition: padding 0.3s ease;
        }

        .logo-mini {
            display: none;
        }

        .logo-lg {
            display: inline;
        }
        /* Bouton sidebar-toggle uniquement dans le header */
        /* Position du bouton sidebar-toggle */
        .sidebar-toggle {
            position: fixed;        /* Aligné avec ton header (ajuste si besoin) */
            left: 230px;         /* Collé à la sidebar en mode normal */
            z-index: 2000;       /* Au-dessus de tout */
            background: #3c8dbc;
            color: #fff;
            padding: 8px 12px;
            border-radius: 3px;
            cursor: pointer;
            transition: left 0.3s ease; /* Animation fluide */
        }

        /* En mode réduit */
        .sidebar-collapsed .sidebar-toggle {
            left: 70px;  /* Suit la sidebar réduite */
        }


        /* Menu */
        .sidebar-menu {
            list-style: none;
            padding: 0;
            margin: 0;
        }

        .sidebar-menu > li {
            position: relative;
            margin: 0;
        }

        .sidebar-menu > li > a {
            padding: 12px 15px;
            display: block;
            color: #b8c7ce;
            text-decoration: none;
            border-left: 3px solid transparent;
            cursor: pointer;
            transition: all 0.3s ease;
        }

        .sidebar-menu > li > a:hover {
            color: #fff;
            background: #1e282c;
            border-left-color: #3c8dbc;
        }

        .sidebar-menu > li.active > a {
            color: #fff;
            background: #1e282c;
            border-left-color: #3c8dbc;
        }

        .sidebar-menu i {
            width: 25px;
            text-align: center;
            margin-right: 10px;
        }

        /* Sous-menu */
        .treeview-menu {
            display: none;
            list-style: none;
            padding: 0;
            margin: 0;
            background: #2c3b41;
        }

        .treeview-menu > li {
            margin: 0;
        }

        .treeview-menu > li > a {
            padding: 10px 15px 10px 45px;
            display: block;
            font-size: 14px;
            color: #8aa4af;
            text-decoration: none;
            transition: all 0.3s ease;
        }

        .treeview-menu > li > a:hover {
            color: #fff;
            background: #1e282c;
        }

        /* Flèche */
        .pull-right-container {
            position: absolute;
            right: 10px;
            top: 50%;
            transform: translateY(-50%);
        }

        .fa-angle-left {
            transition: transform 0.3s ease;
        }

        /* Affichage normal des sous-menus */
        .treeview.menu-open > .treeview-menu {
            display: block;
        }

        .treeview.menu-open > a > .pull-right-container > .fa-angle-left {
            transform: rotate(-90deg);
        }

        /* Notifications */
        .navbar-badge {
            font-size: 1.4rem;
            font-weight: 300;
            padding: 2px 4px;
            position: absolute;
            right: 5px;
            top: 9px;
        }

        .badge-warning {
            color: #1f2d3d;
            background-color: #ffc107;
        }

        /* Dropdown */
        .dropdown-menu {
            position: absolute;
            top: 100%;
            right: 0;
            z-index: 1000;
            display: none;
            min-width: 280px;
            padding: .5rem 0;
            margin: .125rem 0 0;
            font-size: 1rem;
            color: #212529;
            text-align: left;
            list-style: none;
            background-color: #fff;
            background-clip: padding-box;
            border: 1px solid rgba(0, 0, 0, .15);
            border-radius: .25rem;
            box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .175);
        }

        .dropdown-menu.show {
            display: block;
        }

        /* === MODE REDUIT === */
        .sidebar-collapsed .main-sidebar {
            width: 70px;
            overflow-y: auto;
            overflow-x: visible;
            /* Scrollbar à gauche en mode réduit */
            direction: rtl;
        }

        .sidebar-collapsed .main-sidebar .sidebar-menu {
            direction: ltr; /* Rétablir la direction normale pour le contenu */
        }

        .sidebar-collapsed .content-wrapper {
            margin-left: 70px;
        }

        .sidebar-collapsed .main-header {
            width: 100%;
            margin-left: 0;
        }

        /* Footer en mode sidebar réduite - Même taille que le content-wrapper réduit */
        .sidebar-collapsed .main-footer {
            left: 70px; /* Même position que le content-wrapper en mode réduit */
            margin-left: 2px;
        }

        /* LOGO CENTRÉ EN MODE RÉDUIT - AMÉLIORATION */
        .sidebar-collapsed .logo {
            padding: 15px 5px; /* Padding réduit horizontalement */
            text-align: center; /* Centrage du texte */
            display: flex; /* Utilisation de flexbox pour un meilleur centrage */
            align-items: center; /* Centrage vertical */
            justify-content: center; /* Centrage horizontal */
            width: 70px; /* Largeur fixe correspondant à la sidebar réduite */
            box-sizing: border-box; /* Inclure le padding dans la largeur */
        }

        .sidebar-collapsed .logo-mini {
            display: inline-block; /* Affichage du logo mini */
            text-align: center;
            width: 100%;
        }

        .sidebar-collapsed .logo-lg {
            display: none; /* Masquer le logo long */
        }

        .sidebar-collapsed .sidebar-menu > li > a > span {
            display: none;
        }

        .sidebar-collapsed .sidebar-menu > li > a .pull-right-container {
            display: none;
        }

        /* Icônes centrées - AMÉLIORATION */
        .sidebar-collapsed .sidebar-menu > li > a {
            text-align: center;
            padding: 12px 0;
            position: relative;
            display: flex; /* Utilisation de flexbox */
            align-items: center; /* Centrage vertical */
            justify-content: center; /* Centrage horizontal */
            width: 70px; /* Largeur fixe */
            box-sizing: border-box;
        }

        .sidebar-collapsed .sidebar-menu i {
            margin-right: 0;
            display: block;
            font-size: 18px;
            width: auto; /* Largeur automatique pour les icônes */
            text-align: center;
        }

        /* Tooltip pour afficher le texte du menu principal au survol */
        .sidebar-collapsed .sidebar-menu > li > a::before {
            content: attr(data-tooltip);
            position: absolute;
            left: 70px;
            top: 50%;
            transform: translateY(-50%);
            background: #2c3b41;
            color: #fff;
            padding: 8px 12px;
            border-radius: 4px;
            white-space: nowrap;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 9998;
            font-size: 14px;
            box-shadow: 2px 2px 8px rgba(0,0,0,0.3);
            border-left: 3px solid #3c8dbc;
            pointer-events: none;
        }

        .sidebar-collapsed .sidebar-menu > li:hover > a::before {
            opacity: 1;
            visibility: visible;
            left: 75px;
        }

        /* Flèche pour le tooltip */
        .sidebar-collapsed .sidebar-menu > li > a::after {
            content: "";
            position: absolute;
            left: 70px;
            top: 50%;
            transform: translateY(-50%);
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 5px 0;
            border-color: transparent #2c3b41 transparent transparent;
            opacity: 0;
            visibility: hidden;
            transition: all 0.2s ease;
            z-index: 9999;
        }

        .sidebar-collapsed .sidebar-menu > li:hover > a::after {
            opacity: 1;
            visibility: visible;
        }

        /* Masquer les tooltips pour les éléments avec sous-menu */
        .sidebar-collapsed .sidebar-menu > li.treeview > a::before,
        .sidebar-collapsed .sidebar-menu > li.treeview > a::after {
            display: none;
        }

        /* Améliorations pour les sous-menus en mode réduit */
        .sidebar-collapsed .sidebar-menu > li {
            position: relative;
        }

        /* Sous-menus affichés au hover en mode réduit - POSITIONNÉS DANS LE CONTENT-WRAPPER */
        .sidebar-collapsed .treeview-menu {
            position: fixed; /* Position fixe par rapport à la fenêtre */
            left: 80px; /* 70px (sidebar) + 10px de marge */
            top: 0; /* Sera ajusté par JavaScript pour aligner avec l'élément parent */
            width: 180px; /* Taille réduite (était 200px) */
            max-width: calc(100vw - 100px); /* Éviter les débordements */
            z-index: 9999;
            box-shadow: 0 4px 15px rgba(0,0,0,0.25);
            border-radius: 4px; /* Border-radius plus petit */
            border-left: 2px solid #3c8dbc; /* Bordure plus fine */
            opacity: 0;
            visibility: hidden;
            transition: opacity 0.3s ease, visibility 0.3s ease, transform 0.3s ease;
            display: block !important;
            background: #fff; /* Fond blanc pour se démarquer du content-wrapper */
            border: 1px solid #d2d6de;
            pointer-events: none;
            transform: translateX(-20px) scale(0.95);
            transform-origin: left center;
            margin-top: 50px; /* Prendre en compte la hauteur du header fixe */
        }

        /* Style spécial pour les sous-menus dans le content-wrapper */
        .sidebar-collapsed .treeview-menu {
            background: linear-gradient(135deg, #fff 0%, #f8f9fa 100%);
            backdrop-filter: blur(8px); /* Blur réduit */
            border: 1px solid rgba(210, 214, 222, 0.8);
        }

        /* RENDRE LES SOUS-MENUS CLIQUABLES - TOUJOURS ACTIFS */
        .sidebar-collapsed .treeview:hover .treeview-menu {
            pointer-events: auto !important; /* Force l'activation des clics */
            opacity: 1;
            visibility: visible;
            transform: translateX(0) scale(1);
        }

        /* Maintenir l'affichage ET les clics du sous-menu quand on le survole directement */
        .sidebar-collapsed .treeview-menu:hover {
            opacity: 1 !important;
            visibility: visible !important;
            pointer-events: auto !important; /* Garantir la cliquabilité */
            transform: translateX(0) scale(1) !important;
        }

        /* Maintenir l'affichage quand on survole les liens à l'intérieur */
        .sidebar-collapsed .treeview-menu > li > a:hover {
            pointer-events: auto !important;
        }

        /* Zone de transition invisible élargie pour maintenir l'affichage */
        .sidebar-collapsed .treeview::after {
            content: "";
            position: absolute;
            top: -5px; /* Zone étendue vers le haut */
            right: -30px; /* Zone très élargie vers la droite */
            bottom: -5px; /* Zone étendue vers le bas */
            width: 40px; /* Zone large pour atteindre facilement le content-wrapper */
            background: transparent;
            z-index: 9998;
            pointer-events: none;
        }

        .sidebar-collapsed .treeview:hover::after {
            pointer-events: auto;
        }

        /* Zone de maintien au-dessus du sous-menu */
        .sidebar-collapsed .treeview-menu::before {
            content: "";
            position: absolute;
            top: -10px;
            left: -30px;
            right: -10px;
            height: 15px;
            background: transparent;
            z-index: 9999;
            pointer-events: auto; /* Permettre l'interaction */
        }

        /* Style des liens dans les sous-menus pour le content-wrapper - TAILLE RÉDUITE */
        .sidebar-collapsed .treeview-menu > li > a {
            padding: 8px 12px; /* Padding réduit (était 10px 15px) */
            color: #495057; /* Couleur sombre pour contraster avec le fond blanc */
            white-space: nowrap;
            border-bottom: 1px solid rgba(210, 214, 222, 0.4);
            transition: all 0.3s ease;
            font-size: 12px; /* Taille de police réduite (était 13px) */
            font-weight: 500;
            display: block;
            position: relative;
            cursor: pointer; /* Curseur pointer pour indiquer la cliquabilité */
            text-decoration: none; /* Supprimer le soulignement */
        }

        /* S'assurer que les liens sont cliquables */
        .sidebar-collapsed .treeview-menu > li > a {
            pointer-events: auto !important;
            z-index: 10000; /* Z-index élevé pour garantir la cliquabilité */
        }

        .sidebar-collapsed .treeview-menu > li:last-child > a {
            border-bottom: none;
            border-radius: 0 0 4px 4px; /* Border-radius réduit */
        }

        .sidebar-collapsed .treeview-menu > li:first-child > a {
            border-radius: 4px 4px 0 0; /* Border-radius réduit */
        }

        .sidebar-collapsed .treeview-menu > li > a:hover {
            background: linear-gradient(135deg, #3c8dbc 0%, #367fa9 100%);
            color: #fff;
            padding-left: 15px; /* Padding réduit pour le hover (était 20px) */
            transform: translateX(2px); /* Translation plus petite */
            box-shadow: inset 0 0 10px rgba(255,255,255,0.1); /* Ombre réduite */
        }

        /* Icônes dans les sous-menus - TAILLE RÉDUITE */
        .sidebar-collapsed .treeview-menu > li > a i {
            margin-right: 6px; /* Marge réduite (était 8px) */
            width: 14px; /* Largeur réduite (était 16px) */
            text-align: center;
            font-size: 11px; /* Taille d'icône réduite (était 12px) */
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .sidebar-collapsed .treeview-menu > li > a:hover i {
            opacity: 1;
            transform: scale(1.05); /* Réduction de l'effet de zoom */
        }

        /* En-tête du sous-menu avec le titre du parent - TAILLE RÉDUITE */
        .sidebar-collapsed .treeview-menu::after {
            content: attr(data-parent-title);
            display: block;
            padding: 6px 12px 5px 12px; /* Padding réduit (était 8px 15px 6px 15px) */
            background: linear-gradient(135deg, #3c8dbc 0%, #367fa9 100%);
            color: #fff;
            font-size: 10px; /* Taille de police réduite (était 11px) */
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.2px; /* Espacement réduit */
            border-radius: 4px 4px 0 0; /* Border-radius réduit */
            border-bottom: 1px solid rgba(255,255,255,0.2); /* Bordure plus fine */
            margin-bottom: 0;
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            z-index: 1;
        }

        /* Ajuster l'espacement du premier élément pour l'en-tête */
        .sidebar-collapsed .treeview-menu > li:first-child {
            margin-top: 22px; /* Espace pour l'en-tête réduite (était 25px) */
        }

        /* Flèche pointant vers la sidebar - TAILLE RÉDUITE */
        .sidebar-collapsed .treeview-menu::before {
            content: "";
            position: absolute;
            left: -5px; /* Position ajustée (était -6px) */
            top: 12px; /* Position ajustée (était 15px) */
            width: 0;
            height: 0;
            border-style: solid;
            border-width: 5px 5px 5px 0; /* Taille réduite (était 6px) */
            border-color: transparent #3c8dbc transparent transparent;
            filter: drop-shadow(-1px 0 1px rgba(0,0,0,0.2)); /* Ombre réduite */
        }

        /* Indicateur visuel pour les menus avec sous-menus en mode réduit */
        .sidebar-collapsed .sidebar-menu > li.treeview > a::after {
            content: "▶";
            position: absolute;
            right: 8px;
            top: 50%;
            transform: translateY(-50%);
            font-size: 9px; /* Taille réduite (était 10px) */
            color: #8aa4af;
            transition: all 0.3s ease;
            display: block !important; /* Forcer l'affichage de la flèche */
        }

        .sidebar-collapsed .sidebar-menu > li.treeview:hover > a::after {
            color: #3c8dbc; /* Couleur plus visible au hover */
            right: 6px;
            transform: translateY(-50%) scale(1.2) rotate(90deg); /* Rotation de la flèche */
        }

        /* Amélioration de l'indicateur de sous-menu */
        .sidebar-collapsed .sidebar-menu > li.treeview > a {
            position: relative;
        }

        /* Ajout d'un petit point pour indiquer la présence d'un sous-menu */
        .sidebar-collapsed .sidebar-menu > li.treeview > a::before {
            content: "●";
            position: absolute;
            bottom: 3px;
            left: 50%;
            transform: translateX(-50%);
            font-size: 5px; /* Taille réduite (était 6px) */
            color: #3c8dbc;
            opacity: 0.7;
            transition: all 0.3s ease;
        }

        .sidebar-collapsed .sidebar-menu > li.treeview:hover > a::before {
            opacity: 1;
            color: #fff;
            transform: translateX(-50%) scale(1.3); /* Effet réduit */
        }

        /* Tooltip spécial pour les menus avec sous-menus - MASQUÉ EN MODE RÉDUIT */
        .sidebar-collapsed .sidebar-menu > li.treeview > a.tooltip-disabled::before {
            display: none !important; /* Masquer le tooltip pour les menus avec sous-menus */
        }

        /* Amélioration du survol des éléments principaux en mode réduit */
        .sidebar-collapsed .sidebar-menu > li > a:hover {
            background-color: #1e282c;
            border-left-color: #3c8dbc;
            transform: scale(1.03); /* Léger agrandissement au hover (était 1.05) */
        }

        /* Effet spécial pour les menus avec sous-menus */
        .sidebar-collapsed .sidebar-menu > li.treeview > a:hover {
            background-color: #1e282c;
            border-left-color: #3c8dbc;
            transform: scale(1.03); /* Effet réduit */
            box-shadow: 1px 0 8px rgba(60, 141, 188, 0.3); /* Ombre pour indiquer l'ouverture */
        }

        /* Animation d'ouverture du sous-menu dans le content-wrapper */
        .sidebar-collapsed .treeview:hover .treeview-menu {
            animation: slideInFromSidebar 0.3s cubic-bezier(0.4, 0, 0.2, 1); /* Durée réduite */
        }

        @keyframes slideInFromSidebar {
            0% {
                opacity: 0;
                transform: translateX(-20px) scale(0.95); /* Distance réduite */
                filter: blur(2px); /* Effet de flou réduit */
            }
            60% {
                opacity: 0.8;
                transform: translateX(3px) scale(1.01); /* Distance réduite */
                filter: blur(0.5px); /* Effet de flou réduit */
            }
            100% {
                opacity: 1;
                transform: translateX(0) scale(1);
                filter: blur(0);
            }
        }

        /* Positionnement dynamique basé sur la position de l'élément parent */
        .sidebar-collapsed .sidebar-menu > li.treeview {
            position: relative;
        }

        /* Ajustement automatique de la position verticale */
        .sidebar-collapsed .sidebar-menu > li:nth-child(1) .treeview-menu { top: 50px; } /* 0px + header */
        .sidebar-collapsed .sidebar-menu > li:nth-child(2) .treeview-menu { top: 94px; } /* ~44px par item */
        .sidebar-collapsed .sidebar-menu > li:nth-child(3) .treeview-menu { top: 138px; }
        .sidebar-collapsed .sidebar-menu > li:nth-child(4) .treeview-menu { top: 182px; }
        .sidebar-collapsed .sidebar-menu > li:nth-child(5) .treeview-menu { top: 226px; }
        .sidebar-collapsed .sidebar-menu > li:nth-child(6) .treeview-menu { top: 270px; }
        .sidebar-collapsed .sidebar-menu > li:nth-child(7) .treeview-menu { top: 314px; }
        .sidebar-collapsed .sidebar-menu > li:nth-child(8) .treeview-menu { top: 358px; }

        /* Adaptation responsive du sous-menu dans le content-wrapper - TAILLES RÉDUITES */
        @media (max-width: 992px) {
            .sidebar-collapsed .treeview-menu {
                width: 150px; /* Largeur réduite pour tablettes (était 170px) */
                left: 75px;
            }
        }

        @media (max-width: 768px) {
            .sidebar-collapsed .treeview-menu {
                width: 130px; /* Largeur réduite pour mobile (était 150px) */
                left: 10px;
                right: auto;
                max-width: calc(100vw - 20px);
            }
            
            /* Réduire encore plus les éléments sur mobile */
            .sidebar-collapsed .treeview-menu > li > a {
                padding: 6px 10px; /* Padding réduit (était 8px 12px) */
                font-size: 11px; /* Taille réduite (était 12px) */
            }
            
            .sidebar-collapsed .treeview-menu > li > a i {
                margin-right: 5px; /* Marge réduite (était 6px) */
                width: 12px; /* Largeur réduite (était 14px) */
                font-size: 10px; /* Taille réduite (était 11px) */
            }
        }

        
        /* Scrollbar standard pour mode normal */
        .main-sidebar::-webkit-scrollbar {
            width: 8px;
        }

        .main-sidebar::-webkit-scrollbar-track {
            background: #1a2226;
        }

        .main-sidebar::-webkit-scrollbar-thumb {
            background: #3c8dbc;
            border-radius: 4px;
        }

        .main-sidebar::-webkit-scrollbar-thumb:hover {
            background: #367fa9;
        }

        /* Scrollbar très fine pour le mode réduit - POSITIONNÉE À GAUCHE */
        .sidebar-collapsed .main-sidebar::-webkit-scrollbar {
            width: 4px; /* Scrollbar très fine */
        }

        .sidebar-collapsed .main-sidebar::-webkit-scrollbar-track {
            background: rgba(26, 34, 38, 0.8);
            border-radius: 0;
        }

        .sidebar-collapsed .main-sidebar::-webkit-scrollbar-thumb {
            background: rgba(60, 141, 188, 0.7);
            border-radius: 2px;
            transition: all 0.3s ease;
        }

        .sidebar-collapsed .main-sidebar::-webkit-scrollbar-thumb:hover {
            background: rgba(54, 127, 169, 0.9);
        }

        /* Pour Firefox - Scrollbar fine en mode réduit */
        .sidebar-collapsed .main-sidebar {
            scrollbar-width: thin;
            scrollbar-color: rgba(60, 141, 188, 0.7) rgba(26, 34, 38, 0.8);
        }

        /* Amélioration de la zone de scroll pour une meilleure UX */
        .sidebar-collapsed .main-sidebar {
            padding-left: 2px; /* Petit espace pour la scrollbar à gauche */
            padding-right: 0;
        }

        /* Indicateur de scroll en mode réduit - À GAUCHE */
        .sidebar-collapsed .main-sidebar::before {
            content: "";
            position: absolute;
            top: 0;
            left: 0; /* Indicateur positionné à gauche */
            width: 1px;
            height: 100%;
            background: linear-gradient(to bottom, 
                rgba(60, 141, 188, 0.3) 0%, 
                rgba(60, 141, 188, 0.1) 50%, 
                rgba(60, 141, 188, 0.3) 100%);
            pointer-events: none;
            z-index: 1;
        }

        /* Animation douce pour le scroll */
        .sidebar-collapsed .main-sidebar {
            scroll-behavior: smooth;
        }

        /* Responsive */
        @media (max-width: 768px) {
            .main-sidebar {
                margin-left: -230px;
            }
            
            .content-wrapper {
                margin-left: 0;
            }
            
            .main-header {
                width: 100%;
                margin-left: 0;
            }
            
            /* Footer en mode mobile - Même taille que le content-wrapper */
            .main-footer {
                left: 0; /* Même position que le content-wrapper sur mobile */
            }
            
            .sidebar-mobile-open .main-sidebar {
                margin-left: 0;
            }
            
            .sidebar-mobile-open .content-wrapper {
                margin-left: 0;
            }

            .sidebar-mobile-open .main-footer {
                left: 0; /* Footer suit le content-wrapper */
            }

            .sidebar-collapsed .treeview-menu {
                left: 70px;
                width: 150px; /* Largeur réduite (était 180px) */
            }
            
            
            
        }


    </style>