/* ═══════════════════════════════════════════════════════════════
   SWARM-CANVA-LANDING.CSS — Complément à debate-arena-landing.css /
   crm-landing.css. Réutilise tokens --lp-* et classes .lab-*
   génériques. N'ajoute QUE les classes du mockup Swarm Canvas
   (lab-sw-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── Node Type Palette ── */
.lab-sw-palette-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; margin-bottom:22px; }
@media(max-width:700px){ .lab-sw-palette-grid{ grid-template-columns:repeat(2,1fr); } }
.lab-sw-palette-item{ display:flex; flex-direction:column; align-items:center; gap:8px; padding:16px 10px; border-radius:14px; background:rgba(255,255,255,.04); border:1px solid var(--lp-border-soft); text-align:center; }
.lab-sw-palette-icon{ width:38px; height:38px; border-radius:10px; display:flex; align-items:center; justify-content:center; font-size:1rem; }
.lab-sw-palette-name{ font-size:.74rem; font-weight:800; color:#fff; } 
.lab-sw-palette-desc{ font-size:.62rem; color:rgba(255,255,255,.45); line-height:1.4; }

/* ── Canvas mockup ── */
.lab-sw-canvas-wrap{ position:relative; border-radius:16px; background:#0d1117; border:1px solid rgba(255,255,255,.08); overflow:hidden; padding:28px; min-height:340px; }
.lab-sw-canvas-grid-bg{ position:absolute; inset:0; background-image:radial-gradient(rgba(148,163,184,.18) 1px, transparent 1px); background-size:24px 24px; opacity:.5; }
.lab-sw-canvas-content{ position:relative; z-index:1; }

/* Node shapes on the flow mockup */ 
.lab-sw-flow-row{ display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center; }
.lab-sw-node{ display:flex; align-items:center; gap:8px; padding:12px 16px; border-radius:12px; font-size:.72rem; font-weight:800; color:#fff; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,.3); }
.lab-sw-node.pill{ border-radius:999px; padding:10px 20px; }
.lab-sw-node.diamond{ border-radius:6px; transform:rotate(45deg); padding:16px; }
.lab-sw-node.diamond span{ transform:rotate(-45deg); display:inline-block; }
.lab-sw-edge-arrow{ font-size:1.1rem; color:rgba(255,255,255,.25); margin:0 6px; flex-shrink:0; }
.lab-sw-edge-label{ font-size:.6rem; font-weight:700; color:rgba(255,255,255,.4); text-align:center; margin:0 4px; }

/* Fork/merge layout for demo */
.lab-sw-fork-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 6px; }
.lab-sw-fork-branches{ display:flex; flex-direction:column; gap:8px; }

/* ── Edge Conditions legend ── */
.lab-sw-cond-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:10px; }
@media(max-width:700px){ .lab-sw-cond-grid{ grid-template-columns:repeat(2,1fr); } }
.lab-sw-cond-chip{ display:flex; align-items:center; gap:8px; padding:10px 12px; border-radius:10px; background:rgba(255,255,255,.04); border:1px solid var(--lp-border-soft); font-size:.72rem; font-weight:700; }
.lab-sw-cond-dot{ width:9px; height:9px; border-radius:50%; flex-shrink:0; }

/* ── Templates ── */
.lab-sw-tpl-card{ display:flex; flex-direction:column; gap:10px; }
.lab-sw-tpl-icon{ width:44px; height:44px; border-radius:12px; display:flex; align-items:center; justify-content:center; font-size:1.1rem; }
.lab-sw-tpl-tags{ display:flex; flex-wrap:wrap; gap:6px; }
.lab-sw-tpl-tag{ font-size:.6rem; font-weight:700; padding:2px 9px; border-radius:10px; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.6); }

