/* ====================================================================
   CHATBOT DZ - SECTIONS FONCTIONNELLES
   FICHIER : css/sections.css
   VERSION : FINAL.1
   DESCRIPTION : Features, IA Studio (Cerveau), Omnicanal, Performance.
====================================================================
*/

/* =================================================================
   1. SECTION FONCTIONNALITÉS (FEATURES GRID)
================================================================= */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: 32px;
    margin-top: 40px;
}

.feature-card {
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-lg);
    padding: 40px 32px;
    transition: all 0.4s cubic-bezier(0.25, 0.8, 0.25, 1);
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    position: relative;
    overflow: hidden;
}

/* Effet de survol : Élévation + Bordure colorée */
.feature-card:hover {
    transform: translateY(-8px);
    box-shadow: var(--shadow-xl);
    border-color: var(--primary-500);
}

/* Petite barre décorative au survol */
.feature-card::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 4px;
    background: var(--gradient-primary);
    transform: scaleX(0);
    transform-origin: left;
    transition: transform 0.4s ease;
}

.feature-card:hover::before {
    transform: scaleX(1);
}

/* Boîtes d'icônes */
.icon-box {
    width: 64px;
    height: 64px;
    border-radius: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin-bottom: 24px;
    transition: transform 0.4s ease;
}

.feature-card:hover .icon-box {
    transform: scale(1.1) rotate(5deg);
}

/* Variantes de couleurs pour les icônes */
.icon-box.blue {
    background-color: var(--primary-50);
    color: var(--primary-600);
}

.icon-box.green {
    background-color: var(--success-light);
    color: var(--success-dark);
}

.icon-box.purple {
    background-color: #f3e8ff; /* Violet très clair */
    color: var(--purple);
}

.icon-box.orange {
    background-color: var(--warning-light);
    color: var(--warning-dark);
}

.feature-card h3 {
    font-size: 1.35rem;
    margin-bottom: 12px;
    color: var(--text-main);
}

.feature-card p {
    font-size: 1rem;
    line-height: 1.6;
    color: var(--text-secondary);
    margin-bottom: 0;
}

/* =================================================================
   2. SECTION IA STUDIO : LAYOUT & TEXTE
================================================================= */

/* Layout Split (Texte Gauche / Image Droite ou inverse) */
.split-layout {
    display: flex;
    align-items: center;
    gap: 80px;
    margin-bottom: 0;
}

.split-layout.reversed {
    flex-direction: row-reverse;
}

.split-text {
    flex: 1;
}

.split-image {
    flex: 1;
    display: flex;
    justify-content: center;
    position: relative;
}

/* Mini-Cartes de Texte (Studio Features) */
.studio-features {
    display: flex;
    flex-direction: column;
    gap: 15px;
    margin-top: 30px;
    margin-bottom: 30px;
}

.studio-card {
    display: flex;
    align-items: flex-start;
    gap: 15px;
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    padding: 15px;
    border-radius: 12px;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.studio-card:hover {
    transform: translateX(5px); /* Petit mouvement vers la droite */
    box-shadow: 0 4px 12px rgba(0,0,0,0.05);
    border-color: var(--primary-200);
}

.sc-icon {
    width: 40px;
    height: 40px;
    background-color: var(--primary-50);
    color: var(--primary-500);
    border-radius: 8px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
    flex-shrink: 0; /* Empêche l'icône de s'écraser */
}

.sc-content h4 {
    margin: 0 0 4px 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--text-main);
}

.sc-content p {
    margin: 0;
    font-size: 0.9rem;
    line-height: 1.4;
    color: var(--text-secondary);
}

/* =================================================================
   2B. VISUEL : SÉQUENCEUR NEURONAL (CENTRAGE & CONNEXIONS)
================================================================= */

