/* =============================================================================
   SIDEBAR V3 — Pattern briques + sous-nav contextuelle
   =============================================================================
   Référence : TICKET-SIDEBAR-V3-INTEGRATION.md
   Mockups source : mockups/mockup-sidebar-v3-patron.html · -metreur.html

   Préfixe CSS : .sb-v3-* (cohabite avec l'ancien .sb-* pendant la transition)

   Pattern : sidebar fixe à 240 px, JAMAIS hover-to-open. Auto-collapse en rail
   64 px dès qu'une brique est active. Pour les rôles à <= 8 pages, mode "pages
   directes" (pas de sous-nav).

   Tokens : --green, --green-dark, --text, --text2, --muted, --bg, --card,
   --border, --shadow-*, --radius-* (déclarés dans css/global.css).

   Date : 2026-05-08 — Maxime Danna + Claude
   ============================================================================= */

/* Override legacy #sidebar de global.css — neutralise les anciens styles */
#sidebar.sb-v3{
  width:auto;
  overflow:visible;
  background:none;
  border-right:none;
  box-shadow:none;
  transition:none;
}
#app.sidebar-hidden #sidebar.sb-v3{width:auto;}
#app.sidebar-hidden #sidebar.sb-v3 .sb-v3__brand,
#app.sidebar-hidden #sidebar.sb-v3 .sb-v3__nav{opacity:1;pointer-events:auto;}

:root{
  --sbv3-width:240px;
  --sbv3-collapsed:64px;
  --sbv3-subnav-width:220px;
}

/* ─── ROOT SIDEBAR ──────────────────────────────────────────── */
.sb-v3{
  width:var(--sbv3-width);
  background:#F5FAF6;
  border-right:1px solid var(--border);
  display:flex;
  flex-direction:column;
  flex-shrink:0;
  position:relative;
  box-shadow:inset 6px 0 0 var(--green);
  transition:width .25s cubic-bezier(.25,.46,.45,.94);
  height:100vh;
  overflow:hidden;
}

/* Le rail est FIXE : on coupe tout ce qui permet de le « décaler ».
   1. Drag natif des icônes SVG (fantôme de drag = vignette noire).
   2. Sélection de texte parasite.
   3. Barre de défilement — la « vignette grise » que voyait Maxime était
      l'ascenseur macOS d'un conteneur du rail qui déborde quand la
      fenêtre est courte (≈ 700 px de haut). On masque l'ascenseur partout
      dans le rail : le contenu reste atteignable à la molette, mais plus
      aucune barre n'est affichée ni glissable. */
.sb-v3,
.sb-v3 *{
  -webkit-user-drag:none;
  user-select:none;
  -webkit-user-select:none;
  scrollbar-width:none;        /* Firefox */
  -ms-overflow-style:none;     /* Edge legacy */
}
.sb-v3 svg,
.sb-v3 img{
  -webkit-user-drag:none;
  pointer-events:none;
}
.sb-v3::-webkit-scrollbar,
.sb-v3 *::-webkit-scrollbar{
  width:0;
  height:0;
  display:none;                /* Chrome / Safari */
}

/* ─── BANDEAU MARQUE (brand-mark intégré) ─────────────────── */
.sb-v3__brand{
  padding:24px 20px 18px 28px;
  border-bottom:1px solid var(--border);
  display:flex;
  align-items:center;
  gap:10px;
  flex-shrink:0;
}
.sb-v3__brand-bar{
  width:8px;height:36px;
  background:var(--green);
  border-radius:3px;
  flex-shrink:0;
}
/* Favicon Menuiseries d'Artois (remplace .sb-v3__brand-bar — décision Maxime 2026-05-11) */
.sb-v3__brand-icon{
  width:40px;height:40px;
  border-radius:8px;
  object-fit:contain;
  flex-shrink:0;
  display:block;
}
.sb-v3__brand-text{
  display:flex;flex-direction:column;
  min-width:0;
}
.sb-v3__brand-name{
  font-family:var(--font);
  font-weight:900;
  font-size:16px;
  letter-spacing:-.4px;
  color:var(--text);
  line-height:1.1;
  white-space:nowrap;
}
.sb-v3__brand-name span{color:var(--green)}
.sb-v3__brand-user{
  font-family:var(--font-serif,Georgia,serif);
  font-style:italic;
  font-size:11px;
  color:var(--muted);
  margin-top:4px;
  letter-spacing:.2px;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}