/* ── Mini-map & toolbar hint bar ── */
.lab-sw-toolbar-mock{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-radius:12px; background:rgba(255,255,255,.04); border:1px solid var(--lp-border-soft); margin-bottom:16px; flex-wrap:wrap; }
.lab-sw-toolbar-btn{ display:flex; align-items:center; gap:6px; font-size:.68rem; font-weight:700; color:rgba(255,255,255,.6); padding:6px 12px; border-radius:8px; background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.08); }
.lab-sw-minimap-mock{ position:absolute; bottom:14px; right:14px; width:96px; height:64px; border-radius:8px; background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.15); z-index:2; }
.lab-sw-minimap-mock .vp{ position:absolute; top:14px; left:20px; width:40px; height:24px; border:1.5px solid #667eea; border-radius:2px; }

/* ── Run log mockup ── */
.lab-sw-log{ background:#fff; border-radius:12px; padding:14px 16px; font-family:'JetBrains Mono',monospace; font-size:.7rem; line-height:1.7; }
.lab-sw-log .l-system{ color:#94a3b8; }
.lab-sw-log .l-node{ color:#6366f1; }
.lab-sw-log .l-done{ color:#059669; }
.lab-sw-log .l-error{ color:#dc2626; }

@media(max-width:768px){
    .lab-sw-canvas-wrap{ padding:16px; }
    .lab-sw-flow-row{ flex-direction:column; }
    .lab-sw-edge-arrow{ transform:rotate(90deg); margin:4px 0; }
}

/* ═══════════════════════════════════════════════════════════
   LAB TOOLS SCROLLER — Timeline Carta (réutilisé depuis
   agent-builder / workflow-engine / debate-arena)
═══════════════════════════════════════════════════════════ */
:root{
    --tool-card-w: 250px;
    --tool-gap: 20px;
    --tool-bg: #1c1d24;
    --carta-orange: #ff5a1f;
}

.lab-tools-scroller-wrap{ position:relative; margin-top:8px; background:var(--tool-bg); border-radius:var(--ink-radius-lg); padding:56px 0 0; overflow:hidden; }
.lab-tools-scroller-wrap::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.14) 1.3px, transparent 1.3px); background-size:26px 26px; pointer-events:none; z-index:0; }
.lab-tools-track-outer{ position:relative; z-index:1; overflow-x:auto; overflow-y:hidden; padding:0 0 36px; scroll-behavior:smooth; -webkit-overflow-scrolling:touch; scrollbar-width:thin; scrollbar-color:rgba(255,255,255,.2) transparent; }
.lab-tools-track-outer::-webkit-scrollbar{ height:6px; }
.lab-tools-track-outer::-webkit-scrollbar-track{ background:transparent; }
.lab-tools-track-outer::-webkit-scrollbar-thumb{ background:rgba(255,255,255,.2); border-radius:10px; }
.lab-tools-track-outer::-webkit-scrollbar-thumb:hover{ background:rgba(255,255,255,.34); }

.lab-tools-timeline{ position:relative; display:flex; align-items:center; width:max-content; padding:0 48px; margin-bottom:34px; }
.lab-tools-timeline::before{ content:''; position:absolute; top:50%; left:0; right:0; height:1px; background:var(--carta-orange); z-index:0; }
.lab-tool-pill{
    position:relative; z-index:1; display:flex; align-items:center; gap:9px;
    background:var(--carta-orange); color:#1a0d05;
    font-family:var(--font-sans); font-size:.76rem; font-weight:700;
    letter-spacing:.06em; text-transform:uppercase; padding:10px 18px;
    white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
    width:calc(var(--n) * (var(--tool-card-w) + var(--tool-gap)) - var(--tool-gap));
    box-sizing:border-box; margin-right:var(--tool-gap); flex-shrink:0;
}
.lab-tool-pill:last-child{ margin-right:0; }
.lab-tool-pill::before{ content:''; width:10px; height:10px; background:#1a0d05; flex-shrink:0; }

.lab-tools-track{ position:relative; display:flex; gap:var(--tool-gap); width:max-content; padding:0 48px 8px; }
.lab-tool-node{ position:relative; flex:0 0 auto; width:var(--tool-card-w); box-sizing:border-box; border-top:1px solid rgba(255,255,255,.35); }
.lab-tool-node-badge{ display:flex; align-items:center; gap:8px; background:rgba(255,255,255,.05); border-bottom:1px solid rgba(255,255,255,.12); padding:14px 16px; font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.05em; color:#fff; }
.lab-tool-node-badge::before{ content:''; width:8px; height:8px; background:var(--carta-orange); flex-shrink:0; }

.lab-tool-node-visual{ position:relative; height:140px; background-image:radial-gradient(rgba(255,255,255,.14) 1.3px, transparent 1.3px); background-size:14px 14px; display:flex; align-items:center; justify-content:center; overflow:hidden; }
.lab-tool-node-visual .dot-tl, .lab-tool-node-visual .dot-tr, .lab-tool-node-visual .dot-bl, .lab-tool-node-visual .dot-br{ position:absolute; width:5px; height:5px; background:var(--carta-orange); }
.lab-tool-node-visual .dot-tl{ top:16px; left:20px; }
.lab-tool-node-visual .dot-tr{ top:16px; right:20px; }
.lab-tool-node-visual .dot-bl{ bottom:16px; left:20px; }
.lab-tool-node-visual .dot-br{ bottom:16px; right:20px; }

.lab-tool-node-icon-frame{ width:64px; height:64px; border:1.5px solid rgba(255,255,255,.85); display:flex; align-items:center; justify-content:center; background:transparent; position:relative; z-index:1; }
.lab-tool-node-icon-frame svg{ width:30px; height:30px; display:block; stroke:#fff; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round; }

.lab-tool-node-body{ padding:18px 16px 20px; }
.lab-tool-node-body h5{ font-size:.95rem; font-weight:700; color:#fff; margin:0 0 9px; letter-spacing:-0.005em; line-height:1.3; }
.lab-tool-node-body p{ font-size:.82rem; color:rgba(255,255,255,.52); line-height:1.55; margin:0; }

.lab-tool-node:hover .lab-tool-node-visual{ background-color:rgba(255,255,255,.025); }
.lab-tool-node:hover .lab-tool-node-icon-frame{ border-color:var(--carta-orange); }

.lab-tools-nav{ position:absolute; top:50%; transform:translateY(-50%); width:44px; height:44px; border-radius:50%; background:rgba(255,255,255,.08); border:1px solid rgba(255,255,255,.2); display:flex; align-items:center; justify-content:center; cursor:pointer; z-index:3; transition:background var(--ink-t-fast), border-color var(--ink-t-fast), opacity var(--ink-t-fast); color:#fff; }
.lab-tools-nav svg{ width:16px; height:16px; }
.lab-tools-nav svg path{ stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.lab-tools-nav:hover{ background:var(--carta-orange); border-color:var(--carta-orange); color:#1a0d05; }
.lab-tools-nav.lab-tools-nav-prev{ left:14px; }
.lab-tools-nav.lab-tools-nav-next{ right:14px; }
.lab-tools-nav[disabled]{ opacity:.2; pointer-events:none; }

@media(max-width:768px){
    .lab-tools-nav{ display:none; }
    :root{ --tool-card-w:210px; --tool-gap:16px; }
    .lab-tools-scroller-wrap{ padding-top:44px; }
    .lab-tool-node-icon-frame{ width:52px; height:52px; }
    .lab-tool-node-icon-frame svg{ width:24px; height:24px; }
}

/* ── Section entièrement sombre ── */
.lab-tools-section-dark{ background:var(--tool-bg); position:relative; overflow:hidden; }
.lab-tools-section-dark::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(255,255,255,.1) 1.3px, transparent 1.3px); background-size:26px 26px; pointer-events:none; z-index:0; }
.lab-tools-section-dark .lp-container{ position:relative; z-index:1; }
.lab-tools-section-dark .lp-h2{ color:#fff; }
.lab-tools-section-dark .lp-h2 span{ background:linear-gradient(135deg, #6366f1 0%, #8b5cf6 100%); -webkit-background-clip:text; background-clip:text; -webkit-text-fill-color:transparent; }
.lab-tools-section-dark .lp-sub{ color:rgba(255,255,255,.55); }
.lab-tools-section-dark .lab-tools-scroller-wrap{ background:transparent; border-radius:0; padding-top:16px; margin-top:24px; }
.lab-tools-section-dark .lab-tools-scroller-wrap::before{ display:none; }

/* ── Edge conditions dans la section dark ── */
.lab-tools-section-dark .lab-integrations-header h3{ color:#fff; }
.lab-tools-section-dark .lab-integrations-header p{ color:rgba(255,255,255,.55); }
.lab-tools-section-dark .lab-sw-cond-chip{ background:rgba(255,255,255,.05); border-color:rgba(255,255,255,.14); color:rgba(255,255,255,.75); }

/* ═══════════════════════════════════════════════════════════
   LIVE DEMO — Style Carta clair (fond blanc, dots, orange, SVG)
═══════════════════════════════════════════════════════════ */

.lab-wf-demo-section{ background:var(--ink-white); position:relative; overflow:hidden; }
.lab-wf-demo-section::before{ content:''; position:absolute; inset:0; background-image:radial-gradient(rgba(10,10,10,.06) 1.3px, transparent 1.3px); background-size:26px 26px; pointer-events:none; z-index:0; }
.lab-wf-demo-section .lp-container{ position:relative; z-index:1; }

.lab-demo-wrap{ background:var(--ink-white); border:1px solid var(--ink-border); border-radius:var(--ink-radius-lg); overflow:hidden; box-shadow:0 20px 50px rgba(10,10,10,.08); }
.lab-demo-chrome{ display:flex; align-items:center; gap:7px; background:var(--ink-surface); border-bottom:1px solid var(--ink-border); padding:14px 18px; }
.lab-demo-dot{ width:10px; height:10px; border-radius:50%; background:#d4d4de; }
.lab-demo-title{ margin-left:12px; font-size:.74rem; font-weight:600; color:var(--ink-text-muted); }
.lab-demo-body{ padding:36px 32px 40px; background:var(--ink-white); }

/* ── SVG icons génériques ── */
.sw-svg{ display:inline-block; flex-shrink:0; vertical-align:-2px; stroke:currentColor; fill:none; stroke-width:2; stroke-linecap:round; stroke-linejoin:round; }
.sw-svg-xs{ width:11px; height:11px; }
.sw-svg-sm{ width:13px; height:13px; }
.sw-svg-md{ width:16px; height:16px; }

/* ── Toolbar ── */
.lab-sw-toolbar-mock{ display:flex; align-items:center; gap:10px; padding:12px 16px; border-radius:var(--ink-radius-md); background:var(--ink-surface); border:1px solid var(--ink-border); margin-bottom:20px; flex-wrap:wrap; }
.lab-sw-toolbar-btn{ display:flex; align-items:center; gap:6px; font-size:.72rem; font-weight:700; color:var(--ink-text-secondary); padding:7px 14px; border-radius:8px; background:var(--ink-white); border:1px solid var(--ink-border); }
.lab-sw-toolbar-btn.run{ background:var(--carta-orange); border-color:var(--carta-orange); color:#fff; }

/* ── Canvas mockup — fond clair, dots légers ── */
.lab-sw-canvas-wrap{
    position:relative; border-radius:var(--ink-radius-md);
    background:var(--ink-white);
    border:1px solid var(--ink-border);
    overflow:hidden; padding:32px; min-height:300px;
}
.lab-sw-canvas-grid-bg{ position:absolute; inset:0; background-image:radial-gradient(rgba(10,10,10,.08) 1.3px, transparent 1.3px); background-size:22px 22px; }
.lab-sw-canvas-content{ position:relative; z-index:1; }

.lab-sw-flow-row{ display:flex; align-items:center; gap:0; flex-wrap:wrap; justify-content:center; }
.lab-sw-node{
    display:flex; align-items:center; gap:8px;
    padding:11px 16px; border-radius:10px;
    font-size:.74rem; font-weight:700; color:var(--ink-black);
    white-space:nowrap; background:var(--ink-white);
    border:1.5px solid var(--ink-border);
    box-shadow:0 4px 12px rgba(10,10,10,.06);
}
.lab-sw-node.pill{ border-radius:999px; padding:9px 20px; }
.lab-sw-node-icon{ width:22px; height:22px; border-radius:0; border:1.5px solid currentColor; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lab-sw-edge-arrow{ font-size:1.1rem; color:var(--carta-orange); margin:0 8px; flex-shrink:0; font-weight:700; }
.lab-sw-fork-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; margin:0 8px; }
.lab-sw-fork-branches{ display:flex; flex-direction:column; gap:8px; }

/* ── Mini-map ── */
.lab-sw-minimap-mock{ position:absolute; bottom:14px; right:14px; width:96px; height:64px; border-radius:8px; background:var(--ink-surface); border:1px solid var(--ink-border); z-index:2; }
.lab-sw-minimap-mock .vp{ position:absolute; top:14px; left:20px; width:40px; height:24px; border:1.5px solid var(--carta-orange); border-radius:2px; }

/* ── Run log — style light terminal ── */
.lab-sw-log{
    background:var(--ink-white); border:1px solid var(--ink-border); border-radius:var(--ink-radius-md);
    padding:16px 18px; font-family:'JetBrains Mono',monospace; font-size:.74rem; line-height:1.75;
}
.lab-sw-log .l-system{ color:var(--ink-text-muted); }
.lab-sw-log .l-node{ color:var(--carta-orange); }
.lab-sw-log .l-done{ color:#0d9488; }
.lab-sw-log .l-error{ color:#dc2626; }

@media(max-width:768px){
    .lab-sw-canvas-wrap{ padding:18px; }
    .lab-sw-flow-row{ flex-direction:column; }
    .lab-sw-edge-arrow{ transform:rotate(90deg); margin:6px 0; }
    .lab-demo-body{ padding:26px 18px 30px; }
}


/* ═══════════════════════════════════════════════════════════════
   FIX MOBILE — Force 1 card par ligne sur les grilles avec
   style inline (grid-template-columns écrit directement en HTML,
   qui a priorité sur les media queries externes sans !important)
   ═══════════════════════════════════════════════════════════════ */
   @media (max-width: 768px) {
    .lp-pillars-grid,
    .lab-integrations-grid,
    .lab-usecase-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}