/* ═══════════════════════════════════════════════════════════════
   WORKFLOW-ENGINE-LANDING.CSS — Complément à financial-reports-landing.css /
   deal-room-landing.css / crm-landing.css. Réutilise les tokens --lp-*
   et les classes .lab-* génériques. Classes spécifiques préfixées lab-wf-
   ═══════════════════════════════════════════════════════════════ */

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

.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); }

/* ── Cost estimate strip ── */
.lab-wf-estimate{
   display:flex; gap:14px; flex-wrap:wrap;
   padding:14px 20px; margin-bottom:26px;
   background:var(--ink-accent-pale, #fff1ea);
   border:1px solid rgba(255,90,31,.25);
   border-radius:var(--ink-radius-md);
}
.lab-wf-est-item{
   display:flex; align-items:center; gap:7px;
   font-size:.78rem; font-weight:700; color:var(--ink-black);
}
.lab-wf-est-item i{ color:var(--carta-orange) !important; }

/* ── Runner card ── */
.lab-wf-runner-card{
   background:var(--ink-white);
   border:1.5px solid var(--carta-orange);
   border-radius:var(--ink-radius-md);
   padding:20px 22px;
   margin-bottom:26px;
   position:relative;
}
.lab-wf-runner-card::before{
   content:'';
   position:absolute; top:-1px; left:-1px;
   width:10px; height:10px;
   background:var(--carta-orange);
}
.lab-wf-runner-card::after{
   content:'';
   position:absolute; top:-1px; right:-1px;
   width:10px; height:10px;
   background:var(--carta-orange);
}
.lab-wf-runner-top{ display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:10px; margin-bottom:14px; }
.lab-wf-runner-badge{
   font-size:.68rem; font-weight:800; padding:5px 12px; border-radius:20px;
   background:var(--carta-orange); color:#1a0d05;
   text-transform:uppercase; letter-spacing:.04em;
}
.lab-wf-runner-info{ display:flex; align-items:center; gap:14px; flex-wrap:wrap; font-size:.76rem; color:var(--ink-text-secondary); font-weight:700; }
.lab-wf-runner-info i{ color:var(--carta-orange); margin-right:3px; }
.lab-wf-progress-track{ height:6px; background:var(--ink-surface-2); border-radius:10px; overflow:hidden; margin-bottom:8px; }
.lab-wf-progress-fill{ height:100%; border-radius:10px; background:var(--carta-orange); }
.lab-wf-progress-label{ font-size:.74rem; color:var(--ink-text-muted); font-weight:700; margin-bottom:14px; }
.lab-wf-runner-steps{ display:flex; flex-wrap:wrap; gap:7px; }
.lab-wf-runner-step-chip{
   display:flex; align-items:center; gap:6px; padding:5px 12px; border-radius:20px;
   font-size:.7rem; font-weight:700; border:1.5px solid var(--ink-border);
   background:var(--ink-surface); color:var(--ink-text-muted);
}
.lab-wf-runner-step-chip i{ font-size:.68rem; }
.lab-wf-runner-step-chip.done{ border-color:#0d9488; background:rgba(13,148,136,.08); color:#0d9488; }
.lab-wf-runner-step-chip.active{ border-color:var(--carta-orange); background:var(--ink-accent-pale,#fff1ea); color:var(--carta-orange); }

/* ── DAG / Steps chain — cards blanches bordées, dots orange ── */
.lab-wf-dag{ display:flex; flex-direction:column; gap:0; margin-bottom:28px; }
.lab-wf-step-row{ display:flex; align-items:stretch; gap:14px; }
.lab-wf-step-num{
   width:28px; height:28px; border-radius:50%;
   background:var(--ink-white); border:1.5px solid var(--carta-orange);
   color:var(--carta-orange); font-size:.72rem; font-weight:900;
   display:flex; align-items:center; justify-content:center; flex-shrink:0;
}
.lab-wf-step-card{
   position:relative;
   flex:1; display:flex; align-items:center; gap:14px;
   background:var(--ink-white);
   border:1px solid var(--ink-border);
   border-radius:var(--ink-radius-md);
   padding:14px 18px;
   transition:box-shadow var(--ink-t-fast), border-color var(--ink-t-fast), transform var(--ink-t-fast);
}
.lab-wf-step-card:hover{ border-color:var(--carta-orange); transform:translateX(2px); box-shadow:0 8px 20px rgba(10,10,10,.06); }
.lab-wf-step-icon{
   width:38px; height:38px; border-radius:0;
   border:1.5px solid var(--ink-border);
   display:flex; align-items:center; justify-content:center;
   font-size:.9rem; flex-shrink:0; background:var(--ink-white);
   color:var(--ink-black);
}
.lab-wf-step-card:hover .lab-wf-step-icon{ border-color:var(--carta-orange); color:var(--carta-orange); }
.lab-wf-step-label{ font-size:.86rem; font-weight:700; color:var(--ink-black); }
.lab-wf-step-type{
   font-size:.64rem; font-weight:800; padding:4px 10px; border-radius:20px;
   margin-left:auto; text-transform:uppercase; letter-spacing:.04em;
   background:var(--ink-accent-pale,#fff1ea); color:var(--carta-orange);
   white-space:nowrap;
}
.lab-wf-step-connector{ width:1.5px; height:16px; background:var(--ink-border); margin-left:14px; }

/* ── HITL card ── */
.lab-wf-hitl-card{
   background:var(--ink-white);
   border:1px solid var(--ink-border);
   border-radius:var(--ink-radius-md);
   padding:24px 26px;
   margin-bottom:26px;
   position:relative;
}
.lab-wf-hitl-card::before{ content:''; position:absolute; top:-1px; left:-1px; width:10px; height:10px; background:var(--carta-orange); }
.lab-wf-hitl-card::after{ content:''; position:absolute; bottom:-1px; right:-1px; width:10px; height:10px; background:var(--carta-orange); }
.lab-wf-hitl-top{ display:flex; align-items:center; gap:14px; margin-bottom:16px; }
.lab-wf-hitl-icon{
   width:42px; height:42px; border-radius:0;
   border:1.5px solid var(--carta-orange);
   display:flex; align-items:center; justify-content:center;
   color:var(--carta-orange); font-size:1.05rem; flex-shrink:0; background:var(--ink-white);
}
.lab-wf-hitl-title{ font-size:1.02rem; font-weight:800; color:var(--ink-black); }
.lab-wf-hitl-sub{ font-size:.76rem; color:var(--ink-text-muted); font-weight:600; }
.lab-wf-hitl-context{
   background:var(--ink-surface); border:1px solid var(--ink-border); border-radius:10px;
   padding:14px 16px; font-size:.82rem; color:var(--ink-text-secondary); line-height:1.65; margin-bottom:16px;
}
.lab-wf-hitl-actions{ display:flex; gap:12px; }
.lab-wf-hitl-btn{ flex:1; padding:11px; border-radius:var(--ink-radius-sm,8px); font-size:.8rem; font-weight:800; text-align:center; cursor:default; }
.lab-wf-hitl-btn.reject{ background:var(--ink-white); border:1.5px solid var(--ink-border); color:var(--ink-text-secondary); }
.lab-wf-hitl-btn.approve{ background:var(--carta-orange); border:1.5px solid var(--carta-orange); color:#fff; }

/* ── AI model picker row ── */
.lab-wf-model-row{ display:flex; gap:12px; flex-wrap:wrap; justify-content:center; }
.lab-wf-model-chip{
   display:flex; align-items:center; gap:9px; padding:10px 18px;
   border-radius:var(--ink-radius-md); background:var(--ink-white);
   border:1px solid var(--ink-border); font-size:.8rem; font-weight:700; color:var(--ink-text-secondary);
   transition:border-color var(--ink-t-fast), transform var(--ink-t-fast);
}
.lab-wf-model-chip:hover{ border-color:var(--carta-orange); transform:translateY(-2px); }
.lab-wf-model-chip img{ width:17px; height:17px; object-fit:contain; }

@media(max-width:600px){
   .lab-demo-body{ padding:26px 18px 30px; }
   .lab-wf-estimate{ gap:10px; }
   .lab-wf-step-label{ font-size:.78rem; }
   .lab-wf-step-type{ display:none; }
}

@media(max-width:1024px){ .lab-wf-types-grid{ grid-template-columns:repeat(2,1fr); } }
@media(max-width:600px){ .lab-wf-types-grid{ grid-template-columns:1fr; } }


/* ═══════════════════════════════════════════════════════════
   LAB TOOLS SCROLLER — Timeline Carta authentique (réutilisé
   depuis landing-agent-builder.html — même style exact)
═══════════════════════════════════════════════════════════ */
:root{
   --tool-card-w: 240px;
   --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:150px;
   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; }
.lab-tool-node-icon-frame svg path,
.lab-tool-node-icon-frame svg circle,
.lab-tool-node-icon-frame svg rect,
.lab-tool-node-icon-frame svg polyline{
   stroke:#fff; fill:none; stroke-width:1.6; stroke-linecap:round; stroke-linejoin:round;
}
.lab-tool-node-icon-frame img{ width:30px; height:30px; object-fit:contain; filter:brightness(0) invert(1); }
.lab-tool-node-icon-frame .lab-trilogo-mini img{ filter:none; width:30px; height:30px; }

.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;
   display:flex; align-items:center; justify-content:space-between; gap:6px;
}
.lab-tool-node-body h5 .lab-tool-node-count{
   font-size:.76rem; font-weight:700; color:var(--carta-orange); flex-shrink:0;
}
.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:200px; --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,
   .lab-tool-node-icon-frame img{ width:24px; height:24px; }
}

/* ═══════════════════════════════════════════════════════════
  SECTION ENTIÈREMENT SOMBRE — 14 Step Types
═══════════════════════════════════════════════════════════ */
.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;
}


/* ── SVG icons génériques pour la section Live Demo (remplace Font Awesome) ── */
.wf-svg{
   display:inline-block;
   flex-shrink:0;
   vertical-align:-2px;
   stroke:currentColor;
   fill:none;
   stroke-width:2;
   stroke-linecap:round;
   stroke-linejoin:round;
}
.wf-svg-xs{ width:11px; height:11px; }
.wf-svg-sm{ width:13px; height:13px; }
.wf-svg-md{ width:16px; height:16px; }
.wf-svg-lg{ width:19px; height:19px; }

.lab-wf-est-item .wf-svg{ color:var(--carta-orange); margin-right:2px; }
.lab-wf-runner-info .wf-svg{ color:var(--carta-orange); margin-right:2px; }
.lab-wf-runner-step-chip .wf-svg{ margin-right:1px; }
.lab-wf-step-icon .wf-svg{ color:inherit; }
.lab-wf-hitl-icon .wf-svg{ color:inherit; }
.lab-wf-hitl-btn .wf-svg{ margin-right:2px; }


/* ═══════════════════════════════════════════════════════════════
   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;
      }
  }