:root{
  --sb-w: 260px;
  --primary: #0d6e5e;      /* vert pharmaceutique */
  --primary-dark: #095046;
  --sidebar-bg: #10241f;
  --sidebar-fg: #c9d6d1;
  /* Menu latéral — panneau de verre sur dégradé */
  --sb-1: #0b3d33;         /* vert profond    */
  --sb-2: #10614f;         /* émeraude        */
  --sb-3: #0a2f3d;         /* teinte océan    */
  --sb-4: #123a2e;         /* retour au vert  */
  --sb-text: #eaf5f1;      /* texte sur verre */
  --sb-label: rgba(234,245,241,.78);
  --sb-accent: #6ff0b6;
  --sb-line: rgba(255,255,255,.10);
}
*{box-sizing:border-box}
body{margin:0;font-family:system-ui,-apple-system,"Segoe UI",Roboto,sans-serif;background:#f2f4f6;color:#1f2937}

/* Layout */
.app-wrapper{display:flex;min-height:100vh}
.sidebar{width:var(--sb-w);background:var(--sidebar-bg);color:var(--sidebar-fg);position:fixed;top:0;left:0;bottom:0;overflow-y:auto;transition:transform .25s;z-index:1040}
.app-main{flex:1;margin-left:var(--sb-w);display:flex;flex-direction:column;min-width:0}
.app-content{padding:1.25rem;flex:1}
.app-footer{padding:.75rem 1.25rem;font-size:.8rem;color:#6b7280;border-top:1px solid #e5e7eb;background:#fff}

/* Sidebar : voir le bloc « Menu latéral » en fin de fichier */

/* Topbar */
.topbar{display:flex;align-items:center;gap:1rem;background:#fff;padding:.6rem 1.25rem;border-bottom:1px solid #e5e7eb;position:sticky;top:0;z-index:1030}
.topbar-title{font-size:1.1rem;font-weight:600;margin:0}

/* Cards / tables */
.card{border:1px solid #e5e7eb;border-radius:.6rem;box-shadow:0 1px 2px rgba(0,0,0,.04)}
.card-header{background:#fff;border-bottom:1px solid #eef0f2;font-weight:600}
.table thead th{background:#f8fafc;font-size:.78rem;text-transform:uppercase;letter-spacing:.03em;color:#64748b;border-bottom:2px solid #e5e7eb}
.table td,.table th{vertical-align:middle}
.btn-primary{background:var(--primary);border-color:var(--primary)}
.btn-primary:hover{background:var(--primary-dark);border-color:var(--primary-dark)}
.text-primary{color:var(--primary)!important}
a{color:var(--primary)}

/* Stat cards */
.stat-card{border-radius:.7rem;padding:1.1rem 1.25rem;color:#fff;position:relative;overflow:hidden}
.stat-card .stat-value{font-size:1.7rem;font-weight:700;line-height:1}
.stat-card .stat-label{font-size:.82rem;opacity:.9;margin-top:.3rem}
.stat-card .stat-icon{position:absolute;right:.9rem;top:.7rem;font-size:2.6rem;opacity:.25}
.bg-grad-1{background:linear-gradient(135deg,#0d6e5e,#12a685)}
.bg-grad-2{background:linear-gradient(135deg,#2563eb,#3b82f6)}
.bg-grad-3{background:linear-gradient(135deg,#d97706,#f59e0b)}
.bg-grad-4{background:linear-gradient(135deg,#7c3aed,#a855f7)}
.bg-grad-5{background:linear-gradient(135deg,#dc2626,#ef4444)}

/* Badges type comptabilité */
.badge-formel{background:#dcfce7;color:#166534}
.badge-informel{background:#fef9c3;color:#854d0e}

.login-wrap{min-height:100vh;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#0d6e5e,#10241f)}
.login-card{width:100%;max-width:400px;background:#fff;border-radius:.8rem;padding:2rem;box-shadow:0 10px 40px rgba(0,0,0,.25)}

/* Responsive */
@media (max-width: 991px){
  .sidebar{transform:translateX(-100%)}
  .sidebar.show{transform:translateX(0)}
  .app-main{margin-left:0}
}
@media print{
  .sidebar,.topbar,.app-footer,.no-print{display:none!important}
  .app-main{margin-left:0}
  .app-content{padding:0}
}

/* ==========================================================================
   MENU LATÉRAL — panneau de verre
   Un dégradé fixe est peint derrière le menu ; le menu lui-même est
   translucide et floute ce qui se trouve dessous (effet « verre dépoli »).
   Le repère « vous êtes ici » est une pastille givrée plus claire.
   ========================================================================== */

/* Le dégradé est peint directement sur le menu : il sert de matière
   au verre dépoli des éléments posés dessus (pastille active, tuile du logo). */
.sidebar{
  background:
    linear-gradient(180deg, rgba(4,22,18,0) 0%, rgba(4,22,18,.12) 100%),
    radial-gradient(120% 80% at 0% 0%,    var(--sb-2) 0%, transparent 60%),
    radial-gradient(100% 70% at 100% 30%, var(--sb-3) 0%, transparent 65%),
    radial-gradient(120% 60% at 20% 100%, var(--sb-4) 0%, transparent 70%),
    linear-gradient(160deg, var(--sb-1) 0%, #071f1a 100%);
  background-attachment:fixed, fixed, fixed, fixed, fixed;
  border-right:1px solid rgba(255,255,255,.10);
  color:var(--sb-text);
  display:flex;flex-direction:column;
}
.sidebar{scrollbar-width:thin;scrollbar-color:rgba(255,255,255,.22) transparent}
.sidebar::-webkit-scrollbar{width:6px}
.sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,.22);border-radius:3px}
.sidebar::-webkit-scrollbar-track{background:transparent}

/* ----- Bandeau d'identité ----- */
.sidebar-brand{
  display:flex;align-items:center;gap:.7rem;
  padding:1rem 1.1rem;
  border-bottom:1px solid var(--sb-line);
  color:#fff;text-decoration:none;
}
.sidebar-brand .brand-croix{
  flex:0 0 auto;width:34px;height:34px;border-radius:11px;
  display:grid;place-items:center;
  background:rgba(255,255,255,.16);
  border:1px solid rgba(255,255,255,.28);
  -webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  color:#fff;font-size:1.05rem;
}
.sidebar-brand .brand-texte{min-width:0}
.sidebar-brand .brand-nom{
  display:block;font-weight:600;font-size:.95rem;line-height:1.2;color:#fff;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.sidebar-brand .brand-produit{
  display:block;font-size:.66rem;letter-spacing:.06em;
  color:var(--sb-label);margin-top:.15rem;
}

.sidebar-nav{padding:.6rem .7rem 2rem;flex:1}
.sidebar-nav > .nav-link:first-child{margin-bottom:.5rem}

/* ----- Liens ----- */
.sidebar-nav .nav-link{
  display:flex;align-items:center;gap:.7rem;
  color:rgba(234,245,241,.92);
  padding:.55rem .75rem;
  margin:.12rem 0;
  font-size:.875rem;font-weight:400;
  text-decoration:none;
  border:1px solid transparent;
  border-radius:11px;
  transition:background .14s ease, color .14s ease;
}
.sidebar-nav .nav-link i{width:18px;text-align:center;font-size:1rem;opacity:.85;flex:0 0 auto}
.nav-texte{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sidebar-nav .nav-link:hover{background:rgba(255,255,255,.08);color:#fff}
.sidebar-nav .nav-link:hover i{opacity:1}

/* Signature : l'écran courant est une pastille de verre plus claire */
.sidebar-nav .nav-link.active{
  background:rgba(255,255,255,.17);
  border-color:rgba(255,255,255,.26);
  -webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);
  color:#fff;font-weight:600;
  box-shadow:0 2px 12px rgba(0,0,0,.16), inset 0 1px 0 rgba(255,255,255,.22);
}
.sidebar-nav .nav-link.active i{opacity:1;color:#fff}

/* ----- Compteurs ----- */
.nav-badge{
  flex:0 0 auto;margin-left:auto;
  font-size:.72rem;font-weight:600;font-variant-numeric:tabular-nums;
  color:rgba(234,245,241,.85);
  padding:0 .1rem;
}
.nav-link.active .nav-badge{color:#fff}
/* Ce qui appelle une action : pastille pleine, discrète mais lisible */
.nav-badge-alerte{
  color:#fff;background:rgba(255,120,110,.85);
  min-width:20px;text-align:center;
  padding:.05rem .35rem;border-radius:999px;
  font-size:.68rem;
}

/* ----- Sections repliables ----- */
.nav-group + .nav-group{border-top:1px solid var(--sb-line)}
.nav-section-toggle{
  display:flex;align-items:center;gap:.7rem;width:100%;
  background:none;border:0;color:var(--sb-label);
  padding:.8rem .75rem .5rem;
  font-size:.74rem;font-weight:500;
  letter-spacing:.02em;text-align:left;
  border-radius:11px;
  transition:color .14s ease;
}
.nav-section-toggle:hover{color:#fff}
.nav-section-toggle > i:first-child{width:18px;text-align:center;font-size:.9rem;flex:0 0 auto;opacity:.8}
.nav-section-titre{flex:1;min-width:0}
.nav-chevron{font-size:.62rem;opacity:.55;transition:transform .2s ease}
.nav-section-toggle.collapsed .nav-chevron{transform:rotate(-90deg)}
.nav-group-active > .nav-section-toggle{color:#fff}
.nav-group-active > .nav-section-toggle > i:first-child{opacity:1}
.nav-group-items{padding:0 0 .45rem 0}

/* Accessibilité */
.sidebar-nav .nav-link:focus-visible,
.nav-section-toggle:focus-visible,
.sidebar-brand:focus-visible{outline:2px solid var(--sb-accent);outline-offset:-2px}

@media (prefers-reduced-motion: reduce){
  .sidebar-nav .nav-link,.nav-chevron,.nav-section-toggle{transition:none}
}