/* ============================================================
   SDD PORTAL — DESIGN SYSTEM STITCH DARK (variante-a)
   Source : design-system-digital-spring/variante-a.html
   Zéro CDN, zéro font web — fallbacks system-ui / ui-monospace.
   ============================================================ */
:root{
  --surface-lowest:#0A0F0D;
  --surface:#0F1412;
  --surface-low:#181D1A;
  --surface-container:#1C211E;
  --surface-high:#262B29;
  --surface-highest:#313633;
  --primary:#4BE277;
  --primary-fixed:#6BFF8F;
  --primary-container:#22C55E;
  --on-primary:#003915;
  --secondary:#4EDEA3;
  --on-surface:#DFE4E0;
  --on-surface-variant:#BCCBB9;
  --outline:#869585;
  --outline-variant:#3D4A3D;
  --error:#FFB4AB;
  --tertiary:#AFC7FF;
  --sp-1:4px; --sp-2:8px; --sp-3:12px; --sp-4:16px;
  --sp-6:24px; --sp-8:32px; --sp-12:48px; --sp-16:64px;
  --r-none:0px; --r-sm:2px; --r-md:4px; --r-lg:8px; --r-xl:12px;
  --font-mono:ui-monospace,"JetBrains Mono","SF Mono",Menlo,Consolas,monospace;
  --font-sans:system-ui,-apple-system,"Segoe UI",Inter,Arial,sans-serif;
}
*{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{background:var(--surface-lowest);color:var(--on-surface);font-family:var(--font-sans);line-height:1.6;font-size:1rem;min-height:100vh}
h1,h2,h3,h4,.mono{font-family:var(--font-mono)}
a{color:var(--primary);text-decoration:none}
code{font-family:var(--font-mono);font-size:.875rem;background:var(--surface-container);padding:2px 6px;border-radius:var(--r-sm)}

/* ── Motifs IA / technique ── */
.circuit-bg{background-image:url("data:image/svg+xml,%3Csvg width='40' height='40' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M0 20h15M25 20h15M20 0v15M20 25v15' stroke='%23262B29' stroke-width='1' fill='none'/%3E%3Ccircle cx='20' cy='20' r='2' fill='%23262B29'/%3E%3C/svg%3E")}
.status-pulse{animation:pulse 2s cubic-bezier(.4,0,.6,1) infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.3}}
.glow-green{box-shadow:0 0 15px rgba(34,197,94,.2)}
.terminal-scroll{scrollbar-width:thin;scrollbar-color:#1F2924 transparent}
.terminal-scroll::-webkit-scrollbar{width:4px}
.terminal-scroll::-webkit-scrollbar-thumb{background:#1F2924}

/* ── Layout ── */
.container{max-width:1100px;margin:0 auto;padding:var(--sp-6)}
.layout{display:grid;grid-template-columns:256px 1fr;min-height:100vh}
@media(max-width:900px){.layout{grid-template-columns:1fr}}

/* ── Sidebar ── */
.sidebar{background:var(--surface-low);border-right:1px solid var(--outline-variant);padding:var(--sp-6) var(--sp-4);display:flex;flex-direction:column;gap:var(--sp-2);position:fixed;top:0;left:0;width:256px;height:100vh;z-index:40}
.sidebar .logo{font-family:var(--font-mono);font-size:1.25rem;font-weight:500;color:var(--primary);letter-spacing:-.02em;margin-bottom:var(--sp-6);display:flex;align-items:center;gap:10px}
.sidebar .logo a{color:var(--primary)}
.sidebar .new-btn{width:100%;margin-bottom:var(--sp-4)}
.side-item{display:flex;align-items:center;gap:10px;padding:10px 12px;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant);border-left:2px solid transparent;text-decoration:none}
.side-item:hover{background:rgba(75,226,119,.08);color:var(--on-surface)}
.side-item.active{border-left-color:var(--primary);background:rgba(75,226,119,.1);color:var(--primary)}
.side-item .status-dot{width:8px;height:8px;border-radius:50%;flex-shrink:0}
.side-footer{margin-top:auto;display:flex;flex-direction:column;gap:4px;border-top:1px solid var(--outline-variant);padding-top:var(--sp-4)}
@media(max-width:900px){
  .sidebar{position:fixed;inset:0 auto 0 0;width:260px;transform:translateX(-100%);transition:transform .2s;z-index:60}
  .sidebar.open{transform:translateX(0)}
  .overlay{position:fixed;inset:0;background:rgba(0,0,0,.5);z-index:50;display:none}
  .overlay.show{display:block}
}

/* ── Header / topbar ── */
.topbar{display:flex;justify-content:space-between;align-items:center;padding:var(--sp-3) var(--sp-6);background:var(--surface);border-bottom:1px solid var(--outline-variant)}
.topbar .title{font-family:var(--font-mono);font-size:.8125rem;letter-spacing:.03em}
.topbar .user{font-family:var(--font-mono);font-size:.75rem;color:var(--on-surface-variant)}

/* ── Hero (landing) ── */
.hero{border:1px solid var(--outline-variant);background:var(--surface);padding:var(--sp-8);position:relative;overflow:hidden}
.hero::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--primary)}
.hero .hud{font-family:var(--font-mono);font-size:1.75rem;font-weight:500;letter-spacing:-.02em;color:var(--primary);line-height:1.2}
.hero .hud small{display:block;font-size:.6875rem;letter-spacing:.05em;color:var(--on-surface-variant);opacity:.5;margin-top:4px}
.hero .tagline{margin-top:var(--sp-4);font-size:1.125rem;color:var(--on-surface-variant)}
.hero .badges{display:flex;gap:var(--sp-3);margin-top:var(--sp-6);flex-wrap:wrap}
.hero-center{text-align:center}
.hero-center .hud{font-size:2.25rem}

