/* ======================================================================
   sommaire.css — Sommaire lateral des articles de blog (source UNIQUE)
   Composant partage par tous les /blog/*.html. Charge APRES styles-common.css.
   NE CONTIENT PAS les .nav-item[data-section] (accents par section = inline,
   propres a chaque article). Modifier ici = synchro sur tous les articles.
   Genere depuis la reference le 2026-06-14.
   ====================================================================== */

.sidebar-nav{width:300px;flex-shrink:0;display:flex;flex-direction:column; background:var(--panel-bg); border-right:1px solid rgba(160,175,200,0.12); z-index:1;position:relative;overflow:hidden;}

.sidebar-nav::after{display:none}

/* Reading progress bar: subtle solid steel-grey instead of blue gradient (no AI tell). */ .sidebar-nav::before{content:'';position:absolute;top:0;right:0;width:2px; height:var(--scroll-progress,0%); background:rgba(160,175,200,0.35); z-index:10;transition:height 0.6s cubic-bezier(0.22,1,0.36,1);border-radius:2px;opacity:1;}

.sb-header{padding:20px 22px 16px;border-bottom:1px solid rgba(160,175,200,0.1); flex-shrink:0;position:relative;z-index:1;}

.sb-back{display:inline-flex;align-items:center;gap:6px; color:var(--text-muted);text-decoration:none; font-size:0.78rem;font-weight:600;letter-spacing:2px;text-transform:uppercase; transition:all 0.25s ease;margin-bottom:16px; padding:6px 12px;border-radius:6px;border:1px solid transparent;}

.sb-back:hover{color:var(--accent);background:rgba(160,175,200,0.06);border-color:rgba(160,175,200,0.12)}

.sb-back svg{flex-shrink:0;transition:transform 0.25s cubic-bezier(0.22,1,0.36,1)}

.sb-back:hover svg{transform:translateX(-4px)}

.sb-brand{display:flex;align-items:center;gap:14px}

.sb-article-icon{width:44px;height:44px;border-radius:12px; background:rgba(20,20,30,0.6);border:1px solid rgba(160,175,200,0.15); box-shadow:0 4px 16px rgba(0,0,0,0.3),0 0 0 1px rgba(255,255,255,0.04) inset; display:flex;align-items:center;justify-content:center;flex-shrink:0;color:rgba(96,165,250,0.7);}