/* ─── BARRE DE RECHERCHE (Ctrl+Shift+K) ─────────────────── */
.sb-v3__search{
  margin:14px 16px 8px;
  background:#fff;
  border:1px solid var(--border);
  border-radius:var(--radius-md,12px);
  padding:9px 12px;
  display:flex;
  align-items:center;
  gap:9px;
  cursor:pointer;
  transition:border-color .15s,box-shadow .15s;
  box-shadow:var(--shadow-xs,0 1px 2px rgba(13,27,15,.04));
  font-family:var(--font);
  flex-shrink:0;
}
.sb-v3__search:hover{
  border-color:var(--green-border,rgba(47,191,122,.3));
  box-shadow:0 2px 8px rgba(13,27,15,.06),0 0 0 3px rgba(47,191,122,.25);
}
.sb-v3__search-icon{
  width:14px;height:14px;
  color:var(--muted);
  flex-shrink:0;
}
.sb-v3__search-text{
  flex:1;
  font-size:12px;
  color:var(--muted);
  font-weight:400;
  white-space:nowrap;
  overflow:hidden;
  text-overflow:ellipsis;
}
.sb-v3__search-kbd{
  display:flex;
  gap:2px;
  flex-shrink:0;
}
.sb-v3__search-kbd kbd{
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:4px;
  padding:1px 5px;
  font-size:10px;
  font-family:var(--font);
  font-weight:700;
  color:var(--text2);
  line-height:1.4;
}

