/* ═══════════════════════════════════════════════════════════════
   CRM-LANDING.CSS — AlphaVault AI
   Styles spécifiques à landing-crm.html
   Namespace : lab-crm-*
   Dépend de : landing-institutional.css (variables --ink-*, classes lp-*, lab-*)
   ═══════════════════════════════════════════════════════════════ */

/* ── HERO VISUAL — Mini mockup CRM (dans .lp-hero-visual-frame) ── */
.lab-crm-hero-visual-body{
    min-height:300px;
    padding:26px;
    background:var(--ink-surface-2);
    display:flex; flex-direction:column; gap:16px;
    justify-content:center;
}

.lab-crm-mini-kpi-grid{
    display:grid; grid-template-columns:repeat(2,1fr); gap:12px;
}
.lab-crm-mini-kpi{
    background:var(--ink-white); border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-sm); padding:14px 16px;
}
.lab-crm-mini-kpi .label{ font-size:.66rem; font-weight:700; color:var(--ink-text-muted); text-transform:uppercase; letter-spacing:.04em; margin-bottom:6px; }
.lab-crm-mini-kpi .value{ font-size:1.15rem; font-weight:700; color:var(--ink-black); }

.lab-crm-mini-alert{
    display:flex; align-items:center; gap:10px;
    background:var(--ink-white); border:1px solid var(--ink-border);
    border-left:3px solid #dc2626;
    border-radius:var(--ink-radius-sm); padding:12px 14px;
    font-size:.8rem; color:var(--ink-text-secondary);
}
.lab-crm-mini-alert-dot{
    width:8px; height:8px; border-radius:50%; background:#dc2626; flex-shrink:0;
    animation:labCrmPulse 1.5s ease-in-out infinite;
}
@keyframes labCrmPulse{ 0%,100%{opacity:1;} 50%{opacity:.3;} }

/* ── FEATURE GRID (9 modules — style lab-cw-feat-card) ── */
.lab-crm-feat-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.lab-crm-feat-card{
    background:var(--ink-white);
    border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md);
    padding:28px 26px 26px;
    transition:box-shadow var(--ink-t-fast), transform var(--ink-t-fast), border-color var(--ink-t-fast);
}
.lab-crm-feat-card:hover{
    border-color:#d4d4e0;
    transform:translateY(-3px);
    box-shadow:0 14px 32px rgba(10,10,10,.08);
}
.lab-crm-feat-card h4{ font-size:1rem; font-weight:700; color:var(--ink-black); margin:0 0 9px; display:flex; align-items:center; gap:8px; flex-wrap:wrap; }
.lab-crm-feat-card p{ font-size:.85rem; color:var(--ink-text-secondary); line-height:1.6; margin:0; }
.lab-crm-feat-tag{
    display:inline-block; font-size:.6rem; font-weight:700;
    text-transform:uppercase; letter-spacing:.04em; padding:3px 10px; border-radius:20px;
    background:var(--ink-accent-pale); color:var(--ink-accent-dark);
}

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

/* ── TRI-LOGO MINI (réutilisé, Claude uniquement) ── */
.lab-trilogo-mini{
    display:inline-flex; align-items:center; justify-content:center; gap:2px;
    width:52px; height:34px;
    background:var(--ink-white); border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-sm); padding:4px 6px;
    position:relative;
}
.lab-trilogo-mini::before,
.lab-trilogo-mini::after{
    content:''; position:absolute; width:4px; height:4px; background:var(--carta-corner);
}
.lab-trilogo-mini::before{ top:-2px; left:-2px; }
.lab-trilogo-mini::after { bottom:-2px; right:-2px; }
.lab-trilogo-mini img{ width:16px; height:16px; object-fit:contain; }