.neural-sequencer {
    background: #f8fafc;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    padding: 40px 20px;
    width: 100%;
    max-width: 750px;
    display: flex;
    align-items: center;
    /* Centrage parfait via gestion des espaces */
    justify-content: center; 
    gap: 0; 
    position: relative;
    overflow: visible; /* Important pour les badges */
    min-height: 400px;
}

/* --- COLONNES (ÉQUILIBRÉES POUR LE CENTRAGE) --- */

.ns-column {
    display: flex;
    flex-direction: column;
    justify-content: center;
    position: relative;
}

/* Colonne GAUCHE (Client) */
.ns-column.start { 
    flex: 1; /* Prend autant de place que la droite */
    display: flex; 
    justify-content: center; 
    align-items: flex-end; /* Pousse le message vers le cerveau */
    z-index: 5; 
    padding-right: 10px; /* Petit espace avec la ligne */
}

/* Colonne CENTRE (Cerveau) */
.ns-column.center { 
    flex: 0 0 100px; /* Taille fixe au milieu */
    display: flex; 
    justify-content: center; 
    z-index: 10; 
}

/* Colonne DROITE (Modules) */
.ns-column.end { 
    flex: 1; /* Prend autant de place que la gauche */
    padding-left: 0; 
    position: relative;
    margin-left: 0; 
    padding-left: 80px; /* Décale le contenu vers la droite */
    z-index: 1; 
}

/* --- ÉLÉMENTS --- */

