:root {
        --sb-width: 250px; /* largeur du menu latéral */
        --sb-width-mini: 72px; /* largeur réduite (desktop) */
        --sb-bg: #1b2a38;
        --sb-text: #b8c4d0;
        --accent: #0f8b8d;
        --page-bg: #f2f4f7;
        --header-h: 64px;
      }
      body {
        font-family: "IBM Plex Sans", system-ui, sans-serif;
        background: var(--page-bg);
      }

      /* ---------- Menu latéral ---------- */
      #sidebar {
        position: fixed;
        inset: 0 auto 0 0;
        width: var(--sb-width);
        background: var(--sb-bg);
        color: var(--sb-text);
        display: flex;
        flex-direction: column;
        z-index: 1040;
        transition:
          width 0.2s ease,
          transform 0.2s ease;
        overflow-x: hidden;
      }
      #sidebar .brand {
        height: var(--header-h);
        display: flex;
        align-items: center;
        gap: 0.75rem;
        padding: 0 1.4rem;
        color: #fff;
        font-weight: 600;
        white-space: nowrap;
        border-bottom: 1px solid rgba(255, 255, 255, 0.08);
      }
      #sidebar .brand i {
        font-size: 1.4rem;
        color: #3cc7c9;
      }
      #sidebar .menu-title {
        padding: 1.1rem 1.4rem 0.4rem;
        font-size: 0.8rem;
        color: #7d8d9d;
        white-space: nowrap;
      }
      #sidebar .nav-link {
        display: flex;
        align-items: center;
        gap: 0.85rem;
        padding: 0.7rem 1.4rem;
        color: var(--sb-text);
        white-space: nowrap;
        border-left: 3px solid transparent;
      }
      #sidebar .nav-link i {
        font-size: 1.15rem;
        min-width: 1.4rem;
      }
      #sidebar .nav-link:hover {
        color: #fff;
        background: rgba(255, 255, 255, 0.05);
      }
      #sidebar .nav-link.active {
        color: #fff;
        background: rgba(15, 139, 141, 0.22);
        border-left-color: #3cc7c9;
      }
      #sidebar .sb-footer {
        margin-top: auto;
        padding: 1rem 1.4rem;
        font-size: 0.8rem;
        color: #7d8d9d;
        white-space: nowrap;
      }

      /* ---------- Contenu principal ---------- */
      #main {
        margin-left: var(--sb-width);
        min-height: 100vh;
        transition: margin-left 0.2s ease;
      }
      #header {
        position: sticky;
        top: 0;
        z-index: 1030;
        height: var(--header-h);
        background: #fff;
        display: flex;
        align-items: center;
        gap: 1rem;
        padding: 0 1.25rem;
        border-bottom: 1px solid #e3e7ec;
      }
      #workspace {
        padding: 1.5rem;
      }

      /* Desktop : menu réduit (icônes seules) */
      @media (min-width: 992px) {
        body.sb-mini #sidebar {
          width: var(--sb-width-mini);
        }
        body.sb-mini #main {
          margin-left: var(--sb-width-mini);
        }
        body.sb-mini #sidebar .label,
        body.sb-mini #sidebar .menu-title,
        body.sb-mini #sidebar .sb-footer {
          display: none;
        }
        body.sb-mini #sidebar .nav-link,
        body.sb-mini #sidebar .brand {
          padding-left: 1.5rem;
        }
      }
      /* Mobile / tablette : menu masqué, ouvert par-dessus le contenu */
      @media (max-width: 991.98px) {
        #sidebar {
          transform: translateX(-100%);
        }
        body.sb-open #sidebar {
          transform: translateX(0);
        }
        #main {
          margin-left: 0;
        }
        #overlay {
          display: none;
          position: fixed;
          inset: 0;
          background: rgba(10, 20, 30, 0.45);
          z-index: 1035;
        }
        body.sb-open #overlay {
          display: block;
        }
      }

      /* ---------- Composants ---------- */
      .panel {
        background: #fff;
        border: 1px solid #e3e7ec;
        border-radius: 0.6rem;
      }
      .stat-icon {
        width: 46px;
        height: 46px;
        display: grid;
        place-items: center;
        border-radius: 0.6rem;
        font-size: 1.3rem;
      }
      .btn-accent {
        background: var(--accent);
        color: #fff;
        border-color: var(--accent);
      }
      .btn-accent:hover {
        background: #0b7274;
        color: #fff;
      }

      .text-accent {
        color: var(--accent);
      }
      
      .avatar {
        width: 38px;
        height: 38px;
        border-radius: 50%;
        background: var(--accent);
        color: #fff;
        display: grid;
        place-items: center;
        font-weight: 600;
        font-size: 0.9rem;
      }
      .view {
        display: none;
      }
      .view.active {
        display: block;
      }
      :focus-visible {
        outline: 2px solid var(--accent);
        outline-offset: 2px;
      }

      .logo{
        width: 40px;
        height: 40px;
        border-radius: 50%;
      }