/* ── Boutons ── */
.btn{display:inline-block;font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;font-weight:500;text-transform:uppercase;padding:10px 16px;border-radius:var(--r-md);cursor:pointer;border:1px solid transparent;transition:all .15s;text-decoration:none;background:transparent;color:var(--on-surface)}
.btn-primary{background:var(--primary);color:var(--on-primary)}
.btn-primary:hover{background:var(--primary-fixed);filter:brightness(1.05)}
.btn-outline{border-color:var(--outline-variant);color:var(--on-surface-variant)}
.btn-outline:hover{background:var(--surface-high);color:var(--on-surface)}
.btn-ghost{color:var(--on-surface-variant)}
.btn-ghost:hover{color:var(--secondary)}
.btn-danger{background:rgba(255,180,171,.12);color:var(--error);border-color:rgba(255,180,171,.3)}
.btn-danger:hover{background:rgba(255,180,171,.2)}
.btn-sm{padding:6px 12px;font-size:.6875rem}
.btn-block{width:100%;text-align:center}

/* ── Cartes ── */
.card{background:var(--surface-container);border:1px solid var(--outline-variant);padding:var(--sp-6);position:relative}
.card.accent::before{content:"";position:absolute;top:0;left:0;width:100%;height:1px;background:var(--primary)}
.card h4{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;color:var(--on-surface-variant);text-transform:uppercase;margin-bottom:var(--sp-2)}
.card .metric{font-family:var(--font-mono);font-size:2rem;font-weight:700;letter-spacing:-.03em;color:var(--on-surface)}
.card .metric small{font-size:1rem;color:var(--on-surface-variant);font-weight:400}
.card-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(240px,1fr));gap:var(--sp-4)}

/* ── Inputs ── */
.input{background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--r-md);color:var(--on-surface);padding:10px 12px;font-family:var(--font-mono);font-size:.875rem;width:100%}
.input:focus{outline:2px solid var(--primary);outline-offset:1px;border-color:transparent}
label.fl{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant);display:block;margin-bottom:6px}

/* ── Badges ── */
.badge{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:var(--r-sm);font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;font-weight:500}
.badge .dot{width:8px;height:8px;border-radius:50%}
.badge-live{background:var(--surface-high);border:1px solid var(--outline-variant);color:var(--primary)}
.badge-ok{background:rgba(78,222,163,.12);color:var(--secondary)}
.badge-warn{background:rgba(255,180,171,.12);color:var(--error)}
.badge-ai{background:rgba(75,226,119,.12);color:var(--primary)}

/* ── Alerts ── */
.alert{display:flex;gap:var(--sp-3);align-items:flex-start;padding:var(--sp-3) var(--sp-4);border-radius:var(--r-md);margin-bottom:var(--sp-3);font-size:.875rem}
.alert-info{background:rgba(78,222,163,.08);border-left:3px solid var(--secondary);color:var(--on-surface-variant)}
.alert-warn{background:rgba(255,180,171,.08);border-left:3px solid var(--error);color:var(--on-surface-variant)}
.alert strong{font-family:var(--font-mono);text-transform:uppercase;letter-spacing:.05em;font-size:.75rem;display:block;margin-bottom:2px}