.sb-brand-name{display:block;font-size:1.35rem;font-weight:700;color:#fff;letter-spacing:-0.3px;margin:0;line-height:1.2}

.sb-brand-sub{font-size:0.75rem;color:var(--text-muted);display:block;margin-top:2px}

.sidebar-nav-content{flex:1;overflow-y:auto;overflow-x:hidden;padding:16px 16px 30px; background:transparent;border:none;border-radius:0;box-shadow:none; position:relative;z-index:1;counter-reset:nav-counter;scrollbar-width:none;}

.sidebar-nav-content::-webkit-scrollbar{display:none}

.nav-item{counter-increment:nav-counter}

.nav-item{display:flex;align-items:flex-start;gap:0.65rem; padding:0.7rem 0.85rem;color:var(--text-muted);text-decoration:none !important; font-size:0.88rem;font-weight:500;border-radius:10px; transition:all 0.3s cubic-bezier(0.22,1,0.36,1); position:relative;margin-bottom:2px;cursor:pointer;}

.nav-item::after{display:none !important}

.nav-dot{width:24px;height:24px;border-radius:8px; background:rgba(160,175,200,0.06);border:1px solid rgba(160,175,200,0.1); flex-shrink:0;margin-top:1px;transition:all 0.35s cubic-bezier(0.22,1,0.36,1); display:flex;align-items:center;justify-content:center; font-size:0.6rem;font-weight:700;color:var(--text-muted); font-family:'IBM Plex Mono',monospace;}

.nav-dot::before{content:counter(nav-counter,decimal-leading-zero)}

.nav-item>span:last-child{display:flex;align-items:flex-start;gap:5px}

.nav-icon{width:14px;height:14px;flex-shrink:0;opacity:0.45; transition:opacity 0.3s ease,color 0.3s ease;display:block;margin-top:2px;}

.nav-item:hover .nav-icon{opacity:0.7}

.nav-item.active .nav-icon{opacity:1;color:var(--group-accent,#60a5fa)}

.nav-item:hover{color:#e0e4ea;background:rgba(160,175,200,0.06)}

.nav-item:hover .nav-dot{background:rgba(160,175,200,0.12);border-color:rgba(160,175,200,0.25);color:#e0e4ea}

.nav-item.active{color:#fff;font-weight:600;position:relative;z-index:2; background:color-mix(in srgb,var(--group-accent) 8%,transparent);}

.nav-item.active .nav-dot{background:var(--group-accent);border-color:var(--group-accent);color:#fff; box-shadow:0 0 12px color-mix(in srgb,var(--group-accent) 40%,transparent);}

.nav-item.active .nav-dot{animation:dotPulse 2.5s ease-in-out infinite}

.sb-back:focus-visible,.nav-item:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:8px}

.sb-progress-tracker{display:flex;align-items:center;gap:10px; padding:10px 16px 12px;border-top:1px solid rgba(160,175,200,0.06);flex-shrink:0;}

.sb-progress-bar-wrap{flex:1;height:3px;background:rgba(160,175,200,0.08);border-radius:3px;overflow:hidden}

.sb-progress-bar-fill{height:100%;width:0%;border-radius:3px;background:#60a5fa; transition:width 0.5s cubic-bezier(0.22,1,0.36,1);position:relative;}

.sb-progress-bar-fill::after{content:'';position:absolute;right:0;top:-2px;width:7px;height:7px; border-radius:50%;background:#60a5fa; opacity:0;transition:opacity 0.3s ease;}

.sb-progress-bar-fill.has-progress::after{opacity:1}

.sb-progress-label{font-size:0.68rem;font-weight:600;font-family:'IBM Plex Mono',monospace; color:var(--text-muted);white-space:nowrap;letter-spacing:0.5px;min-width:38px;text-align:right; transition:color 0.3s ease;}

/* ===== MOBILE ===== */ /* Mobile sommaire — centered pill + half-circle close (guide-style) */ .sidebar-toggle{display:none;position:fixed;bottom:24px;left:50%; transform:translateX(-50%);z-index:9991; height:44px;padding:0 20px;gap:8px; border-radius:22px; background:var(--accent,#6366f1);border:none; align-items:center;justify-content:center; color:#fff;cursor:pointer;font-size:13px;font-weight:600; box-shadow:0 2px 10px rgba(99,102,241,0.25); transition:opacity 0.3s ease,transform 0.3s cubic-bezier(0.16,1,0.3,1);}

.sidebar-toggle svg{width:18px;height:18px}

.sidebar-toggle.mob-open{opacity:0;pointer-events:none}

.sidebar-close{display:none;position:fixed; left:-60px;top:50%;transform:translateY(-50%); z-index:9992;width:24px;height:48px; border-radius:0 24px 24px 0; background:var(--accent,#6366f1); border:1px solid rgba(255,255,255,0.08);border-left:none; align-items:center;justify-content:center; color:#fff;cursor:pointer; box-shadow:4px 0 12px rgba(0,0,0,0.3); pointer-events:none; transition:left 0.35s cubic-bezier(0.22,1,0.36,1);}

.sidebar-close svg{width:16px;height:16px}

.sidebar-close.mob-open{left:300px;pointer-events:auto}

.sidebar-overlay{display:none;position:fixed;inset:0; background:rgba(0,0,0,0.55);z-index:9989; backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);}

.sidebar-overlay.open{display:block}

@media(max-width:900px){
  /* 3. Sidebar — fully hidden offscreen (width:300px + left:-320px = no bandeau) */
  .sidebar-nav{position:fixed!important;left:-320px!important;top:0!important; height:100vh!important;height:100dvh!important; width:300px!important;z-index:9990!important; transition:left 0.35s cubic-bezier(0.22,1,0.36,1)!important; overflow-y:auto!important;overflow-x:hidden!important;}
  .sidebar-nav.open{left:0!important}
  /* 4. Toggle/close buttons */
  .sidebar-toggle{display:flex}
  .sidebar-close{display:flex}
}

@media(min-width:901px){
  .sidebar-toggle{display:none !important}
  .sidebar-close{display:none !important}
  .sidebar-overlay{display:none !important}
}

/* ===== LIGHT THEME ===== */ [data-theme="light"] .sidebar-nav{border-right-color:var(--border);}

[data-theme="light"] .sb-header{border-bottom-color:var(--border)}

[data-theme="light"] .sb-article-icon{background:var(--bg-elevated);border-color:var(--border)}

[data-theme="light"] .sb-brand-name{color:var(--text)}

[data-theme="light"] .nav-item:hover{color:var(--text-dim);background:rgba(0,0,0,0.04)}

[data-theme="light"] .nav-item:hover .nav-dot{background:rgba(0,0,0,0.06);border-color:rgba(0,0,0,0.12);color:var(--text-dim)}

[data-theme="light"] .nav-item.active{color:var(--text)}

[data-theme="light"] .nav-item.active .nav-dot{color:#fff}

[data-theme="light"] .nav-dot{background:rgba(0,0,0,0.03);border-color:rgba(0,0,0,0.06)}

[data-theme="light"] .sb-progress-tracker{border-top-color:var(--border)}

[data-theme="light"] .sb-progress-bar-wrap{background:rgba(0,0,0,0.06)}

[data-theme="light"] .sidebar-overlay{background:rgba(0,0,0,0.3)}