/* 1. Message Client */
.ns-card.user-msg {
    display: flex; align-items: center; gap: 10px;
    animation: popIn 0.5s ease-out;
}
.ns-avatar {
    width: 40px; height: 40px; background: #e2e8f0;
    border-radius: 50%; display: flex; align-items: center; justify-content: center; color: #64748b;
    flex-shrink: 0;
}
.ns-bubble {
    background: #fff; padding: 12px 16px;
    border-radius: 12px; border: 1px solid var(--border-light);
    font-size: 0.9rem; font-weight: 600; color: var(--text-main);
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 2. LIGNE DE CONNEXION (MESSAGE -> CERVEAU) */
.ns-connector-straight {
    width: 40px;          
    height: 3px;
    background-color: #cbd5e1;
    border-radius: 2px;
    flex-shrink: 0;
    margin: 0 -5px; /* Chevauchement léger pour éviter les trous */
    position: relative;
    z-index: 4; /* Sous le cerveau, sur le fond */
    transition: all 0.4s ease;
}

/* État ACTIF (S'allume en bleu) */
.ns-connector-straight.active {
    background-color: var(--primary-500);
    box-shadow: 0 0 8px rgba(0, 106, 255, 0.6);
}

/* 3. Cerveau Central */
.ns-brain-wrapper { 
    position: relative; 
    width: 100px; height: 100px; 
    display: flex; align-items: center; justify-content: center; 
}

.ns-brain {
    width: 80px; height: 80px;
    background: linear-gradient(135deg, #0f172a, #334155);
    border-radius: 50%; display: flex; align-items: center; justify-content: center;
    color: #fff; font-size: 2rem; 
    z-index: 20;
    box-shadow: 0 15px 30px rgba(0,0,0,0.2);
    transition: transform 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
}
.ns-brain.active { transform: scale(1.15); box-shadow: 0 0 40px rgba(0, 106, 255, 0.3); }

.brain-pulse {
    position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
    width: 100%; height: 100%; border-radius: 50%;
    border: 2px solid var(--primary-500); opacity: 0; pointer-events: none;
}
.ns-brain.active + .brain-pulse { animation: radarPulse 1.5s infinite; }

/* Badges */
.ns-badge {
    position: absolute; background: var(--primary-50); color: var(--primary-700);
    border: 1px solid var(--primary-200);
    font-size: 0.7rem; font-weight: 700; padding: 4px 10px; border-radius: 100px;
    opacity: 0; transition: all 0.4s ease; white-space: nowrap; z-index: 30;
    box-shadow: 0 4px 10px rgba(0,0,0,0.05);
}

/* 4. CÂBLES SVG (AJUSTÉS) */
/* DANS css/sections.css */

.ns-svg-paths {
    position: absolute;
    top: 0; 
    
    /* 1. Position horizontale : On le place pour qu'il parte de sous le cerveau */
    left: -80px; 
    
    /* 2. Largeur : On l'élargit pour qu'il atteigne les blocs qui sont maintenant plus loin */
    width: 180px; /* Était 120px ou 140px */
    
    height: 100%;
    z-index: -1;
    pointer-events: none;
    overflow: visible;
}

.ns-path {
    fill: none !important; stroke: #cbd5e1; stroke-width: 2px;
    vector-effect: non-scaling-stroke;
    transition: all 0.3s ease;
}
.ns-path.active {
    stroke: var(--primary-500); stroke-width: 3px;
    filter: drop-shadow(0 0 5px rgba(0, 106, 255, 0.4));
    animation: dash 1s linear infinite;
}

/* Modules Stack */
.ns-modules-stack { display: flex; flex-direction: column; gap: 12px; width: 100%; }

.ns-module {
    background: #fff; border: 1px solid var(--border-light);
    padding: 12px 16px; border-radius: 10px;
    font-size: 0.85rem; font-weight: 600; color: var(--text-secondary);
    display: flex; align-items: center; gap: 10px;
    transition: all 0.4s ease; position: relative;
    width: 100%; max-width: 240px;
}
.ns-module i { width: 20px; text-align: center; color: var(--text-muted); }

.ns-module.active {
    border-color: var(--primary-500); color: var(--primary-800);
    background: #eff6ff; transform: translateX(8px);
    box-shadow: 0 4px 12px rgba(0, 106, 255, 0.1);
}
.ns-module.active i { color: var(--primary-500); }

/* Bulle Résultat */
.ns-result-pop {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: #10b981; color: white;
    padding: 4px 10px; border-radius: 100px;
    font-size: 0.7rem; opacity: 0; 
    transition: all 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 2px 8px rgba(16, 185, 129, 0.3);
}
.ns-module.active .ns-result-pop {
    opacity: 1; right: -15px;
}

/* Animations */
@keyframes popIn { from { opacity: 0; transform: scale(0.9); } to { opacity: 1; transform: scale(1); } }
@keyframes radarPulse { 0% { transform: translate(-50%, -50%) scale(1); opacity: 0.6; } 100% { transform: translate(-50%, -50%) scale(1.6); opacity: 0; } }
@keyframes dash { from { stroke-dashoffset: 50; } to { stroke-dashoffset: 0; } }

/* Responsive Mobile */
@media (max-width: 900px) {
    .neural-sequencer { flex-direction: column; padding: 40px 20px; height: auto; }
    .ns-column.end { margin-left: 0; margin-top: 40px; border-left: 2px dashed #e2e8f0; padding-left: 20px; width: 100%; }
    /* On cache la ligne droite sur mobile car empilement vertical */
    .ns-connector-straight { display: none; } 
    .ns-svg-paths { display: none; } 
    .ns-brain-wrapper { margin: 20px 0; }
    .ns-module.active { transform: translateY(-5px); }
    .ns-result-pop { position: relative; right: auto; top: auto; transform: none; margin-left: auto; display: inline-block; }
    .ns-module.active .ns-result-pop { right: auto; }
}
/* =================================================================
   3. SECTION OMNICANAL (GRILLE FLEXIBLE & CENTRÉE)
================================================================= */
.integrations-wrapper {
    display: flex;               /* Flexbox pour le centrage */
    justify-content: center;     /* Centre horizontalement */
    flex-wrap: wrap;             /* Permet le retour à la ligne */
    gap: 15px;                   /* Espace réduit */
    margin-top: 40px;
}

.integration-card {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: var(--radius-md);
    padding: 25px 15px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 15px;
    transition: all 0.3s cubic-bezier(0.25, 0.8, 0.25, 1);
    cursor: default;
    
    /* Taille idéale pour 7 items */
    flex: 0 0 145px;
    min-width: 140px;
}

.integration-card:hover {
    transform: translateY(-6px);
    border-color: var(--primary-200);
    box-shadow: var(--shadow-lg);
}

.integration-card i {
    font-size: 2.2rem;
    transition: color 0.3s ease;
}

.integration-card span {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--text-main);
    text-align: center;
}

/* Couleurs Spécifiques (TOUJOURS VISIBLES) */
.integration-card i.fa-facebook-messenger { color: #006AFF; } 
.integration-card i.fa-instagram { color: #E4405F; } 
.integration-card i.fa-whatsapp { color: #25D366; } 
.integration-card i.fa-tiktok { color: #000000; } 
.integration-card i.fa-shopify { color: #95BF47; } 
.integration-card i.fa-wordpress { color: #21759B; } 
.integration-card i.fa-globe { color: #007bff; } 


/* =================================================================
   4. SECTION PERFORMANCE (TABLEAU DE BORD)
================================================================= */
#performance .analytics-dashboard {
    background: radial-gradient(circle at center, #ffffff 0%, var(--slate-50) 100%);
    border: 1px solid var(--border-light);
    box-shadow: 0 20px 40px -10px rgba(0, 106, 255, 0.15);
    width: 100%;
    max-width: 540px;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    position: relative;
}

#performance h3 {
    font-weight: 800;
    letter-spacing: -0.05em;
    background: var(--gradient-primary);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
}

#performance i.fa-server {
    animation: pulseServer 3s infinite ease-in-out;
}

@keyframes pulseServer {
    0%, 100% { transform: scale(1); opacity: 1; }
    50% { transform: scale(1.05); opacity: 0.8; }
}
/* =================================================================
   STYLE SPÉCIFIQUE : PERFORMANCE FEATURES (CARTES ENCADRÉES)
================================================================= */
.perf-features-grid {
    display: flex;
    flex-direction: column;
    gap: 16px; /* Espace entre les cartes */
    margin-top: 30px;
}

.perf-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    
    /* STYLE CARTE (Comme IA Studio) */
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

/* Effet au survol : La carte remonte et l'ombre apparaît */
.perf-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-200);
}

.pf-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
    transition: transform 0.3s ease;
}

.perf-feature:hover .pf-icon {
    transform: scale(1.1) rotate(5deg);
}

/* Couleurs des icônes */
.pf-icon.green { background-color: #ecfdf5; color: #059669; }
.pf-icon.red   { background-color: #fef2f2; color: #dc2626; }
.pf-icon.blue  { background-color: #eff6ff; color: #2563eb; }

.pf-content h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.pf-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* =================================================================
   NOUVEAU VISUEL : PIPELINE D'ANALYSE (PERFORMANCE)
================================================================= */

.analytics-pipeline {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 24px;
    padding: 30px 20px;
    width: 100%;
    max-width: 580px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    box-shadow: var(--shadow-xl);
    position: relative;
    overflow: hidden;
}

/* --- ÉTAPE 1 : INPUT STREAM --- */
.pipeline-stage.input {
    flex: 0 0 100px;
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.stage-header {
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    color: var(--text-muted);
    margin-bottom: 10px;
}

.data-stream-container {
    width: 60px;
    height: 180px;
    background: var(--slate-50);
    border-radius: 12px;
    border: 1px dashed var(--border-light);
    position: relative;
    overflow: hidden;
    display: flex;
    justify-content: center;
}

/* Points de données animés */
.data-point {
    position: absolute;
    top: -30px;
    width: 28px; height: 28px;
    background: #fff;
    border-radius: 50%;
    box-shadow: var(--shadow-sm);
    display: flex; align-items: center; justify-content: center;
    font-size: 0.8rem;
    animation: dataFlow 3s infinite linear;
}
.dp-msg { color: var(--primary-500); border: 1px solid var(--primary-200); left: 15%; }
.dp-search { color: var(--warning-main); border: 1px solid var(--warning-light); animation-delay: 0.8s; right: 15%; }
.dp-cart { color: var(--success-main); border: 1px solid var(--success-light); animation-delay: 1.5s; left: 30%; }
.dp-msg.del-1 { animation-delay: 2.2s; right: 25%; }
.dp-search.del-2 { animation-delay: 2.8s; left: 10%; }

@keyframes dataFlow {
    0% { top: -30px; opacity: 0; }
    10% { opacity: 1; }
    90% { opacity: 1; }
    100% { top: 200px; opacity: 0; }
}

.pipeline-connector-arrow {
    position: absolute;
    right: -25px; top: 50%;
    transform: translateY(-50%);
    width: 30px; height: 2px;
    background: var(--border-medium);
}
.pipeline-connector-arrow::after {
    content: ''; position: absolute; right: 0; top: -4px;
    border-left: 8px solid var(--border-medium);
    border-top: 5px solid transparent;
    border-bottom: 5px solid transparent;
}

/* --- ÉTAPE 2 : CORE ENGINE --- */
.pipeline-stage.core {
    flex: 0 0 120px;
    display: flex;
    flex-direction: column;
    align-items: center;
    z-index: 2;
}

.analysis-engine {
    width: 90px; height: 90px;
    background: linear-gradient(135deg, var(--slate-800), var(--slate-900));
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    position: relative;
    box-shadow: 0 10px 25px rgba(0,0,0,0.15);
    border: 3px solid #ffffff;
}

.brain-icon {
    font-size: 2.5rem;
    color: #ffffff;
    z-index: 2;
}

.spinner {
    position: absolute;
    width: 100%; height: 100%;
    font-size: 4rem;
    color: rgba(255,255,255,0.05);
    animation: spinSlow 10s linear infinite;
}
@keyframes spinSlow { to { transform: rotate(360deg); } }

.stage-label {
    margin-top: 12px;
    font-weight: 700;
    font-size: 0.85rem;
    color: var(--text-main);
}

/* --- ÉTAPE 3 : OUTPUT BLOCKS --- */
.pipeline-stage.output {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 15px;
    padding-left: 30px;
    position: relative;
}

/* Ligne verticale connecteur principal */
.pipeline-stage.output::before {
    content: '';
    position: absolute;
    left: 0; top: 50%;
    transform: translateY(-50%);
    width: 2px; height: 70%;
    background: var(--border-medium);
}

.output-block {
    display: flex;
    align-items: center;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 12px 15px;
    position: relative;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}
.output-block:hover {
    transform: translateX(5px);
    box-shadow: var(--shadow-md);
}

/* Connecteurs horizontaux vers chaque bloc */
.ob-connector {
    position: absolute;
    left: -30px; top: 50%;
    width: 30px; height: 2px;
    background: var(--border-medium);
}

.ob-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    display: flex; align-items: center; justify-content: center;
    font-size: 1rem;
    margin-right: 12px;
}
.ob-details {
    display: flex; flex-direction: column;
}
.ob-details strong { font-size: 0.95rem; color: var(--text-main); }
.ob-details span { font-size: 0.75rem; color: var(--text-secondary); }

/* Couleurs spécifiques */
.output-block.green .ob-icon { background: var(--success-light); color: var(--success-main); }
.output-block.green:hover { border-color: var(--success-main); }

.output-block.red .ob-icon { background: var(--danger-light); color: var(--danger-main); }
.output-block.red:hover { border-color: var(--danger-main); }

.output-block.blue .ob-icon { background: var(--primary-50); color: var(--primary-500); }
.output-block.blue:hover { border-color: var(--primary-500); }


/* Responsive */
@media (max-width: 768px) {
    .analytics-pipeline { flex-direction: column; gap: 30px; padding: 30px 15px; }
    .pipeline-connector-arrow { transform: rotate(90deg); right: auto; top: auto; bottom: -25px; left: 50%; }
    .pipeline-stage.output { padding-left: 0; width: 100%; border-top: 2px solid var(--border-medium); padding-top: 25px; }
    .pipeline-stage.output::before { display: none; }
    .ob-connector { display: none; }
}
/* =================================================================
   VISUEL : DASHBOARD DÉTAILLÉ (ENHANCED)
================================================================= */

/* Base du Dashboard (Similaire à l'ancien mais plus structuré) */
.analytics-dashboard.enhanced {
    background: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 20px;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    overflow: hidden;
    display: flex;
    flex-direction: column;
}

/* Header */
.dash-header {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex; justify-content: space-between; align-items: center;
    background: #f8fafc;
}
.dh-left { display: flex; flex-direction: column; }
.dh-left strong { font-size: 0.95rem; color: var(--text-main); }
.dh-subtitle { font-size: 0.75rem; color: var(--text-muted); }

/* Sections internes */
.dash-section {
    padding: 20px;
    border-bottom: 1px solid var(--border-light);
}
.dash-section:last-child { border-bottom: none; }

/* Ligne 1 : KPIs */
.kpi-grid { display: flex; gap: 15px; }
.kpi-box {
    flex: 1;
    background: #fff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 15px;
    display: flex; flex-direction: column; align-items: center; text-align: center;
}
.kpi-box.success { background: #f0fdf4; border-color: #bbf7d0; }
.kpi-box.primary { background: #eff6ff; border-color: #bfdbfe; }

.kpi-label { font-size: 0.75rem; font-weight: 600; color: var(--text-secondary); text-transform: uppercase; }
.kpi-value { font-size: 1.8rem; font-weight: 800; color: var(--text-main); margin: 5px 0; }
.kpi-value i { font-size: 1.2rem; opacity: 0.7; margin-right: 5px; }
.kpi-trend { font-size: 0.7rem; color: #16a34a; font-weight: 700; background: #dcfce7; padding: 2px 6px; border-radius: 100px; }

/* Ligne 2 : Opportunités Manquées */
.section-title { font-size: 0.85rem; font-weight: 700; color: var(--text-secondary); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.section-title.danger { color: #dc2626; }

.missed-list { display: flex; flex-direction: column; gap: 8px; }
.missed-item {
    display: flex; justify-content: space-between; align-items: center;
    background: #fff; border: 1px solid var(--border-light);
    padding: 10px 12px; border-radius: 8px;
    font-size: 0.9rem; color: var(--text-main);
    border-left: 3px solid #ef4444; /* Barre rouge */
}
.mi-count { font-size: 0.75rem; font-weight: 700; color: #ef4444; background: #fef2f2; padding: 2px 6px; border-radius: 4px; }

/* Ligne 3 : Barre de Transfert */
.handoff-bar-wrapper { width: 100%; }
.handoff-bar {
    height: 12px; width: 100%;
    background: #e2e8f0; border-radius: 100px;
    overflow: hidden; display: flex;
    margin-bottom: 10px;
}
.hb-segment.ai { background: var(--primary-500); }
.hb-segment.human { background: var(--warning-main); }

.handoff-legend { display: flex; justify-content: space-between; font-size: 0.75rem; color: var(--text-secondary); }
.handoff-legend span { display: flex; align-items: center; gap: 6px; }
.dot { width: 8px; height: 8px; border-radius: 50%; }
.dot.ai { background: var(--primary-500); }
.dot.human { background: var(--warning-main); }

/* Responsive */
@media (max-width: 480px) {
    .kpi-grid { flex-direction: column; }
}
/* =================================================================
   STYLE SPÉCIFIQUE : LIVE TESTER FEATURES (CARTES)
================================================================= */
.lt-features-grid {
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-top: 30px;
}

.lt-feature {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 20px;
    transition: all 0.3s ease;
}

.lt-feature:hover {
    transform: translateY(-3px);
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.05);
    border-color: var(--primary-200);
}

.lt-icon {
    width: 48px;
    height: 48px;
    border-radius: 12px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    flex-shrink: 0;
}

/* Couleurs spécifiques pour cette section */
.lt-icon.purple { background-color: #f3e8ff; color: #9333ea; }
.lt-icon.orange { background-color: #ffedd5; color: #ea580c; }
.lt-icon.green  { background-color: #dcfce7; color: #16a34a; }

.lt-content h4 {
    margin: 0 0 6px 0;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--text-main);
}

.lt-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* =================================================================
   VISUEL : BROWSER MOCKUP (CORRIGÉ & AGRANDI)
================================================================= */

.browser-mockup {
    width: 100%;
    /* On augmente la taille max pour qu'elle prenne toute la place */
    max-width: 700px; 
    background-color: #ffffff;
    border-radius: 12px;
    /* Ombre beaucoup plus forte pour donner du "poids" */
    box-shadow: 
        0 30px 60px -12px rgba(0, 0, 0, 0.25), 
        0 0 0 1px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    transition: transform 0.4s ease;
    
    /* On redresse l'image (moins de rotation) pour qu'elle paraisse plus grande et proche */
    transform: perspective(1500px) rotateY(-3deg) rotateX(1deg) translateX(10px);
}

/* Effet au survol : Elle se redresse complètement et avance */
.browser-mockup:hover {
    transform: perspective(1500px) rotateY(0deg) rotateX(0deg) translateY(-5px) scale(1.02);
    box-shadow: 0 40px 80px -20px rgba(0, 106, 255, 0.3);
}

/* En-tête de la fenêtre */
.browser-header {
    background: #f1f5f9; /* Gris un peu plus soutenu pour le contraste */
    padding: 14px 20px;
    border-bottom: 1px solid var(--border-light);
    display: flex;
    align-items: center;
    gap: 20px;
}

.browser-dots { display: flex; gap: 8px; }
.browser-dots .dot { width: 12px; height: 12px; border-radius: 50%; display:block; }
.browser-dots .dot.red { background: #ef4444; border: 1px solid #dc2626; }
.browser-dots .dot.yellow { background: #f59e0b; border: 1px solid #d97706; }
.browser-dots .dot.green { background: #10b981; border: 1px solid #059669; }

.browser-url {
    flex: 1;
    background: #ffffff;
    border: 1px solid #e2e8f0;
    border-radius: 6px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.8rem;
    color: var(--text-secondary);
    font-family: 'Inter', sans-serif; /* Plus lisible que monospace */
    box-shadow: inset 0 1px 2px rgba(0,0,0,0.05);
}

/* L'image elle-même */
.browser-content-img {
    width: 100%;
    height: auto;
    display: block;
    image-rendering: -webkit-optimize-contrast;
}

/* Ajustement Responsive */
@media (max-width: 768px) {
    .browser-mockup {
        transform: none !important; /* Pas de 3D sur mobile */
        max-width: 100%;
        margin-top: 20px; /* Espace avec le texte */
    }
}
/* =================================================================
   LAYOUT VERTICAL (POUR SCREENSHOT MASSIF)
================================================================= */

.vertical-layout {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 40px;
}

/* Variante "Large Theater" pour le Mockup */
.browser-mockup.large-theater {
    width: 100%;
    max-width: 1000px; /* Beaucoup plus large (était 580px ou 700px) */
    box-shadow: 
        0 30px 80px -20px rgba(0, 0, 0, 0.15), /* Ombre portée plus large */
        0 0 0 1px rgba(0, 0, 0, 0.05);
    transform: translateY(0); /* Pas de rotation 3D, on veut voir les détails */
    margin-bottom: 20px;
}

.browser-mockup.large-theater:hover {
    transform: translateY(-5px); /* Juste un petit lift */
    box-shadow: 0 40px 100px -20px rgba(0, 106, 255, 0.2);
}

/* Variante Horizontale pour la grille de features */
.lt-features-grid.horizontal {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes au lieu d'empilé */
    gap: 30px;
    width: 100%;
    max-width: 1100px;
    margin-top: 10px;
}

/* Ajustement des cartes pour la grille horizontale */
.lt-features-grid.horizontal .lt-feature {
    flex-direction: column; /* Icône au-dessus du texte */
    align-items: center;
    text-align: center;
    padding: 30px 20px;
}

.lt-features-grid.horizontal .lt-icon {
    margin-bottom: 15px;
    width: 56px;
    height: 56px;
    font-size: 1.5rem;
}

/* RESPONSIVE SPÉCIFIQUE POUR CE LAYOUT */
@media (max-width: 900px) {
    .lt-features-grid.horizontal {
        grid-template-columns: 1fr; /* Retour à la verticale sur mobile/tablette */
        gap: 15px;
    }
    
    .lt-features-grid.horizontal .lt-feature {
        flex-direction: row; /* Remet l'icône à gauche sur mobile pour gagner de la place */
        text-align: left;
        padding: 20px;
        align-items: flex-start;
    }
    
    .lt-features-grid.horizontal .lt-icon {
        margin-bottom: 0;
        width: 48px; height: 48px; font-size: 1.25rem;
    }
}
/* =================================================================
   STYLE SPÉCIFIQUE : HANDOFF STEPS (SOLOPRENEUR)
================================================================= */
.handoff-steps {
    display: flex;
    flex-direction: column;
    gap: 25px;
    margin-top: 35px;
}

.h-step {
    display: flex;
    align-items: flex-start;
    gap: 20px;
    position: relative;
}

/* Ligne de connexion discrète entre les étapes (Optionnel) */
.h-step:not(:last-child)::after {
    content: '';
    position: absolute;
    left: 24px; /* Centre de l'icône */
    top: 50px;
    bottom: -20px;
    width: 2px;
    background-color: var(--border-light);
    z-index: 0;
}

.hs-icon {
    width: 50px;
    height: 50px;
    background-color: #ffffff;
    border: 1px solid var(--border-light);
    border-radius: 50%; /* Rond parfait */
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--primary-500);
    font-size: 1.2rem;
    box-shadow: var(--shadow-sm);
    z-index: 1; /* Passe au-dessus de la ligne */
    flex-shrink: 0;
}

.hs-content {
    padding-top: 5px;
}

.hs-content h4 {
    margin: 0 0 5px 0;
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--text-main);
}

.hs-content p {
    margin: 0;
    font-size: 0.95rem;
    line-height: 1.5;
    color: var(--text-secondary);
}
/* =================================================================
   MISE À JOUR IA STUDIO : MODE LARGE & GRILLE
================================================================= */

/* Agrandir le séquenceur */
.neural-sequencer.large-mode {
    max-width: 900px; /* Beaucoup plus large */
    padding: 50px 30px;
    box-shadow: 0 30px 60px -15px rgba(0, 0, 0, 0.1);
    margin-bottom: 20px;
}

/* Grille horizontale pour les fonctionnalités */
.studio-features.horizontal-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr); /* 3 colonnes */
    gap: 25px;
    width: 100%;
    max-width: 1100px;
    margin-top: 20px;
}

.studio-features.horizontal-grid .studio-card {
    flex-direction: column; /* Icône au-dessus du texte */
    align-items: center;
    text-align: center;
    padding: 30px 20px;
}

.studio-features.horizontal-grid .sc-icon {
    margin-bottom: 15px;
    width: 50px; height: 50px; font-size: 1.3rem;
}

/* Petit ajustement pour que le texte ne soit pas trop long */
.studio-features.horizontal-grid p {
    font-size: 0.9rem;
}