/* ── Terminal ── */
.terminal{background:#050807;border:1px solid var(--outline-variant);border-radius:var(--r-md);padding:var(--sp-4);font-family:var(--font-mono);font-size:.6875rem;line-height:1.7;max-height:240px;overflow-y:auto}
.terminal .t-primary{color:var(--primary)}
.terminal .t-secondary{color:var(--secondary)}
.terminal .t-dim{opacity:.6}
.terminal .t-warn{color:#FFB4AB}

/* ── Table ── */
table{width:100%;border-collapse:collapse;font-size:.875rem}
thead th{font-family:var(--font-mono);font-size:.6875rem;letter-spacing:.05em;text-transform:uppercase;color:var(--on-surface-variant);text-align:left;padding:10px 12px;border-bottom:2px solid var(--outline-variant);font-weight:500}
tbody td{padding:10px 12px;border-bottom:1px solid var(--outline-variant);color:var(--on-surface)}
tbody tr:hover{background:var(--surface-container)}

/* ── Chat consultant ── */
.chat-wrap{flex:1;overflow-y:auto;padding:var(--sp-6);padding-bottom:160px}
.chat-inner{max-width:800px;margin:0 auto;display:flex;flex-direction:column;gap:var(--sp-4)}
.msg{display:flex;flex-direction:column;gap:4px}
.msg.user{align-items:flex-end}
.msg.assistant{align-items:flex-start}
.chat-bubble{padding:12px 14px;max-width:85%;border-radius:var(--r-lg);font-size:.875rem;line-height:1.6}
.chat-bubble-assistant{background:var(--surface-container);border:1px solid var(--outline-variant);border-top-left-radius:var(--r-sm)}
.chat-bubble-user{background:var(--primary-container);color:var(--on-primary);border-top-right-radius:var(--r-sm)}
.typing-dot{width:4px;height:4px;background:var(--primary);border-radius:50%;display:inline-block;animation:typing 1.4s infinite ease-in-out both}
.typing-dot:nth-child(1){animation-delay:-.32s}
.typing-dot:nth-child(2){animation-delay:-.16s}
@keyframes typing{0%,80%,100%{transform:scale(0);opacity:.4}40%{transform:scale(1);opacity:1}}

/* ── Input chat ── */
.chat-inputbar{position:fixed;bottom:0;left:256px;right:0;padding:var(--sp-4);background:linear-gradient(to top,var(--surface-lowest) 60%,transparent)}
@media(max-width:900px){.chat-inputbar{left:0}}
.chat-inputbar .bar{max-width:800px;margin:0 auto;background:var(--surface-container);border:1px solid var(--outline-variant);border-radius:var(--r-xl);padding:var(--sp-2)}
.chat-inputbar .row{display:flex;align-items:center;gap:var(--sp-2);padding:4px 8px}
.chat-inputbar input{flex:1;background:transparent;border:none;outline:none;color:var(--on-surface);font-family:var(--font-sans);font-size:.875rem;padding:8px 4px}
.chat-inputbar .send{background:var(--primary);color:var(--on-primary);border:none;border-radius:var(--r-md);padding:8px 14px;cursor:pointer;font-family:var(--font-mono);font-size:.75rem;text-transform:uppercase;letter-spacing:.05em}
.chat-inputbar .send:disabled{opacity:.3;cursor:default}
.icon-btn{background:none;border:none;color:var(--on-surface-variant);cursor:pointer;font-size:1rem;padding:6px;border-radius:var(--r-md)}
.icon-btn:hover{color:var(--primary)}

/* ── Accordéon synthèse ── */
.accordion{border-top:1px solid var(--outline-variant)}
.accordion-head{display:flex;align-items:center;justify-content:space-between;padding:var(--sp-2) var(--sp-4);cursor:pointer;user-select:none}
.accordion-body{padding:0 var(--sp-4) var(--sp-3)}
.synthesis-content{font-size:.875rem;line-height:1.7;max-height:240px;overflow-y:auto;white-space:pre-line}
.status-msg{font-size:.75rem;color:var(--secondary);padding:0 var(--sp-4) var(--sp-2);display:block}

/* ── Slider projets (dashboard accueil) ── */
.project-slider{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:var(--sp-4)}
.project-card{display:block;text-decoration:none;padding:var(--sp-4);border:1px solid var(--outline-variant);background:var(--surface-container);border-radius:var(--r-lg);transition:border-color .15s}
.project-card:hover{border-color:var(--primary)}
.project-card .p-title{font-family:var(--font-mono);font-size:.875rem;font-weight:600;color:var(--on-surface);margin-bottom:8px;word-break:break-word}
.project-card .p-date{font-family:var(--font-mono);font-size:.6875rem;color:var(--on-surface-variant)}

/* ── Divers ── */
.footer{border-top:1px solid var(--outline-variant);padding:var(--sp-4) var(--sp-6);display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:.6875rem;color:var(--on-surface-variant);margin-top:var(--sp-12);flex-wrap:wrap;gap:var(--sp-2)}
.mono{font-family:var(--font-mono)}
.bmd{font-size:.875rem}
.ds{font-family:var(--font-mono);font-size:.6875rem}
.dl{font-family:var(--font-mono);font-size:.75rem;letter-spacing:.05em;font-weight:500;text-transform:uppercase}
.text-dim{color:var(--on-surface-variant)}
.text-primary{color:var(--primary)}
.text-err{color:var(--error)}
.mt-2{margin-top:var(--sp-2)} .mt-4{margin-top:var(--sp-4)} .mt-6{margin-top:var(--sp-6)} .mt-8{margin-top:var(--sp-8)}
.mb-4{margin-bottom:var(--sp-4)} .mb-6{margin-bottom:var(--sp-6)}
.hidden{display:none!important}

/* ── Rendu du SDD (page Livrables) ───────────────────────────────────────── */
.sdd-doc{font-size:.875rem;line-height:1.7;overflow-wrap:anywhere}
.sdd-doc h1{font-size:1.3rem;margin:6px 0 14px;color:var(--on-surface)}
.sdd-doc h2{font-size:1.1rem;margin:26px 0 10px;padding-bottom:6px;border-bottom:1px solid var(--outline-variant);color:var(--primary)}
.sdd-doc h3{font-size:.98rem;margin:18px 0 8px;color:var(--on-surface)}
.sdd-doc h4{font-size:.9rem;margin:14px 0 6px;color:var(--on-surface-variant)}
.sdd-doc p{margin:8px 0}
.sdd-doc ul,.sdd-doc ol{margin:8px 0 8px 22px}
.sdd-doc li{margin:3px 0}
.sdd-doc strong{color:var(--on-surface)}
.sdd-doc table{border-collapse:collapse;width:100%;margin:14px 0;font-size:.8rem}
.sdd-doc th,.sdd-doc td{border:1px solid var(--outline-variant);padding:6px 9px;text-align:left;vertical-align:top}
.sdd-doc th{background:var(--surface-low);font-family:var(--font-mono);font-size:.72rem;letter-spacing:.03em}
.sdd-doc tr:nth-child(even) td{background:var(--surface-lowest)}
.sdd-doc code{background:var(--surface-lowest);border:1px solid var(--surface-high);border-radius:var(--r-md);padding:1px 5px;font-family:var(--font-mono);font-size:.78rem}
.sdd-doc pre{background:var(--surface-lowest);border:1px solid var(--surface-high);border-radius:var(--r-lg);padding:12px;overflow-x:auto;font-family:var(--font-mono);font-size:.75rem;line-height:1.5;margin:12px 0}
.sdd-doc pre code{background:none;border:0;padding:0;font-size:.75rem}
.sdd-doc blockquote{border-left:3px solid var(--primary);margin:12px 0;padding:6px 0 6px 14px;color:var(--on-surface-variant)}
.sdd-doc a{color:var(--primary)}
.sdd-doc img{max-width:100%;border-radius:var(--r-md);margin:10px 0}
.sdd-doc hr{border:0;border-top:1px solid var(--outline-variant);margin:20px 0}
.sdd-doc .mermaid{background:var(--surface-lowest);border:1px solid var(--surface-high);border-radius:var(--r-lg);padding:14px;margin:14px 0;text-align:center;overflow-x:auto}
.sdd-doc .mermaid svg{max-width:100%;height:auto}