/* ── HEALTH SCORE INTERPRETATION ── */
.lab-crm-interp-wrap{ margin-top:56px; }
.lab-crm-interp-card{
    background:var(--ink-white); border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-lg); padding:36px;
    box-shadow:var(--ink-shadow-2); max-width:1000px; margin:0 auto;
}
.lab-crm-interp-title{
    font-family:var(--font-serif); font-size:1.3rem; font-weight:500;
    color:var(--ink-black); margin:0 0 26px; text-align:center;
    display:flex; align-items:center; justify-content:center; gap:10px;
}
.lab-crm-interp-grid{ display:grid; grid-template-columns:repeat(4,1fr); gap:14px; }
.lab-crm-interp-item{
    padding:20px; border-radius:var(--ink-radius-md); text-align:center;
    background:var(--ink-surface-2); border:1px solid var(--ink-border);
    border-top:3px solid var(--ink-accent);
    transition:transform var(--ink-t-fast), box-shadow var(--ink-t-fast);
}
.lab-crm-interp-item:hover{ transform:translateY(-3px); box-shadow:0 10px 24px rgba(10,10,10,.08); }
.lab-crm-interp-score{ font-family:var(--font-serif); font-size:1.5rem; font-weight:600; color:var(--ink-black); margin-bottom:6px; }
.lab-crm-interp-label{ font-size:.86rem; font-weight:700; color:var(--ink-black); margin-bottom:6px; letter-spacing:.02em; }
.lab-crm-interp-desc{ font-size:.76rem; color:var(--ink-text-muted); line-height:1.5; }

@media(max-width:768px){ .lab-crm-interp-grid{ grid-template-columns:1fr 1fr; } }