/* ─── NAV PRINCIPALE (briques ou pages directes) ─────────── */
.sb-v3__nav{
  flex:1;
  overflow-y:auto;
  padding:8px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sb-v3__section{
  font-size:10px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:14px 16px 6px;
  white-space:nowrap;
}
.sb-v3__sep{
  height:1px;
  background:var(--border);
  margin:8px 16px;
  opacity:.6;
}

/* ─── ITEM NAV (page directe ou brique) ──────────────────── */
.sb-v3__item{
  display:flex;
  align-items:center;
  gap:11px;
  padding:9px 14px;
  border-radius:var(--radius-md,12px);
  cursor:pointer;
  font-family:var(--font);
  font-size:13px;
  font-weight:700;
  color:var(--text2);
  background:none;
  border:none;
  width:100%;
  text-align:left;
  transition:background .15s,color .15s,box-shadow .15s;
  position:relative;
}
.sb-v3__item:hover{
  background:rgba(255,255,255,.7);
  color:var(--green-dark);
}
.sb-v3__item.is-active{
  background:#fff;
  color:var(--green-dark);
  box-shadow:0 0 0 1px var(--green-border,rgba(47,191,122,.3)),var(--shadow-xs,0 1px 2px rgba(13,27,15,.04));
}
.sb-v3__item.is-active::before{
  content:"";
  position:absolute;
  left:-12px;top:6px;bottom:6px;
  width:3px;
  background:var(--green);
  border-radius:0 3px 3px 0;
}
.sb-v3__item svg{
  width:18px;height:18px;
  stroke-width:1.7;
  flex-shrink:0;
  opacity:.85;
}
.sb-v3__item.is-active svg{opacity:1;color:var(--green)}

.sb-v3__item-chev{
  margin-left:auto;
  width:14px;height:14px;
  opacity:.4;
  flex-shrink:0;
  transition:opacity .15s,transform .15s;
}
.sb-v3__item:hover .sb-v3__item-chev,
.sb-v3__item.is-active .sb-v3__item-chev{opacity:.9}
.sb-v3__item.is-active .sb-v3__item-chev{
  transform:translateX(2px);
  color:var(--green);
}

.sb-v3__item-badge{
  margin-left:auto;
  background:var(--green-soft,rgba(47,191,122,.1));
  color:var(--green-dark);
  font-size:10px;
  font-weight:900;
  padding:2px 7px;
  border-radius:var(--radius-pill,100px);
}
.sb-v3__item-badge--alert{
  background:#FFF8EB;
  color:#C97800;
}

/* Badge boîte réception — mails non assignés */
.sb-v3__badge{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  min-width:16px;height:16px;
  padding:0 4px;
  margin-left:6px;
  background:var(--red);
  color:#fff;
  font-size:10px;
  font-weight:800;
  border-radius:100px;
  vertical-align:middle;
  line-height:1;
}

/* ─── PIED ────────────────────────────────────────────────── */
.sb-v3__footer{
  padding:14px 16px 16px;
  border-top:1px solid var(--border);
  display:flex;
  flex-direction:column;
  gap:10px;
  background:rgba(255,255,255,.4);
  flex-shrink:0;
}
.sb-v3__note{
  position:relative;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:8px;
  padding:11px 14px;
  border-radius:var(--radius-pill,100px);
  background:var(--green);
  color:#fff;
  font-family:var(--font);
  font-weight:900;
  font-size:13px;
  letter-spacing:-.1px;
  border:none;
  cursor:pointer;
  box-shadow:0 4px 14px rgba(47,191,122,.35),inset 0 1px 0 rgba(255,255,255,.25);
  transition:transform .12s,box-shadow .15s,background .15s;
}
.sb-v3__note:hover{
  background:var(--green-hover,#25A868);
  transform:translateY(-1px);
  box-shadow:0 6px 18px rgba(47,191,122,.45),inset 0 1px 0 rgba(255,255,255,.3);
}
.sb-v3__note-plus{
  display:inline-flex;
  align-items:center;justify-content:center;
  width:18px;height:18px;
  border-radius:50%;
  background:rgba(255,255,255,.2);
  font-size:14px;line-height:1;
  font-weight:900;
}
.sb-v3__note-kbd{
  position:absolute;
  right:14px;top:50%;
  transform:translateY(-50%);
  font-size:9px;
  background:rgba(0,0,0,.18);
  padding:2px 6px;
  border-radius:4px;
  letter-spacing:1px;
  font-weight:700;
}
.sb-v3__footrow{
  display:flex;
  align-items:center;
  justify-content:space-between;
  padding:0 4px;
}
.sb-v3__collapse,
.sb-v3__logout{
  display:flex;
  align-items:center;
  gap:7px;
  padding:6px 8px;
  border-radius:var(--radius-md,12px);
  cursor:pointer;
  font-family:var(--font);
  font-size:11px;
  color:var(--muted);
  background:none;
  border:none;
  font-weight:700;
  transition:color .15s,background .15s;
}
.sb-v3__collapse:hover{
  color:var(--green-dark);
  background:var(--green-soft,rgba(47,191,122,.1));
}
.sb-v3__logout:hover{color:var(--red,#E02020)}
.sb-v3__collapse svg,
.sb-v3__logout svg{
  width:13px;height:13px;
  stroke-width:2;
}

/* ═════════════════════════════════════════════════════════════
   MODE COLLAPSED — sidebar à 64 px
   Activé soit par auto-collapse (brique active) soit par bouton "Réduire"
   ═════════════════════════════════════════════════════════════ */
.sb-v3.is-collapsed{
  width:var(--sbv3-collapsed);
}
.sb-v3.is-collapsed .sb-v3__brand{
  padding:18px 0;
  justify-content:center;
  border-bottom:1px solid var(--border);
}
.sb-v3.is-collapsed .sb-v3__brand-bar{
  height:32px;
  width:6px;
}
.sb-v3.is-collapsed .sb-v3__brand-text,
.sb-v3.is-collapsed .sb-v3__search-text,
.sb-v3.is-collapsed .sb-v3__search-kbd,
.sb-v3.is-collapsed .sb-v3__section,
.sb-v3.is-collapsed .sb-v3__label,
.sb-v3.is-collapsed .sb-v3__item-chev,
.sb-v3.is-collapsed .sb-v3__item-badge,
.sb-v3.is-collapsed .sb-v3__note-kbd,
.sb-v3.is-collapsed .sb-v3__note span,
.sb-v3.is-collapsed .sb-v3__collapse span,
.sb-v3.is-collapsed .sb-v3__logout span{
  display:none;
}
.sb-v3.is-collapsed .sb-v3__search{
  margin:12px 12px 4px;
  padding:10px;
  justify-content:center;
}
.sb-v3.is-collapsed .sb-v3__search-icon{
  width:16px;height:16px;
}
.sb-v3.is-collapsed .sb-v3__nav{
  padding:8px;
  align-items:center;
}
.sb-v3.is-collapsed .sb-v3__item{
  width:44px;height:44px;
  padding:0;
  justify-content:center;
  font-size:0; /* masque le label texte direct, le SVG et le tip restent visibles */
}
.sb-v3.is-collapsed .sb-v3__item .sb-v3__tip{font-size:12px}
.sb-v3.is-collapsed .sb-v3__item.is-active::before{
  left:-8px;top:8px;bottom:8px;
}
.sb-v3.is-collapsed .sb-v3__item svg{
  width:20px;height:20px;
}
.sb-v3.is-collapsed .sb-v3__footer{
  padding:12px 8px;
  align-items:center;
}
.sb-v3.is-collapsed .sb-v3__note{
  width:44px;height:44px;
  padding:0;
  border-radius:50%;
  font-size:0;
}
.sb-v3.is-collapsed .sb-v3__note-plus{
  width:22px;height:22px;
  font-size:18px;
}
.sb-v3.is-collapsed .sb-v3__footrow{
  flex-direction:column;
  gap:4px;
}
.sb-v3.is-collapsed .sb-v3__collapse,
.sb-v3.is-collapsed .sb-v3__logout{
  width:36px;height:36px;
  padding:0;
  justify-content:center;
}
.sb-v3.is-collapsed .sb-v3__collapse svg{transform:scaleX(-1)}

/* ─── TOOLTIP — bulle à droite, sidebar ne bouge JAMAIS ─── */
.sb-v3__item{position:relative}
.sb-v3__tip{
  position:absolute;
  left:calc(100% + 14px);
  top:50%;
  transform:translateY(-50%) translateX(-6px);
  background:var(--text);
  color:#fff;
  padding:7px 12px;
  border-radius:var(--radius-md,12px);
  font-size:12px;
  font-weight:700;
  white-space:nowrap;
  opacity:0;
  pointer-events:none;
  transition:opacity .15s,transform .15s;
  z-index:50;
  box-shadow:var(--shadow-md,0 4px 16px rgba(13,27,15,.08));
  font-family:var(--font);
}
.sb-v3__tip::before{
  content:"";
  position:absolute;
  left:-5px;top:50%;
  transform:translateY(-50%) rotate(45deg);
  width:9px;height:9px;
  background:var(--text);
  border-radius:2px;
}
/* Affiché uniquement en mode collapsed au hover */
.sb-v3.is-collapsed .sb-v3__item:hover .sb-v3__tip{
  opacity:1;
  transform:translateY(-50%) translateX(0);
}
.sb-v3:not(.is-collapsed) .sb-v3__tip{display:none}

/* ═════════════════════════════════════════════════════════════
   2e COLONNE — SOUS-NAV CONTEXTUELLE (pattern Slack/Discord/VSCode)
   ═════════════════════════════════════════════════════════════ */
.sb-v3-subnav{
  width:var(--sbv3-subnav-width);
  background:#fff;
  border-right:1px solid var(--border);
  flex-shrink:0;
  display:flex;
  flex-direction:column;
  height:100vh;
  overflow:hidden;
  transition:width 220ms cubic-bezier(.16,1,.3,1),
             border-right-color 220ms cubic-bezier(.16,1,.3,1);
}
/* État rétracté : largeur 0 + contenu masqué, anime la fermeture en douceur */
.sb-v3-subnav.is-collapsed{
  width:0;
  border-right-color:transparent;
}
.sb-v3-subnav.is-collapsed > *{
  opacity:0;
  transition:opacity 150ms cubic-bezier(.16,1,.3,1);
  pointer-events:none;
}
.sb-v3-subnav > *{
  transition:opacity 220ms cubic-bezier(.16,1,.3,1);
}
.sb-v3-subnav__head{
  padding:24px 22px 14px;
  border-bottom:1px solid var(--border);
  flex-shrink:0;
}
.sb-v3-subnav__crumb{
  font-size:10px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
  margin-bottom:4px;
  font-family:var(--font);
}
.sb-v3-subnav__title{
  font-family:var(--font);
  font-weight:900;
  font-size:20px;
  letter-spacing:-.4px;
  color:var(--text);
  margin:0;
  display:flex;
  align-items:center;
  gap:10px;
}
.sb-v3-subnav__title svg{
  width:22px;height:22px;
  color:var(--green);
  stroke-width:2;
}
.sb-v3-subnav__count{
  font-family:var(--font-serif,Georgia,serif);
  font-style:italic;
  color:var(--muted);
  font-size:12px;
  font-weight:400;
  margin-top:6px;
}
.sb-v3-subnav__list{
  flex:1;
  overflow-y:auto;
  padding:10px 12px;
  display:flex;
  flex-direction:column;
  gap:2px;
}
.sb-v3-subnav__group{
  font-size:10px;
  font-weight:900;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
  padding:14px 14px 6px;
  font-family:var(--font);
}
.sb-v3-subnav__item{
  display:flex;
  align-items:center;
  gap:10px;
  padding:9px 12px;
  border-radius:var(--radius-md,12px);
  cursor:pointer;
  font-size:13px;
  font-weight:700;
  color:var(--text2);
  background:none;
  border:none;
  width:100%;
  text-align:left;
  font-family:var(--font);
  transition:background .15s,color .15s;
  position:relative;
}
.sb-v3-subnav__item:hover{
  background:var(--green-soft,rgba(47,191,122,.1));
  color:var(--green-dark);
}
.sb-v3-subnav__item.is-active{
  background:var(--green-soft,rgba(47,191,122,.1));
  color:var(--green-dark);
  box-shadow:inset 0 0 0 1px var(--green-border,rgba(47,191,122,.3));
}
.sb-v3-subnav__item.is-active::before{
  content:"";
  position:absolute;
  left:-12px;top:8px;bottom:8px;
  width:3px;
  background:var(--green);
  border-radius:0 3px 3px 0;
}
.sb-v3-subnav__item svg{
  width:16px;height:16px;
  stroke-width:1.7;
  flex-shrink:0;
  opacity:.7;
}
.sb-v3-subnav__item.is-active svg{
  opacity:1;
  color:var(--green);
}
.sb-v3-subnav__item-badge{
  margin-left:auto;
  background:var(--green-soft,rgba(47,191,122,.1));
  color:var(--green-dark);
  font-size:10px;
  font-weight:900;
  padding:2px 7px;
  border-radius:var(--radius-pill,100px);
}
.sb-v3-subnav__item-badge--alert{
  background:#FFF8EB;
  color:#C97800;
}

/* ═════════════════════════════════════════════════════════════
   GLOBAL — couleur de focus accessibilité
   ═════════════════════════════════════════════════════════════ */
.sb-v3 button:focus-visible,
.sb-v3-subnav button:focus-visible{
  outline:none;
  box-shadow:0 0 0 3px rgba(47,191,122,.25);
}