/* ── USE CASE GRID (Who it's for / How it works — style lab-cw-usecase-card) ── */
.lab-crm-usecase-grid{
    display:grid; grid-template-columns:repeat(3,1fr); gap:16px;
}
.lab-crm-usecase-card{
    background:var(--ink-white); border:1px solid var(--ink-border);
    border-radius:var(--ink-radius-md); padding:30px 26px;
    transition:box-shadow var(--ink-t-fast), transform var(--ink-t-fast), border-color var(--ink-t-fast);
}
.lab-crm-usecase-card:hover{ border-color:#d4d4e0; transform:translateY(-3px); box-shadow:0 12px 28px rgba(10,10,10,.08); }
.lab-crm-usecase-role{
    font-size:.68rem; font-weight:700; text-transform:uppercase; letter-spacing:.06em;
    color:var(--ink-text-muted); margin-bottom:10px;
}
.lab-crm-usecase-card h4{ font-size:.98rem; font-weight:700; color:var(--ink-black); margin:0 0 9px; }
.lab-crm-usecase-card p{ font-size:.85rem; color:var(--ink-text-secondary); line-height:1.6; margin:0; }

.lab-crm-step-num{
    width:38px; height:38px; border-radius:var(--ink-radius-sm);
    background:var(--ink-accent-pale); color:var(--ink-accent-dark);
    display:flex; align-items:center; justify-content:center; margin:0 auto 18px;
    font-family:var(--font-serif); font-weight:700; font-size:.95rem;
}

@media(max-width:860px){ .lab-crm-usecase-grid{ grid-template-columns:1fr 1fr; } }
@media(max-width:600px){ .lab-crm-usecase-grid{ grid-template-columns:1fr; } }

/* ── DEMO BROWSER MOCKUP (dark section) ── */
.lab-crm-demo-wrap{
    max-width:1150px; margin:0 auto;
    border:1px solid rgba(255,255,255,.12); border-radius:var(--ink-radius-lg);
    background:rgba(255,255,255,.03);
    box-shadow:0 24px 64px rgba(0,0,0,.35);
    overflow:hidden;
}
.lab-crm-demo-chrome{
    height:44px; display:flex; align-items:center; gap:6px; padding:0 18px;
    border-bottom:1px solid rgba(255,255,255,.1); background:rgba(255,255,255,.04);
}
.lab-crm-demo-title{ margin-left:12px; font-size:.76rem; color:rgba(255,255,255,.45); font-weight:600; }
.lab-crm-demo-body{ padding:34px; }

@media(max-width:768px){ .lab-crm-demo-body{ padding:18px; } }

/* ── KPI Cards ── */
.lab-crm-kpi-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:22px; }
.lab-crm-kpi-card{
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1);
    border-radius:var(--ink-radius-md); padding:16px; position:relative;
}
.lab-crm-kpi-value{ font-size:1.5rem; font-weight:700; color:#fff; line-height:1; margin-bottom:4px; }
.lab-crm-kpi-label{ font-size:.68rem; font-weight:700; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.04em; }
.lab-crm-kpi-sub{ font-size:.68rem; color:rgba(255,255,255,.4); margin-top:2px; }
.lab-crm-kpi-badge{
    position:absolute; top:14px; right:14px; font-size:.58rem; font-weight:700;
    padding:2px 9px; border-radius:10px; background:rgba(220,38,38,.15); color:#fca5a5;
    border:1px solid rgba(220,38,38,.25);
}

/* ── PANELS ── */
.lab-crm-two-col{ display:grid; grid-template-columns:1.1fr .9fr; gap:18px; margin-bottom:22px; }
@media(max-width:900px){ .lab-crm-two-col{ grid-template-columns:1fr; } }
.lab-crm-panel{ background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.1); border-radius:var(--ink-radius-md); padding:20px; }
.lab-crm-panel-head{ font-size:.85rem; font-weight:700; color:#fff; margin-bottom:16px; display:flex; align-items:center; gap:8px; }
.lab-crm-panel-head-sm{ font-size:.82rem; font-weight:700; color:#fff; margin-bottom:16px; display:flex; align-items:center; gap:8px; }

/* ── Deal Pipeline Funnel ── */
.lab-crm-funnel{ display:flex; flex-direction:column; gap:10px; }
.lab-crm-funnel-top{ display:flex; align-items:center; gap:8px; margin-bottom:4px; }
.lab-crm-funnel-dot{ width:8px; height:8px; border-radius:50%; flex-shrink:0; }
.lab-crm-funnel-name{ font-size:.75rem; font-weight:700; color:rgba(255,255,255,.75); flex:1; }
.lab-crm-funnel-count{ font-size:.8rem; font-weight:700; color:#fff; }
.lab-crm-funnel-bar-wrap{ height:8px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden; }
.lab-crm-funnel-bar{ height:100%; border-radius:6px; background:var(--ink-accent-grad); }
.lab-crm-funnel-value{ font-size:.65rem; color:rgba(255,255,255,.45); margin-top:3px; text-align:right; }

/* ── Fundraising thermometer ── */
.lab-crm-fund-wrap{ display:flex; gap:20px; align-items:center; }
.lab-crm-thermo{
    width:34px; height:130px; border-radius:20px; background:rgba(255,255,255,.08);
    position:relative; overflow:hidden; flex-shrink:0; border:1px solid rgba(255,255,255,.12);
}
.lab-crm-thermo-fill{ position:absolute; bottom:0; left:0; right:0; border-radius:20px; background:linear-gradient(to top,#10b981,#34d399); }
.lab-crm-thermo-info{ flex:1; }
.lab-crm-thermo-pct{ font-family:var(--font-serif); font-size:1.8rem; font-weight:600; color:#34d399; line-height:1; }
.lab-crm-thermo-label{ font-size:.68rem; color:rgba(255,255,255,.5); margin-bottom:6px; }
.lab-crm-thermo-amount{ font-size:.85rem; font-weight:700; color:#fff; }
.lab-crm-thermo-target{ font-size:.7rem; color:rgba(255,255,255,.45); }
.lab-crm-commit-row{ display:flex; gap:8px; margin-top:10px; }
.lab-crm-commit-badge{
    font-size:.65rem; font-weight:700; padding:4px 10px; border-radius:10px;
    background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:rgba(255,255,255,.7);
}
.lab-crm-commit-badge.hard{ background:rgba(16,185,129,.12); border-color:rgba(16,185,129,.25); color:#6ee7b7; }

/* ── LP Stage rows ── */
.lab-crm-lp-row{ display:flex; align-items:center; gap:10px; padding:6px 0; }
.lab-crm-lp-dot{ width:7px; height:7px; border-radius:50%; flex-shrink:0; }
.lab-crm-lp-label{ font-size:.7rem; font-weight:700; color:rgba(255,255,255,.6); width:100px; flex-shrink:0; }
.lab-crm-lp-bar-wrap{ flex:1; height:7px; background:rgba(255,255,255,.08); border-radius:6px; overflow:hidden; }
.lab-crm-lp-bar{ height:100%; border-radius:6px; background:var(--ink-accent-grad); }
.lab-crm-lp-count{ font-size:.72rem; font-weight:700; color:#fff; width:20px; text-align:right; }
.lab-crm-lp-amount{ font-size:.65rem; color:rgba(255,255,255,.4); width:50px; text-align:right; }

/* ── Contact Cards (Relationship Intelligence) ── */
.lab-crm-contact-grid{ display:grid; grid-template-columns:repeat(2,1fr); gap:12px; }
@media(max-width:700px){ .lab-crm-contact-grid{ grid-template-columns:1fr; } }
.lab-crm-contact-card{ background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.08); border-radius:var(--ink-radius-md); padding:14px; }
.lab-crm-contact-top{ display:flex; align-items:center; gap:10px; margin-bottom:8px; }
.lab-crm-contact-avatar{
    width:36px; height:36px; border-radius:50%; background:var(--ink-accent-grad); color:#fff;
    font-size:.75rem; font-weight:700; display:flex; align-items:center; justify-content:center;
    flex-shrink:0; position:relative;
}
.lab-crm-health-dot{ position:absolute; bottom:-1px; right:-1px; width:11px; height:11px; border-radius:50%; border:2px solid var(--ink-black-soft); }
.lab-crm-contact-name{ font-size:.8rem; font-weight:700; color:#fff; }
.lab-crm-contact-sub{ font-size:.66rem; color:rgba(255,255,255,.45); }
.lab-crm-contact-score{
    margin-left:auto; font-size:.72rem; font-weight:700; padding:3px 9px; border-radius:10px;
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
}
.lab-crm-contact-stats{ display:flex; gap:12px; font-size:.65rem; color:rgba(255,255,255,.5); margin-bottom:6px; }
.lab-crm-warm-path{ font-size:.65rem; color:rgba(255,255,255,.55); background:rgba(255,255,255,.04); border-radius:8px; padding:8px 10px; }
.lab-crm-warm-path strong{ color:#fff; }

/* ── AI Alerts (Claude Sonnet 4.6) ── */
.lab-crm-ai-card{ background:rgba(255,255,255,.05); border:1px solid rgba(255,255,255,.12); border-radius:var(--ink-radius-lg); padding:24px 26px; margin-bottom:22px; }
.lab-crm-ai-top{ display:flex; align-items:center; gap:12px; margin-bottom:16px; }
.lab-crm-ai-logo{ width:36px; height:36px; border-radius:var(--ink-radius-sm); background:#fff; display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lab-crm-ai-logo img{ width:70%; height:70%; object-fit:contain; }
.lab-crm-ai-eyebrow{ font-size:.66rem; color:rgba(255,255,255,.5); text-transform:uppercase; letter-spacing:.08em; font-weight:700; }
.lab-crm-ai-title{ font-size:1.05rem; font-weight:700; color:#fff; }

.lab-crm-alert{ display:flex; gap:12px; padding:12px 14px; border-radius:var(--ink-radius-sm); background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.06); margin-bottom:8px; }
.lab-crm-alert.urgent{ border-left:3px solid #dc2626; }
.lab-crm-alert.high{ border-left:3px solid rgba(255,255,255,.35); }
.lab-crm-alert-icon{ width:30px; height:30px; border-radius:var(--ink-radius-sm); background:rgba(255,255,255,.06); display:flex; align-items:center; justify-content:center; flex-shrink:0; }
.lab-crm-alert-title{ font-size:.78rem; font-weight:700; color:#fff; margin-bottom:3px; }
.lab-crm-alert-msg{ font-size:.72rem; color:rgba(255,255,255,.55); line-height:1.5; }
.lab-crm-alert-action{ font-size:.66rem; color:#a5b4fc; margin-top:6px; }
.lab-crm-priority-badge{
    font-size:.58rem; font-weight:700; padding:2px 9px; border-radius:10px;
    text-transform:uppercase; height:fit-content; flex-shrink:0;
    background:rgba(255,255,255,.08); color:rgba(255,255,255,.7);
}
.lab-crm-priority-badge.urgent{ background:rgba(220,38,38,.15); color:#fca5a5; }

/* ── Team Roles ── */
.lab-crm-team-grid{ display:flex; gap:14px; flex-wrap:wrap; justify-content:center; }
.lab-crm-team-card{ text-align:center; width:90px; }
.lab-crm-team-avatar{
    width:44px; height:44px; border-radius:50%; background:var(--ink-accent-grad); color:#fff;
    font-size:.85rem; font-weight:700; display:flex; align-items:center; justify-content:center;
    margin:0 auto 6px; position:relative;
}
.lab-crm-team-status{ position:absolute; bottom:0; right:0; width:11px; height:11px; border-radius:50%; border:2px solid var(--ink-black-soft); background:#10b981; }
.lab-crm-team-name{ font-size:.7rem; font-weight:700; color:#fff; }
.lab-crm-team-role{ font-size:.6rem; color:rgba(255,255,255,.5); margin-top:2px; }

/* ── Quick Actions Bar ── */
.lab-crm-qa-bar{ display:flex; gap:10px; flex-wrap:wrap; justify-content:center; margin-top:20px; }
.lab-crm-qa-btn{
    display:flex; align-items:center; justify-content:center;
    padding:12px 18px; border-radius:var(--ink-radius-sm);
    background:rgba(255,255,255,.04); border:1px solid rgba(255,255,255,.08);
    min-width:96px; transition:background var(--ink-t-fast), transform var(--ink-t-fast);
}
.lab-crm-qa-btn:hover{ background:rgba(255,255,255,.08); transform:translateY(-2px); }
.lab-crm-qa-label{ font-size:.7rem; font-weight:700; color:rgba(255,255,255,.7); }

/* ═══════════════════════════════════════════════════════════════
   RESPONSIVE — MOBILE SWIPE PATTERNS (cohérent avec landing-cowork)
   ═══════════════════════════════════════════════════════════════ */
@media (max-width:768px){
    .lab-crm-hero-visual-body{ min-height:240px; padding:20px; }
    .lab-crm-mini-kpi-grid{ grid-template-columns:1fr 1fr; }

    .lab-crm-feat-grid{ grid-template-columns:1fr; }
    .lab-crm-usecase-grid{ grid-template-columns:1fr; }
    .lab-crm-interp-grid{ grid-template-columns:1fr 1fr; }

    .lab-crm-two-col{ grid-template-columns:1fr; }
    .lab-crm-contact-grid{ grid-template-columns:1fr; }
    .lab-crm-fund-wrap{ flex-direction:column; align-items:flex-start; }
}

@media (min-width:769px) and (max-width:1024px){
    .lab-crm-feat-grid{ grid-template-columns:repeat(2,1fr); }
    .lab-crm-usecase-grid{ grid-template-columns:1fr 1fr; }
    .lab-crm-kpi-grid{ grid-template-columns:repeat(3,1fr); }
}