/* ============================================
   XCELERE - Site Vitrine v2
   Design System: Apple-inspired + Minimaliste
   ============================================ */

/* ----- CSS Variables ----- */
:root {
    /* Couleurs de marque Xcelere */
    --color-primary: #419DF0;
    --color-secondary: #1E1E2D;
    --color-accent-yellow: #F7C844;
    --color-accent-pink: #E0516E;
    --color-accent-green: #72C98F;
    --color-accent-blue: #419DF0;

    /* Nuances de gris */
    --color-dark: #1E1E2D;
    --color-dark-light: #3A3A4F;
    --color-gray-900: #212529;
    --color-gray-700: #495057;
    --color-gray-600: #6b7280;
    --color-gray-500: #6c757d;
    --color-gray-400: #9ca3af;
    --color-gray-300: #dee2e6;
    --color-gray-200: #e5e7eb;
    --color-gray-100: #f8f9fa;
    --color-gray-50: #f9fafb;
    --color-white: #ffffff;

    /* Backgrounds */
    --bg-light: #f0f2f5;
    --bg-gradient: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);

    /* Typography */
    --font-primary: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    --font-display: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;

    /* Spacing */
    --space-xs: 0.25rem;
    --space-sm: 0.5rem;
    --space-md: 1rem;
    --space-lg: 1.5rem;
    --space-xl: 2rem;
    --space-2xl: 3rem;
    --space-3xl: 4rem;
    --space-4xl: 6rem;

    /* Border radius */
    --radius-sm: 0.375rem;
    --radius-md: 0.75rem;
    --radius-lg: 1rem;
    --radius-xl: 1.5rem;
    --radius-full: 9999px;

    /* Shadows */
    --shadow-sm: 0 1px 2px 0 rgb(0 0 0 / 0.05);
    --shadow-md: 0 4px 6px -1px rgb(0 0 0 / 0.07), 0 2px 4px -2px rgb(0 0 0 / 0.07);
    --shadow-lg: 0 10px 15px -3px rgb(0 0 0 / 0.08), 0 4px 6px -4px rgb(0 0 0 / 0.08);
    --shadow-xl: 0 20px 25px -5px rgb(0 0 0 / 0.1), 0 8px 10px -6px rgb(0 0 0 / 0.1);

    /* Transitions */
    --transition-fast: 150ms ease;
    --transition-base: 250ms ease;
    --transition-slow: 350ms ease;

    /* Container */
    --container-max: 1200px;
    --container-narrow: 800px;
}

/* ----- Reset & Base ----- */
*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

html {
    scroll-behavior: smooth;
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-primary);
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.6;
    color: var(--color-gray-700);
    background-color: var(--color-white);
}

img {
    max-width: 100%;
    height: auto;
    display: block;
}

a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color var(--transition-fast);
}

a:hover {
    color: var(--color-dark);
}

/* ----- Typography ----- */
h1, h2, h3, h4, h5, h6 {
    font-family: var(--font-display);
    font-weight: 600;
    line-height: 1.2;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

h1 {
    font-size: clamp(2.5rem, 5vw, 3.5rem);
    font-weight: 700;
    letter-spacing: -0.02em;
}

h2 {
    font-size: clamp(2rem, 4vw, 2.75rem);
    font-weight: 600;
    letter-spacing: -0.01em;
}

h3 {
    font-size: clamp(1.5rem, 3vw, 1.875rem);
    font-weight: 600;
}

h4 {
    font-size: 1.25rem;
    font-weight: 600;
}

p {
    margin-bottom: var(--space-md);
}

.text-light {
    font-weight: 300;
}

.text-muted {
    color: var(--color-gray-500);
}

.text-center {
    text-align: center;
}

.lead {
    font-size: 1.25rem;
    font-weight: 300;
    color: var(--color-gray-500);
    line-height: 1.7;
}

/* ----- Layout ----- */
.container {
    width: 100%;
    max-width: var(--container-max);
    margin: 0 auto;
    padding: 0 var(--space-lg);
}

.container-narrow {
    max-width: var(--container-narrow);
}

.section {
    padding: var(--space-4xl) 0;
}

.section-sm {
    padding: var(--space-2xl) 0;
}

.section-lg {
    padding: calc(var(--space-4xl) * 1.5) 0;
}

/* Grid System */
.grid {
    display: grid;
    gap: var(--space-xl);
}

.grid-2 {
    grid-template-columns: repeat(2, 1fr);
}

.grid-3 {
    grid-template-columns: repeat(3, 1fr);
}

.grid-4 {
    grid-template-columns: repeat(4, 1fr);
}

@media (max-width: 992px) {
    .grid-4 {
        grid-template-columns: repeat(2, 1fr);
    }
    .grid-3 {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .grid-2, .grid-3, .grid-4 {
        grid-template-columns: 1fr;
    }
}

/* Flexbox Utilities */
.flex {
    display: flex;
}

.flex-center {
    display: flex;
    align-items: center;
    justify-content: center;
}

.flex-between {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.flex-col {
    flex-direction: column;
}

.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }
.gap-xl { gap: var(--space-xl); }

/* ----- Header & Navigation v2 - Modern Design ----- */
.header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 9998;
    background: rgba(255, 255, 255, 0.85);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.header.scrolled {
    background: rgba(255, 255, 255, 0.95);
    box-shadow: 0 4px 30px rgba(0, 0, 0, 0.08);
}


.header-inner {
    height: 72px;
}

/* Navigation Container */
.header .nav {
    display: flex;
    align-items: center;
    justify-content: space-between;
    height: 100%;
    gap: var(--space-2xl);
}

.nav-logo {
    display: flex;
    align-items: center;
    flex-shrink: 0;
}

.nav-logo img {
    height: 36px;
    width: auto;
    transition: filter 0.3s ease;
}

/* Nav Menu */
.nav-menu {
    display: flex;
    align-items: center;
    flex: 1;
    justify-content: center;
}

.nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    list-style: none;
}

/* Nav Link Base */
.nav-link {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-gray-700);
    padding: 10px 18px;
    border-radius: var(--radius-full);
    border: none;
    background: transparent;
    cursor: pointer;
    position: relative;
    transition: all 0.2s ease;
    text-decoration: none;
    font-family: inherit;
}

.nav-link:hover {
    color: var(--color-dark);
    background: rgba(0, 0, 0, 0.04);
}

.nav-link.active {
    color: var(--color-primary);
    background: rgba(65, 157, 240, 0.08);
}

/* Dropdown Trigger */
.nav-dropdown-trigger {
    cursor: pointer;
}

.nav-dropdown-icon {
    display: inline-flex;
    transition: transform 0.25s ease;
}

.nav-item:hover .nav-dropdown-icon,
.nav-item.is-expanded .nav-dropdown-icon {
    transform: rotate(180deg);
}

.nav-item.active > .nav-link {
    color: var(--color-primary);
}

/* Nav Actions */
.nav-actions {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    flex-shrink: 0;
}

.nav-actions .btn {
    font-size: 0.875rem;
    padding: 10px 22px;
    border-radius: var(--radius-full);
    background: linear-gradient(135deg, var(--color-primary) 0%, #60a5fa 100%);
    border: none;
    box-shadow: 0 2px 10px rgba(65, 157, 240, 0.3);
    transition: all 0.2s ease;
}

.nav-actions .btn:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 15px rgba(65, 157, 240, 0.4);
}

/* Mobile Toggle */
.nav-toggle {
    display: none;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 44px;
    height: 44px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    border-radius: var(--radius-full);
    transition: background 0.2s ease;
}

.nav-toggle:hover {
    background: rgba(0, 0, 0, 0.04);
}

.nav-toggle-line {
    display: block;
    width: 20px;
    height: 2px;
    background: var(--color-dark);
    border-radius: 2px;
    transition: all 0.25s ease;
}

.nav-toggle-line + .nav-toggle-line {
    margin-top: 5px;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
}

.nav-toggle.is-open .nav-toggle-line:nth-child(2) {
    opacity: 0;
}

.nav-toggle.is-open .nav-toggle-line:nth-child(3) {
    transform: rotate(-45deg) translate(5px, -5px);
}

/* ----- Mega Menu v2 - Modern & Airy ----- */
.mega-menu {
    position: absolute;
    top: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%);
    min-width: 680px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 20px;
    box-shadow:
        0 25px 80px -20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.03),
        0 0 1px rgba(0, 0, 0, 0.1);
    padding: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    transform: translateX(-50%) translateY(15px);
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    z-index: 10001;
}

/* Decorative top indicator */
.mega-menu::before {
    content: '';
    position: absolute;
    top: -6px;
    left: 50%;
    transform: translateX(-50%);
    width: 12px;
    height: 12px;
    background: rgba(255, 255, 255, 0.98);
    border-radius: 3px;
    transform: translateX(-50%) rotate(45deg);
    box-shadow: -1px -1px 0 0 rgba(0, 0, 0, 0.03);
}

.nav-item {
    position: relative;
}

.nav-item:hover > .mega-menu,
.mega-menu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu-compact {
    min-width: 380px;
}

.mega-menu-container {
    position: relative;
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-2xl);
    align-items: start;
}

.mega-menu-section {
    display: flex;
    flex-direction: column;
}

.mega-menu-title {
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-400);
    margin-bottom: var(--space-lg);
    padding-left: var(--space-sm);
}

.mega-menu-items {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* Mega Menu Item */
.mega-menu-item-wrapper {
    position: relative;
}

.mega-menu-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: 12px 14px;
    border-radius: 14px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mega-menu-item:hover {
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.06) 0%, rgba(114, 201, 143, 0.04) 100%);
}

.mega-menu-item.active {
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.1) 0%, rgba(65, 157, 240, 0.05) 100%);
}

.mega-menu-item.active .mega-menu-item-content strong {
    color: var(--color-primary);
}

/* Monochrome icons - unified style */
.mega-menu-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 42px;
    height: 42px;
    border-radius: 12px;
    flex-shrink: 0;
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.1) 0%, rgba(65, 157, 240, 0.05) 100%);
    color: var(--color-primary);
    transition: all 0.2s ease;
}

.mega-menu-item:hover .mega-menu-icon {
    background: linear-gradient(135deg, var(--color-primary) 0%, #60a5fa 100%);
    color: white;
    transform: scale(1.05);
    box-shadow: 0 4px 12px rgba(65, 157, 240, 0.3);
}

.mega-menu-icon svg {
    width: 20px;
    height: 20px;
}

.mega-menu-item-content {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-width: 0;
}

.mega-menu-item-content strong {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-dark);
    line-height: 1.3;
    transition: color 0.2s ease;
}

.mega-menu-item:hover .mega-menu-item-content strong {
    color: var(--color-primary);
}

.mega-menu-item-content span {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    line-height: 1.4;
    margin-top: 2px;
}

/* Secondary section (Fonctionnalités Transverses) - more compact */
.mega-menu-section-secondary {
    border-left: 1px solid var(--color-gray-200);
    padding-left: var(--space-lg);
}

.mega-menu-section-secondary .mega-menu-title {
    font-size: 0.5625rem;
    margin-bottom: var(--space-sm);
    color: var(--color-gray-400);
}

.mega-menu-section-secondary .mega-menu-items {
    gap: 0;
}

.mega-menu-section-secondary .mega-menu-item {
    padding: 5px 8px;
    border-radius: 6px;
    gap: var(--space-sm);
    align-items: center;
}

.mega-menu-section-secondary .mega-menu-item-content {
    display: flex;
    flex-direction: row;
    align-items: center;
}

.mega-menu-section-secondary .mega-menu-icon {
    width: 22px;
    height: 22px;
    min-width: 22px;
    min-height: 22px;
    border-radius: 5px;
    background: transparent !important;
    color: var(--color-gray-400) !important;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mega-menu-section-secondary .mega-menu-item:hover .mega-menu-icon {
    background: rgba(65, 157, 240, 0.1) !important;
    color: var(--color-primary) !important;
    transform: none;
    box-shadow: none;
}

.mega-menu-section-secondary .mega-menu-icon svg {
    width: 13px;
    height: 13px;
}

.mega-menu-section-secondary .mega-menu-item-content strong {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-gray-500);
}

.mega-menu-section-secondary .mega-menu-item:hover .mega-menu-item-content strong {
    color: var(--color-primary);
}

.mega-menu-section-secondary .mega-menu-item-content span {
    display: none;
}

/* ============================================
   MENU SOCIÉTÉ - Style compact (comme Fonctionnalités Transverses)
   ============================================ */
.mega-menu-societe {
    min-width: auto !important;
    width: auto !important;
    max-width: 320px;
    padding: var(--space-sm) !important;
    white-space: nowrap;
}

.societe-menu-grid {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.societe-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 5px 8px;
    border-radius: var(--radius-sm);
    text-decoration: none;
    transition: all 0.15s ease;
}

.societe-item:hover {
    background: var(--color-gray-50);
}

.societe-item.active {
    background: rgba(65, 157, 240, 0.06);
}

.societe-item-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    flex-shrink: 0;
    opacity: 0.5;
    transition: opacity 0.15s ease;
}

.societe-item-icon svg {
    width: 13px;
    height: 13px;
}

.societe-item:hover .societe-item-icon {
    opacity: 0.8;
}

.societe-item-text {
    font-size: 0.75rem;
    font-weight: 400;
    color: var(--color-gray-500);
    transition: color 0.15s ease;
}

.societe-item:hover .societe-item-text {
    color: var(--color-gray-700);
}

.societe-item.active .societe-item-text {
    color: var(--color-primary);
    font-weight: 500;
}

/* Submenu Arrow */
.submenu-arrow {
    display: flex;
    align-items: center;
    color: var(--color-gray-300);
    transition: all 0.2s ease;
}

.mega-menu-item-wrapper:hover .submenu-arrow {
    color: var(--color-primary);
    transform: translateX(2px);
}

/* Mega Submenu (nested) */
.mega-submenu {
    position: absolute;
    left: calc(100% + 8px);
    top: -12px;
    min-width: 240px;
    background: rgba(255, 255, 255, 0.98);
    backdrop-filter: blur(20px);
    -webkit-backdrop-filter: blur(20px);
    border-radius: 16px;
    box-shadow:
        0 25px 80px -20px rgba(0, 0, 0, 0.2),
        0 0 0 1px rgba(0, 0, 0, 0.03);
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all 0.25s cubic-bezier(0.4, 0, 0.2, 1);
}

.mega-menu-item-wrapper:hover > .mega-submenu,
.mega-submenu.is-open {
    opacity: 1;
    visibility: visible;
    transform: translateX(0);
}

.mega-submenu-header {
    padding-bottom: var(--space-sm);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid rgba(0, 0, 0, 0.04);
}

.mega-submenu-main-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-primary);
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mega-submenu-main-link:hover {
    background: rgba(65, 157, 240, 0.08);
    color: var(--color-primary);
}

.mega-submenu-items {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mega-submenu-item {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    padding: 10px 12px;
    border-radius: 10px;
    text-decoration: none;
    transition: all 0.2s ease;
}

.mega-submenu-item:hover {
    background: rgba(0, 0, 0, 0.04);
    color: var(--color-dark);
    padding-left: 16px;
}

/* ============================================
   MOBILE NAVIGATION - Refonte complète
   ============================================ */
@media (max-width: 992px) {
    /* Header reste toujours visible au-dessus du menu */
    .header {
        z-index: 10000 !important;
        background: #ffffff !important;
    }

    /* Bouton hamburger - toujours accessible */
    .nav-toggle {
        display: flex;
        position: relative;
        z-index: 10001;
    }

    /* Actions header sur mobile - bouton compact */
    .nav-actions {
        display: flex;
        margin-right: var(--space-sm);
    }

    .nav-actions .btn {
        padding: 8px 14px;
        font-size: 0.8125rem;
    }

    .nav-actions .btn span {
        display: none;
    }

    .nav-actions .btn svg {
        margin: 0;
    }

    /* ===== MENU MOBILE SLIDE-IN ===== */
    .nav-menu {
        position: fixed;
        top: 72px; /* Hauteur du header */
        left: 0;
        right: 0;
        bottom: 0;
        width: 100%;
        height: calc(100vh - 72px);
        height: calc(100dvh - 72px); /* Dynamic viewport height pour iOS */
        background: #ffffff;
        flex-direction: column;
        justify-content: flex-start;
        padding: var(--space-lg);
        transform: translateX(100%);
        transition: transform 0.35s cubic-bezier(0.4, 0, 0.2, 1);
        overflow-y: auto;
        overflow-x: hidden;
        -webkit-overflow-scrolling: touch;
        z-index: 9999;
    }

    .nav-menu.is-open {
        transform: translateX(0);
        display: flex !important;
    }

    /* ===== LISTE DES LIENS ===== */
    .nav-links {
        flex-direction: column;
        align-items: stretch;
        gap: var(--space-xs);
        width: 100%;
        padding: 0;
        margin: 0;
        list-style: none;
    }

    /* ===== LIENS PRINCIPAUX ===== */
    .nav-link {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
        font-weight: 500;
        color: var(--color-dark);
        border-radius: var(--radius-lg);
        background: var(--color-gray-100);
        text-decoration: none;
        width: 100%;
    }

    .nav-link:hover,
    .nav-link.active {
        background: rgba(65, 157, 240, 0.1);
        color: var(--color-primary);
    }

    /* ===== NAV-ITEM (conteneur des dropdowns) ===== */
    .nav-item {
        width: 100%;
        position: relative;
    }

    /* ===== MEGA MENU MOBILE (accordéon) ===== */
    .mega-menu {
        position: static !important;
        transform: none !important;
        min-width: 100% !important;
        width: 100% !important;
        left: 0 !important;
        box-shadow: none;
        border-radius: 0;
        padding: 0;
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        background: transparent;
        backdrop-filter: none;
        -webkit-backdrop-filter: none;
        transition: max-height 0.35s ease-out;
        margin-top: 0;
    }

    .mega-menu::before {
        display: none;
    }

    /* Mega menu ouvert */
    .nav-item.is-expanded > .mega-menu {
        max-height: 3000px;
        padding: var(--space-sm) 0;
    }

    /* ===== GRILLE MEGA MENU ===== */
    .mega-menu-grid {
        display: flex;
        flex-direction: column;
        gap: var(--space-lg);
        padding: 0;
    }

    /* ===== SECTION MEGA MENU ===== */
    .mega-menu-section {
        width: 100%;
        padding: 0;
    }

    .mega-menu-section-secondary {
        border-left: none;
        padding-left: 0;
        margin-top: var(--space-md);
        padding-top: var(--space-md);
        border-top: 1px solid var(--color-gray-200);
    }

    /* ===== TITRE SECTION ===== */
    .mega-menu-title {
        font-size: 0.7rem;
        font-weight: 600;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--color-gray-400);
        margin-bottom: var(--space-sm);
        padding: 0 var(--space-sm);
    }

    /* ===== CONTENEUR ITEMS ===== */
    .mega-menu-items {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    /* ===== ITEM MEGA MENU ===== */
    .mega-menu-item-wrapper {
        width: 100%;
    }

    .mega-menu-item {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);
        background: rgba(0, 0, 0, 0.02);
        margin-bottom: 2px;
        width: 100%;
    }

    .mega-menu-item:hover {
        background: rgba(65, 157, 240, 0.08);
    }

    /* ===== ICÔNE MEGA MENU ===== */
    .mega-menu-icon {
        width: 36px;
        height: 36px;
        min-width: 36px;
        border-radius: var(--radius-md);
        flex-shrink: 0;
    }

    .mega-menu-icon svg {
        width: 18px;
        height: 18px;
    }

    /* ===== CONTENU ITEM ===== */
    .mega-menu-item-content {
        flex: 1;
        min-width: 0;
    }

    .mega-menu-item-content strong {
        font-size: 0.875rem;
        font-weight: 600;
        display: block;
    }

    .mega-menu-item-content span {
        font-size: 0.75rem;
        color: var(--color-gray-500);
        display: block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* ===== FLÈCHE SOUS-MENU ===== */
    .submenu-arrow {
        color: var(--color-gray-400);
        transition: transform 0.25s ease;
        flex-shrink: 0;
    }

    .mega-menu-item-wrapper.has-submenu.is-expanded .submenu-arrow {
        transform: rotate(90deg);
    }

    /* ===== SOUS-MENU (niveau 3) ===== */
    .mega-submenu {
        position: static !important;
        left: 0 !important;
        transform: none !important;
        margin: 0 !important;
        margin-left: var(--space-xl) !important;
        padding: 0;
        box-shadow: none;
        opacity: 1;
        visibility: visible;
        max-height: 0;
        overflow: hidden;
        background: transparent;
        border-radius: 0;
        border-left: 2px solid var(--color-gray-200);
        transition: max-height 0.3s ease-out;
    }

    .mega-menu-item-wrapper.has-submenu.is-expanded .mega-submenu {
        max-height: 800px;
        padding: var(--space-sm) 0;
    }

    .mega-submenu-header {
        padding: var(--space-xs) var(--space-md);
    }

    .mega-submenu-main-link {
        font-size: 0.8rem;
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-sm);
    }

    .mega-submenu-items {
        display: flex;
        flex-direction: column;
        gap: 0;
    }

    .mega-submenu-item {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.8rem;
        border-radius: var(--radius-sm);
        color: var(--color-gray-600);
    }

    .mega-submenu-item:hover {
        background: rgba(65, 157, 240, 0.06);
        color: var(--color-primary);
        padding-left: var(--space-md);
    }

    /* ===== SECTION SOCIÉTÉ - Style compact mobile ===== */
    .mega-menu-societe {
        max-width: 100% !important;
        width: 100% !important;
        padding: 0 !important;
    }

    .societe-menu-grid {
        display: flex;
        flex-direction: column;
        gap: 2px;
        width: 100%;
    }

    .societe-item {
        display: flex;
        align-items: center;
        gap: var(--space-md);
        padding: var(--space-sm) var(--space-md);
        border-radius: var(--radius-md);
        background: rgba(0, 0, 0, 0.02);
        width: 100%;
    }

    .societe-item:hover {
        background: rgba(65, 157, 240, 0.08);
    }

    .societe-item-icon {
        width: 24px;
        height: 24px;
        opacity: 0.7;
    }

    .societe-item-text {
        font-size: 0.875rem;
        font-weight: 500;
        color: var(--color-dark);
    }

    /* ===== BOUTON CTA MOBILE EN BAS ===== */
    .nav-menu-cta {
        margin-top: auto;
        padding-top: var(--space-lg);
        border-top: 1px solid var(--color-gray-200);
    }

    .nav-menu-cta .btn {
        width: 100%;
        justify-content: center;
    }
}

/* ===== ÉTATS BODY QUAND MENU OUVERT ===== */
body.nav-open {
    overflow: hidden;
    position: fixed;
    width: 100%;
    height: 100%;
}

/* Assurer que le header reste au-dessus */
body.nav-open .header {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    z-index: 10000;
    background: #ffffff;
}

/* ===== PETITS ÉCRANS (< 576px) ===== */
@media (max-width: 576px) {
    .nav-menu {
        padding: var(--space-md);
    }

    .nav-link {
        padding: var(--space-sm) var(--space-md);
        font-size: 0.9375rem;
    }

    .mega-menu-item {
        padding: var(--space-xs) var(--space-sm);
    }

    .mega-menu-icon {
        width: 32px;
        height: 32px;
        min-width: 32px;
    }

    .mega-menu-icon svg {
        width: 16px;
        height: 16px;
    }

    .mega-menu-item-content strong {
        font-size: 0.8125rem;
    }

    .mega-submenu {
        margin-left: var(--space-lg) !important;
    }
}


/* Legacy support */
.logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.logo img {
    height: 40px;
    width: auto;
}

.logo-text {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    letter-spacing: -0.02em;
}

/* Old nav-links support (index.html legacy) */
.nav > .nav-links {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    list-style: none;
}

.nav-item-dropdown {
    display: inline-flex;
    align-items: center;
    gap: 4px;
}

.nav-item-dropdown svg {
    width: 12px;
    height: 12px;
}

/* Old nav-toggle support */
.nav-toggle span {
    width: 24px;
    height: 2px;
    background: var(--color-dark);
    transition: all var(--transition-fast);
}

/* Active link underline for old format */
.nav > .nav-links .nav-link::after {
    content: '';
    position: absolute;
    bottom: 0;
    left: 0;
    width: 0;
    height: 2px;
    background: var(--color-primary);
    transition: width var(--transition-base);
}

.nav > .nav-links .nav-link:hover::after {
    width: 100%;
}

/* ----- Buttons ----- */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0.75rem 1.5rem;
    font-family: var(--font-primary);
    font-size: 0.9375rem;
    font-weight: 500;
    border-radius: var(--radius-md);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.btn-primary {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn-primary:hover {
    background: #3589d6;
    color: var(--color-white);
    transform: translateY(-1px);
    box-shadow: var(--shadow-md);
}

.btn-secondary {
    background: var(--color-dark);
    color: var(--color-white);
}

.btn-secondary:hover {
    background: var(--color-dark-light);
    color: var(--color-white);
    transform: translateY(-1px);
}

.btn-outline {
    background: transparent;
    color: var(--color-dark);
    border: 1.5px solid var(--color-gray-300);
}

.btn-outline:hover {
    border-color: var(--color-dark);
    color: var(--color-dark);
}

.btn-ghost {
    background: transparent;
    color: var(--color-primary);
    padding: 0.5rem 1rem;
}

.btn-ghost:hover {
    background: var(--bg-light);
    color: var(--color-primary);
}

.btn-lg {
    padding: 1rem 2rem;
    font-size: 1rem;
}

.btn-sm {
    padding: 0.5rem 1rem;
    font-size: 0.875rem;
}

/* ----- Hero Section - Light & Clean ----- */
.hero {
    min-height: auto;
    display: flex;
    align-items: center;
    padding-top: 140px;
    padding-bottom: var(--space-3xl);
    background: var(--bg-gradient);
    position: relative;
    overflow: hidden;
}

.hero::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -30%;
    width: 80%;
    height: 150%;
    background: radial-gradient(circle, rgba(65, 157, 240, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.hero-content {
    position: relative;
    z-index: 1;
}

.hero-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    box-shadow: var(--shadow-sm);
    margin-bottom: var(--space-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.hero-badge-dot {
    width: 8px;
    height: 8px;
    background: var(--color-accent-green);
    border-radius: 50%;
    animation: pulse 2s infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.hero-title {
    margin-bottom: var(--space-lg);
}

.hero-title span {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-accent-blue) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.hero-description {
    font-size: 1.25rem;
    color: var(--color-gray-500);
    max-width: 540px;
    margin-bottom: var(--space-xl);
    line-height: 1.7;
}

.hero-buttons {
    display: flex;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.hero-image {
    position: relative;
}

.hero-image img {
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
}

/* Feature badges floating around carousel */
.hero-feature-badges {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    pointer-events: none;
    z-index: 10;
}

.hero-feature-badge {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 18px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-dark);
    animation: float-badge 4s ease-in-out infinite;
    pointer-events: auto;
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.hero-feature-badge:hover {
    transform: translateY(-5px) scale(1.02);
    box-shadow: var(--shadow-xl);
}

.hero-feature-badge svg {
    width: 18px;
    height: 18px;
}

.hero-feature-badge:nth-child(1) {
    top: 10%;
    left: -12%;
    animation-delay: 0s;
}

.hero-feature-badge:nth-child(2) {
    top: 20%;
    right: -10%;
    animation-delay: 1s;
}

.hero-feature-badge:nth-child(3) {
    bottom: 30%;
    left: -15%;
    animation-delay: 2s;
}

.hero-feature-badge:nth-child(4) {
    bottom: 20%;
    right: -8%;
    animation-delay: 0.5s;
}

@keyframes float-badge {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-8px); }
}

.hero-feature-badge-icon {
    width: 36px;
    height: 36px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-md);
    transition: transform 0.2s ease;
}

.hero-feature-badge:hover .hero-feature-badge-icon {
    transform: scale(1.1);
}

.hero-feature-badge-icon.blue { background: rgba(65, 157, 240, 0.1); color: var(--color-primary); }
.hero-feature-badge-icon.green { background: rgba(114, 201, 143, 0.1); color: var(--color-accent-green); }
.hero-feature-badge-icon.yellow { background: rgba(247, 200, 68, 0.1); color: #D97706; }
.hero-feature-badge-icon.pink { background: rgba(224, 81, 110, 0.1); color: var(--color-accent-pink); }

/* Hero Responsive */
@media (max-width: 1200px) {
    .hero-feature-badges {
        display: none;
    }
}

@media (max-width: 768px) {
    .hero {
        padding-top: 80px;
        min-height: auto;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }
}

/* ----- Cards ----- */
.card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-base);
}

.card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
    border-top: 3px solid var(--color-primary);
}

.card-icon {
    width: 48px;
    height: 48px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.card-icon svg {
    width: 24px;
    height: 24px;
}

.card-title {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.card-description {
    color: var(--color-gray-500);
    font-size: 0.9375rem;
    margin-bottom: 0;
}

/* Card avec accent couleur */
.card-accent-yellow .card-icon { background: rgba(247, 200, 68, 0.1); color: var(--color-accent-yellow); }
.card-accent-pink .card-icon { background: rgba(224, 81, 110, 0.1); color: var(--color-accent-pink); }
.card-accent-green .card-icon { background: rgba(114, 201, 143, 0.1); color: var(--color-accent-green); }
.card-accent-blue .card-icon { background: rgba(65, 157, 240, 0.1); color: var(--color-accent-blue); }

.card-accent-yellow:hover { border-top-color: var(--color-accent-yellow); }
.card-accent-pink:hover { border-top-color: var(--color-accent-pink); }
.card-accent-green:hover { border-top-color: var(--color-accent-green); }
.card-accent-blue:hover { border-top-color: var(--color-accent-blue); }

/* ----- Features Section ----- */
.features-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.feature-item {
    text-align: center;
    padding: var(--space-xl);
}

.feature-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
}

.feature-icon svg {
    width: 32px;
    height: 32px;
}

/* ----- Stats Section ----- */
.stats {
    background: var(--color-dark);
    color: var(--color-white);
}

.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
    text-align: center;
}

@media (max-width: 768px) {
    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

.stat-number {
    font-size: 3rem;
    font-weight: 700;
    line-height: 1;
    margin-bottom: var(--space-sm);
    background: linear-gradient(135deg, var(--color-accent-yellow), var(--color-accent-pink));
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.stat-label {
    font-size: 0.9375rem;
    color: rgba(255, 255, 255, 0.7);
    font-weight: 400;
}

/* ----- Testimonials ----- */
.testimonial-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.testimonial-content {
    font-size: 1.0625rem;
    font-style: italic;
    color: var(--color-gray-700);
    margin-bottom: var(--space-lg);
    line-height: 1.7;
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.testimonial-avatar {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-name {
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.testimonial-role {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

/* ----- CTA Section ----- */
.cta {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    color: var(--color-white);
    text-align: center;
}

.cta h2 {
    color: var(--color-white);
}

.cta p {
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.cta .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.cta .btn-primary:hover {
    background: var(--color-gray-100);
}

/* CTA Card (for use within white sections) */
.cta-card {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-3xl);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-2xl);
}

@media (max-width: 992px) {
    .cta-card {
        flex-direction: column;
        text-align: center;
        padding: var(--space-2xl);
    }
}

.cta-content {
    flex: 1;
}

.cta-title {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-white);
    margin-bottom: var(--space-sm);
}

.cta-text {
    font-size: 1rem;
    color: rgba(255, 255, 255, 0.9);
    margin: 0;
    max-width: 500px;
}

@media (max-width: 992px) {
    .cta-text {
        margin: 0 auto;
    }
}

.cta-actions {
    display: flex;
    gap: var(--space-md);
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .cta-actions {
        flex-direction: column;
        width: 100%;
    }

    .cta-actions .btn {
        width: 100%;
        justify-content: center;
    }
}

.cta-card .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.cta-card .btn-primary:hover {
    background: var(--color-gray-100);
}

.cta-card .btn-secondary {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    border: 1px solid rgba(255, 255, 255, 0.3);
}

.cta-card .btn-secondary:hover {
    background: rgba(255, 255, 255, 0.25);
}

.cta-card .btn-outline {
    background: transparent;
    color: var(--color-white);
    border: 2px solid rgba(255, 255, 255, 0.5);
}

.cta-card .btn-outline:hover {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.8);
}

/* ----- Footer ----- */
.footer {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    color: rgba(255, 255, 255, 0.7);
    padding: var(--space-3xl) 0 var(--space-xl);
}

/* New footer structure from components.js */
.footer-main {
    display: grid;
    grid-template-columns: 1.5fr 2fr;
    gap: var(--space-3xl);
    margin-bottom: var(--space-2xl);
}

.footer-brand {
    max-width: 320px;
}

.footer-logo {
    display: inline-block;
    margin-bottom: var(--space-lg);
}

.footer-logo img {
    height: 32px;
    width: auto;
}

.footer-description {
    font-size: 0.9375rem;
    line-height: 1.7;
    margin-bottom: var(--space-lg);
    color: rgba(255, 255, 255, 0.7);
}

.footer-social {
    display: flex;
    gap: var(--space-sm);
}

.social-link {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-md);
    color: rgba(255, 255, 255, 0.7);
    transition: all var(--transition-fast);
}

.social-link:hover {
    background: rgba(255, 255, 255, 0.25);
    color: var(--color-white);
}

.footer-links-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.footer-links {
    display: flex;
    flex-direction: column;
}

.footer-title {
    color: var(--color-white);
    font-size: 0.875rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-md);
}

.footer-menu {
    list-style: none;
    padding: 0;
    margin: 0;
}

.footer-menu li {
    margin-bottom: var(--space-sm);
}

.footer-menu a {
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.9375rem;
    transition: color var(--transition-fast);
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-menu a:hover {
    color: var(--color-white);
}

.footer-menu a svg {
    flex-shrink: 0;
    opacity: 0.7;
}

.footer-contact a {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.footer-bottom {
    border-top: 1px solid rgba(255, 255, 255, 0.1);
    padding-top: var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.footer-copyright {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    margin: 0;
}

.footer-legal {
    display: flex;
    gap: var(--space-lg);
}

.footer-legal a {
    font-size: 0.875rem;
    color: rgba(255, 255, 255, 0.5);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.footer-legal a:hover {
    color: var(--color-white);
}

/* Legacy footer-grid support */
.footer-grid {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-2xl);
    margin-bottom: var(--space-2xl);
}

/* Footer Responsive */
@media (max-width: 992px) {
    .footer-main {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .footer-brand {
        max-width: 100%;
        text-align: center;
    }

    .footer-social {
        justify-content: center;
    }

    .footer-links-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .footer-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .footer-links-grid {
        grid-template-columns: 1fr;
        gap: var(--space-xl);
        text-align: center;
    }

    .footer-grid {
        grid-template-columns: 1fr;
    }

    .footer-bottom {
        flex-direction: column;
        text-align: center;
    }

    .footer-legal {
        flex-direction: column;
        gap: var(--space-sm);
    }
}

/* ----- Section Headers ----- */
.section-header {
    text-align: center;
    max-width: 700px;
    margin: 0 auto var(--space-3xl);
}

.section-header .lead {
    margin-bottom: 0;
}

.section-label {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-primary);
    margin-bottom: var(--space-sm);
}

/* ----- Background Variants ----- */
.bg-light {
    background: var(--bg-light);
}

.bg-dark {
    background: var(--color-dark);
    color: var(--color-white);
}

.bg-dark h1, .bg-dark h2, .bg-dark h3, .bg-dark h4 {
    color: var(--color-white);
}

/* ----- Partners/Logos Section ----- */
.partners-grid {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    gap: var(--space-2xl);
}

.partner-logo {
    height: 32px;
    opacity: 0.6;
    filter: grayscale(100%);
    transition: all var(--transition-base);
}

.partner-logo:hover {
    opacity: 1;
    filter: grayscale(0%);
}

/* ----- Forms ----- */
.form-group {
    margin-bottom: var(--space-lg);
}

.form-label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.form-input,
.form-textarea {
    width: 100%;
    padding: 0.75rem 1rem;
    font-family: var(--font-primary);
    font-size: 1rem;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.form-input:focus,
.form-textarea:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 157, 240, 0.1);
}

.form-textarea {
    min-height: 120px;
    resize: vertical;
}

/* ----- Contact Page Modern ----- */
.contact-section {
    background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.contact-wrapper {
    display: grid;
    grid-template-columns: 1fr 380px;
    gap: var(--space-3xl);
    align-items: start;
}

/* Form Container */
.contact-form-container {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-100);
}

.contact-form-header {
    margin-bottom: var(--space-xl);
}

.contact-form-header h2 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.contact-form-header p {
    color: var(--color-gray-600);
    font-size: 0.95rem;
    margin: 0;
}

/* Form Row - 2 columns */
.form-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-lg);
}

/* Form Group */
.contact-form .form-group {
    margin-bottom: var(--space-lg);
}

.contact-form .form-label {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.contact-form .form-label .required {
    color: #E53935;
    font-weight: 600;
}

/* Input Wrapper with Icon */
.input-wrapper {
    position: relative;
    display: flex;
    align-items: center;
}

.input-icon {
    position: absolute;
    left: 14px;
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
    pointer-events: none;
    transition: color var(--transition-fast);
}

.input-wrapper .form-input {
    width: 100%;
    padding: 0.875rem 1rem 0.875rem 44px;
    font-family: var(--font-primary);
    font-size: 0.95rem;
    color: var(--color-dark);
    background: var(--color-white);
    border: 1.5px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
}

.input-wrapper .form-input::placeholder {
    color: var(--color-gray-400);
}

.input-wrapper .form-input:hover {
    border-color: var(--color-gray-300);
}

.input-wrapper .form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 4px rgba(65, 157, 240, 0.1);
}

.input-wrapper:focus-within .input-icon {
    color: var(--color-primary);
}

/* Select Wrapper */
.select-wrapper {
    position: relative;
}

.select-wrapper .form-select {
    appearance: none;
    padding-right: 44px;
    cursor: pointer;
}

.select-arrow {
    position: absolute;
    right: 14px;
    width: 18px;
    height: 18px;
    color: var(--color-gray-400);
    pointer-events: none;
}

/* Textarea */
.textarea-wrapper .form-textarea {
    padding: 0.875rem 1rem;
    min-height: 140px;
    resize: vertical;
    line-height: 1.6;
}

.form-hint {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-top: var(--space-xs);
}

/* Checkbox */
.checkbox-group {
    margin-top: var(--space-md);
}

.checkbox-label {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    cursor: pointer;
}

.checkbox-label input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.checkbox-custom {
    flex-shrink: 0;
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-400);
    border-radius: var(--radius-sm);
    background: var(--color-gray-100);
    transition: all var(--transition-fast);
    position: relative;
    margin-top: 2px;
    display: inline-block;
    box-shadow: inset 0 1px 2px rgba(0, 0, 0, 0.08);
}

.checkbox-label:hover .checkbox-custom {
    border-color: var(--color-primary);
    background: var(--color-gray-50);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

.checkbox-label input[type="checkbox"]:checked + .checkbox-custom::after {
    content: '';
    position: absolute;
    top: 3px;
    left: 6px;
    width: 5px;
    height: 9px;
    border: solid white;
    border-width: 0 2px 2px 0;
    transform: rotate(45deg);
}

.checkbox-label input[type="checkbox"]:focus + .checkbox-custom {
    box-shadow: 0 0 0 3px rgba(65, 157, 240, 0.2);
}

.checkbox-text {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    line-height: 1.5;
}

.checkbox-text a {
    color: var(--color-primary);
    text-decoration: underline;
}

/* Submit Button */
.btn-submit {
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    padding: 1rem 2rem;
    font-size: 1rem;
    font-weight: 600;
}

.btn-submit svg {
    width: 18px;
    height: 18px;
    transition: transform var(--transition-fast);
}

.btn-submit:hover svg {
    transform: translateX(4px);
}

/* Contact Sidebar */
.contact-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
    position: sticky;
    top: 100px;
}

/* Info Card */
.contact-info-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1), 0 2px 4px -1px rgba(0, 0, 0, 0.06);
    border: 1px solid var(--color-gray-100);
}

.contact-info-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.contact-info-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary), #2563EB);
    display: flex;
    align-items: center;
    justify-content: center;
}

.contact-info-icon svg {
    width: 24px;
    height: 24px;
    color: white;
}

.contact-info-header h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin: 0;
}

.contact-info-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.contact-info-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-lg);
    transition: all var(--transition-fast);
    text-decoration: none;
}

a.contact-info-item:hover {
    background: var(--color-gray-50);
}

.contact-info-item-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.contact-info-item-icon svg {
    width: 18px;
    height: 18px;
    color: var(--color-gray-600);
}

.contact-info-item-content {
    display: flex;
    flex-direction: column;
}

.contact-info-item-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    font-weight: 500;
}

.contact-info-item-value {
    font-size: 0.95rem;
    font-weight: 500;
    color: var(--color-dark);
}

/* Demo Card */
.contact-demo-card {
    background: linear-gradient(135deg, #EEF2FF 0%, #E0E7FF 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid #C7D2FE;
}

.contact-demo-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-lg);
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.contact-demo-icon svg {
    width: 24px;
    height: 24px;
    color: #4F46E5;
}

.contact-demo-card h3 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.contact-demo-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.contact-demo-card .btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
}

.contact-demo-card .btn svg {
    width: 14px;
    height: 14px;
}

/* Social Links */
.contact-social {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-100);
}

.contact-social > span {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

.contact-social-links {
    display: flex;
    gap: var(--space-sm);
}

.contact-social-links .social-link {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.contact-social-links .social-link svg {
    width: 16px;
    height: 16px;
    fill: var(--color-gray-600);
    color: var(--color-gray-600);
}

.contact-social-links .social-link:hover {
    background: var(--color-primary);
}

.contact-social-links .social-link:hover svg {
    fill: white;
    color: white;
}

/* Responsive Contact */
@media (max-width: 1024px) {
    .contact-wrapper {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .contact-sidebar {
        position: static;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: var(--space-lg);
    }

    .contact-info-card {
        grid-column: span 2;
    }
}

@media (max-width: 768px) {
    .contact-form-container {
        padding: var(--space-lg);
    }

    .form-row {
        grid-template-columns: 1fr;
        gap: var(--space-md);
    }

    .contact-sidebar {
        grid-template-columns: 1fr;
    }

    .contact-info-card {
        grid-column: span 1;
    }

    .contact-social {
        flex-direction: column;
        gap: var(--space-md);
        text-align: center;
    }
}

/* ----- Partners Page ----- */

/* Partner Highlight (Gemini) */
.partner-highlight {
    background: linear-gradient(135deg, #E8F0FE 0%, #D2E3FC 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    border: 1px solid #AECBFA;
}

.partner-highlight-content {
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
}

.partner-highlight-logo {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #4285F4, #34A853, #FBBC04, #EA4335);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.partner-highlight-logo svg {
    width: 40px;
    height: 40px;
    color: white;
}

.partner-highlight-info {
    flex: 1;
}

.partner-highlight-badge {
    display: inline-block;
    background: #4285F4;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-sm);
}

.partner-highlight-info h3 {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.partner-highlight-info p {
    color: var(--color-gray-700);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.partner-highlight-features {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.partner-highlight-features span {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.partner-highlight-features svg {
    width: 16px;
    height: 16px;
    color: #34A853;
}

/* Partner Feature Card (Chorus Pro) */
.partner-feature-card {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-100);
    margin-bottom: var(--space-2xl);
}

.partner-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.partner-feature-icon.chorus {
    background: linear-gradient(135deg, #000091 0%, #6A6AF4 100%);
}

.partner-feature-icon svg {
    width: 32px;
    height: 32px;
    color: white;
}

.partner-feature-content h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.partner-feature-content p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-sm);
}

.partner-tag {
    display: inline-block;
    background: #E8F5E9;
    color: #2E7D32;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
}

/* Exports Section */
.exports-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.exports-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.exports-title svg {
    width: 24px;
    height: 24px;
    color: var(--color-primary);
}

.exports-subtitle {
    color: var(--color-gray-600);
    margin-bottom: var(--space-xl);
}

.exports-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.export-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: flex-start;
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-fast);
    min-height: 120px;
}

.export-item:hover {
    border-color: var(--color-primary);
    box-shadow: 0 4px 16px rgba(65, 157, 240, 0.1);
    transform: translateY(-2px);
}

.export-item .partner-logo-img {
    height: 48px;
    width: auto;
    max-width: 120px;
    margin-bottom: var(--space-sm);
    object-fit: contain;
}

.export-logo {
    font-size: 0.875rem;
    font-weight: 700;
    padding: 0.75rem 1.25rem;
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    letter-spacing: 0.5px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.export-logo.sage { background: #00A651; color: white; }
.export-logo.quadra { background: #E94E1B; color: white; }
.export-logo.pennylane { background: #6366F1; color: white; }
.export-logo.cegid { background: #1E3A8A; color: white; }
.export-logo.ebp { background: #F59E0B; color: white; }
.export-logo.acd { background: #2563EB; color: white; }
.export-logo.isacompta { background: #059669; color: white; }
.export-logo.fec { background: #7C3AED; color: white; }
.export-logo.csv { background: var(--color-gray-600); color: white; }

.export-item span {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

/* Telecom Grid */
.telecom-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.telecom-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl) var(--space-lg);
    text-align: center;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-fast);
    display: flex;
    flex-direction: column;
    align-items: center;
    min-height: 200px;
}

.telecom-card:hover {
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.1);
    border-color: var(--color-primary);
    transform: translateY(-4px);
}

/* Logo image dans telecom-card (format 200x100) */
.telecom-card .partner-logo-img {
    width: 180px;
    height: 90px;
    object-fit: contain;
    margin-bottom: var(--space-lg);
}

/* Fallback texte si pas d'image */
.telecom-logo {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.telecom-logo span {
    font-size: 1.1rem;
    font-weight: 700;
    padding: 0.5rem 1rem;
    border-radius: var(--radius-md);
}

.telecom-logo.alphalink span { background: #1E40AF; color: white; }
.telecom-logo.sewan span { background: #059669; color: white; }
.telecom-logo.networth span { background: #7C3AED; color: white; }
.telecom-logo.dstny span { background: #DC2626; color: white; }
.telecom-logo.transatel span { background: #0891B2; color: white; }
.telecom-logo.unyc span { background: #EA580C; color: white; }
.telecom-logo.netwo span { background: #4F46E5; color: white; }

.telecom-card p {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    margin: 0;
    line-height: 1.4;
    margin-top: auto;
}

.telecom-features {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

.telecom-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.telecom-feature svg {
    width: 20px;
    height: 20px;
    color: var(--color-primary);
}

/* Infrastructure Grid */
.infra-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.infra-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    border: 1px solid var(--color-gray-100);
}

.infra-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.infra-icon.ovh { background: #123F6D; }
.infra-icon.postmark { background: #FFDE00; }
.infra-icon.twilio { background: #F22F46; }

.infra-icon svg {
    width: 28px;
    height: 28px;
    color: white;
}

.infra-icon.postmark svg {
    color: #333;
}

.infra-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.infra-card p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.infra-tags {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.infra-tags span {
    font-size: 0.7rem;
    font-weight: 500;
    padding: 0.25rem 0.5rem;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
}

/* Zeendoc Feature */
.zeendoc-feature {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.zeendoc-logo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.zeendoc-logo svg {
    width: 32px;
    height: 32px;
    color: #6366F1;
}

.zeendoc-logo span {
    font-size: 1.25rem;
    font-weight: 700;
    color: #6366F1;
}

.zeendoc-content h3 {
    font-size: 1.5rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.zeendoc-content > p {
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.zeendoc-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.zeendoc-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--color-gray-700);
}

.zeendoc-features svg {
    width: 18px;
    height: 18px;
    color: #22C55E;
    flex-shrink: 0;
}

.zeendoc-visual {
    display: flex;
    justify-content: center;
}

.zeendoc-widget {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 20px 40px rgba(0, 0, 0, 0.1);
    overflow: hidden;
    width: 100%;
    max-width: 360px;
}

.widget-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.widget-header svg {
    width: 20px;
    height: 20px;
    color: #6366F1;
}

.widget-header span {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
}

.widget-items {
    padding: var(--space-md);
}

.widget-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.widget-item:hover {
    background: var(--color-gray-50);
}

.widget-item-icon {
    font-size: 0.65rem;
    font-weight: 700;
    padding: 0.25rem 0.5rem;
    border-radius: var(--radius-sm);
}

.widget-item-icon.pdf { background: #FFEBEE; color: #D32F2F; }
.widget-item-icon.doc { background: #E3F2FD; color: #1976D2; }
.widget-item-icon.xls { background: #E8F5E9; color: #388E3C; }

.widget-item-name {
    font-size: 0.85rem;
    color: var(--color-gray-700);
}

/* Partners Page Responsive */
@media (max-width: 1024px) {
    .infra-grid {
        grid-template-columns: 1fr;
    }

    .zeendoc-feature {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }
}

@media (max-width: 768px) {
    .partner-highlight-content {
        flex-direction: column;
        text-align: center;
    }

    .partner-highlight-features {
        justify-content: center;
    }

    .partner-feature-card {
        flex-direction: column;
        text-align: center;
    }

    .telecom-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .telecom-features {
        flex-direction: column;
        align-items: center;
    }

    .exports-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

/* ----- Badges ----- */
.badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1px solid currentColor;
    background: transparent;
}

.badge-primary { color: var(--color-primary); }
.badge-yellow { color: var(--color-accent-yellow); }
.badge-pink { color: var(--color-accent-pink); }
.badge-green { color: var(--color-accent-green); }
.badge-purple { color: var(--color-accent-purple); }
.badge-cyan { color: #00ACC1; }
.badge-orange { color: #FF9800; }

/* Badges avec fond */
.badge-filled {
    background: var(--color-primary);
    color: white;
    border-color: transparent;
}

.badge-filled-green {
    background: var(--color-accent-green);
    color: white;
    border-color: transparent;
}

.badge-filled-purple {
    background: var(--color-accent-purple);
    color: white;
    border-color: transparent;
}

.badge-filled-cyan {
    background: #00ACC1;
    color: white;
    border-color: transparent;
}

.badge-filled-orange {
    background: #FF9800;
    color: white;
    border-color: transparent;
}

/* ----- Utilities ----- */
.mt-auto { margin-top: auto; }
.mb-0 { margin-bottom: 0; }
.mb-sm { margin-bottom: var(--space-sm); }
.mb-md { margin-bottom: var(--space-md); }
.mb-lg { margin-bottom: var(--space-lg); }
.mb-xl { margin-bottom: var(--space-xl); }

.pt-0 { padding-top: 0; }
.pb-0 { padding-bottom: 0; }

.w-full { width: 100%; }

.hidden { display: none; }

@media (max-width: 768px) {
    .hidden-mobile { display: none; }
}

@media (min-width: 769px) {
    .hidden-desktop { display: none; }
}

/* ----- Animations ----- */
@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.animate-fadeInUp {
    animation: fadeInUp 0.6s ease forwards;
}

.animate-delay-1 { animation-delay: 0.1s; }
.animate-delay-2 { animation-delay: 0.2s; }
.animate-delay-3 { animation-delay: 0.3s; }
.animate-delay-4 { animation-delay: 0.4s; }

/* ----- Page Specific: Module Pages ----- */
.page-header {
    padding: calc(72px + var(--space-3xl)) 0 var(--space-3xl);
    background: var(--bg-gradient);
    text-align: center;
}

.page-header .lead {
    max-width: 600px;
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-lg);
}

.breadcrumb a {
    color: var(--color-gray-500);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-separator {
    color: var(--color-gray-300);
}

/* Module Feature List */
.feature-list {
    list-style: none;
}

.feature-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.feature-list li:last-child {
    border-bottom: none;
}

.feature-check {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
    border-radius: 50%;
}

/* Screenshot Gallery */
.screenshot-gallery {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

@media (max-width: 768px) {
    .screenshot-gallery {
        grid-template-columns: 1fr;
    }
}

.screenshot-item {
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform var(--transition-base);
}

.screenshot-item:hover {
    transform: scale(1.02);
}

.screenshot-item img {
    width: 100%;
    height: auto;
}

/* ----- Responsive Adjustments ----- */
@media (max-width: 576px) {
    .section {
        padding: var(--space-2xl) 0;
    }

    .hero-buttons {
        flex-direction: column;
    }

    .hero-buttons .btn {
        width: 100%;
    }
}

/* ----- Screenshot Carousel ----- */
.screenshot-carousel {
    position: relative;
    width: 100%;
    overflow: hidden;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-xl);
    background: var(--color-white);
}

.screenshot-carousel-inner {
    display: flex;
    transition: transform 0.5s ease-in-out;
}

.screenshot-slide {
    min-width: 100%;
    position: relative;
}

.screenshot-slide img {
    width: 100%;
    height: auto;
    display: block;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    aspect-ratio: 16/10;
    object-fit: cover;
    object-position: top left;
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

/* Carousel Video Slide */
.screenshot-slide-video {
    cursor: pointer;
}

.carousel-video-wrapper {
    position: relative;
    width: 100%;
    aspect-ratio: 16/10;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.12);
    transition: transform 0.3s ease, box-shadow 0.3s ease;
}

.carousel-video-wrapper:hover {
    transform: scale(1.02);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

.carousel-video-thumbnail {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: center;
}

.carousel-video-play {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--color-primary);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 8px 30px rgba(79, 70, 229, 0.4);
    transition: transform 0.3s ease, box-shadow 0.3s ease, background 0.3s ease;
}

.carousel-video-play svg {
    margin-left: 4px;
}

.carousel-video-wrapper:hover .carousel-video-play {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 12px 40px rgba(79, 70, 229, 0.5);
    background: var(--color-primary-dark);
}

.carousel-video-label {
    position: absolute;
    bottom: var(--space-md);
    left: 50%;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    font-size: var(--text-sm);
    font-weight: 500;
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    backdrop-filter: blur(8px);
    transition: background 0.3s ease;
}

.carousel-video-wrapper:hover .carousel-video-label {
    background: rgba(79, 70, 229, 0.9);
}

/* Video dot indicator */
.carousel-dot-video {
    position: relative;
}

.carousel-dot-video::after {
    content: '';
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 0;
    height: 0;
    border-left: 4px solid currentColor;
    border-top: 2.5px solid transparent;
    border-bottom: 2.5px solid transparent;
    margin-left: 1px;
}

/* Video Modal */
.video-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.95);
    z-index: 10001;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.video-modal.active {
    opacity: 1;
    visibility: visible;
}

.video-modal-content {
    position: relative;
    width: 90%;
    max-width: 1000px;
    aspect-ratio: 16/9;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.video-modal.active .video-modal-content {
    transform: scale(1);
}

.video-modal-content iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}

.video-modal-close {
    position: absolute;
    top: -50px;
    right: 0;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s ease, transform 0.2s ease;
}

.video-modal-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

@media (max-width: 768px) {
    .carousel-video-play {
        width: 60px;
        height: 60px;
    }

    .carousel-video-play svg {
        width: 32px;
        height: 32px;
    }

    .carousel-video-label {
        font-size: var(--text-xs);
        padding: var(--space-2xs) var(--space-sm);
    }

    .video-modal-close {
        top: 10px;
        right: 10px;
    }
}

/* Screenshot lightbox link */
.screenshot-link {
    display: block;
    position: relative;
    cursor: zoom-in;
}

.screenshot-link:hover img {
    transform: scale(1.02);
    box-shadow: 0 25px 70px rgba(0, 0, 0, 0.18);
}

.screenshot-zoom {
    position: absolute;
    bottom: var(--space-md);
    right: var(--space-md);
    width: 40px;
    height: 40px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-dark);
    opacity: 0;
    transform: scale(0.8);
    transition: opacity 0.3s ease, transform 0.3s ease;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
}

.screenshot-link:hover .screenshot-zoom {
    opacity: 1;
    transform: scale(1);
}

/* Lightbox overlay */
.lightbox-overlay {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.92);
    z-index: 10000;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
}

.lightbox-overlay.active {
    opacity: 1;
    visibility: visible;
}

.lightbox-image {
    max-width: 90%;
    max-height: 90%;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-image {
    transform: scale(1);
}

/* Lightbox video container */
.lightbox-content {
    display: flex;
    align-items: center;
    justify-content: center;
    max-width: 90%;
    max-height: 90%;
}

.lightbox-video {
    width: 90vw;
    max-width: 1000px;
    aspect-ratio: 16/9;
    display: flex;
    align-items: center;
    justify-content: center;
    transform: scale(0.9);
    transition: transform 0.3s ease;
}

.lightbox-overlay.active .lightbox-video {
    transform: scale(1);
}

.lightbox-iframe {
    width: 100%;
    height: 100%;
    border: none;
    border-radius: var(--radius-lg);
    box-shadow: 0 20px 80px rgba(0, 0, 0, 0.5);
}

.lightbox-close {
    position: absolute;
    top: 20px;
    right: 20px;
    width: 48px;
    height: 48px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s ease, transform 0.2s ease;
}

.lightbox-close:hover {
    background: rgba(255, 255, 255, 0.2);
    transform: scale(1.1);
}

/* Lightbox Navigation Arrows */
.lightbox-prev,
.lightbox-next {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 56px;
    height: 56px;
    background: rgba(255, 255, 255, 0.1);
    border: none;
    border-radius: 50%;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    transition: background 0.2s ease, transform 0.2s ease;
    z-index: 10001;
}

.lightbox-prev {
    left: 20px;
}

.lightbox-next {
    right: 20px;
}

.lightbox-prev:hover,
.lightbox-next:hover {
    background: rgba(255, 255, 255, 0.25);
    transform: translateY(-50%) scale(1.1);
}

.lightbox-counter {
    position: absolute;
    bottom: 20px;
    left: 50%;
    transform: translateX(-50%);
    color: rgba(255, 255, 255, 0.7);
    font-size: 0.875rem;
    font-weight: 500;
    background: rgba(0, 0, 0, 0.4);
    padding: 8px 16px;
    border-radius: var(--radius-full);
}

@media (max-width: 768px) {
    .lightbox-prev,
    .lightbox-next {
        width: 44px;
        height: 44px;
    }

    .lightbox-prev {
        left: 10px;
    }

    .lightbox-next {
        right: 10px;
    }

    .lightbox-prev svg,
    .lightbox-next svg {
        width: 24px;
        height: 24px;
    }
}

/* Placeholder pour les screenshots */
.screenshot-placeholder {
    aspect-ratio: 16/10;
    background: linear-gradient(135deg, var(--bg-light) 0%, var(--color-white) 100%);
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
}

.screenshot-placeholder-icon {
    width: 64px;
    height: 64px;
    background: rgba(65, 157, 240, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.screenshot-placeholder-text {
    font-size: 0.875rem;
    color: var(--color-gray-400);
    text-align: center;
}

/* Navigation du carousel */
.carousel-nav {
    position: absolute;
    bottom: var(--space-lg);
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: var(--space-sm);
    z-index: 10;
}

.carousel-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.2);
    border: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.carousel-dot:hover {
    background: rgba(0, 0, 0, 0.4);
}

.carousel-dot.active {
    background: var(--color-primary);
    width: 24px;
    border-radius: var(--radius-full);
}

/* Fleches de navigation */
.carousel-arrow {
    position: absolute;
    top: 50%;
    transform: translateY(-50%);
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: rgba(255, 255, 255, 0.9);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-fast);
    z-index: 10;
    color: var(--color-dark);
}

.carousel-arrow:hover {
    background: var(--color-white);
    box-shadow: var(--shadow-lg);
}

.carousel-arrow-prev {
    left: var(--space-md);
}

.carousel-arrow-next {
    right: var(--space-md);
}

.carousel-arrow svg {
    width: 20px;
    height: 20px;
}

/* Caption du slide */
.screenshot-caption {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl) var(--space-lg) var(--space-lg);
    background: linear-gradient(to top, rgba(0,0,0,0.7) 0%, transparent 100%);
    color: var(--color-white);
}

.screenshot-caption-title {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.screenshot-caption-text {
    font-size: 0.875rem;
    opacity: 0.9;
    margin: 0;
}

/* Module highlight badge dans carousel */
.screenshot-badge {
    position: absolute;
    top: var(--space-md);
    left: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-primary);
    color: var(--color-white);
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    z-index: 5;
}

/* ----- Module Cards avec lien ----- */
.module-card {
    display: block;
    text-decoration: none;
    color: inherit;
}

.module-card:hover {
    color: inherit;
}

.module-card .card {
    height: 100%;
}

/* ----- Specialization Badge ----- */
.specialization-tag {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-xs) var(--space-sm);
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
    font-size: 0.75rem;
    font-weight: 500;
    border-radius: var(--radius-sm);
    margin-top: var(--space-sm);
}

.specialization-tag svg {
    width: 12px;
    height: 12px;
}

/* Carousel responsive */
@media (max-width: 576px) {
    .carousel-arrow {
        width: 36px;
        height: 36px;
    }

    .carousel-arrow svg {
        width: 16px;
        height: 16px;
    }

    .carousel-arrow-prev {
        left: var(--space-sm);
    }

    .carousel-arrow-next {
        right: var(--space-sm);
    }
}

/* ----- Mega Menu Dropdown ----- */
.nav-item {
    position: relative;
}

.nav-item-dropdown {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    cursor: pointer;
}

.nav-item-dropdown svg {
    width: 12px;
    height: 12px;
    transition: transform var(--transition-fast);
}

.nav-item:hover .nav-item-dropdown svg {
    transform: rotate(180deg);
}

.mega-menu {
    position: absolute;
    top: 100%;
    left: 50%;
    transform: translateX(-50%) translateY(10px);
    min-width: 700px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.15);
    padding: var(--space-xl);
    opacity: 0;
    visibility: hidden;
    transition: all var(--transition-base);
    z-index: 1001;
    border: 1px solid rgba(0, 0, 0, 0.05);
}

.nav-item:hover .mega-menu {
    opacity: 1;
    visibility: visible;
    transform: translateX(-50%) translateY(0);
}

.mega-menu::before {
    content: '';
    position: absolute;
    top: -8px;
    left: 50%;
    transform: translateX(-50%);
    border-left: 8px solid transparent;
    border-right: 8px solid transparent;
    border-bottom: 8px solid var(--color-white);
}

.mega-menu-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.mega-menu-section {
    padding: var(--space-sm);
}

.mega-menu-title {
    font-size: 0.7rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-100);
}

.mega-menu-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
    text-decoration: none;
    color: inherit;
}

.mega-menu-item:hover {
    background: var(--bg-light);
    color: inherit;
}

.mega-menu-icon {
    width: 36px;
    height: 36px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-sm);
    color: var(--color-primary);
}

.mega-menu-item:hover .mega-menu-icon {
    background: rgba(65, 157, 240, 0.1);
}

.mega-menu-icon svg {
    width: 18px;
    height: 18px;
}

.mega-menu-content {
    flex: 1;
}

.mega-menu-label {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.mega-menu-desc {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    line-height: 1.4;
}

/* Mobile Mega Menu */
@media (max-width: 992px) {
    .mega-menu {
        position: static;
        transform: none;
        min-width: 100%;
        box-shadow: none;
        border-radius: 0;
        padding: var(--space-md);
        max-height: 0;
        overflow: hidden;
        opacity: 1;
        visibility: visible;
        border: none;
    }

    .mega-menu::before {
        display: none;
    }

    .nav-item.active .mega-menu {
        max-height: 1000px;
        padding: var(--space-lg);
    }

    .mega-menu-grid {
        grid-template-columns: 1fr;
    }
}

/* ----- Back to Top Button ----- */
.back-to-top {
    position: fixed;
    bottom: var(--space-xl);
    right: var(--space-xl);
    width: 44px;
    height: 44px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    opacity: 0;
    visibility: hidden;
    transform: translateY(20px);
    transition: all var(--transition-base);
    z-index: 999;
    box-shadow: var(--shadow-lg);
    color: var(--color-dark);
}

.back-to-top:hover {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

.back-to-top.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
}

.back-to-top svg {
    width: 20px;
    height: 20px;
}

@media (max-width: 576px) {
    .back-to-top {
        bottom: var(--space-lg);
        right: var(--space-lg);
        width: 40px;
        height: 40px;
    }
}

/* ----- Deployment Options Section ----- */
.deployment-section {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.deployment-section::before {
    content: '';
    position: absolute;
    top: -50%;
    right: -20%;
    width: 600px;
    height: 600px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.1) 0%, transparent 70%);
    pointer-events: none;
}

.deployment-section::after {
    content: '';
    position: absolute;
    bottom: -30%;
    left: -10%;
    width: 400px;
    height: 400px;
    background: radial-gradient(circle, rgba(255, 255, 255, 0.08) 0%, transparent 70%);
    pointer-events: none;
}

.deployment-section .section-header {
    text-align: center;
}

.deployment-section .section-label {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    font-weight: 600;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
}

.deployment-section h2 {
    color: var(--color-white);
}

.deployment-section .lead {
    color: rgba(255, 255, 255, 0.9);
    max-width: 600px;
    margin: 0 auto var(--space-xl);
}

.deployment-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
    position: relative;
    z-index: 1;
}

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

.deployment-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    transition: all var(--transition-base);
    box-shadow: var(--shadow-md);
}

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

.deployment-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(65, 157, 240, 0.15);
    border-radius: var(--radius-lg);
    color: var(--color-primary);
}

.deployment-icon svg {
    width: 32px;
    height: 32px;
}

.deployment-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.deployment-desc {
    color: var(--color-gray-600);
    font-size: 0.9375rem;
    margin-bottom: var(--space-md);
}

.deployment-features {
    list-style: none;
    text-align: left;
}

.deployment-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    color: var(--color-gray-700);
    font-size: 0.875rem;
}

.deployment-features li svg {
    width: 16px;
    height: 16px;
    color: var(--color-accent-green);
    flex-shrink: 0;
}

/* ----- Testimonials/Reviews Page ----- */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 992px) {
    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

.testimonial-card-enhanced {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid rgba(0, 0, 0, 0.04);
    position: relative;
}

.testimonial-card-enhanced::before {
    content: '"';
    position: absolute;
    top: var(--space-md);
    right: var(--space-lg);
    font-size: 4rem;
    font-family: Georgia, serif;
    color: var(--color-gray-100);
    line-height: 1;
}

.testimonial-stars {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-md);
    color: var(--color-accent-yellow);
}

.testimonial-stars svg {
    width: 16px;
    height: 16px;
    fill: currentColor;
}

/* ----- Partners/Suppliers Page ----- */
.partners-showcase {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

@media (max-width: 992px) {
    .partners-showcase {
        grid-template-columns: repeat(3, 1fr);
    }
}

@media (max-width: 576px) {
    .partners-showcase {
        grid-template-columns: repeat(2, 1fr);
    }
}

.partner-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
    transition: all var(--transition-base);
}

.partner-card:hover {
    box-shadow: var(--shadow-lg);
    transform: translateY(-4px);
}

.partner-logo-wrapper {
    height: 60px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.partner-logo-wrapper img {
    max-height: 100%;
    max-width: 100%;
    object-fit: contain;
    filter: grayscale(100%);
    opacity: 0.7;
    transition: all var(--transition-base);
}

.partner-card:hover .partner-logo-wrapper img {
    filter: grayscale(0%);
    opacity: 1;
}

.partner-name {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.9375rem;
    margin-bottom: var(--space-xs);
}

.partner-category {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* ----- Module/Feature Template Styles ----- */
.module-hero {
    padding: calc(72px + var(--space-3xl)) 0 var(--space-3xl);
    background: var(--bg-gradient);
}

.module-hero-content {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

@media (max-width: 992px) {
    .module-hero-content {
        grid-template-columns: 1fr;
    }
}

.feature-highlight-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.feature-highlight-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary), #3589d6);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-lg);
    color: var(--color-white);
}

.feature-highlight-icon svg {
    width: 28px;
    height: 28px;
}

/* Variation 2: Split layout with sidebar */
.module-layout-split {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-2xl);
}

@media (max-width: 992px) {
    .module-layout-split {
        grid-template-columns: 1fr;
    }
}

.module-sidebar {
    position: sticky;
    top: calc(72px + var(--space-xl));
    height: fit-content;
}

.module-nav {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 1px solid rgba(0, 0, 0, 0.04);
}

.module-nav-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.1em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.module-nav-links {
    list-style: none;
}

.module-nav-links li {
    margin-bottom: var(--space-xs);
}

.module-nav-links a {
    display: block;
    padding: var(--space-sm) var(--space-md);
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.module-nav-links a:hover,
.module-nav-links a.active {
    background: var(--bg-light);
    color: var(--color-primary);
}

/* Variation 3: Full-width immersive */
.module-immersive-header {
    min-height: 60vh;
    display: flex;
    align-items: center;
    justify-content: center;
    text-align: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a2a3f 100%);
    color: var(--color-white);
    padding-top: 72px;
    position: relative;
    overflow: hidden;
}

.module-immersive-header::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: url("data:image/svg+xml,%3Csvg width='60' height='60' viewBox='0 0 60 60' xmlns='http://www.w3.org/2000/svg'%3E%3Cg fill='none' fill-rule='evenodd'%3E%3Cg fill='%23ffffff' fill-opacity='0.03'%3E%3Cpath d='M36 34v-4h-2v4h-4v2h4v4h2v-4h4v-2h-4zm0-30V0h-2v4h-4v2h4v4h2V6h4V4h-4zM6 34v-4H4v4H0v2h4v4h2v-4h4v-2H6zM6 4V0H4v4H0v2h4v4h2V6h4V4H6z'/%3E%3C/g%3E%3C/g%3E%3C/svg%3E");
    opacity: 0.5;
}

.module-immersive-content {
    position: relative;
    z-index: 1;
    max-width: 800px;
}

.module-immersive-header h1 {
    color: var(--color-white);
    font-size: clamp(2.5rem, 5vw, 4rem);
}

.module-immersive-header .lead {
    color: rgba(255, 255, 255, 0.8);
}

/* ============================================
   A PROPOS PAGE STYLES
   ============================================ */

/* Page Hero */
.page-hero {
    padding: calc(var(--space-4xl) + 72px) 0 var(--space-3xl);
    background: var(--bg-gradient);
    text-align: center;
}

.page-hero-content {
    max-width: 700px;
    margin: 0 auto;
}

.breadcrumb {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.breadcrumb a {
    color: var(--color-gray-500);
}

.breadcrumb a:hover {
    color: var(--color-primary);
}

.breadcrumb-separator {
    color: var(--color-gray-300);
}

.page-hero-title {
    font-size: clamp(2rem, 5vw, 3rem);
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.page-hero-subtitle {
    font-size: 1.125rem;
    color: var(--color-gray-500);
    max-width: 600px;
    margin: 0 auto;
}

/* About Founders Section */
.about-founders {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-4xl);
    align-items: center;
}

.about-founders-images {
    position: relative;
    height: 500px;
}

.founder-image {
    position: absolute;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    transition: transform var(--transition-base);
}

.founder-image:hover {
    transform: translateY(-5px);
}

.founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder-image-1 {
    width: 280px;
    height: 320px;
    top: 0;
    left: 0;
    z-index: 2;
}

.founder-image-2 {
    width: 280px;
    height: 320px;
    bottom: 0;
    right: 0;
    z-index: 1;
}

.founder-info {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-lg);
    background: linear-gradient(to top, rgba(0,0,0,0.8), transparent);
    color: var(--color-white);
}

.founder-info strong {
    display: block;
    font-size: 1.125rem;
    margin-bottom: var(--space-xs);
}

.founder-info span {
    font-size: 0.875rem;
    opacity: 0.8;
}

.about-founders-content {
    padding-left: var(--space-xl);
}

.about-text {
    margin-bottom: var(--space-lg);
    color: var(--color-gray-700);
    line-height: 1.8;
}

.about-stats-inline {
    display: flex;
    gap: var(--space-2xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-xl);
    border-top: 1px solid var(--color-gray-300);
}

.about-stat-inline {
    display: flex;
    flex-direction: column;
}

.about-stat-number {
    font-size: 2.5rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.about-stat-label {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-top: var(--space-xs);
}

/* Values Grid */
.values-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-xl);
}

.value-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all var(--transition-base);
}

.value-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.value-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
}

.value-title {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.value-description {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    line-height: 1.6;
}

/* Video Showcase */
.video-showcase {
    display: grid;
    grid-template-columns: 1.2fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
}

.video-container {
    position: relative;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.video-link {
    display: block;
    position: relative;
}

.video-thumbnail {
    width: 100%;
    height: auto;
    display: block;
    transition: transform var(--transition-base);
}

.video-link:hover .video-thumbnail {
    transform: scale(1.02);
}

.video-play-btn {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-base);
}

.video-link:hover .video-play-btn {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

.video-content h2 {
    margin-bottom: var(--space-lg);
}

.video-description {
    color: var(--color-gray-500);
    margin-bottom: var(--space-xl);
    line-height: 1.8;
}

/* Mission Section */
.bg-dark {
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a2a3f 100%);
}

.section-label-light {
    color: var(--color-primary);
}

.section-title-light {
    color: var(--color-white);
}

.mission-content {
    max-width: 800px;
    margin: 0 auto;
}

.mission-text {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.125rem;
    line-height: 1.8;
    margin-bottom: var(--space-lg);
}

.mission-cta {
    margin-top: var(--space-2xl);
}

.btn-primary-light {
    background: var(--color-white);
    color: var(--color-dark);
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-xl);
    border-radius: var(--radius-full);
    font-weight: 500;
    transition: all var(--transition-base);
}

.btn-primary-light:hover {
    background: var(--color-primary);
    color: var(--color-white);
    transform: translateY(-2px);
}

/* ============================================
   NOTRE HISTOIRE PAGE STYLES
   ============================================ */

/* Histoire Timeline - classes specifiques pour eviter conflits */
.histoire-timeline {
    position: relative;
    max-width: 900px;
    margin: 0 auto;
    padding: 0 var(--space-md);
}

.histoire-timeline::before {
    content: '';
    position: absolute;
    left: 50%;
    top: 0;
    bottom: 0;
    width: 3px;
    background: var(--color-primary);
    opacity: 0.3;
    transform: translateX(-50%);
    z-index: 1;
}

.histoire-item {
    position: relative;
    display: flex;
    margin-bottom: var(--space-3xl);
}

.histoire-dot {
    position: absolute;
    left: 50%;
    top: 8px;
    width: 16px;
    height: 16px;
    background: var(--color-primary);
    border: 4px solid var(--color-white);
    border-radius: 50%;
    box-shadow: var(--shadow-md);
    transform: translateX(-50%);
    z-index: 2;
}

/* Items impairs: date a gauche, contenu a droite */
.histoire-item:nth-child(odd) {
    flex-direction: row;
}

.histoire-item:nth-child(odd) .histoire-date {
    width: 50%;
    text-align: right;
    padding-right: var(--space-2xl);
}

.histoire-item:nth-child(odd) .histoire-text {
    width: 50%;
    text-align: left;
    padding-left: var(--space-2xl);
}

/* Items pairs: contenu a gauche, date a droite */
.histoire-item:nth-child(even) {
    flex-direction: row-reverse;
}

.histoire-item:nth-child(even) .histoire-date {
    width: 50%;
    text-align: left;
    padding-left: var(--space-2xl);
}

.histoire-item:nth-child(even) .histoire-text {
    width: 50%;
    text-align: right;
    padding-right: var(--space-2xl);
}

.histoire-year {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.histoire-text h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.histoire-text p {
    color: var(--color-gray-600);
    line-height: 1.7;
}

.timeline-content p {
    color: var(--color-gray-600);
    line-height: 1.7;
}

/* History Founder Cards */
.history-founders {
    display: flex;
    gap: var(--space-2xl);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Animation: swap positions horizontalement */
.history-founders.swapped {
    flex-direction: row-reverse;
}

.history-founder-card {
    flex: 1;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
    transition: transform 0.8s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
}

.history-founder-image {
    height: 300px;
    overflow: hidden;
}

.history-founder-image img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    object-position: top center;
    transition: transform var(--transition-slow);
}

.history-founder-card:hover .history-founder-image img {
    transform: scale(1.05);
}

.history-founder-info {
    padding: var(--space-xl);
}

.history-founder-info h3 {
    font-size: 1.375rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.history-founder-role {
    font-size: 0.9375rem;
    color: var(--color-primary);
    margin-bottom: var(--space-md);
}

.history-founder-info p {
    color: var(--color-gray-500);
    line-height: 1.7;
}

/* History Quote */
.history-quote {
    text-align: center;
    padding: var(--space-3xl);
    background: var(--bg-light);
    border-radius: var(--radius-xl);
}

.history-quote blockquote {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-dark);
    font-style: italic;
    line-height: 1.6;
    max-width: 700px;
    margin: 0 auto var(--space-xl);
}

.history-quote cite {
    font-size: 1rem;
    color: var(--color-gray-500);
    font-style: normal;
}

/* Responsive A Propos & Histoire */
@media (max-width: 992px) {
    .about-founders {
        grid-template-columns: 1fr;
        gap: var(--space-2xl);
    }

    .about-founders-images {
        height: 400px;
        max-width: 500px;
        margin: 0 auto;
    }

    .founder-image-1 {
        width: 220px;
        height: 280px;
    }

    .founder-image-2 {
        width: 220px;
        height: 280px;
    }

    .about-founders-content {
        padding-left: 0;
        text-align: center;
    }

    .about-stats-inline {
        justify-content: center;
    }

    .values-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .video-showcase {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .video-content {
        order: -1;
    }

    /* Histoire Timeline responsive */
    .histoire-timeline {
        padding-left: var(--space-md);
        padding-right: var(--space-md);
    }

    .histoire-timeline::before {
        left: var(--space-md);
    }

    .histoire-item {
        flex-direction: column !important;
        padding-left: calc(var(--space-2xl) + var(--space-xs));
    }

    .histoire-item:nth-child(even) .histoire-text,
    .histoire-item:nth-child(odd) .histoire-text {
        width: 100%;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
    }

    .histoire-item:nth-child(even) .histoire-date,
    .histoire-item:nth-child(odd) .histoire-date {
        width: 100%;
        text-align: left;
        padding-left: 0;
        padding-right: 0;
        margin-bottom: var(--space-sm);
    }

    .histoire-dot {
        left: var(--space-md);
        transform: translateX(-50%);
    }

    .history-founders {
        flex-direction: column;
    }

    .history-founders.swapped {
        flex-direction: column-reverse;
    }
}

@media (max-width: 768px) {
    .page-hero {
        padding: calc(var(--space-3xl) + 72px) 0 var(--space-2xl);
    }

    .values-grid {
        grid-template-columns: 1fr;
    }

    .about-founders-images {
        height: 350px;
    }

    .founder-image-1,
    .founder-image-2 {
        width: 180px;
        height: 240px;
    }

    .about-stats-inline {
        flex-direction: column;
        gap: var(--space-lg);
        align-items: center;
    }

    .video-play-btn {
        width: 60px;
        height: 60px;
    }

    .video-play-btn svg {
        width: 18px;
        height: 18px;
    }
}

/* ============================================
   NESTED MEGA MENU (Multi-level)
   ============================================ */

.mega-menu-nested {
    min-width: 800px;
}

.mega-menu-item-wrapper {
    position: relative;
}

.mega-menu-item-wrapper.has-submenu .mega-menu-item {
    padding-right: var(--space-2xl);
}

.submenu-arrow {
    position: absolute;
    right: var(--space-md);
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    transition: all var(--transition-fast);
}

.mega-menu-item-wrapper.has-submenu:hover .submenu-arrow {
    color: var(--color-primary);
    transform: translateY(-50%) translateX(3px);
}

.mega-submenu {
    position: absolute;
    left: 100%;
    top: -10px;
    width: 280px;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    padding: var(--space-md);
    opacity: 0;
    visibility: hidden;
    transform: translateX(10px);
    transition: all var(--transition-base);
    z-index: 1002;
}

.mega-menu-item-wrapper.has-submenu:hover .mega-submenu,
.mega-submenu.active {
    opacity: 1;
    visibility: visible;
    transform: translateX(5px);
}

.mega-submenu-header {
    padding: var(--space-sm) var(--space-md);
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-100);
}

.mega-submenu-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--color-primary);
    text-decoration: none;
    transition: all var(--transition-fast);
}

.mega-submenu-title:hover {
    gap: var(--space-md);
}

.mega-submenu-title svg {
    width: 14px;
    height: 14px;
}

.mega-submenu-items {
    display: flex;
    flex-direction: column;
}

.mega-submenu-item {
    display: block;
    padding: var(--space-sm) var(--space-md);
    font-size: 0.875rem;
    color: var(--color-gray-700);
    text-decoration: none;
    border-radius: var(--radius-sm);
    transition: all var(--transition-fast);
}

.mega-submenu-item:hover {
    background: var(--bg-light);
    color: var(--color-primary);
    padding-left: var(--space-lg);
}

/* ============================================
   FOUNDERS ANIMATED PHOTOS
   ============================================ */

.founders-animated {
    position: relative;
    width: 400px;
    height: 500px;
    margin: 0 auto;
}

.founder-photo {
    position: absolute;
    width: 280px;
    height: 350px;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    cursor: pointer;
    transition: all 0.6s cubic-bezier(0.4, 0, 0.2, 1);
}

.founder-photo img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.founder-photo-overlay {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    padding: var(--space-xl);
    background: linear-gradient(to top, rgba(0,0,0,0.9) 0%, rgba(0,0,0,0.5) 50%, transparent 100%);
    color: var(--color-white);
    transform: translateY(0);
    transition: all var(--transition-base);
}

.founder-photo:hover .founder-photo-overlay {
    padding-bottom: var(--space-2xl);
}

.founder-photo-overlay h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.founder-photo-overlay span {
    font-size: 0.875rem;
    opacity: 0.8;
}

/* Photo 1 - Position initiale: arriere, haut-gauche */
.founder-photo-1 {
    left: 0;
    top: 0;
    z-index: 1;
    transform: translate(0, 0);
}

/* Photo 2 - Position initiale: avant, bas-droite (au-dessus pour montrer les 2 visages) */
.founder-photo-2 {
    left: 0;
    top: 0;
    z-index: 2;
    transform: translate(120px, 150px);
}

/* Animation: swap positions avec transform pour des transitions fluides */
.founders-animated.swapped .founder-photo-1 {
    z-index: 2;
    transform: translate(120px, 150px);
}

.founders-animated.swapped .founder-photo-2 {
    z-index: 1;
    transform: translate(0, 0);
}

/* Hover effect sur chaque photo - scale relatif a la position actuelle */
.founder-photo-1:hover {
    transform: translate(0, 0) scale(1.03);
    z-index: 3 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.founder-photo-2:hover {
    transform: translate(120px, 150px) scale(1.03);
    z-index: 3 !important;
    box-shadow: 0 25px 60px rgba(0, 0, 0, 0.25);
}

.founders-animated.swapped .founder-photo-1:hover {
    transform: translate(120px, 150px) scale(1.03);
}

.founders-animated.swapped .founder-photo-2:hover {
    transform: translate(0, 0) scale(1.03);
}


/* YouTube Video Embed */
.youtube-embed {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 ratio */
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.youtube-embed iframe {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.youtube-thumbnail-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    cursor: pointer;
}

.youtube-thumbnail-wrapper img {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
    transition: transform var(--transition-slow);
}

.youtube-thumbnail-wrapper:hover img {
    transform: scale(1.05);
}

.youtube-play-button {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 80px;
    height: 80px;
    background: rgba(255, 255, 255, 0.95);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
    transition: all var(--transition-base);
}

.youtube-thumbnail-wrapper:hover .youtube-play-button {
    transform: translate(-50%, -50%) scale(1.1);
    box-shadow: 0 15px 50px rgba(0, 0, 0, 0.4);
}

.youtube-play-button svg {
    width: 24px;
    height: 24px;
    color: #FF0000;
    margin-left: 4px;
}

/* Responsive nested menu */
@media (max-width: 992px) {
    .mega-menu-nested {
        min-width: 100%;
    }

    .mega-submenu {
        position: static;
        width: 100%;
        opacity: 1;
        visibility: visible;
        transform: none;
        box-shadow: none;
        padding: var(--space-sm) 0 var(--space-sm) var(--space-xl);
        display: none;
    }

    .mega-menu-item-wrapper.has-submenu.active .mega-submenu {
        display: block;
    }

    .submenu-arrow {
        transform: translateY(-50%) rotate(90deg);
    }

    .mega-menu-item-wrapper.has-submenu.active .submenu-arrow {
        transform: translateY(-50%) rotate(-90deg);
    }

    .founders-animated {
        width: 320px;
        height: 420px;
    }

    .founder-photo {
        width: 220px;
        height: 280px;
    }

    .founder-photo-2 {
        transform: translate(100px, 140px);
    }

    .founders-animated.swapped .founder-photo-1 {
        transform: translate(100px, 140px);
    }

    .founders-animated.swapped .founder-photo-2 {
        transform: translate(0, 0);
    }

    .founder-photo-2:hover {
        transform: translate(100px, 140px) scale(1.03);
    }

    .founders-animated.swapped .founder-photo-1:hover {
        transform: translate(100px, 140px) scale(1.03);
    }
}

@media (max-width: 576px) {
    .founders-animated {
        width: 280px;
        height: 380px;
    }

    .founder-photo {
        width: 200px;
        height: 260px;
    }

    .founder-photo-2 {
        transform: translate(80px, 120px);
    }

    .founders-animated.swapped .founder-photo-1 {
        transform: translate(80px, 120px);
    }

    .founders-animated.swapped .founder-photo-2 {
        transform: translate(0, 0);
    }

    .founder-photo-2:hover {
        transform: translate(80px, 120px) scale(1.03);
    }

    .founders-animated.swapped .founder-photo-1:hover {
        transform: translate(80px, 120px) scale(1.03);
    }
}

/* ============================================
   PARTNERS PAGE STYLES
   ============================================ */

.partners-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.partner-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    text-align: center;
    transition: all var(--transition-base);
}

.partner-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.partner-logo {
    width: 80px;
    height: 80px;
    margin: 0 auto var(--space-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
}

.partner-logo img {
    max-width: 100%;
    max-height: 100%;
    object-fit: contain;
}

.partner-card h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.partner-card p {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.partner-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    background: var(--color-blue-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

/* Partner Benefits */
.partner-benefits {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-xl);
}

.partner-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.partner-benefit svg {
    flex-shrink: 0;
}

/* API Features */
.api-features {
    display: flex;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
}

.api-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 500;
    color: var(--color-dark);
}

/* Code Preview */
.code-preview {
    background: #1E1E2D;
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
}

.code-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 0, 0, 0.2);
    border-bottom: 1px solid rgba(255, 255, 255, 0.1);
}

.code-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.code-title {
    margin-left: var(--space-md);
    font-size: 0.8125rem;
    color: rgba(255, 255, 255, 0.5);
}

.code-content {
    padding: var(--space-xl);
    margin: 0;
    font-family: 'Monaco', 'Menlo', 'Ubuntu Mono', monospace;
    font-size: 0.875rem;
    line-height: 1.7;
    color: #e6e6e6;
    overflow-x: auto;
}

.code-comment {
    color: #6A9955;
}

.code-keyword {
    color: #569CD6;
}

.code-string {
    color: #CE9178;
}

/* Responsive Partners */
@media (max-width: 992px) {
    .partners-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .partner-benefits {
        grid-template-columns: 1fr;
    }

    .api-features {
        flex-direction: column;
        gap: var(--space-md);
    }
}

@media (max-width: 576px) {
    .partners-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   TESTIMONIALS PAGE STYLES
   ============================================ */

/* Featured Testimonial */
.featured-testimonial {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--space-3xl);
    align-items: center;
    background: var(--bg-light);
    padding: var(--space-3xl);
    border-radius: var(--radius-xl);
}

.featured-testimonial-content {
    position: relative;
}

.quote-icon {
    position: absolute;
    top: -10px;
    left: -10px;
    opacity: 0.3;
}

.featured-testimonial blockquote {
    font-size: 1.5rem;
    font-weight: 500;
    color: var(--color-dark);
    line-height: 1.6;
    margin: 0 0 var(--space-xl);
    padding-left: var(--space-2xl);
}

.featured-testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-left: var(--space-2xl);
}

.featured-testimonial-author img {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    object-fit: cover;
}

.featured-testimonial-author strong {
    display: block;
    font-size: 1.125rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.featured-testimonial-author span {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.featured-testimonial-stats {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.stat-card {
    background: var(--color-white);
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

/* Testimonials Grid */
.testimonials-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.testimonial-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.testimonial-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.testimonial-rating {
    display: flex;
    gap: 2px;
    margin-bottom: var(--space-md);
}

.testimonial-text {
    font-size: 1rem;
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.testimonial-author {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
}

.testimonial-author img {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    object-fit: cover;
}

.testimonial-author strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.testimonial-author span {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* Responsive Testimonials */
@media (max-width: 992px) {
    .featured-testimonial {
        grid-template-columns: 1fr;
    }

    .featured-testimonial-stats {
        flex-direction: row;
        justify-content: center;
    }

    .testimonials-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .featured-testimonial {
        padding: var(--space-xl);
    }

    .featured-testimonial blockquote {
        font-size: 1.25rem;
        padding-left: 0;
    }

    .featured-testimonial-author {
        padding-left: 0;
    }

    .featured-testimonial-stats {
        flex-direction: column;
    }

    .testimonials-grid {
        grid-template-columns: 1fr;
    }
}

/* ===== API SECTION STYLES ===== */
.api-section-blue {
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    color: var(--color-white);
}

.api-section-blue .section-header {
    text-align: center;
}

.api-section-blue .section-label {
    background: rgba(255, 255, 255, 0.15);
    color: var(--color-white);
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
}

.api-section-blue h2 {
    color: var(--color-white);
}

.api-section-blue .lead {
    color: rgba(255, 255, 255, 0.9);
    max-width: 700px;
    margin: 0 auto var(--space-xl);
}

.api-section-blue .api-stat-card {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.2);
}

.api-section-blue .api-stat-number {
    color: var(--color-white);
}

.api-section-blue .api-stat-label {
    color: rgba(255, 255, 255, 0.8);
}

.api-section-blue .api-feature-card {
    background: var(--color-white);
    color: var(--color-dark);
}

.api-section-blue .api-feature-card h4 {
    color: var(--color-dark);
}

.api-section-blue .api-feature-card p {
    color: var(--color-gray-600);
}

.api-section-blue .api-usecase {
    background: rgba(255, 255, 255, 0.1);
    border-color: rgba(255, 255, 255, 0.2);
}

.api-section-blue .api-usecase-content .section-label {
    background: rgba(255, 255, 255, 0.2);
}

.api-section-blue .api-usecase-content h3 {
    color: var(--color-white);
}

.api-section-blue .api-usecase-content p {
    color: rgba(255, 255, 255, 0.9);
}

.api-section-blue .api-usecase-list li {
    color: rgba(255, 255, 255, 0.9);
}

.api-section-blue .api-usecase-list svg {
    color: var(--color-white);
}

.api-section-blue .btn-primary {
    background: var(--color-white);
    color: var(--color-primary);
}

.api-section-blue .btn-primary:hover {
    background: var(--color-gray-100);
}

.api-section-blue .btn-outline {
    border-color: var(--color-white);
    color: var(--color-white);
}

.api-section-blue .btn-outline:hover {
    background: rgba(255, 255, 255, 0.1);
}

.api-showcase {
    max-width: 1100px;
    margin: 0 auto;
}

.api-stats-row {
    display: grid;
    grid-template-columns: repeat(3, 1fr) auto;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
    align-items: center;
}

.api-stat-card {
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    text-align: left;
}

.api-stat-blue {
    background: linear-gradient(135deg, #E8F4FD 0%, #D4E8FB 100%);
}

.api-stat-yellow {
    background: linear-gradient(135deg, #FFF9E6 0%, #FFF3CC 100%);
}

.api-stat-green {
    background: linear-gradient(135deg, #E8FDF4 0%, #D4FBE8 100%);
}

.api-stat-number {
    display: block;
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.api-stat-blue .api-stat-number { color: #419DF0; }
.api-stat-yellow .api-stat-number { color: #E6A700; }
.api-stat-green .api-stat-number { color: #10B981; }

.api-stat-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-top: var(--space-xs);
    display: block;
}

.api-keys-illustration {
    display: flex;
    justify-content: center;
}

.api-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
    margin-bottom: var(--space-2xl);
}

.api-feature-card {
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    transition: all var(--transition-base);
}

.api-feature-card:hover {
    border-color: var(--color-primary);
    box-shadow: 0 10px 40px rgba(65, 157, 240, 0.1);
}

.api-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.api-feature-icon-yellow {
    background: rgba(247, 200, 68, 0.15);
    color: #E6A700;
}

.api-feature-icon-green {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.api-feature-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    margin-bottom: var(--space-sm);
    color: var(--color-dark);
}

.api-feature-card > p {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    line-height: 1.6;
    margin-bottom: var(--space-md);
}

.api-permission-preview {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.api-permission-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
}

.api-permission-item + .api-permission-item {
    border-top: 1px solid var(--color-gray-200);
}

.api-method-name {
    font-family: monospace;
    font-size: 0.8125rem;
    color: var(--color-dark);
}

.api-toggle {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    font-weight: 500;
}

.api-toggle-on {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.api-toggle-off {
    background: var(--color-gray-200);
    color: var(--color-gray-500);
}

.api-limit-preview {
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.api-limit-row {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: var(--space-xs) 0;
}

.api-limit-row span:first-child {
    color: var(--color-gray-500);
}

.api-limit-value {
    font-weight: 600;
    color: var(--color-dark);
}

.api-ip-preview {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
}

.api-ip-preview code {
    background: var(--color-gray-100);
    padding: 4px 10px;
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-dark);
}

.api-usecase {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-2xl);
    background: linear-gradient(135deg, #f8fafc 0%, #f1f5f9 100%);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    border: 1px solid var(--color-gray-200);
}

.api-usecase-content h3 {
    font-size: 1.5rem;
    font-weight: 700;
    margin-bottom: var(--space-md);
    color: var(--color-dark);
}

.api-usecase-content > p {
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

.api-usecase-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.api-usecase-list li {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    padding: var(--space-sm) 0;
    color: var(--color-gray-700);
    font-size: 0.9375rem;
}

.api-usecase-list li svg {
    color: var(--color-primary);
    flex-shrink: 0;
    margin-top: 2px;
}

.api-usecase-code {
    display: flex;
    align-items: center;
}

/* API Section Responsive */
@media (max-width: 992px) {
    .api-stats-row {
        grid-template-columns: repeat(3, 1fr);
    }

    .api-keys-illustration {
        display: none;
    }

    .api-features-grid {
        grid-template-columns: 1fr;
    }

    .api-usecase {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 576px) {
    .api-stats-row {
        grid-template-columns: 1fr;
    }
}

/* ===== ECOSYSTEM SECTION STYLES ===== */
.ecosystem-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);
    overflow: hidden;
    position: relative;
    min-height: 500px;
}

.ecosystem-level {
    display: none;
    padding: var(--space-xl);
    animation: ecoFadeIn 0.4s ease;
}

.ecosystem-level-active {
    display: block;
}

@keyframes ecoFadeIn {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.ecosystem-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.eco-crumb {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

.eco-crumb-active {
    color: var(--color-dark);
    font-weight: 600;
}

.eco-crumb-link {
    cursor: pointer;
    transition: color var(--transition-fast);
}

.eco-crumb-link:hover {
    color: var(--color-primary);
}

.eco-crumb-sep {
    color: var(--color-gray-300);
    flex-shrink: 0;
}

/* Ecosystem Cards (Level 0) */
.ecosystem-cards {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
    padding: var(--space-xl) 0;
}

.eco-card {
    width: 280px;
    background: var(--color-white);
    border: 2px solid var(--color-primary);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.eco-card-active:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 40px rgba(65, 157, 240, 0.2);
}

.eco-card-disabled {
    border-color: var(--color-gray-200);
    background: var(--color-gray-100);
    cursor: not-allowed;
    opacity: 0.7;
}

.eco-card-avatar {
    width: 70px;
    height: 70px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    font-weight: 700;
    margin: 0 auto var(--space-md);
}

.eco-card-avatar-primary {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.eco-card-avatar-gray {
    background: var(--color-gray-200);
    color: var(--color-gray-500);
}

.eco-card-decoration {
    position: absolute;
    top: 60px;
    left: 50%;
    transform: translateX(-50%);
    width: 150px;
    height: 30px;
    background: rgba(65, 157, 240, 0.1);
    border-radius: 50%;
    z-index: 0;
}

.eco-card-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
    position: relative;
    z-index: 1;
}

.eco-card-title-gray {
    color: var(--color-gray-500);
}

.eco-card-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 12px;
    border-radius: 20px;
    background: var(--color-gray-200);
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
}

.eco-card-status-active {
    background: rgba(16, 185, 129, 0.15);
    color: #059669;
}

.eco-card-meta {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    line-height: 1.5;
    margin-bottom: var(--space-lg);
}

.eco-card-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.eco-card-active .eco-card-btn:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

.eco-card-btn-disabled {
    background: var(--color-gray-200);
    color: var(--color-gray-400);
    cursor: not-allowed;
}

/* Ecosystem Client View (Level 1) */
.ecosystem-client-view {
    padding: var(--space-lg) 0;
}

.eco-client-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.eco-client-header h3 {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0;
}

.eco-client-code {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.eco-client-content {
    display: grid;
    grid-template-columns: 280px 1fr;
    gap: var(--space-xl);
}

.eco-products-box {
    background: rgba(16, 185, 129, 0.08);
    border: 2px dashed #10B981;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.eco-products-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #059669;
    margin-bottom: var(--space-sm);
}

.eco-products-desc {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.eco-product-item {
    background: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
    border-left: 4px solid;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.eco-product-physical {
    border-left-color: #0EA5E9;
}

.eco-product-service {
    border-left-color: var(--color-primary);
}

.eco-product-type {
    font-size: 0.6875rem;
    font-weight: 600;
    padding: 2px 8px;
    border-radius: 4px;
    display: inline-block;
    width: fit-content;
}

.eco-product-physical .eco-product-type {
    background: rgba(14, 165, 233, 0.15);
    color: #0284C7;
}

.eco-product-service .eco-product-type {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.eco-product-mode {
    font-size: 0.6875rem;
    font-weight: 500;
    color: #059669;
    align-self: flex-end;
    margin-top: -20px;
}

.eco-product-mode-recurring {
    color: var(--color-gray-500);
}

.eco-product-name {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* Sites Grid */
.eco-sites-title {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.eco-sites-grid {
    display: flex;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.eco-site-card {
    width: 260px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    cursor: pointer;
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.eco-site-card:hover {
    border-color: var(--color-primary);
    transform: translateY(-2px);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.08);
}

.eco-site-icon {
    width: 50px;
    height: 50px;
    border-radius: var(--radius-md);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-sm);
    position: relative;
    z-index: 1;
}

.eco-site-decoration {
    position: absolute;
    top: 40px;
    right: 0;
    width: 100px;
    height: 60px;
    background: rgba(65, 157, 240, 0.05);
    border-radius: 0 0 0 60px;
}

.eco-site-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 4px 0;
}

.eco-site-location {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    display: block;
    margin-bottom: var(--space-md);
}

.eco-site-info {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    background: var(--color-gray-100);
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-md);
}

.eco-site-btn {
    width: 100%;
    padding: 10px;
    border: none;
    border-radius: var(--radius-md);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.eco-site-card:hover .eco-site-btn {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Contracts Grid (Level 2) */
.eco-section-title {
    font-size: 1.375rem;
    font-weight: 700;
    color: var(--color-dark);
    text-align: center;
    margin-bottom: var(--space-xl);
}

.eco-contracts-grid {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.eco-contract-card {
    width: 320px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-top: 4px solid #F59E0B;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    cursor: pointer;
    transition: all var(--transition-base);
}

.eco-contract-card:hover {
    box-shadow: 0 8px 30px rgba(0, 0, 0, 0.1);
    transform: translateY(-2px);
}

.eco-contract-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
}

.eco-contract-type {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
}

.eco-contract-type-voip {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.eco-contract-type-mobile {
    background: rgba(245, 158, 11, 0.15);
    color: #D97706;
}

.eco-contract-status {
    font-size: 0.75rem;
    font-weight: 600;
    padding: 4px 10px;
    border-radius: 4px;
    background: #F59E0B;
    color: white;
}

.eco-contract-name {
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: 0 0 var(--space-xs) 0;
}

.eco-contract-desc {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0 0 var(--space-md) 0;
}

.eco-contract-info {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    padding-top: var(--space-md);
    border-top: 1px dashed var(--color-gray-200);
}

.eco-contract-info svg {
    color: #F59E0B;
}

/* Contract Detail (Level 3) */
.eco-contract-detail {
    padding: var(--space-lg) 0;
}

.eco-contract-detail-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: var(--color-white);
    border-left: 5px solid #F59E0B;
    padding: var(--space-lg);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-xl);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.eco-contract-detail-title {
    font-size: 1.25rem;
    font-weight: 700;
    color: #D97706;
    margin: 0 0 var(--space-xs) 0;
}

.eco-contract-detail-header > div span {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.eco-contract-status-badge {
    font-size: 0.875rem;
    font-weight: 600;
    padding: 6px 16px;
    border-radius: 4px;
    background: #F59E0B;
    color: white;
}

.eco-contract-dashboard {
    display: grid;
    grid-template-columns: 180px 1fr 180px;
    gap: var(--space-lg);
    align-items: start;
}

.eco-contract-sidebar {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.eco-widget {
    background: var(--color-white);
    border-left: 4px solid var(--color-gray-300);
    padding: var(--space-md);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.eco-widget-info {
    border-left-color: #0EA5E9;
}

.eco-widget-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.eco-widget-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
}

.eco-widget-value-danger {
    color: #DC2626;
}

.eco-widget-sub {
    display: block;
    font-size: 0.75rem;
    color: #DC2626;
}

.eco-widget-code {
    display: block;
    font-size: 0.8125rem;
    background: var(--color-gray-100);
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    margin-bottom: 4px;
}

.eco-widget-code-muted {
    color: var(--color-gray-400);
}

.eco-widget-row {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.eco-widget-row svg {
    color: #0EA5E9;
}

.eco-widget-row strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-dark);
}

.eco-widget-row span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Solar System */
.eco-contract-center {
    display: flex;
    justify-content: center;
    align-items: center;
    min-height: 280px;
}

.eco-solar-system {
    position: relative;
    width: 240px;
    height: 240px;
}

.eco-orbit-ring {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 200px;
    height: 200px;
    border: 2px dashed var(--color-gray-200);
    border-radius: 50%;
}

.eco-sun {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 100px;
    height: 100px;
    background: rgba(16, 185, 129, 0.1);
    border: 3px solid #10B981;
    border-radius: 50%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    z-index: 2;
}

.eco-sun svg {
    color: #10B981;
    margin-bottom: 4px;
}

.eco-sun-label {
    font-size: 0.75rem;
    font-weight: 700;
    color: var(--color-dark);
}

.eco-sun-badge {
    font-size: 0.625rem;
    background: #10B981;
    color: white;
    padding: 2px 6px;
    border-radius: 4px;
    margin-top: 4px;
}

.eco-planet {
    position: absolute;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 12px;
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: 20px;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-700);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
}

.eco-planet svg {
    color: var(--color-gray-500);
}

.eco-planet-1 {
    top: 10px;
    left: 50%;
    transform: translateX(-50%);
}

.eco-planet-2 {
    bottom: 10px;
    right: 0;
}

/* Navigation Dots */
.ecosystem-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
}

.eco-nav-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-300);
    background: transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    padding: 0;
}

.eco-nav-dot:hover {
    border-color: var(--color-primary);
}

.eco-nav-dot-active {
    background: var(--color-primary);
    border-color: var(--color-primary);
}

/* Ecosystem Responsive */
@media (max-width: 992px) {
    .eco-client-content {
        grid-template-columns: 1fr;
    }

    .eco-products-box {
        order: 2;
    }

    .eco-contract-dashboard {
        grid-template-columns: 1fr;
    }

    .eco-contract-center {
        order: -1;
    }

    .eco-contract-sidebar {
        flex-direction: row;
        flex-wrap: wrap;
    }

    .eco-widget {
        flex: 1;
        min-width: 150px;
    }
}

@media (max-width: 768px) {
    .ecosystem-demo {
        min-height: auto;
    }

    .ecosystem-cards {
        flex-direction: column;
        align-items: center;
    }

    .eco-card {
        width: 100%;
        max-width: 320px;
    }

    .eco-sites-grid {
        flex-direction: column;
    }

    .eco-site-card {
        width: 100%;
    }

    .eco-contracts-grid {
        flex-direction: column;
        align-items: center;
    }

    .eco-contract-card {
        width: 100%;
        max-width: 350px;
    }
}

/* Ecosystem Zoom Animations */
.eco-zoom-out {
    animation: ecoZoomOut 0.3s ease-out forwards;
}

.eco-zoom-in {
    animation: ecoZoomIn 0.3s ease-out forwards;
}

@keyframes ecoZoomOut {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(0.8);
    }
}

@keyframes ecoZoomIn {
    0% {
        opacity: 1;
        transform: scale(1);
    }
    100% {
        opacity: 0;
        transform: scale(1.2);
    }
}

/* Ecosystem Breadcrumb Styles */
.eco-breadcrumb-link {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.eco-breadcrumb-link:hover {
    color: var(--color-primary-dark);
    text-decoration: underline;
}

.eco-breadcrumb-sep {
    color: var(--color-gray-400);
    margin: 0 var(--space-xs);
}

.eco-breadcrumb-current {
    color: var(--color-gray-600);
    font-weight: 500;
}

/* ----- Product Types Section ----- */
.product-pedagogy-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.08) 0%, rgba(247, 200, 68, 0.08) 100%);
    border: 1px solid rgba(65, 157, 240, 0.2);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.product-pedagogy-icon {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    background: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.product-pedagogy-content strong {
    display: block;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.product-pedagogy-content p {
    margin: 0;
    color: var(--color-gray-600);
    font-size: 0.9375rem;
}

/* Product Types Grid */
.product-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

@media (max-width: 992px) {
    .product-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 576px) {
    .product-types-grid {
        grid-template-columns: 1fr;
    }
}

.product-type-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    border: 2px solid var(--color-gray-300);
    transition: all var(--transition-base);
    position: relative;
    overflow: hidden;
}

.product-type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.product-type-badge {
    position: absolute;
    top: var(--space-sm);
    right: var(--space-sm);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
}

.product-type-subscription .product-type-badge {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.product-type-subscription {
    border-color: var(--color-primary);
}

.product-type-option .product-type-badge {
    background: rgba(247, 200, 68, 0.15);
    color: #B8860B;
}

.product-type-option {
    border-color: var(--color-accent-yellow);
}

.product-type-physical .product-type-badge {
    background: rgba(114, 201, 143, 0.15);
    color: #2E8B57;
}

.product-type-physical {
    border-color: var(--color-accent-green);
}

.product-type-service .product-type-badge {
    background: rgba(224, 81, 110, 0.15);
    color: var(--color-accent-pink);
}

.product-type-service {
    border-color: var(--color-accent-pink);
}

.product-type-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    background: var(--color-gray-100);
}

.product-type-subscription .product-type-icon {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.product-type-option .product-type-icon {
    background: rgba(247, 200, 68, 0.1);
    color: var(--color-accent-yellow);
}

.product-type-physical .product-type-icon {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.product-type-service .product-type-icon {
    background: rgba(224, 81, 110, 0.1);
    color: var(--color-accent-pink);
}

.product-type-card h4 {
    margin-bottom: var(--space-sm);
    color: var(--color-dark);
}

.product-type-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
    line-height: 1.5;
}

.product-type-example {
    background: var(--color-gray-100);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.product-type-example-label {
    display: block;
    font-weight: 600;
    color: var(--color-gray-500);
    font-size: 0.6875rem;
    text-transform: uppercase;
    margin-bottom: 2px;
}

/* Product Assembly Demo */
.product-assembly-demo {
    display: flex;
    align-items: stretch;
    gap: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

@media (max-width: 992px) {
    .product-assembly-demo {
        flex-direction: column;
    }
}

.product-assembly-offer {
    flex: 1;
    background: linear-gradient(135deg, var(--color-gray-100) 0%, #f0f4ff 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    position: relative;
}

.product-assembly-offer-badge {
    position: absolute;
    top: var(--space-md);
    right: var(--space-md);
    background: var(--color-dark);
    color: white;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
}

.product-assembly-offer h4 {
    font-size: 1.25rem;
    margin-bottom: var(--space-sm);
    color: var(--color-dark);
}

.product-assembly-price {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.product-assembly-price span {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-gray-500);
}

.product-assembly-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.product-assembly-features li {
    padding: var(--space-xs) 0;
    color: var(--color-gray-700);
    font-size: 0.9375rem;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.product-assembly-features li::before {
    content: "";
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

.product-assembly-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: 0 var(--space-md);
    color: var(--color-gray-400);
}

.product-assembly-arrow span {
    font-size: 0.75rem;
    text-transform: uppercase;
    font-weight: 600;
    letter-spacing: 0.5px;
    white-space: nowrap;
}

@media (max-width: 992px) {
    .product-assembly-arrow {
        flex-direction: row;
        padding: var(--space-md) 0;
    }

    .product-assembly-arrow svg {
        transform: rotate(90deg);
    }
}

.product-assembly-breakdown {
    flex: 1.2;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.product-assembly-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border-left: 4px solid var(--color-gray-300);
}

.product-assembly-subscription {
    border-left-color: var(--color-primary);
    background: rgba(65, 157, 240, 0.05);
}

.product-assembly-option {
    border-left-color: var(--color-accent-yellow);
    background: rgba(247, 200, 68, 0.05);
}

.product-assembly-physical {
    border-left-color: var(--color-accent-green);
    background: rgba(114, 201, 143, 0.05);
}

.product-assembly-service {
    border-left-color: var(--color-accent-pink);
    background: rgba(224, 81, 110, 0.05);
}

.product-assembly-type {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px var(--space-xs);
    border-radius: var(--radius-sm);
    flex-shrink: 0;
}

.product-assembly-subscription .product-assembly-type {
    background: rgba(65, 157, 240, 0.2);
    color: var(--color-primary);
}

.product-assembly-option .product-assembly-type {
    background: rgba(247, 200, 68, 0.2);
    color: #B8860B;
}

.product-assembly-physical .product-assembly-type {
    background: rgba(114, 201, 143, 0.2);
    color: #2E8B57;
}

.product-assembly-service .product-assembly-type {
    background: rgba(224, 81, 110, 0.2);
    color: var(--color-accent-pink);
}

.product-assembly-name {
    flex: 1;
    font-weight: 500;
    color: var(--color-dark);
}

.product-assembly-qty {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    font-weight: 500;
}

/* ----- Product Parameters Section ----- */
.product-params-section {
    margin-top: var(--space-3xl);
    padding: var(--space-2xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
}

.product-params-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.product-params-icon {
    width: 56px;
    height: 56px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    border-radius: var(--radius-lg);
    color: var(--color-white);
    flex-shrink: 0;
}

.product-params-header h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.product-params-header p {
    font-size: 0.9375rem;
    color: var(--color-gray-600);
    margin: 0;
}

.product-params-demo {
    display: flex;
    align-items: stretch;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

@media (max-width: 992px) {
    .product-params-demo {
        flex-direction: column;
    }
}

.product-params-before,
.product-params-after {
    flex: 1;
    padding: var(--space-lg);
    border-radius: var(--radius-lg);
    position: relative;
}

.product-params-before {
    background: rgba(224, 81, 110, 0.05);
    border: 1px solid rgba(224, 81, 110, 0.2);
}

.product-params-after {
    background: rgba(114, 201, 143, 0.05);
    border: 1px solid rgba(114, 201, 143, 0.2);
}

.product-params-label {
    position: absolute;
    top: -10px;
    left: var(--space-md);
    padding: var(--space-xs) var(--space-sm);
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    border-radius: var(--radius-sm);
}

.product-params-label-bad {
    background: var(--color-accent-pink);
    color: var(--color-white);
}

.product-params-label-good {
    background: var(--color-accent-green);
    color: var(--color-white);
}

.product-params-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
    margin-top: var(--space-sm);
}

.product-params-item {
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: 0.875rem;
    color: var(--color-gray-700);
    border: 1px solid var(--color-gray-200);
}

.product-params-item-more {
    background: var(--color-gray-100);
    color: var(--color-gray-500);
    font-style: italic;
    border: 1px dashed var(--color-gray-300);
}

.product-params-note {
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-accent-pink);
    font-weight: 500;
    text-align: center;
}

.product-params-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-400);
    padding: 0 var(--space-sm);
}

@media (max-width: 992px) {
    .product-params-arrow {
        padding: var(--space-sm) 0;
    }

    .product-params-arrow svg {
        transform: rotate(90deg);
    }
}

.product-params-single {
    margin-top: var(--space-sm);
}

.product-params-product {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 2px solid var(--color-accent-green);
    margin-bottom: var(--space-md);
}

.product-params-product strong {
    font-size: 1rem;
    color: var(--color-dark);
}

.product-params-tag {
    font-size: 0.6875rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: 2px var(--space-xs);
    background: rgba(114, 201, 143, 0.2);
    color: #2E8B57;
    border-radius: var(--radius-sm);
}

.product-params-values {
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.product-params-param {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    display: block;
    margin-bottom: var(--space-sm);
}

.product-params-param strong {
    color: var(--color-primary);
}

.product-params-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.product-params-chip {
    padding: var(--space-xs) var(--space-sm);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    font-size: 0.8125rem;
    font-weight: 500;
    border-radius: var(--radius-full);
    border: 1px solid rgba(65, 157, 240, 0.3);
}

.product-params-detail {
    margin-top: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    font-style: italic;
    text-align: center;
}

.product-params-examples {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.product-params-examples-title {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
    display: block;
    margin-bottom: var(--space-md);
}

.product-params-examples-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

@media (max-width: 768px) {
    .product-params-examples-grid {
        grid-template-columns: 1fr;
    }
}

.product-params-example {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.product-params-example strong {
    color: var(--color-dark);
}

.product-params-example em {
    color: var(--color-primary);
    font-style: normal;
    font-weight: 500;
}

.product-params-chips-small {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    margin-top: var(--space-sm);
}

.product-params-chips-small span {
    padding: 2px var(--space-xs);
    background: var(--color-white);
    color: var(--color-gray-600);
    font-size: 0.75rem;
    border-radius: var(--radius-sm);
    border: 1px solid var(--color-gray-300);
}

/* ============================================
   LEGAL PAGES STYLES
   ============================================ */

.legal-content {
    max-width: 800px;
    margin: 0 auto;
}

.legal-intro {
    text-align: center;
    margin-bottom: var(--space-3xl);
}

.legal-icon {
    width: 80px;
    height: 80px;
    background: rgba(65, 157, 240, 0.1);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
}

.legal-update {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-top: var(--space-md);
}

.legal-toc {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    margin-bottom: var(--space-3xl);
}

.legal-toc h3 {
    font-size: 1.125rem;
    margin-bottom: var(--space-md);
    color: var(--color-dark);
}

.legal-toc ol {
    margin: 0;
    padding-left: var(--space-lg);
}

.legal-toc li {
    margin-bottom: var(--space-sm);
}

.legal-toc a {
    color: var(--color-primary);
    text-decoration: none;
    transition: color 0.2s ease;
}

.legal-toc a:hover {
    color: var(--color-dark);
    text-decoration: underline;
}

.legal-section {
    margin-bottom: var(--space-3xl);
    padding-bottom: var(--space-2xl);
    border-bottom: 1px solid var(--color-gray-300);
}

.legal-section:last-child {
    border-bottom: none;
    margin-bottom: 0;
}

.legal-section h2 {
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: var(--space-lg);
}

.legal-section h3 {
    font-size: 1.125rem;
    color: var(--color-dark);
    margin-top: var(--space-xl);
    margin-bottom: var(--space-md);
}

.legal-section p {
    color: var(--color-gray-700);
    line-height: 1.7;
    margin-bottom: var(--space-md);
}

.legal-section ul {
    margin: var(--space-md) 0;
    padding-left: var(--space-lg);
}

.legal-section li {
    color: var(--color-gray-700);
    margin-bottom: var(--space-sm);
    line-height: 1.6;
}

.legal-section a {
    color: var(--color-primary);
    text-decoration: none;
}

.legal-section a:hover {
    text-decoration: underline;
}

.legal-info-box {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.legal-info-box p {
    margin-bottom: var(--space-xs);
}

.legal-info-box p:last-child {
    margin-bottom: 0;
}

.legal-highlight {
    display: flex;
    gap: var(--space-md);
    background: rgba(65, 157, 240, 0.08);
    border-left: 4px solid var(--color-primary);
    border-radius: 0 var(--radius-md) var(--radius-md) 0;
    padding: var(--space-lg);
    margin: var(--space-lg) 0;
}

.legal-highlight svg {
    flex-shrink: 0;
    color: var(--color-primary);
    margin-top: 2px;
}

.legal-highlight p {
    margin: 0;
}

.legal-highlight-success {
    background: rgba(114, 201, 143, 0.1);
    border-left-color: var(--color-accent-green);
}

.legal-highlight-success svg {
    color: var(--color-accent-green);
}

.legal-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    margin: var(--space-xl) 0;
}

@media (max-width: 640px) {
    .legal-grid {
        grid-template-columns: 1fr;
    }
}

.legal-grid-item {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.legal-grid-icon {
    width: 48px;
    height: 48px;
    background: var(--color-white);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
    color: var(--color-primary);
}

.legal-grid-item h4 {
    font-size: 1rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.legal-grid-item p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.legal-rights-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin: var(--space-xl) 0;
}

@media (max-width: 768px) {
    .legal-rights-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 480px) {
    .legal-rights-grid {
        grid-template-columns: 1fr;
    }
}

.legal-right {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    text-align: center;
}

.legal-right h4 {
    font-size: 0.95rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.legal-right p {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin: 0;
}

.legal-table {
    width: 100%;
    border-collapse: collapse;
    margin: var(--space-lg) 0;
}

.legal-table th,
.legal-table td {
    padding: var(--space-md);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-300);
}

.legal-table th {
    background: var(--bg-light);
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.875rem;
}

.legal-table td {
    color: var(--color-gray-700);
    font-size: 0.875rem;
}

.legal-table tr:last-child td {
    border-bottom: none;
}

.legal-steps {
    margin: var(--space-xl) 0;
}

.legal-step {
    display: flex;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.legal-step:last-child {
    margin-bottom: 0;
}

.legal-step-number {
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    flex-shrink: 0;
}

.legal-step-content h4 {
    font-size: 1rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.legal-step-content p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin: 0;
}

.legal-contact-box {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.legal-contact-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.legal-contact-item svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

.legal-contact-item strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: 2px;
}

.legal-contact-item a {
    color: var(--color-dark);
    font-weight: 500;
    text-decoration: none;
}

.legal-contact-item a:hover {
    color: var(--color-primary);
}

/* ----- CRM Module Page ----- */

/* KPI Dashboard Preview */
.crm-dashboard-preview {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
}

.crm-kpi-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.crm-kpi-card {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.crm-kpi-card.highlight {
    background: linear-gradient(135deg, #F0F7FF 0%, #E8F4FD 100%);
    border: 1px solid rgba(65, 157, 240, 0.2);
}

.crm-kpi-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.crm-kpi-icon.blue {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.crm-kpi-icon.orange {
    background: rgba(247, 200, 68, 0.2);
    color: #D97706;
}

.crm-kpi-icon.purple {
    background: rgba(157, 78, 221, 0.15);
    color: var(--color-purple);
}

.crm-kpi-content {
    display: flex;
    flex-direction: column;
}

.crm-kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    line-height: 1.1;
}

.crm-kpi-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.crm-kpi-badge {
    display: inline-flex;
    align-items: center;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    width: fit-content;
}

.crm-kpi-badge.green {
    background: rgba(114, 201, 143, 0.2);
    color: #059669;
}

.crm-kpi-badge.orange {
    background: rgba(247, 200, 68, 0.2);
    color: #D97706;
}

.crm-kpi-substats {
    display: flex;
    gap: var(--space-md);
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.crm-kpi-header {
    margin-bottom: var(--space-sm);
}

.crm-kpi-title {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-700);
}

.crm-kpi-dual {
    display: flex;
    gap: var(--space-lg);
}

.crm-kpi-dual-item {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.crm-kpi-dual-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.crm-kpi-dual-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.crm-kpi-dual-value.blue {
    color: var(--color-primary);
}

.crm-kpi-dual-value.green {
    color: #059669;
}

/* Killer Features */
.bg-gradient-light {
    background: linear-gradient(180deg, var(--color-gray-50) 0%, var(--color-white) 100%);
}

.killer-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.killer-feature-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
    position: relative;
    transition: all var(--transition-base);
}

.killer-feature-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.killer-feature-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.killer-feature-badge {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: linear-gradient(135deg, #F59E0B 0%, #D97706 100%);
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    padding: 0.25rem 0.75rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.killer-feature-card h3 {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.killer-feature-card p {
    color: var(--color-gray-600);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin-bottom: var(--space-lg);
}

.killer-feature-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(114, 201, 143, 0.1);
    border-radius: var(--radius-md);
    color: #059669;
    font-size: 0.875rem;
    font-weight: 500;
}

.killer-feature-benefit svg {
    flex-shrink: 0;
}

/* Account Types List */
.account-types-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.account-type-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-fast);
}

.account-type-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-sm);
}

.account-type-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.account-type-icon.prospect {
    background: rgba(234, 88, 12, 0.1);
    color: #EA580C;
}

.account-type-icon.contact {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.account-type-icon.client {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.account-type-icon.distributor {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.account-type-icon.supplier {
    background: rgba(236, 72, 153, 0.1);
    color: #EC4899;
}

.account-type-content {
    display: flex;
    flex-direction: column;
}

.account-type-content strong {
    font-size: 1rem;
    color: var(--color-dark);
}

.account-type-content span {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

/* CRM Visual Cards */
.crm-feature-visual {
    display: flex;
    justify-content: center;
}

.crm-visual-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
    overflow: hidden;
    width: 100%;
    max-width: 480px;
}

.crm-visual-card.large {
    max-width: 560px;
}

.crm-visual-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.crm-visual-badge {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-gray-700);
}

.crm-visual-filters {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    overflow-x: auto;
}

.crm-filter-tag {
    padding: 0.375rem 0.875rem;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    color: var(--color-gray-600);
    background: var(--color-gray-100);
    white-space: nowrap;
}

.crm-filter-tag.active {
    background: var(--color-primary);
    color: white;
}

.crm-visual-list {
    padding: var(--space-md);
}

.crm-visual-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: background var(--transition-fast);
}

.crm-visual-item:hover {
    background: var(--color-gray-50);
}

.crm-visual-avatar {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.crm-visual-avatar.green {
    background: #10B981;
}

.crm-visual-avatar.orange {
    background: #F59E0B;
}

.crm-visual-info {
    display: flex;
    flex-direction: column;
}

.crm-visual-info strong {
    font-size: 0.9375rem;
    color: var(--color-dark);
}

.crm-visual-info span {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* Client Header Visual */
.crm-visual-client-header {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.crm-visual-client-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #8B5CF6 0%, #7C3AED 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.crm-visual-client-info {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
}

.crm-visual-client-info .client-tag {
    display: inline-flex;
    align-items: center;
    padding: 0.125rem 0.5rem;
    background: #10B981;
    color: white;
    font-size: 0.7rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
    width: fit-content;
}

.crm-visual-client-info strong {
    font-size: 1.125rem;
    color: var(--color-dark);
}

.crm-visual-client-info > span:last-child {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.crm-visual-confidence {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 0.25rem;
    flex-shrink: 0;
}

.crm-visual-confidence > span:first-child {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.confidence-bar {
    width: 100px;
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.confidence-fill {
    height: 100%;
    background: linear-gradient(90deg, #EF4444 0%, #F59E0B 50%, #10B981 100%);
    border-radius: var(--radius-full);
}

.confidence-value {
    font-size: 0.875rem;
    font-weight: 600;
    color: #F59E0B;
}

.crm-visual-tabs {
    display: flex;
    gap: 0;
    padding: 0 var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
    overflow-x: auto;
}

.crm-tab {
    padding: var(--space-md) var(--space-lg);
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    border-bottom: 2px solid transparent;
    white-space: nowrap;
    transition: all var(--transition-fast);
}

.crm-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    font-weight: 500;
}

/* Feature Tabs List */
.feature-tabs-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feature-tab-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
}

.feature-tab-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.feature-tab-item div:last-child {
    display: flex;
    flex-direction: column;
}

.feature-tab-item strong {
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 0.125rem;
}

.feature-tab-item p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Action Type Cards */
.action-type-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.action-type-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-md);
}

.action-type-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.action-type-icon.note {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.action-type-icon.task {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.action-type-icon.rdv {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.action-type-icon.opportunity {
    background: rgba(247, 200, 68, 0.2);
    color: #D97706;
}

.action-type-card h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.action-type-card p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Notification Features */
.notification-features {
    display: flex;
    justify-content: center;
    gap: var(--space-2xl);
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: var(--color-gray-50);
    border-radius: var(--radius-xl);
}

.notification-feature {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.notification-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-full);
    background: var(--color-white);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    box-shadow: var(--shadow-sm);
}

.notification-content {
    display: flex;
    flex-direction: column;
}

.notification-content strong {
    font-size: 0.9375rem;
    color: var(--color-dark);
}

.notification-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* AI Section */
.bg-gradient-dark {
    background: linear-gradient(135deg, #1E293B 0%, #0F172A 100%);
}

.ai-section {
    text-align: center;
}

.ai-header {
    margin-bottom: var(--space-2xl);
}

.ai-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 1rem;
    background: rgba(255, 255, 255, 0.1);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: var(--radius-full);
    color: white;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--space-lg);
}

.ai-badge-light {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.1) 0%, rgba(139, 92, 246, 0.1) 100%);
    border: 1px solid rgba(65, 157, 240, 0.2);
    border-radius: var(--radius-full);
    color: var(--color-primary);
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--space-md);
}

.ai-header h2 {
    color: white;
    font-size: 2rem;
    margin-bottom: var(--space-md);
}

.ai-header p {
    color: rgba(255, 255, 255, 0.7);
    font-size: 1.0625rem;
    max-width: 600px;
    margin: 0 auto;
}

.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.ai-feature-card {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: left;
    transition: all var(--transition-base);
}

.ai-feature-card:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.2);
}

.ai-feature-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.ai-feature-card h4 {
    color: white;
    font-size: 1.125rem;
    margin-bottom: var(--space-sm);
}

.ai-feature-card p {
    color: rgba(255, 255, 255, 0.6);
    font-size: 0.9375rem;
    line-height: 1.6;
    margin: 0;
}

/* Import Feature */
.import-feature {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
    padding: var(--space-xl);
    background: linear-gradient(135deg, #F0F7FF 0%, #E8F4FD 100%);
    border-radius: var(--radius-xl);
    border: 1px solid rgba(65, 157, 240, 0.2);
}

.import-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.import-content {
    flex: 1;
}

.import-content h4 {
    font-size: 1.125rem;
    color: var(--color-dark);
    margin-bottom: 0.25rem;
}

.import-content p {
    color: var(--color-gray-600);
    margin: 0;
}

/* Collaboration Visual */
.collab-visual {
    display: flex;
    justify-content: center;
}

.collab-chat {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
    overflow: hidden;
    width: 100%;
    max-width: 400px;
}

.collab-chat-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.collab-chat-header span:first-child {
    font-weight: 600;
    color: var(--color-dark);
}

.online-badge {
    font-size: 0.75rem;
    padding: 0.25rem 0.5rem;
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
    border-radius: var(--radius-full);
}

.collab-chat-messages {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.chat-message {
    display: flex;
    gap: var(--space-sm);
}

.chat-avatar {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.chat-avatar.green {
    background: #10B981;
}

.chat-content {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-sm) var(--space-md);
    max-width: 280px;
}

.chat-content strong {
    font-size: 0.8125rem;
    color: var(--color-dark);
    display: block;
    margin-bottom: 0.125rem;
}

.chat-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Responsive CRM Page */
@media (max-width: 1024px) {
    .crm-kpi-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .killer-features-grid {
        grid-template-columns: 1fr;
    }

    .ai-features-grid {
        grid-template-columns: 1fr;
    }

    .notification-features {
        flex-direction: column;
        align-items: center;
    }
}

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

    .crm-kpi-dual {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .import-feature {
        flex-direction: column;
        text-align: center;
    }

    .ai-header h2 {
        font-size: 1.5rem;
    }
}

/* ----- CRM Subpages Styles ----- */

/* Feature Highlight Card */
.feature-highlight-card {
    background: linear-gradient(135deg, #F0FDF4 0%, #DCFCE7 100%);
    border: 1px solid rgba(16, 185, 129, 0.2);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    position: relative;
}

.feature-highlight-card.blue {
    background: linear-gradient(135deg, #EFF6FF 0%, #DBEAFE 100%);
    border-color: rgba(59, 130, 246, 0.2);
}

.feature-highlight-badge {
    position: absolute;
    top: var(--space-lg);
    right: var(--space-lg);
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    padding: 0.375rem 1rem;
    border-radius: var(--radius-full);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.feature-highlight-content {
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
}

.feature-highlight-icon {
    width: 80px;
    height: 80px;
    background: linear-gradient(135deg, #10B981 0%, #059669 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.feature-highlight-card.blue .feature-highlight-badge {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.feature-highlight-card.blue .feature-highlight-icon {
    background: linear-gradient(135deg, #3B82F6 0%, #2563EB 100%);
}

.feature-highlight-text h2 {
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.feature-highlight-text p {
    color: var(--color-gray-600);
    line-height: 1.7;
    margin-bottom: var(--space-lg);
}

/* Feature Highlight Example */
.feature-highlight-example {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-top: var(--space-lg);
}

.example-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.example-content {
    display: flex;
    gap: var(--space-xl);
    align-items: flex-start;
}

.example-contact {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.example-avatar {
    width: 48px;
    height: 48px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.example-info strong {
    display: block;
    color: var(--color-dark);
}

.example-info span {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.example-links {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.example-link {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.link-role {
    color: var(--color-gray-600);
}

.link-company {
    font-weight: 500;
    color: var(--color-dark);
}

.example-footer {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
    color: #059669;
}

/* Account Types Grid */
.account-types-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-lg);
}

.account-type-detail-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.account-type-detail-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.account-type-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.account-type-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.account-type-detail-header.prospect .account-type-detail-icon {
    background: rgba(234, 88, 12, 0.1);
    color: #EA580C;
}

.account-type-detail-header.contact .account-type-detail-icon {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.account-type-detail-header.client .account-type-detail-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.account-type-detail-header.distributor .account-type-detail-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.account-type-detail-header.supplier .account-type-detail-icon {
    background: rgba(236, 72, 153, 0.1);
    color: #EC4899;
}

.account-type-detail-header h3 {
    font-size: 1.125rem;
    color: var(--color-dark);
}

.account-type-detail-card > p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-md);
}

.account-type-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.account-type-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    padding: var(--space-xs) 0;
}

.account-type-features li svg {
    color: #10B981;
    flex-shrink: 0;
}

/* Enrichment Fields */
.enrichment-fields {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.enrichment-field {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
}

.enrichment-field-icon {
    width: 40px;
    height: 40px;
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.enrichment-field-content strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-dark);
}

.enrichment-field-content span {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

/* Enrichment Demo */
.enrichment-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.enrichment-demo-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
    color: var(--color-dark);
}

.enrichment-demo-content {
    padding: var(--space-lg);
}

.enrichment-demo-input {
    margin-bottom: var(--space-lg);
}

.enrichment-demo-input label {
    display: block;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    margin-bottom: var(--space-sm);
}

.input-with-button {
    display: flex;
    gap: var(--space-sm);
}

.input-with-button input {
    flex: 1;
    padding: var(--space-md);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.9375rem;
}

.btn-enrichment {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-primary);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-enrichment:hover {
    background: #3589d6;
}

.enrichment-demo-result {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.enrichment-demo-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.enrichment-demo-row .label {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.enrichment-demo-row .value {
    font-size: 0.875rem;
    color: var(--color-gray-400);
}

.enrichment-demo-row .value.filled {
    color: var(--color-dark);
    font-weight: 500;
}

/* Deduplication Demo */
.dedup-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.dedup-demo-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: rgba(245, 158, 11, 0.1);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.dedup-alert-icon {
    color: #F59E0B;
}

.dedup-alert-content strong {
    display: block;
    color: #B45309;
}

.dedup-alert-content p {
    font-size: 0.875rem;
    color: #92400E;
    margin: 0;
}

.dedup-demo-comparison {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.dedup-card {
    flex: 1;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}

.dedup-card.existing {
    border: 2px solid #10B981;
}

.dedup-card.new {
    border: 2px dashed var(--color-gray-300);
}

.dedup-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.dedup-info strong {
    display: block;
    color: var(--color-dark);
}

.dedup-info span {
    display: block;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.dedup-arrow {
    color: var(--color-gray-400);
}

.dedup-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

/* Segmentation Cards */
.segmentation-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--color-gray-100);
}

.segmentation-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.segmentation-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.segmentation-icon.folders {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.segmentation-icon.tags {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.segmentation-header h3 {
    font-size: 1.25rem;
    color: var(--color-dark);
}

.segmentation-card > p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

/* Folder Tree Demo */
.folder-tree-demo {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.folder-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    color: var(--color-gray-700);
    font-size: 0.875rem;
}

.folder-item.child {
    padding-left: var(--space-2xl);
}

.folder-item .count {
    margin-left: auto;
    font-size: 0.75rem;
    color: var(--color-gray-400);
}

.folder-item svg {
    color: #3B82F6;
}

/* Tags Demo */
.tags-demo {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-lg);
}

.tag-group {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.demo-tag {
    padding: 0.375rem 0.75rem;
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    font-weight: 500;
}

.demo-tag.blue { background: rgba(59, 130, 246, 0.1); color: #3B82F6; }
.demo-tag.green { background: rgba(16, 185, 129, 0.1); color: #10B981; }
.demo-tag.orange { background: rgba(245, 158, 11, 0.1); color: #D97706; }
.demo-tag.purple { background: rgba(139, 92, 246, 0.1); color: #8B5CF6; }
.demo-tag.red { background: rgba(239, 68, 68, 0.1); color: #EF4444; }
.demo-tag.teal { background: rgba(20, 184, 166, 0.1); color: #14B8A6; }
.demo-tag.pink { background: rgba(236, 72, 153, 0.1); color: #EC4899; }
.demo-tag.gray { background: var(--color-gray-100); color: var(--color-gray-600); }

.demo-tag.active {
    box-shadow: 0 0 0 2px currentColor;
}

.tag-filter-demo {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-200);
}

.filter-label {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.result-count {
    margin-left: auto;
    font-size: 0.8125rem;
    font-weight: 500;
    color: #10B981;
}

/* Import Section */
.import-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    border: 1px solid var(--color-gray-100);
}

.import-section-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.import-section-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #3589d6 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    flex-shrink: 0;
}

.import-section-text h2 {
    font-size: 1.5rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.import-section-text p {
    color: var(--color-gray-600);
    margin: 0;
}

.import-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-2xl);
}

.import-step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
}

.import-step-number {
    width: 32px;
    height: 32px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.import-step-content h4 {
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 0.125rem;
}

.import-step-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

.import-step-arrow {
    color: var(--color-gray-400);
}

.import-formats {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
}

.import-formats > span {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.format-badges {
    display: flex;
    gap: var(--space-sm);
}

.format-badge {
    padding: 0.375rem 0.75rem;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

/* Setup/MRR Demo */
.setup-mrr-demo {
    display: flex;
    align-items: stretch;
    gap: var(--space-xl);
    margin-top: var(--space-2xl);
}

.setup-mrr-card {
    flex: 1;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 2px solid var(--color-gray-100);
}

.setup-mrr-card.setup {
    border-color: rgba(59, 130, 246, 0.3);
}

.setup-mrr-card.mrr {
    border-color: rgba(16, 185, 129, 0.3);
}

.setup-mrr-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.setup-mrr-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.setup-mrr-card.setup .setup-mrr-icon {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.setup-mrr-card.mrr .setup-mrr-icon {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.setup-mrr-label .label {
    display: block;
    font-weight: 600;
    color: var(--color-dark);
}

.setup-mrr-label .subtitle {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.setup-mrr-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.setup-mrr-value .per-month {
    font-size: 1rem;
    font-weight: 400;
    color: var(--color-gray-500);
}

.setup-mrr-progress {
    margin-bottom: var(--space-lg);
}

.setup-mrr-progress .progress-bar {
    height: 8px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.setup-mrr-progress .progress-bar.green {
    background: rgba(16, 185, 129, 0.1);
}

.setup-mrr-progress .progress-fill {
    height: 100%;
    background: #3B82F6;
    border-radius: var(--radius-full);
}

.setup-mrr-card.mrr .progress-fill {
    background: #10B981;
}

.progress-labels {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.setup-mrr-examples {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
}

.setup-mrr-examples > span {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.setup-mrr-examples ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.setup-mrr-examples li {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    padding: var(--space-xs) 0;
}

.setup-mrr-separator {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    color: var(--color-gray-400);
    font-weight: 600;
}

.separator-line {
    width: 2px;
    height: 40px;
    background: var(--color-gray-200);
}

/* Rare Feature Badge */
.rare-feature-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 0.5rem 1rem;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.1) 0%, rgba(234, 88, 12, 0.1) 100%);
    border: 1px solid rgba(245, 158, 11, 0.2);
    border-radius: var(--radius-full);
    color: #D97706;
    font-size: 0.875rem;
    font-weight: 500;
    margin-bottom: var(--space-md);
}

/* Simulation Benefits */
.simulation-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.simulation-benefit {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-100);
}

.simulation-benefit-icon {
    width: 40px;
    height: 40px;
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.simulation-benefit-content strong {
    display: block;
    color: var(--color-dark);
    margin-bottom: 0.125rem;
}

.simulation-benefit-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Simulation Demo */
.simulation-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.simulation-demo-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.simulation-mode-toggle {
    display: inline-flex;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    padding: 4px;
}

.mode-option {
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    border-radius: var(--radius-sm);
    cursor: pointer;
}

.mode-option.active {
    background: var(--color-white);
    color: var(--color-primary);
    font-weight: 500;
    box-shadow: var(--shadow-sm);
}

.simulation-demo-content {
    padding: var(--space-lg);
}

.simulation-scenario {
    margin-bottom: var(--space-lg);
}

.scenario-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.scenario-changes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.scenario-change {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: rgba(139, 92, 246, 0.05);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.change-deal {
    font-weight: 500;
    color: var(--color-dark);
}

.change-action {
    color: #8B5CF6;
}

.simulation-result {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.result-comparison {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.result-item {
    flex: 1;
    text-align: center;
}

.result-item.highlight {
    background: rgba(16, 185, 129, 0.1);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.result-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.result-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
}

.result-diff {
    display: inline-block;
    margin-top: var(--space-xs);
    padding: 0.125rem 0.5rem;
    background: #10B981;
    color: white;
    font-size: 0.75rem;
    font-weight: 600;
    border-radius: var(--radius-sm);
}

.result-arrow {
    color: var(--color-gray-400);
}

.simulation-demo-actions {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
}

/* Pipeline Views Grid */
.pipeline-views-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.pipeline-view-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--color-gray-100);
}

.pipeline-view-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.pipeline-view-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.pipeline-view-icon.kanban {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.pipeline-view-icon.table {
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
}

.pipeline-view-header h3 {
    font-size: 1.25rem;
    color: var(--color-dark);
}

.pipeline-view-card > p {
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

/* Kanban Demo Mini */
.kanban-demo {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
}

.kanban-column {
    flex: 1;
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

.kanban-column-header {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.kanban-card-mini {
    height: 24px;
    background: var(--color-white);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
    border: 1px solid var(--color-gray-100);
}

.kanban-card-mini.active {
    border-color: #8B5CF6;
    box-shadow: 0 0 0 2px rgba(139, 92, 246, 0.2);
}

/* Table Demo Mini */
.table-demo {
    margin-bottom: var(--space-lg);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.table-header-demo {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gray-50);
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.table-row-demo {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    font-size: 0.8125rem;
    border-top: 1px solid var(--color-gray-100);
}

.stage-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    background: rgba(59, 130, 246, 0.1);
    color: #3B82F6;
    border-radius: var(--radius-sm);
    font-size: 0.7rem;
    font-weight: 500;
}

.stage-badge.demo {
    background: rgba(139, 92, 246, 0.1);
    color: #8B5CF6;
}

.stage-badge.closing {
    background: rgba(16, 185, 129, 0.1);
    color: #10B981;
}

.view-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.view-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-gray-600);
    padding: var(--space-xs) 0;
}

.view-features li svg {
    color: #10B981;
}

/* Stages Demo */
.stages-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.stages-header {
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
    color: var(--color-dark);
}

.stages-list {
    padding: var(--space-md);
}

.stage-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 1px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--color-white);
    cursor: grab;
}

.stage-drag {
    color: var(--color-gray-400);
}

.stage-color {
    width: 16px;
    height: 16px;
    border-radius: var(--radius-sm);
}

.stage-info {
    flex: 1;
}

.stage-name {
    display: block;
    font-weight: 500;
    color: var(--color-dark);
}

.stage-proba {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.btn-add-stage {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    width: 100%;
    padding: var(--space-md);
    background: var(--color-gray-50);
    border: 2px dashed var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.btn-add-stage:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

/* Objectives Demo */
.objectives-demo {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.objective-card {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    border: 1px solid var(--color-gray-100);
}

.objective-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.objective-label {
    font-weight: 600;
    color: var(--color-dark);
}

.objective-period {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.objective-gauge {
    margin-bottom: var(--space-md);
}

.gauge-container {
    height: 24px;
    background: rgba(59, 130, 246, 0.1);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.gauge-container.green {
    background: rgba(16, 185, 129, 0.1);
}

.gauge-container.purple {
    background: rgba(139, 92, 246, 0.1);
}

.gauge-fill {
    height: 100%;
    background: linear-gradient(90deg, #3B82F6 0%, #60A5FA 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding-right: var(--space-sm);
}

.gauge-container.green .gauge-fill {
    background: linear-gradient(90deg, #10B981 0%, #34D399 100%);
}

.gauge-container.purple .gauge-fill {
    background: linear-gradient(90deg, #8B5CF6 0%, #A78BFA 100%);
}

.gauge-value {
    font-size: 0.75rem;
    font-weight: 600;
    color: white;
}

.gauge-legend {
    display: flex;
    justify-content: space-between;
    font-size: 0.8125rem;
}

.gauge-legend .realise {
    color: var(--color-dark);
}

.gauge-legend .objectif {
    color: var(--color-gray-500);
}

.objective-remaining {
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-100);
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
}

.objective-remaining span {
    color: var(--color-gray-500);
}

.objective-remaining strong {
    color: var(--color-primary);
}

/* Filters Demo Grid */
.filters-demo-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.filter-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-100);
}

.filter-icon {
    width: 44px;
    height: 44px;
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.filter-content strong {
    display: block;
    color: var(--color-dark);
}

.filter-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Responsive CRM Subpages */
@media (max-width: 1200px) {
    .account-types-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .objectives-demo {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 1024px) {
    .feature-highlight-content {
        flex-direction: column;
    }

    .account-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .setup-mrr-demo {
        flex-direction: column;
    }

    .setup-mrr-separator {
        flex-direction: row;
    }

    .separator-line {
        width: 40px;
        height: 2px;
    }

    .pipeline-views-grid {
        grid-template-columns: 1fr;
    }

    .objectives-demo {
        grid-template-columns: 1fr;
    }

    .filters-demo-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 768px) {
    .example-content {
        flex-direction: column;
    }

    .account-types-grid {
        grid-template-columns: 1fr;
    }

    .import-steps {
        flex-direction: column;
    }

    .import-step-arrow {
        transform: rotate(90deg);
    }

    .filters-demo-grid {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   CRM OPPORTUNITES PAGE STYLES
   ============================================ */

/* Opportunity Demo Card */
.opportunity-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.opportunity-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    padding: var(--space-xl);
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--color-gray-300);
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.opportunity-demo-title {
    flex: 1;
    min-width: 250px;
}

.opportunity-status {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-sm);
}

.opportunity-status.open {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.opportunity-status.won {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.opportunity-status.lost {
    background: rgba(224, 81, 110, 0.15);
    color: var(--color-accent-pink);
}

.opportunity-demo-title h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.opportunity-client {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.opportunity-demo-amount {
    text-align: right;
    min-width: 180px;
}

.amount-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.amount-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.amount-split {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.split-item {
    font-size: 0.75rem;
    font-weight: 500;
}

.split-item.setup {
    color: var(--color-primary);
}

.split-item.mrr {
    color: var(--color-accent-green);
}

.opportunity-demo-content {
    padding: var(--space-xl);
}

.opportunity-info-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.opportunity-info-item {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.opportunity-info-item .info-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.opportunity-info-item .info-value {
    font-size: 0.9375rem;
    font-weight: 500;
    color: var(--color-dark);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.stage-indicator {
    width: 10px;
    height: 10px;
    border-radius: 50%;
}

.stage-indicator.demo {
    background: var(--color-accent-yellow);
}

.stage-indicator.nego {
    background: var(--color-primary);
}

.stage-indicator.closing {
    background: var(--color-accent-green);
}

/* Actions Types Grid */
.actions-types-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.action-type-detail {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.action-type-detail:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.action-type-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.action-type-icon {
    width: 52px;
    height: 52px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.action-type-header.note .action-type-icon {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.action-type-header.task .action-type-icon {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.action-type-header.rdv .action-type-icon {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.action-type-header.opportunity .action-type-icon {
    background: rgba(247, 200, 68, 0.15);
    color: var(--color-accent-yellow);
}

.action-type-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
}

.action-type-detail > p {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-lg);
    line-height: 1.6;
}

.action-examples {
    background: var(--bg-light);
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.example-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.action-examples ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.action-examples ul li {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    padding: var(--space-xs) 0;
}

.action-subtypes {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.subtype {
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--bg-light);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
    color: var(--color-gray-700);
}

.action-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.action-feature {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.action-feature svg {
    color: var(--color-accent-green);
    flex-shrink: 0;
}

/* Quote Demo */
.quote-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.quote-feature {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.quote-feature-icon {
    width: 44px;
    height: 44px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
    flex-shrink: 0;
}

.quote-feature-icon.recurring {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.quote-feature-icon.mixed {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.quote-feature-content strong {
    display: block;
    font-size: 1rem;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.quote-feature-content p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

.quote-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.quote-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--color-dark);
    color: var(--color-white);
}

.quote-number {
    font-weight: 600;
    font-size: 0.9375rem;
}

.quote-status {
    font-size: 0.75rem;
    background: rgba(247, 200, 68, 0.2);
    color: var(--color-accent-yellow);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-full);
}

.quote-demo-content {
    padding: var(--space-lg);
}

.quote-section {
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-lg);
    border-bottom: 1px dashed var(--color-gray-300);
}

.quote-section:last-child {
    margin-bottom: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.quote-section-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
}

.quote-section.recurring .quote-section-title {
    color: var(--color-accent-green);
}

.quote-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
}

.line-name {
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.line-amount {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
}

.quote-subtotal {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-top: var(--space-md);
    margin-top: var(--space-sm);
    border-top: 1px solid var(--color-gray-300);
    font-weight: 600;
    font-size: 0.9375rem;
    color: var(--color-dark);
}

.quote-demo-footer {
    padding: var(--space-lg);
    background: var(--bg-light);
}

.quote-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-size: 1.125rem;
    font-weight: 700;
    color: var(--color-dark);
}

/* Workflow Demo */
.workflow-demo {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-2xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow-x: auto;
}

.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    min-width: 100px;
}

.workflow-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-sm);
}

.workflow-step-icon.brouillon {
    background: rgba(107, 114, 128, 0.15);
    color: var(--color-gray-500);
}

.workflow-step-icon.attente {
    background: rgba(247, 200, 68, 0.15);
    color: var(--color-accent-yellow);
}

.workflow-step-icon.valide {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.workflow-step-icon.envoye {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.workflow-step-icon.signe {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.workflow-step-content h4 {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.workflow-step-content p {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
}

.workflow-arrow {
    color: var(--color-gray-300);
    flex-shrink: 0;
}

.workflow-step.final .workflow-step-icon {
    width: 64px;
    height: 64px;
}

/* Signature Demo */
.signature-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.signature-demo-header {
    padding: var(--space-lg);
    background: linear-gradient(135deg, var(--color-primary) 0%, #6366F1 100%);
    color: var(--color-white);
    font-weight: 600;
}

.signature-demo-content {
    padding: var(--space-lg);
}

.signature-step {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    transition: all var(--transition-fast);
}

.signature-step:last-child {
    margin-bottom: 0;
}

.signature-step.active {
    background: rgba(65, 157, 240, 0.1);
}

.signature-step-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.signature-step.active .signature-step-number {
    background: var(--color-primary);
    color: var(--color-white);
}

.signature-step-info {
    flex: 1;
}

.signature-step-info strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.signature-step-info p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

.signature-step-status {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.signature-step-status.done {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.signature-step-status.pending {
    background: rgba(247, 200, 68, 0.15);
    color: var(--color-accent-yellow);
}

.signature-note {
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    margin-top: var(--space-xl);
    padding: var(--space-md);
    background: rgba(65, 157, 240, 0.08);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-gray-700);
}

.signature-note svg {
    flex-shrink: 0;
    color: var(--color-primary);
}

/* Reminders Grid */
.reminders-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.reminder-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.reminder-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.reminder-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
}

.reminder-icon.app {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.reminder-icon.email {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.reminder-icon.sms {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.reminder-card h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.reminder-card p {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin: 0;
}

.reminder-timing {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
}

.reminder-timing h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-lg);
}

.timing-options {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: var(--space-sm);
}

.timing-option {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-700);
    background: var(--bg-light);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-full);
    transition: all var(--transition-fast);
}

.timing-option:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ============================================
   CRM HISTORIQUE PAGE STYLES
   ============================================ */

/* Client Card Demo */
.client-card-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.client-card-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: linear-gradient(135deg, #f8f9fc 0%, #ffffff 100%);
    border-bottom: 1px solid var(--color-gray-300);
    flex-wrap: wrap;
}

.client-avatar {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.client-info {
    flex: 1;
    min-width: 200px;
}

.client-badge {
    display: inline-block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-primary);
    background: rgba(65, 157, 240, 0.15);
    padding: 2px 8px;
    border-radius: var(--radius-full);
    margin-bottom: var(--space-xs);
}

.client-info h3 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.client-details {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.client-phone {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.9375rem;
    color: var(--color-dark);
    font-weight: 500;
}

.client-phone svg {
    color: var(--color-accent-green);
}

.client-confidence {
    min-width: 180px;
}

.confidence-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.confidence-gauge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.confidence-bar-full {
    flex: 1;
    height: 8px;
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.confidence-fill-animated {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-pink) 0%, var(--color-accent-yellow) 50%, var(--color-accent-green) 100%);
    border-radius: var(--radius-full);
    transition: width 1s ease;
}

.confidence-score {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-dark);
    min-width: 50px;
}

.client-tabs {
    display: flex;
    overflow-x: auto;
    background: var(--bg-light);
    padding: 0 var(--space-md);
}

.client-tab {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md) var(--space-lg);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-500);
    background: none;
    border: none;
    cursor: pointer;
    white-space: nowrap;
    border-bottom: 2px solid transparent;
    transition: all var(--transition-fast);
}

.client-tab:hover {
    color: var(--color-dark);
}

.client-tab.active {
    color: var(--color-primary);
    border-bottom-color: var(--color-primary);
    background: var(--color-white);
}

.client-tab svg {
    flex-shrink: 0;
}

/* Tabs Detail Grid */
.tabs-detail-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.tab-detail-card {
    background: var(--color-white);
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.tab-detail-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-xl);
}

.tab-detail-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.tab-detail-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.tab-detail-icon.timeline {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.tab-detail-icon.factures {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.tab-detail-icon.devis {
    background: rgba(247, 200, 68, 0.15);
    color: var(--color-accent-yellow);
}

.tab-detail-icon.contacts {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.tab-detail-icon.messages {
    background: rgba(224, 81, 110, 0.15);
    color: var(--color-accent-pink);
}

.tab-detail-icon.fichiers {
    background: rgba(0, 172, 193, 0.15);
    color: #00ACC1;
}

.tab-detail-header h3 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
}

.tab-detail-card > p {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    line-height: 1.6;
}

.tab-detail-features {
    list-style: none;
    margin: 0;
    padding: 0;
}

.tab-detail-features li {
    font-size: 0.8125rem;
    color: var(--color-gray-700);
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    position: relative;
}

.tab-detail-features li::before {
    content: '';
    position: absolute;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: var(--color-primary);
}

/* Timeline Demo */
.timeline-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.timeline-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-300);
}

.timeline-filters {
    display: flex;
    gap: var(--space-sm);
}

.timeline-filter {
    font-size: 0.8125rem;
    font-weight: 500;
    padding: var(--space-xs) var(--space-md);
    border-radius: var(--radius-full);
    background: none;
    border: 1px solid var(--color-gray-300);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.timeline-filter.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: var(--color-white);
}

.timeline-date-range {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.timeline-content {
    padding: var(--space-lg);
}

.timeline-section {
    margin-bottom: var(--space-md);
}

.timeline-section-date {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-light);
    transition: all var(--transition-fast);
}

.timeline-item:hover {
    background: rgba(65, 157, 240, 0.05);
}

.timeline-item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.timeline-item-icon.picking {
    background: rgba(247, 200, 68, 0.15);
    color: var(--color-accent-yellow);
}

.timeline-item-icon.picking.done {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.timeline-item-icon.rdv {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.timeline-item-icon.rdv.done {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.timeline-item-content {
    flex: 1;
}

.timeline-item-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xs);
    flex-wrap: wrap;
}

.timeline-item-header .action-type {
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.timeline-item-header .action-badge {
    font-size: 0.6875rem;
    font-weight: 500;
    padding: 2px 6px;
    border-radius: var(--radius-full);
}

.timeline-item-header .action-badge.done {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.timeline-item-date {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-left: auto;
}

.timeline-item-content h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.timeline-item-description {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

.timeline-item-meta {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-xs);
}

.timeline-item-meta .assignee {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.timeline-item-meta .attachment {
    display: flex;
    align-items: center;
    gap: 4px;
    font-size: 0.75rem;
    color: var(--color-primary);
}

.timeline-item-action {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-primary);
    background: rgba(65, 157, 240, 0.1);
    border: none;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.timeline-item-action:hover {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Checklists Demo */
.checklists-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.checklist-card {
    padding: var(--space-xl);
}

.checklist-header {
    margin-bottom: var(--space-lg);
}

.checklist-header h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.checklist-date {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.checklist-progress {
    margin-bottom: var(--space-lg);
}

.checklist-progress-bar {
    height: 8px;
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.checklist-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-primary) 0%, var(--color-accent-green) 100%);
    border-radius: var(--radius-full);
    transition: width 0.5s ease;
}

.checklist-progress-text {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.checklist-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.checklist-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    border-radius: var(--radius-md);
    background: var(--bg-light);
}

.checklist-item.done {
    background: rgba(114, 201, 143, 0.1);
}

.checklist-item.done svg {
    color: var(--color-accent-green);
}

.checklist-item.done span {
    color: var(--color-gray-500);
    text-decoration: line-through;
}

.checklist-item span {
    font-size: 0.875rem;
    color: var(--color-dark);
}

.checklist-checkbox {
    width: 18px;
    height: 18px;
    border: 2px solid var(--color-gray-300);
    border-radius: 4px;
    flex-shrink: 0;
}

/* Checklist Features */
.checklist-features {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.checklist-feature {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.checklist-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
    flex-shrink: 0;
}

.checklist-feature-content strong {
    display: block;
    font-size: 0.9375rem;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.checklist-feature-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Confidence Demo Section */
.confidence-demo-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
}

.confidence-scale {
    margin-bottom: var(--space-2xl);
}

.confidence-scale-bar {
    display: flex;
    height: 40px;
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.scale-zone {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--color-white);
}

.scale-zone.danger {
    background: var(--color-accent-pink);
}

.scale-zone.warning {
    background: var(--color-accent-yellow);
    color: var(--color-dark);
}

.scale-zone.success {
    background: var(--color-accent-green);
}

.confidence-scale-labels {
    display: flex;
}

.scale-label {
    flex: 1;
    font-size: 0.8125rem;
    font-weight: 500;
}

.scale-label.danger {
    color: var(--color-accent-pink);
}

.scale-label.warning {
    color: var(--color-accent-yellow);
    text-align: center;
}

.scale-label.success {
    color: var(--color-accent-green);
    text-align: right;
}

.confidence-factors h4 {
    font-size: 1.125rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-lg);
}

.factors-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.factor-card {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.factor-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.factor-icon.positive {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.factor-icon.negative {
    background: rgba(224, 81, 110, 0.15);
    color: var(--color-accent-pink);
}

.factor-content {
    flex: 1;
}

.factor-content strong {
    display: block;
    font-size: 0.875rem;
    color: var(--color-dark);
}

.factor-content p {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
}

.factor-impact {
    font-size: 0.875rem;
    font-weight: 600;
}

.factor-impact.positive {
    color: var(--color-accent-green);
}

.factor-impact.negative {
    color: var(--color-accent-pink);
}

/* AI Resume Section */
.ai-resume-section {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-md);
}

.ai-resume-header {
    text-align: center;
    max-width: 600px;
    margin: 0 auto var(--space-2xl);
}

.ai-resume-header h2 {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin: var(--space-md) 0 var(--space-sm);
}

.ai-resume-header p {
    font-size: 1rem;
    color: var(--color-gray-500);
    margin: 0;
    line-height: 1.6;
}

.ai-resume-demo {
    display: grid;
    grid-template-columns: auto 1fr;
    gap: var(--space-2xl);
    align-items: start;
}

.ai-resume-trigger {
    position: sticky;
    top: var(--space-xl);
}

.ai-resume-trigger .btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ai-resume-result {
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.05) 0%, rgba(139, 92, 246, 0.05) 100%);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    border: 1px solid rgba(65, 157, 240, 0.2);
}

.resume-section {
    margin-bottom: var(--space-lg);
}

.resume-section:last-child {
    margin-bottom: 0;
}

.resume-section h4 {
    font-size: 0.9375rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.resume-section ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.resume-section ul li {
    font-size: 0.875rem;
    color: var(--color-gray-700);
    padding: var(--space-xs) 0;
    padding-left: var(--space-lg);
    position: relative;
}

.resume-section ul li::before {
    content: '•';
    position: absolute;
    left: 0;
    color: var(--color-primary);
    font-weight: bold;
}

/* Responsive CRM Opportunites & Historique */
@media (max-width: 1200px) {
    .actions-types-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .tabs-detail-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .factors-grid {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .opportunity-demo-header {
        flex-direction: column;
        align-items: stretch;
    }

    .opportunity-demo-amount {
        text-align: left;
    }

    .opportunity-info-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-demo {
        flex-direction: column;
        padding: var(--space-xl);
    }

    .workflow-arrow {
        transform: rotate(90deg);
    }

    .reminders-grid {
        grid-template-columns: 1fr;
    }

    .client-card-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .client-confidence {
        width: 100%;
    }

    .ai-resume-demo {
        grid-template-columns: 1fr;
    }

    .ai-resume-trigger {
        position: static;
        text-align: center;
    }
}

@media (max-width: 768px) {
    .actions-types-grid {
        grid-template-columns: 1fr;
    }

    .opportunity-info-grid {
        grid-template-columns: 1fr;
    }

    .tabs-detail-grid {
        grid-template-columns: 1fr;
    }

    .checklist-features {
        grid-template-columns: 1fr;
    }

    .factors-grid {
        grid-template-columns: 1fr;
    }

    .confidence-scale-bar {
        flex-direction: column;
        height: auto;
    }

    .scale-zone {
        padding: var(--space-sm);
    }

    .confidence-scale-labels {
        flex-direction: column;
        gap: var(--space-xs);
    }

    .scale-label {
        text-align: left !important;
    }
}

/* ============================================
   ERP MODULE PAGES - STYLES
   ============================================ */

/* ----- ERP Main Page - Comparison Hero ----- */
.erp-comparison-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-xl);
    align-items: stretch;
    margin-bottom: var(--space-2xl);
}

.comparison-column {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.comparison-column.standard {
    border: 2px solid var(--color-gray-300);
}

.comparison-column.xcelere {
    border: 2px solid var(--color-primary);
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.03) 0%, rgba(114, 201, 143, 0.03) 100%);
}

.comparison-column h3 {
    font-size: 1.25rem;
    font-weight: 600;
    margin-bottom: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.comparison-column.standard h3 {
    color: var(--color-gray-500);
}

.comparison-column.xcelere h3 {
    color: var(--color-primary);
}

.comparison-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.comparison-column ul li {
    padding: var(--space-sm) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--space-sm);
    font-size: 0.95rem;
    color: var(--color-gray-700);
    border-bottom: 1px solid var(--color-gray-100);
}

.comparison-column ul li:last-child {
    border-bottom: none;
}

.comparison-column.standard ul li::before {
    content: "✗";
    color: var(--color-accent-pink);
    font-weight: 600;
    flex-shrink: 0;
}

.comparison-column.xcelere ul li::before {
    content: "✓";
    color: var(--color-accent-green);
    font-weight: 600;
    flex-shrink: 0;
}

.comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-vs span {
    background: var(--color-secondary);
    color: var(--color-white);
    width: 50px;
    height: 50px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.9rem;
}

/* ----- Xcelere Advantages Grid ----- */
.xcelere-advantages {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-top: var(--space-2xl);
}

.advantage-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

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

.advantage-card .icon {
    width: 60px;
    height: 60px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin: 0 auto var(--space-md);
}

.advantage-card .icon.blue {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.advantage-card .icon.green {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.advantage-card .icon.yellow {
    background: rgba(247, 200, 68, 0.1);
    color: var(--color-accent-yellow);
}

.advantage-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.advantage-card p {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* ----- ERP Modules Grid ----- */
.erp-modules-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.erp-module-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
    display: flex;
    flex-direction: column;
    text-decoration: none;
    color: inherit;
}

.erp-module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.erp-module-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.5rem;
    margin-bottom: var(--space-md);
}

.erp-module-icon.finance {
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.15) 0%, rgba(65, 157, 240, 0.05) 100%);
    color: var(--color-primary);
}

.erp-module-icon.contrats {
    background: linear-gradient(135deg, rgba(114, 201, 143, 0.15) 0%, rgba(114, 201, 143, 0.05) 100%);
    color: var(--color-accent-green);
}

.erp-module-icon.achats {
    background: linear-gradient(135deg, rgba(247, 200, 68, 0.15) 0%, rgba(247, 200, 68, 0.05) 100%);
    color: var(--color-accent-yellow);
}

.erp-module-icon.operations {
    background: linear-gradient(135deg, rgba(224, 81, 110, 0.15) 0%, rgba(224, 81, 110, 0.05) 100%);
    color: var(--color-accent-pink);
}

.erp-module-icon.catalogue {
    background: linear-gradient(135deg, rgba(156, 39, 176, 0.15) 0%, rgba(156, 39, 176, 0.05) 100%);
    color: #9c27b0;
}

.erp-module-icon.admin {
    background: linear-gradient(135deg, rgba(30, 30, 45, 0.15) 0%, rgba(30, 30, 45, 0.05) 100%);
    color: var(--color-secondary);
}

.erp-module-card h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.erp-module-card p {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    flex-grow: 1;
}

.erp-module-card .features-list {
    list-style: none;
    padding: 0;
    margin: 0;
    border-top: 1px solid var(--color-gray-100);
    padding-top: var(--space-md);
}

.erp-module-card .features-list li {
    font-size: 0.85rem;
    color: var(--color-gray-600);
    padding: var(--space-xs) 0;
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.erp-module-card .features-list li::before {
    content: "→";
    color: var(--color-primary);
    font-weight: 600;
}

/* ----- Subscription Demo Section ----- */
.subscription-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    border: 1px solid var(--color-gray-100);
}

.sub-demo-section {
    margin-bottom: var(--space-xl);
}

.sub-demo-section:last-child {
    margin-bottom: 0;
}

.sub-demo-section h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.sub-demo-section h4 .badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.quote-lines {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    overflow: hidden;
}

.quote-line {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
    align-items: center;
}

.quote-line:last-child {
    border-bottom: none;
}

.quote-line.header {
    background: var(--color-secondary);
    color: white;
    font-weight: 600;
    font-size: 0.85rem;
}

.quote-line .type-badge {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
    display: inline-block;
    width: fit-content;
}

.quote-line .type-badge.setup {
    background: rgba(247, 200, 68, 0.2);
    color: #b8860b;
}

.quote-line .type-badge.mrr {
    background: rgba(65, 157, 240, 0.2);
    color: var(--color-primary);
}

.quote-line .type-badge.conso {
    background: rgba(114, 201, 143, 0.2);
    color: #2e8b57;
}

.quote-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    margin-top: var(--space-md);
}

.quote-total .label {
    font-weight: 500;
}

.quote-total .values {
    display: flex;
    gap: var(--space-xl);
}

.quote-total .value-item {
    text-align: right;
}

.quote-total .value-item span {
    display: block;
    font-size: 0.75rem;
    opacity: 0.8;
}

.quote-total .value-item strong {
    font-size: 1.25rem;
}

/* ----- Sectors Grid ----- */
.sectors-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.sector-card {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.sector-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.sector-card .icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    margin: 0 auto var(--space-md);
    background: var(--bg-light);
}

.sector-card h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.sector-card p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* ----- SSOT Diagram ----- */
.ssot-diagram {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.ssot-center {
    text-align: center;
    margin-bottom: var(--space-2xl);
}

.ssot-center .central-node {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    color: white;
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-xl);
    font-size: 1.25rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
}

.ssot-center .central-node .icon {
    font-size: 2rem;
}

.ssot-nodes {
    display: grid;
    grid-template-columns: repeat(6, 1fr);
    gap: var(--space-md);
}

.ssot-node {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    border: 2px solid transparent;
    transition: all var(--transition-base);
}

.ssot-node:hover {
    border-color: var(--color-primary);
    background: white;
}

.ssot-node .icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.ssot-node span {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-dark);
}

/* ----- Revenue Assurance Demo ----- */
.revenue-assurance-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.ra-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.ra-month {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ra-month h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ra-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ra-item {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: white;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    font-size: 0.9rem;
}

.ra-item .label {
    color: var(--color-gray-600);
}

.ra-item .value {
    font-weight: 600;
    color: var(--color-dark);
}

.ra-detection {
    background: linear-gradient(135deg, rgba(224, 81, 110, 0.1) 0%, rgba(247, 200, 68, 0.1) 100%);
    border: 2px solid var(--color-accent-pink);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ra-detection h4 {
    color: var(--color-accent-pink);
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ra-alert {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.ra-alert:last-child {
    margin-bottom: 0;
}

.ra-alert .alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.ra-alert .alert-type {
    font-weight: 600;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.ra-alert .alert-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.ra-alert .alert-badge.critical {
    background: var(--color-accent-pink);
    color: white;
}

.ra-alert .alert-badge.warning {
    background: var(--color-accent-yellow);
    color: #333;
}

.ra-alert .alert-detail {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.ra-alert .alert-impact {
    font-size: 0.85rem;
    color: var(--color-accent-pink);
    font-weight: 600;
    margin-top: var(--space-xs);
}

/* ----- Workflow 8 Steps ----- */
.workflow-8-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.workflow-step {
    background: var(--color-white);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    box-shadow: var(--shadow-md);
    border: 1px solid var(--color-gray-100);
    position: relative;
    transition: all var(--transition-base);
}

.workflow-step:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
    border-color: var(--color-primary);
}

.workflow-step .step-number {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-step .icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.workflow-step h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.workflow-step p {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin: 0;
}

.workflow-step .auto-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--color-accent-green);
    color: white;
    border-radius: var(--radius-full);
    margin-top: var(--space-sm);
}

/* ----- Dunning Demo ----- */
.dunning-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.dunning-timeline {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-md);
}

.dunning-stage {
    flex: 0 0 200px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    position: relative;
}

.dunning-stage::after {
    content: "→";
    position: absolute;
    right: -18px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    font-size: 1.25rem;
}

.dunning-stage:last-child::after {
    display: none;
}

.dunning-stage .day {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.dunning-stage .icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.dunning-stage h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.dunning-stage p {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin: 0;
}

.dunning-stage.warning {
    background: rgba(247, 200, 68, 0.15);
    border: 1px solid var(--color-accent-yellow);
}

.dunning-stage.critical {
    background: rgba(224, 81, 110, 0.15);
    border: 1px solid var(--color-accent-pink);
}

/* ----- Penalty Calculator Demo ----- */
.penalty-calculator-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.penalty-inputs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
}

.penalty-input {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.penalty-input label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.penalty-input .value {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
}

.penalty-result {
    background: linear-gradient(135deg, var(--color-accent-pink) 0%, #c44569 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.penalty-result .result-label {
    font-size: 1rem;
    font-weight: 500;
}

.penalty-result .result-amount {
    font-size: 2rem;
    font-weight: 700;
}

.penalty-formula {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--color-gray-600);
    text-align: center;
}

/* ----- Churn Dashboard Demo ----- */
.churn-dashboard-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.churn-metrics {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.churn-metric {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.churn-metric .value {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.churn-metric .label {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.churn-metric.danger .value {
    color: var(--color-accent-pink);
}

.churn-metric.warning .value {
    color: var(--color-accent-yellow);
}

.churn-metric.success .value {
    color: var(--color-accent-green);
}

.churn-risks {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.churn-risks h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
}

.risk-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.risk-item:last-child {
    border-bottom: none;
}

.risk-item .risk-indicator {
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
}

.risk-item .risk-indicator.high {
    background: var(--color-accent-pink);
}

.risk-item .risk-indicator.medium {
    background: var(--color-accent-yellow);
}

.risk-item .risk-indicator.low {
    background: var(--color-accent-green);
}

.risk-item .risk-client {
    flex-grow: 1;
    font-weight: 500;
    color: var(--color-dark);
}

.risk-item .risk-reason {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.risk-item .risk-action {
    font-size: 0.8rem;
    padding: 4px 10px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    cursor: pointer;
    border: none;
    transition: all var(--transition-fast);
}

.risk-item .risk-action:hover {
    background: #2d7ed4;
}

/* ----- Stock Status Demo ----- */
.stock-status-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.stock-tabs {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-gray-100);
    padding-bottom: var(--space-sm);
}

.stock-tab {
    padding: var(--space-sm) var(--space-lg);
    background: none;
    border: none;
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.stock-tab:hover {
    background: var(--bg-light);
    color: var(--color-dark);
}

.stock-tab.active {
    background: var(--color-primary);
    color: white;
}

.stock-items {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.stock-item {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.stock-item .item-icon {
    width: 48px;
    height: 48px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.stock-item .item-info {
    flex-grow: 1;
}

.stock-item .item-name {
    font-weight: 600;
    color: var(--color-dark);
    font-size: 0.9rem;
    margin-bottom: var(--space-xs);
}

.stock-item .item-ref {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.stock-item .item-status {
    text-align: right;
}

.stock-item .status-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
    display: block;
    margin-bottom: var(--space-xs);
}

.stock-item .status-badge.disponible {
    background: rgba(114, 201, 143, 0.2);
    color: #2e8b57;
}

.stock-item .status-badge.location {
    background: rgba(65, 157, 240, 0.2);
    color: var(--color-primary);
}

.stock-item .status-badge.vendu {
    background: rgba(224, 81, 110, 0.2);
    color: var(--color-accent-pink);
}

.stock-item .item-qty {
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

/* ----- Leasing Calculator Demo ----- */
.leasing-calculator-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.leasing-config {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.leasing-product {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.leasing-product .product-image {
    width: 80px;
    height: 80px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.leasing-product .product-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.leasing-product .product-info p {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin: 0;
}

.leasing-options {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.leasing-option {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.leasing-option label {
    display: block;
    font-size: 0.8rem;
    font-weight: 500;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.leasing-option select,
.leasing-option input {
    width: 100%;
    padding: var(--space-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.9rem;
    background: white;
}

.leasing-result {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    text-align: center;
}

.leasing-result-item span {
    display: block;
    font-size: 0.8rem;
    opacity: 0.8;
    margin-bottom: var(--space-xs);
}

.leasing-result-item strong {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ----- AP Automation Demo ----- */
.ap-automation-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.ap-dropzone {
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    margin-bottom: var(--space-xl);
    transition: all var(--transition-base);
    cursor: pointer;
}

.ap-dropzone:hover {
    border-color: var(--color-primary);
    background: rgba(65, 157, 240, 0.05);
}

.ap-dropzone .icon {
    font-size: 3rem;
    color: var(--color-gray-400);
    margin-bottom: var(--space-md);
}

.ap-dropzone p {
    color: var(--color-gray-500);
    margin: 0;
}

.ap-dropzone .formats {
    font-size: 0.85rem;
    color: var(--color-gray-400);
    margin-top: var(--space-sm);
}

.ap-extraction {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ap-extraction h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ap-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.ap-field {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.ap-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.ap-field .value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
}

.ap-field .confidence {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 6px;
    background: var(--color-accent-green);
    color: white;
    border-radius: var(--radius-full);
    margin-left: var(--space-xs);
}

/* ----- AI Support Demo ----- */
.ai-support-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.ai-before-after {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
}

.ai-scenario {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ai-scenario h4 {
    font-size: 1rem;
    font-weight: 600;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ai-scenario.before h4 {
    color: var(--color-gray-500);
}

.ai-scenario.after h4 {
    color: var(--color-accent-green);
}

.ai-message {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.ai-message:last-child {
    margin-bottom: 0;
}

.ai-message .sender {
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.ai-message .sender.client {
    color: var(--color-gray-500);
}

.ai-message .sender.agent {
    color: var(--color-primary);
}

.ai-message .sender.ai {
    color: var(--color-accent-green);
}

.ai-message .content {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.ai-message .time {
    font-size: 0.7rem;
    color: var(--color-gray-400);
    margin-top: var(--space-xs);
}

.ai-suggestion {
    background: rgba(114, 201, 143, 0.1);
    border: 1px solid var(--color-accent-green);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-top: var(--space-md);
}

.ai-suggestion .label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-accent-green);
    margin-bottom: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.ai-suggestion .suggestion-text {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

/* ----- Devis Terrain Flow ----- */
.devis-terrain-flow {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.flow-steps {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-md);
}

.flow-step {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    position: relative;
}

.flow-step::after {
    content: "→";
    position: absolute;
    right: -20px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-primary);
    font-size: 1.5rem;
    font-weight: 600;
}

.flow-step:last-child::after {
    display: none;
}

.flow-step .icon {
    font-size: 2rem;
    margin-bottom: var(--space-sm);
}

.flow-step h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.flow-step p {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin: 0;
}

.flow-step .sync-badge {
    display: inline-block;
    font-size: 0.65rem;
    padding: 2px 8px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    margin-top: var(--space-sm);
}

/* ----- Traceability Demo ----- */
.traceability-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.trace-header {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.trace-header .equipment-icon {
    width: 64px;
    height: 64px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 2rem;
}

.trace-header .equipment-info h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.trace-header .equipment-info p {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin: 0;
}

.trace-timeline {
    position: relative;
    padding-left: var(--space-xl);
}

.trace-timeline::before {
    content: "";
    position: absolute;
    left: 8px;
    top: 0;
    bottom: 0;
    width: 2px;
    background: var(--color-gray-200);
}

.trace-event {
    position: relative;
    padding-bottom: var(--space-lg);
    padding-left: var(--space-lg);
}

.trace-event:last-child {
    padding-bottom: 0;
}

.trace-event::before {
    content: "";
    position: absolute;
    left: -22px;
    top: 4px;
    width: 12px;
    height: 12px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    border: 2px solid white;
    box-shadow: 0 0 0 2px var(--color-primary);
}

.trace-event .event-date {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.trace-event .event-title {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.trace-event .event-detail {
    font-size: 0.85rem;
    color: var(--color-gray-600);
}

.trace-event .event-location {
    font-size: 0.8rem;
    color: var(--color-gray-400);
    margin-top: var(--space-xs);
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

/* ----- Catalog Demo ----- */
.catalog-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.catalog-product {
    display: grid;
    grid-template-columns: 200px 1fr;
    gap: var(--space-xl);
}

.catalog-product-image {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 4rem;
}

.catalog-product-details h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.catalog-product-details .product-ref {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.catalog-fields {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.catalog-field {
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.catalog-field label {
    display: block;
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.catalog-field .value {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
}

.catalog-field .value.highlight {
    color: var(--color-primary);
}

.catalog-field.telecom {
    border-left: 3px solid var(--color-primary);
}

/* ----- Rating Demo ----- */
.rating-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.rating-cdr {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-xl);
    font-family: monospace;
    font-size: 0.85rem;
    overflow-x: auto;
}

.rating-cdr .cdr-header {
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.rating-cdr .cdr-line {
    color: var(--color-dark);
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
}

.rating-cdr .cdr-field {
    display: flex;
    gap: var(--space-xs);
}

.rating-cdr .cdr-field .label {
    color: var(--color-primary);
}

.rating-calculation {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.rating-step {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.rating-step .step-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.rating-step .step-label {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.rating-step .step-value {
    font-size: 1.1rem;
    font-weight: 700;
    color: var(--color-dark);
}

.rating-step.margin .step-value {
    color: var(--color-accent-green);
}

.rating-result {
    background: linear-gradient(135deg, var(--color-accent-green) 0%, #4caf7a 100%);
    color: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.rating-result .result-label {
    font-weight: 500;
}

.rating-result .result-value {
    font-size: 1.5rem;
    font-weight: 700;
}

/* ----- Bundle Example ----- */
.bundle-example {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.bundle-main {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 2px solid var(--color-gray-100);
}

.bundle-main .bundle-icon {
    width: 64px;
    height: 64px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.75rem;
    color: white;
}

.bundle-main .bundle-info h4 {
    font-size: 1.25rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.bundle-main .bundle-info p {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin: 0;
}

.bundle-components {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.bundle-section h5 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.bundle-section h5 .badge {
    font-size: 0.65rem;
    padding: 2px 6px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.bundle-section h5 .badge.required {
    background: var(--color-accent-pink);
    color: white;
}

.bundle-section h5 .badge.recommended {
    background: var(--color-accent-yellow);
    color: #333;
}

.bundle-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.bundle-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.bundle-item .item-icon {
    font-size: 1.25rem;
}

.bundle-item .item-name {
    flex-grow: 1;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.bundle-item .item-price {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-primary);
}

/* ----- RBAC Demo ----- */
.rbac-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.rbac-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xl);
}

.rbac-header h4 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
}

.rbac-count {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.rbac-count strong {
    color: var(--color-primary);
}

.rbac-modules {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.rbac-module {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.rbac-module h5 {
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.rbac-permissions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rbac-permission {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-sm) var(--space-md);
}

.rbac-permission .perm-name {
    font-size: 0.85rem;
    color: var(--color-gray-700);
}

.rbac-permission .perm-toggle {
    width: 36px;
    height: 20px;
    background: var(--color-gray-300);
    border-radius: var(--radius-full);
    position: relative;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rbac-permission .perm-toggle::after {
    content: "";
    position: absolute;
    width: 16px;
    height: 16px;
    background: white;
    border-radius: var(--radius-full);
    top: 2px;
    left: 2px;
    transition: all var(--transition-fast);
}

.rbac-permission .perm-toggle.active {
    background: var(--color-accent-green);
}

.rbac-permission .perm-toggle.active::after {
    left: 18px;
}

/* ----- Role Hierarchy Demo ----- */
.role-hierarchy-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.role-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.role-level {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
}

.role-level .level-indicator {
    width: 60px;
    text-align: center;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.role-card {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    border-left: 4px solid var(--color-gray-300);
}

.role-card.admin {
    border-left-color: var(--color-accent-pink);
    background: rgba(224, 81, 110, 0.05);
}

.role-card.manager {
    border-left-color: var(--color-primary);
    background: rgba(65, 157, 240, 0.05);
}

.role-card.user {
    border-left-color: var(--color-accent-green);
    background: rgba(114, 201, 143, 0.05);
}

.role-card .role-icon {
    width: 40px;
    height: 40px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.role-card .role-info {
    flex-grow: 1;
}

.role-card .role-name {
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.role-card .role-perms {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.role-card .role-weight {
    text-align: right;
}

.role-card .role-weight .weight-value {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
}

.role-card .role-weight .weight-label {
    font-size: 0.7rem;
    color: var(--color-gray-500);
}

/* ----- Audit Demo ----- */
.audit-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.audit-filters {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
    flex-wrap: wrap;
}

.audit-filter {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.audit-filter:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.audit-filter.active {
    background: var(--color-primary);
    border-color: var(--color-primary);
    color: white;
}

.audit-logs {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.audit-log {
    display: grid;
    grid-template-columns: 150px 100px 1fr 150px;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    align-items: center;
}

.audit-log .log-time {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    font-family: monospace;
}

.audit-log .log-action {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
    text-align: center;
}

.audit-log .log-action.create {
    background: rgba(114, 201, 143, 0.2);
    color: #2e8b57;
}

.audit-log .log-action.update {
    background: rgba(65, 157, 240, 0.2);
    color: var(--color-primary);
}

.audit-log .log-action.delete {
    background: rgba(224, 81, 110, 0.2);
    color: var(--color-accent-pink);
}

.audit-log .log-action.login {
    background: rgba(156, 39, 176, 0.2);
    color: #9c27b0;
}

.audit-log .log-detail {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.audit-log .log-user {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    text-align: right;
}

/* ----- ERP Comparison Table ----- */
.erp-comparison-table {
    width: 100%;
    border-collapse: collapse;
    background: var(--color-white);
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.erp-comparison-table th,
.erp-comparison-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.erp-comparison-table th {
    background: var(--color-secondary);
    color: white;
    font-weight: 600;
    font-size: 0.9rem;
}

.erp-comparison-table th:last-child {
    background: var(--color-primary);
}

.erp-comparison-table td {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.erp-comparison-table tr:last-child td {
    border-bottom: none;
}

.erp-comparison-table tr:hover td {
    background: var(--bg-light);
}

.erp-comparison-table .check {
    color: var(--color-accent-green);
    font-weight: 600;
}

.erp-comparison-table .cross {
    color: var(--color-accent-pink);
    font-weight: 600;
}

/* ----- Contract Hierarchy Demo ----- */
.contract-hierarchy-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.hierarchy-tree {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hierarchy-node {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-left: 0;
}

.hierarchy-node.level-1 {
    margin-left: var(--space-2xl);
    background: rgba(65, 157, 240, 0.08);
    border-left: 3px solid var(--color-primary);
}

.hierarchy-node.level-2 {
    margin-left: calc(var(--space-2xl) * 2);
    background: rgba(114, 201, 143, 0.08);
    border-left: 3px solid var(--color-accent-green);
}

.hierarchy-node .node-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-sm);
}

.hierarchy-node .node-icon {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.1rem;
}

.hierarchy-node .node-title {
    font-weight: 600;
    color: var(--color-dark);
}

.hierarchy-node .node-detail {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin-left: calc(36px + var(--space-md));
}

/* ----- POD Demo ----- */
.pod-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.pod-features {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.pod-feature {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
}

.pod-feature .icon {
    font-size: 2.5rem;
    margin-bottom: var(--space-md);
}

.pod-feature h5 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-sm);
}

.pod-feature p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* ----- ERP Responsive ----- */
@media (max-width: 1200px) {
    .erp-comparison-hero {
        grid-template-columns: 1fr;
        gap: var(--space-lg);
    }

    .comparison-vs {
        transform: rotate(90deg);
    }

    .xcelere-advantages {
        grid-template-columns: repeat(2, 1fr);
    }

    .erp-modules-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .sectors-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .ssot-nodes {
        grid-template-columns: repeat(3, 1fr);
    }

    .workflow-8-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .churn-metrics {
        grid-template-columns: repeat(2, 1fr);
    }

    .rbac-modules {
        grid-template-columns: repeat(2, 1fr);
    }
}

@media (max-width: 992px) {
    .ra-comparison {
        grid-template-columns: 1fr;
    }

    .penalty-inputs {
        grid-template-columns: 1fr;
    }

    .stock-items {
        grid-template-columns: repeat(2, 1fr);
    }

    .leasing-config {
        grid-template-columns: 1fr;
    }

    .ai-before-after {
        grid-template-columns: 1fr;
    }

    .flow-steps {
        flex-direction: column;
    }

    .flow-step::after {
        content: "↓";
        right: auto;
        bottom: -18px;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .catalog-product {
        grid-template-columns: 1fr;
    }

    .rating-calculation {
        grid-template-columns: repeat(2, 1fr);
    }

    .bundle-components {
        grid-template-columns: 1fr;
    }

    .audit-log {
        grid-template-columns: 1fr;
        gap: var(--space-xs);
    }

    .audit-log .log-user {
        text-align: left;
    }
}

@media (max-width: 768px) {
    .xcelere-advantages {
        grid-template-columns: 1fr;
    }

    .erp-modules-grid {
        grid-template-columns: 1fr;
    }

    .sectors-grid {
        grid-template-columns: 1fr;
    }

    .ssot-nodes {
        grid-template-columns: repeat(2, 1fr);
    }

    .quote-line {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .quote-line.header {
        display: none;
    }

    .workflow-8-steps {
        grid-template-columns: 1fr;
    }

    .dunning-timeline {
        flex-direction: column;
    }

    .dunning-stage {
        flex: none;
    }

    .dunning-stage::after {
        content: "↓";
        right: auto;
        bottom: -14px;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .churn-metrics {
        grid-template-columns: 1fr;
    }

    .stock-items {
        grid-template-columns: 1fr;
    }

    .leasing-result {
        grid-template-columns: 1fr;
        text-align: left;
    }

    .ap-fields {
        grid-template-columns: 1fr;
    }

    .catalog-fields {
        grid-template-columns: 1fr;
    }

    .rating-calculation {
        grid-template-columns: 1fr;
    }

    .rbac-modules {
        grid-template-columns: 1fr;
    }

    .role-level {
        flex-direction: column;
        align-items: stretch;
    }

    .role-level .level-indicator {
        width: auto;
        text-align: left;
    }

    .pod-features {
        grid-template-columns: 1fr;
    }
}

/* ============================================
   ERP SUBPAGES - DETAILED STYLES
   ============================================ */

/* ----- erp.html - Fix SSOT Center ----- */
.ssot-section {
    text-align: center;
}

.ssot-center {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-2xl);
}

.ssot-center .central-node {
    display: inline-flex;
    align-items: center;
    gap: var(--space-md);
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    color: white;
    padding: var(--space-lg) var(--space-2xl);
    border-radius: var(--radius-xl);
    font-size: 1.25rem;
    font-weight: 600;
    box-shadow: var(--shadow-lg);
    margin: 0 auto;
}

/* ----- erp-finance.html ----- */
.revenue-assurance-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ra-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-secondary);
    color: white;
}

.ra-demo-header span {
    font-weight: 600;
}

.ra-demo-period {
    font-size: 0.85rem;
    opacity: 0.8;
    font-weight: 400;
}

.ra-demo-content {
    padding: var(--space-lg);
}

.ra-demo-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-light);
}

.ra-demo-item:last-child {
    margin-bottom: 0;
}

.ra-demo-item.alert {
    background: rgba(224, 81, 110, 0.1);
    border-left: 3px solid var(--color-accent-pink);
}

.ra-demo-item.warning {
    background: rgba(247, 200, 68, 0.1);
    border-left: 3px solid var(--color-accent-yellow);
}

.ra-demo-item.ok {
    background: rgba(114, 201, 143, 0.1);
    border-left: 3px solid var(--color-accent-green);
}

.ra-demo-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.ra-demo-item.alert .ra-demo-icon {
    background: var(--color-accent-pink);
    color: white;
}

.ra-demo-item.warning .ra-demo-icon {
    background: var(--color-accent-yellow);
    color: #333;
}

.ra-demo-item.ok .ra-demo-icon {
    background: var(--color-accent-green);
    color: white;
}

.ra-demo-info {
    flex-grow: 1;
}

.ra-demo-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-dark);
    margin-bottom: 2px;
}

.ra-demo-info span {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.ra-demo-variance {
    font-weight: 700;
    font-size: 0.95rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-md);
}

.ra-demo-variance.negative {
    background: var(--color-accent-pink);
    color: white;
}

.ra-demo-variance.warning {
    background: var(--color-accent-yellow);
    color: #333;
}

.ra-demo-variance.positive {
    background: var(--color-accent-green);
    color: white;
}

.ra-demo-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

/* Workflow 8 Steps - Finance */
.workflow-8-steps {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    flex-wrap: wrap;
    gap: 0;
}

.workflow-step-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-width: 140px;
    max-width: 160px;
    position: relative;
}

.workflow-step-item.highlight {
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    color: white;
}

.workflow-step-item.highlight .step-number {
    background: white;
    color: var(--color-primary);
}

.workflow-step-item.highlight h4 {
    color: white;
}

.workflow-step-item.highlight p {
    color: rgba(255, 255, 255, 0.85);
}

.workflow-step-item .step-number {
    width: 36px;
    height: 36px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    margin-bottom: var(--space-md);
}

.workflow-step-item .step-content h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.workflow-step-item .step-content p {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
    line-height: 1.4;
}

.workflow-step-connector {
    display: flex;
    align-items: center;
    color: var(--color-gray-400);
    font-size: 1.5rem;
    padding: 0 var(--space-xs);
    margin-top: var(--space-xl);
}

.workflow-step-connector::after {
    content: "→";
}

/* Dunning Features */
.dunning-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.dunning-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.dunning-feature-icon {
    width: 48px;
    height: 48px;
    background: rgba(65, 157, 240, 0.1);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.dunning-feature-content strong {
    display: block;
    font-size: 1rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.dunning-feature-content p {
    font-size: 0.9rem;
    color: var(--color-gray-500);
    margin: 0;
    line-height: 1.5;
}

/* Dunning Demo - Improved */
.dunning-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.dunning-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-secondary);
    color: white;
}

.dunning-demo-header span {
    font-weight: 600;
}

.dunning-total {
    font-size: 0.9rem;
    padding: var(--space-xs) var(--space-md);
    background: rgba(255, 255, 255, 0.15);
    border-radius: var(--radius-full);
}

.dunning-demo-content {
    padding: var(--space-lg);
}

.dunning-stage {
    margin-bottom: var(--space-lg);
}

.dunning-stage:last-child {
    margin-bottom: 0;
}

.dunning-stage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.dunning-stage-name {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-dark);
}

.dunning-stage-count {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.dunning-stage-bar {
    height: 8px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-xs);
}

.dunning-stage-fill {
    height: 100%;
    border-radius: var(--radius-full);
    transition: width var(--transition-base);
}

.dunning-stage-amount {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
}

/* Comparison Table - Finance */
.comparison-table {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.comparison-table-header {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    background: var(--color-secondary);
    color: white;
}

.comparison-table-header .comparison-col {
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
    font-size: 0.9rem;
}

.comparison-table-header .comparison-col.xcelere {
    background: var(--color-primary);
}

.comparison-table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr;
    border-bottom: 1px solid var(--color-gray-100);
}

.comparison-table-row:last-child {
    border-bottom: none;
}

.comparison-table-row.highlight {
    background: rgba(65, 157, 240, 0.05);
}

.comparison-table-row .comparison-col {
    padding: var(--space-md) var(--space-lg);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.comparison-table-row .comparison-col.feature {
    font-weight: 500;
    color: var(--color-dark);
}

.comparison-table-row .comparison-col.standard {
    color: var(--color-gray-500);
    justify-content: center;
}

.comparison-table-row .comparison-col.standard svg {
    color: var(--color-accent-green);
}

.comparison-table-row .comparison-col.xcelere {
    background: rgba(65, 157, 240, 0.03);
    justify-content: center;
}

.comparison-table-row .comparison-col.xcelere svg {
    color: var(--color-accent-green);
}

.comparison-partial {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    font-style: italic;
}

.badge-sm {
    font-size: 0.65rem;
    padding: 2px 6px;
}

/* Original RA styles kept for compatibility */
.ra-comparison {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
}

.ra-month {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ra-month h4 {
    font-size: 0.9rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.ra-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ra-item {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    background: white;
    border-radius: var(--radius-md);
}

.ra-item .label {
    color: var(--color-gray-600);
}

.ra-item .value {
    font-weight: 600;
    color: var(--color-dark);
}

.ra-detection {
    background: linear-gradient(135deg, rgba(224, 81, 110, 0.08) 0%, rgba(247, 200, 68, 0.08) 100%);
    border: 2px solid var(--color-accent-pink);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ra-detection h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-accent-pink);
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.ra-alert {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-md);
    margin-bottom: var(--space-sm);
}

.ra-alert:last-child {
    margin-bottom: 0;
}

.ra-alert-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.ra-alert-type {
    font-weight: 600;
    color: var(--color-dark);
}

.ra-alert-badge {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 500;
}

.ra-alert-badge.critical {
    background: var(--color-accent-pink);
    color: white;
}

.ra-alert-badge.warning {
    background: var(--color-accent-yellow);
    color: #333;
}

.ra-alert-detail {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.ra-alert-impact {
    font-size: 0.85rem;
    color: var(--color-accent-pink);
    font-weight: 600;
    margin-top: var(--space-xs);
}

/* Workflow 8 Steps */
.billing-workflow-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.workflow-steps {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.workflow-step {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    position: relative;
}

.workflow-step .step-number {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    width: 24px;
    height: 24px;
    background: var(--color-primary);
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
    display: flex;
    align-items: center;
    justify-content: center;
}

.workflow-step .step-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.workflow-step h4 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.workflow-step p {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
}

.workflow-step .auto-badge {
    display: inline-block;
    font-size: 0.6rem;
    padding: 2px 6px;
    background: var(--color-accent-green);
    color: white;
    border-radius: var(--radius-full);
    margin-top: var(--space-sm);
}

/* Dunning Demo */
.dunning-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.dunning-demo-header {
    margin-bottom: var(--space-xl);
}

.dunning-demo-header span {
    font-weight: 600;
    color: var(--color-dark);
}

.dunning-stages {
    display: flex;
    gap: var(--space-md);
    overflow-x: auto;
    padding-bottom: var(--space-md);
}

.dunning-stage {
    flex: 0 0 180px;
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    position: relative;
}

.dunning-stage::after {
    content: "→";
    position: absolute;
    right: -16px;
    top: 50%;
    transform: translateY(-50%);
    color: var(--color-gray-400);
    font-size: 1.25rem;
    z-index: 1;
}

.dunning-stage:last-child::after {
    display: none;
}

.dunning-stage.warning {
    background: rgba(247, 200, 68, 0.15);
    border: 1px solid var(--color-accent-yellow);
}

.dunning-stage.critical {
    background: rgba(224, 81, 110, 0.15);
    border: 1px solid var(--color-accent-pink);
}

.dunning-stage .stage-day {
    font-size: 0.7rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.dunning-stage .stage-icon {
    font-size: 1.5rem;
    margin-bottom: var(--space-sm);
}

.dunning-stage h5 {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.dunning-stage p {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* ----- erp-contrats.html ----- */
.contract-hierarchy-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.hierarchy-node {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-md);
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.hierarchy-node.client {
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.1) 0%, rgba(65, 157, 240, 0.05) 100%);
    border: 2px solid var(--color-primary);
}

.hierarchy-node .hierarchy-icon {
    width: 36px;
    height: 36px;
    background: white;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.hierarchy-node span {
    font-weight: 500;
    color: var(--color-dark);
}

.hierarchy-level {
    margin-left: var(--space-xl);
    padding-left: var(--space-lg);
    border-left: 2px solid var(--color-gray-200);
}

.hierarchy-nodes {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.hierarchy-node.site {
    background: rgba(114, 201, 143, 0.1);
    border: 1px solid var(--color-accent-green);
}

.hierarchy-node.site .hierarchy-icon {
    color: var(--color-accent-green);
}

.hierarchy-children {
    margin-left: var(--space-xl);
    margin-top: var(--space-sm);
}

.hierarchy-node.contract {
    background: rgba(247, 200, 68, 0.1);
    border: 1px solid var(--color-accent-yellow);
    flex-direction: column;
    align-items: flex-start;
}

.hierarchy-node.contract span {
    font-size: 0.9rem;
}

.hierarchy-items {
    display: flex;
    gap: var(--space-sm);
    margin-top: var(--space-sm);
}

.hierarchy-item {
    font-size: 0.75rem !important;
    padding: 2px 8px;
    background: white;
    border-radius: var(--radius-full);
    color: var(--color-gray-600) !important;
    font-weight: 400 !important;
}

/* Penalty Calculator Demo */
.penalty-calculator-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.penalty-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.penalty-demo-content {
    padding: var(--space-xl);
}

.penalty-contract-info {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.penalty-info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.penalty-info-row:last-child {
    border-bottom: none;
}

.penalty-label {
    color: var(--color-gray-500);
    font-size: 0.9rem;
}

.penalty-value {
    font-weight: 600;
    color: var(--color-dark);
}

.penalty-value.highlight {
    color: var(--color-accent-pink);
}

.penalty-calculation {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.penalty-calc-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    font-size: 0.9rem;
    color: var(--color-gray-600);
}

.penalty-calc-total {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md) 0;
    margin-top: var(--space-md);
    border-top: 2px solid var(--color-accent-pink);
    font-weight: 600;
}

.penalty-amount {
    color: var(--color-accent-pink);
    font-size: 1.25rem;
}

.penalty-demo-footer {
    background: var(--bg-light);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.penalty-note {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

/* Penalty Features */
.penalty-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.penalty-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.penalty-feature-icon {
    width: 44px;
    height: 44px;
    background: rgba(65, 157, 240, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.penalty-feature-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.penalty-feature-content p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Churn Dashboard */
.churn-dashboard-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.churn-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.churn-tabs {
    display: flex;
    gap: var(--space-xs);
}

.churn-tab {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.churn-tab:hover {
    background: var(--color-gray-200);
}

.churn-tab.active {
    background: var(--color-primary);
    color: white;
}

.churn-summary {
    display: flex;
    gap: var(--space-xl);
}

.churn-stat {
    text-align: right;
}

.churn-stat-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
}

.churn-stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.churn-content {
    padding: var(--space-lg);
}

.churn-item {
    display: grid;
    grid-template-columns: auto 1fr auto auto;
    gap: var(--space-lg);
    align-items: center;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--bg-light);
}

.churn-item:last-child {
    margin-bottom: 0;
}

.churn-item.high {
    background: rgba(224, 81, 110, 0.08);
    border-left: 3px solid var(--color-accent-pink);
}

.churn-item.medium {
    background: rgba(247, 200, 68, 0.08);
    border-left: 3px solid var(--color-accent-yellow);
}

.churn-item.low {
    background: rgba(114, 201, 143, 0.08);
    border-left: 3px solid var(--color-accent-green);
}

.risk-badge {
    font-size: 0.7rem;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.risk-badge.high {
    background: var(--color-accent-pink);
    color: white;
}

.risk-badge.medium {
    background: var(--color-accent-yellow);
    color: #333;
}

.risk-badge.low {
    background: var(--color-accent-green);
    color: white;
}

.churn-item-info strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-dark);
}

.churn-item-info span {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.churn-item-mrr span {
    font-weight: 600;
    color: var(--color-dark);
}

/* ----- erp-achats.html ----- */
.stock-status-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.stock-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.stock-demo-content {
    padding: var(--space-xl);
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
}

.stock-category {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
}

.stock-category-header {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.stock-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

.stock-dot.available {
    background: var(--color-accent-green);
}

.stock-dot.sold {
    background: var(--color-accent-pink);
}

.stock-dot.rented {
    background: var(--color-primary);
}

.stock-dot.reserved {
    background: var(--color-accent-yellow);
}

.stock-category-header span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-gray-600);
}

.stock-count {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.stock-location {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.stock-category.available .stock-count {
    color: var(--color-accent-green);
}

.stock-category.sold .stock-count {
    color: var(--color-accent-pink);
}

.stock-category.rented .stock-count {
    color: var(--color-primary);
}

.stock-category.reserved .stock-count {
    color: var(--color-accent-yellow);
}

.stock-demo-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

.stock-qr {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    color: var(--color-gray-500);
    font-size: 0.85rem;
}

/* Leasing Calculator */
.leasing-calculator-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.leasing-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.leasing-demo-content {
    padding: var(--space-xl);
}

.leasing-input-group {
    margin-bottom: var(--space-lg);
}

.leasing-input-group label {
    display: block;
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.leasing-input-value {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
}

.leasing-duration-options {
    display: flex;
    gap: var(--space-sm);
}

.duration-option {
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.duration-option:hover {
    background: var(--color-gray-200);
}

.duration-option.active {
    background: var(--color-primary);
    color: white;
}

.leasing-result {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.leasing-result-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    font-size: 0.9rem;
    color: var(--color-gray-600);
}

.leasing-result-row.total {
    border-top: 2px solid var(--color-gray-300);
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    font-weight: 600;
    color: var(--color-dark);
}

.leasing-amount {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

.leasing-demo-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
    text-align: right;
}

/* Leasing Features */
.leasing-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.leasing-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.leasing-feature-icon {
    width: 44px;
    height: 44px;
    background: rgba(114, 201, 143, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-accent-green);
    flex-shrink: 0;
}

.leasing-feature-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.leasing-feature-content p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* AP Automation Demo */
.ap-automation-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ap-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.ap-demo-content {
    padding: var(--space-xl);
}

.ap-dropzone {
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-lg);
    padding: var(--space-2xl);
    text-align: center;
    margin-bottom: var(--space-lg);
    transition: all var(--transition-base);
    cursor: pointer;
}

.ap-dropzone:hover {
    border-color: var(--color-primary);
    background: rgba(65, 157, 240, 0.03);
}

.ap-dropzone svg {
    color: var(--color-gray-400);
    margin-bottom: var(--space-md);
}

.ap-dropzone span {
    display: block;
    color: var(--color-gray-600);
    margin-bottom: var(--space-xs);
}

.ap-formats {
    font-size: 0.8rem;
    color: var(--color-gray-400);
}

.ap-recent-files {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.ap-file {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.ap-file-icon {
    color: var(--color-gray-500);
}

.ap-file-info {
    flex-grow: 1;
}

.ap-file-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.ap-file-info span {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.ap-file-status {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8rem;
    font-weight: 500;
}

.ap-file-status.matched {
    color: var(--color-accent-green);
}

.ap-file-status.pending {
    color: var(--color-accent-yellow);
}

/* ----- erp-operations.html ----- */
.ai-support-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.ai-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.ai-demo-content {
    padding: var(--space-xl);
}

.ai-demo-original {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-md);
}

.ai-demo-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.ai-demo-original p {
    font-size: 0.9rem;
    color: var(--color-gray-600);
    margin: 0;
    font-style: italic;
}

.ai-demo-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    color: var(--color-primary);
    font-weight: 600;
    font-size: 0.85rem;
}

.ai-demo-optimized {
    background: linear-gradient(135deg, rgba(114, 201, 143, 0.1) 0%, rgba(114, 201, 143, 0.05) 100%);
    border: 2px solid var(--color-accent-green);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.ai-demo-optimized .ai-demo-label {
    color: var(--color-accent-green);
}

.ai-demo-optimized p {
    font-size: 0.9rem;
    color: var(--color-dark);
    margin: 0;
    line-height: 1.6;
}

.ai-demo-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

/* Devis Terrain Flow */
.devis-terrain-flow {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
    flex-wrap: wrap;
}

.flow-step {
    background: var(--bg-light);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    text-align: center;
    min-width: 180px;
}

.flow-step-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.flow-step-icon.devis {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.flow-step-icon.transform {
    background: rgba(247, 200, 68, 0.1);
    color: var(--color-accent-yellow);
}

.flow-step-icon.intervention {
    background: rgba(224, 81, 110, 0.1);
    color: var(--color-accent-pink);
}

.flow-step-icon.commande {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.flow-step h3,
.flow-step h4 {
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.flow-step p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

.flow-arrow {
    color: var(--color-primary);
}

.flow-branches {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.flow-step.branch {
    padding: var(--space-lg);
    min-width: 150px;
}

.flow-step.branch .flow-step-icon {
    width: 48px;
    height: 48px;
}

/* Traceability Demo */
.traceability-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.trace-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.trace-demo-content {
    padding: var(--space-xl);
}

.trace-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.trace-item:last-child {
    margin-bottom: 0;
}

.trace-date {
    text-align: center;
    min-width: 50px;
}

.trace-day {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-dark);
}

.trace-month {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.trace-line {
    width: 2px;
    height: 60px;
    background: var(--color-gray-200);
    margin-top: 8px;
}

.trace-line.last {
    height: 30px;
}

.trace-card {
    flex-grow: 1;
    display: flex;
    align-items: center;
    gap: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.trace-icon {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.trace-card.invoice .trace-icon {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.trace-card.intervention .trace-icon {
    background: rgba(224, 81, 110, 0.1);
    color: var(--color-accent-pink);
}

.trace-card.order .trace-icon {
    background: rgba(247, 200, 68, 0.1);
    color: var(--color-accent-yellow);
}

.trace-card.quote .trace-icon {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.trace-info strong {
    display: block;
    font-size: 0.9rem;
    color: var(--color-dark);
}

.trace-info span {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

/* ----- erp-catalogue.html ----- */
.catalog-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.catalog-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.catalog-demo-content {
    padding: var(--space-xl);
}

.catalog-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.catalog-field:last-of-type {
    border-bottom: none;
}

.catalog-field-label {
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.catalog-field-value {
    font-weight: 500;
    color: var(--color-dark);
}

.catalog-tag {
    display: inline-block;
    font-size: 0.75rem;
    padding: 2px 8px;
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    border-radius: var(--radius-full);
    margin-left: var(--space-xs);
}

.catalog-select {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-sm);
    font-size: 0.85rem;
    background: white;
}

.catalog-operator {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: 4px 10px;
    background: #FF6600;
    color: white;
    border-radius: var(--radius-full);
    font-size: 0.8rem;
    font-weight: 500;
}

.catalog-pricing {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding-top: var(--space-lg);
    border-top: 2px solid var(--color-gray-100);
}

.catalog-price {
    flex: 1;
    background: var(--bg-light);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    text-align: center;
}

.catalog-price .price-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.catalog-price .price-value {
    font-size: 1.1rem;
    font-weight: 700;
}

.catalog-price.setup .price-value {
    color: var(--color-accent-yellow);
}

.catalog-price.mrr .price-value {
    color: var(--color-primary);
}

/* Rating Demo */
.rating-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.rating-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.rating-demo-content {
    padding: var(--space-xl);
}

.rating-summary {
    display: flex;
    gap: var(--space-xl);
    margin-bottom: var(--space-xl);
    padding-bottom: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.rating-stat {
    text-align: center;
}

.rating-stat-value {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-dark);
}

.rating-stat-label {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.rating-breakdown {
    margin-bottom: var(--space-lg);
}

.rating-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: 0.9rem;
}

.rating-row:last-child {
    border-bottom: none;
}

.rating-destination {
    font-weight: 500;
    color: var(--color-dark);
}

.rating-cost {
    color: var(--color-gray-500);
}

.rating-price {
    color: var(--color-gray-600);
}

.rating-margin {
    font-weight: 600;
}

.rating-margin.positive {
    color: var(--color-accent-green);
}

.rating-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    background: linear-gradient(135deg, var(--color-accent-green) 0%, #4caf7a 100%);
    color: white;
    padding: var(--space-md) var(--space-lg);
    border-radius: var(--radius-md);
    font-weight: 600;
}

.rating-total-value {
    font-size: 1.25rem;
}

/* Rating Features */
.rating-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.rating-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.rating-feature-icon {
    width: 44px;
    height: 44px;
    background: rgba(65, 157, 240, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.rating-feature-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.rating-feature-content p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Bundle Example */
.bundle-example {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.bundle-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
}

.bundle-icon {
    width: 48px;
    height: 48px;
    background: linear-gradient(135deg, var(--color-primary) 0%, #2d7ed4 100%);
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.bundle-info h3 {
    font-size: 1.1rem;
    font-weight: 600;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.bundle-type {
    font-size: 0.8rem;
    padding: 2px 10px;
    border-radius: var(--radius-full);
    background: rgba(224, 81, 110, 0.1);
    color: var(--color-accent-pink);
}

.bundle-content {
    padding: var(--space-lg);
}

.bundle-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.bundle-item:last-child {
    margin-bottom: 0;
}

.bundle-item-status {
    font-size: 0.7rem;
    padding: 2px 8px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.bundle-item.required .bundle-item-status {
    background: var(--color-accent-pink);
    color: white;
}

.bundle-item.optional .bundle-item-status {
    background: var(--color-gray-300);
    color: var(--color-gray-600);
}

.bundle-item.recommended .bundle-item-status {
    background: var(--color-accent-yellow);
    color: #333;
}

.bundle-item-name {
    font-size: 0.9rem;
    color: var(--color-dark);
}

.bundle-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

.bundle-note {
    font-size: 0.8rem;
    color: var(--color-gray-500);
    font-style: italic;
}

/* ----- erp-administration.html ----- */
.rbac-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.rbac-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.rbac-demo-content {
    padding: var(--space-xl);
}

.rbac-module {
    margin-bottom: var(--space-lg);
}

.rbac-module:last-child {
    margin-bottom: 0;
}

.rbac-module-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    margin-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-200);
}

.rbac-module-header span:first-child {
    font-weight: 600;
    color: var(--color-dark);
}

.rbac-module-count {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.rbac-permissions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.rbac-permission {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.rbac-permission span:first-child {
    font-size: 0.9rem;
    color: var(--color-gray-700);
}

.rbac-toggles {
    display: flex;
    gap: var(--space-xs);
}

.rbac-toggle {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.7rem;
    font-weight: 600;
    background: var(--color-gray-200);
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.rbac-toggle.active {
    background: var(--color-accent-green);
    color: white;
}

.rbac-demo-footer {
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

.rbac-legend {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

/* Role Hierarchy Demo */
.role-hierarchy-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.role-demo-header {
    background: var(--color-secondary);
    color: white;
    padding: var(--space-md) var(--space-lg);
    font-weight: 600;
}

.role-demo-content {
    padding: var(--space-xl);
}

.role-level {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
}

.role-level.admin {
    margin-bottom: var(--space-md);
}

.role-level.managers {
    margin-bottom: var(--space-md);
}

.role-node {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    text-align: center;
    min-width: 140px;
    position: relative;
}

.role-level.admin .role-node {
    background: linear-gradient(135deg, rgba(224, 81, 110, 0.1) 0%, rgba(224, 81, 110, 0.05) 100%);
    border: 2px solid var(--color-accent-pink);
}

.role-level.managers .role-node {
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.1) 0%, rgba(65, 157, 240, 0.05) 100%);
    border: 2px solid var(--color-primary);
}

.role-level.users .role-node {
    background: linear-gradient(135deg, rgba(114, 201, 143, 0.1) 0%, rgba(114, 201, 143, 0.05) 100%);
    border: 2px solid var(--color-accent-green);
}

.role-badge {
    position: absolute;
    top: -10px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.65rem;
    padding: 2px 8px;
    background: var(--color-secondary);
    color: white;
    border-radius: var(--radius-full);
    white-space: nowrap;
}

.role-name {
    display: block;
    font-weight: 600;
    color: var(--color-dark);
    margin-top: var(--space-sm);
    margin-bottom: var(--space-xs);
}

.role-desc {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.role-connector {
    width: 2px;
    height: 20px;
    background: var(--color-gray-300);
    margin: 0 auto;
}

/* Role Features */
.role-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.role-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
}

.role-feature-icon {
    width: 44px;
    height: 44px;
    background: rgba(139, 92, 246, 0.1);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #8B5CF6;
    flex-shrink: 0;
}

.role-feature-content strong {
    display: block;
    font-size: 0.95rem;
    color: var(--color-dark);
    margin-bottom: var(--space-xs);
}

.role-feature-content p {
    font-size: 0.85rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Audit Demo */
.audit-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-lg);
}

.audit-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
    flex-wrap: wrap;
    gap: var(--space-md);
}

.audit-demo-header span {
    font-weight: 600;
    color: var(--color-dark);
}

.audit-filters {
    display: flex;
    gap: var(--space-sm);
}

.audit-filter-select {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 0.85rem;
    background: white;
}

.audit-demo-content {
    padding: var(--space-lg);
}

.audit-entry {
    display: grid;
    grid-template-columns: 80px auto auto 1fr auto;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.audit-entry:last-child {
    margin-bottom: 0;
}

.audit-time {
    font-family: monospace;
    font-size: 0.85rem;
    color: var(--color-gray-500);
}

.audit-user {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.audit-avatar {
    width: 32px;
    height: 32px;
    border-radius: var(--radius-full);
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.audit-user span {
    font-size: 0.85rem;
    font-weight: 500;
    color: var(--color-dark);
}

.audit-action {
    font-size: 0.75rem;
    padding: 4px 10px;
    border-radius: var(--radius-full);
    font-weight: 600;
}

.audit-action.create {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.audit-action.modify {
    background: rgba(65, 157, 240, 0.15);
    color: var(--color-primary);
}

.audit-action.delete {
    background: rgba(224, 81, 110, 0.15);
    color: var(--color-accent-pink);
}

.audit-action.export {
    background: rgba(139, 92, 246, 0.15);
    color: #8B5CF6;
}

.audit-target {
    display: flex;
    flex-direction: column;
}

.audit-entity {
    font-size: 0.9rem;
    font-weight: 500;
    color: var(--color-dark);
}

.audit-field {
    font-size: 0.8rem;
    color: var(--color-gray-500);
}

.audit-ip {
    font-family: monospace;
    font-size: 0.8rem;
    color: var(--color-gray-400);
}

/* AI Badge Light */
.ai-badge-light {
    display: inline-flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) var(--space-md);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.1) 0%, rgba(65, 157, 240, 0.1) 100%);
    border: 1px solid rgba(139, 92, 246, 0.3);
    border-radius: var(--radius-full);
    font-size: 0.85rem;
    font-weight: 500;
    color: #8B5CF6;
    margin-bottom: var(--space-md);
}

/* ----- ERP Subpages Responsive ----- */
@media (max-width: 1200px) {
    .ra-comparison {
        grid-template-columns: 1fr;
    }

    .workflow-steps {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-8-steps {
        gap: var(--space-sm);
    }

    .workflow-step-item {
        min-width: 120px;
        max-width: 140px;
        padding: var(--space-md);
    }

    .workflow-step-connector {
        display: none;
    }

    .comparison-table-row {
        grid-template-columns: 1.5fr 1fr 1fr;
    }

    .stock-demo-content {
        grid-template-columns: 1fr;
    }

    .rating-row {
        grid-template-columns: 1fr 1fr;
    }

    .audit-entry {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

@media (max-width: 992px) {
    .workflow-8-steps {
        flex-wrap: wrap;
        justify-content: center;
        gap: var(--space-md);
    }

    .workflow-step-item {
        min-width: calc(50% - var(--space-md));
        max-width: calc(50% - var(--space-md));
    }

    .comparison-table-header,
    .comparison-table-row {
        grid-template-columns: 1fr;
    }

    .comparison-table-header .comparison-col,
    .comparison-table-row .comparison-col {
        padding: var(--space-sm) var(--space-md);
    }

    .comparison-table-row .comparison-col.standard,
    .comparison-table-row .comparison-col.xcelere {
        justify-content: flex-start;
    }

    .comparison-table-row .comparison-col.feature {
        background: var(--bg-light);
        font-weight: 600;
    }

    .devis-terrain-flow {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    .flow-branches {
        flex-direction: row;
    }

    .churn-item {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }
}

@media (max-width: 768px) {
    .workflow-steps {
        grid-template-columns: 1fr;
    }

    .workflow-8-steps {
        flex-direction: column;
        align-items: center;
    }

    .workflow-step-item {
        min-width: 100%;
        max-width: 100%;
    }

    .dunning-stages {
        flex-direction: column;
    }

    .dunning-stage::after {
        content: "↓";
        right: auto;
        bottom: -14px;
        top: auto;
        left: 50%;
        transform: translateX(-50%);
    }

    .hierarchy-level {
        margin-left: var(--space-md);
        padding-left: var(--space-md);
    }

    .churn-header {
        flex-direction: column;
        align-items: flex-start;
    }

    .churn-summary {
        width: 100%;
        justify-content: space-between;
    }

    .leasing-duration-options {
        flex-wrap: wrap;
    }

    .catalog-pricing {
        flex-direction: column;
    }

    .rating-row {
        grid-template-columns: 1fr;
        text-align: center;
    }

    .flow-branches {
        flex-direction: column;
    }

    .role-node {
        min-width: 100%;
    }

    .audit-filters {
        width: 100%;
    }

    .audit-filter-select {
        flex: 1;
    }
}

/* ============================================
   FACTURATION MODULE STYLES
   ============================================ */

/* Facturation Comparison Hero */
.fact-comparison-hero {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-xl);
    align-items: stretch;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl);
    box-shadow: var(--shadow-lg);
}

.fact-comparison-column {
    padding: var(--space-xl);
    border-radius: var(--radius-lg);
}

.fact-comparison-column.standard {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 1px solid #fecaca;
}

.fact-comparison-column.xcelere {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    border: 1px solid #86efac;
}

.fact-comparison-column h3 {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 1.125rem;
    margin-bottom: var(--space-lg);
}

.fact-comparison-column.standard h3 {
    color: var(--color-accent-red);
}

.fact-comparison-column.xcelere h3 {
    color: var(--color-accent-green);
}

.fact-comparison-column ul {
    list-style: none;
    padding: 0;
    margin: 0;
}

.fact-comparison-column li {
    padding: var(--space-sm) 0;
    padding-left: var(--space-lg);
    position: relative;
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
}

.fact-comparison-column.standard li::before {
    content: "✗";
    position: absolute;
    left: 0;
    color: var(--color-accent-red);
    font-weight: 600;
}

.fact-comparison-column.xcelere li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent-green);
    font-weight: 600;
}

.fact-comparison-vs {
    display: flex;
    align-items: center;
    justify-content: center;
}

.fact-comparison-vs span {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 50px;
    height: 50px;
    background: var(--color-gray-100);
    border-radius: 50%;
    font-weight: 700;
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

/* Facturation Modules Grid */
.fact-modules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.fact-module-card {
    display: flex;
    flex-direction: column;
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    text-decoration: none;
    transition: all var(--transition-base);
}

.fact-module-card:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl);
    border-color: var(--color-primary);
}

.fact-module-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.fact-module-icon.security {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: var(--color-accent-red);
}

.fact-module-icon.engine {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--color-accent-blue);
}

.fact-module-icon.accounting {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: var(--color-accent-green);
}

.fact-module-icon.collection {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: var(--color-accent-orange);
}

.fact-module-icon.operations {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    color: var(--color-accent-purple);
}

.fact-module-card h3 {
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.fact-module-card p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.fact-module-features {
    list-style: none;
    padding: 0;
    margin: 0 0 var(--space-lg) 0;
    flex-grow: 1;
}

.fact-module-features li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-md);
    position: relative;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.fact-module-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.fact-module-link {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
    margin-top: auto;
}

.fact-module-card:hover .fact-module-link {
    gap: var(--space-sm);
}

/* Zero Saisie Demo */
.zero-saisie-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.zero-saisie-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
}

.zero-saisie-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
}

.zero-saisie-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.zero-saisie-icon.devis {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--color-accent-blue);
}

.zero-saisie-icon.dispatch {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    color: var(--color-accent-purple);
}

.zero-saisie-step span {
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.zero-saisie-arrow {
    color: var(--color-gray-400);
}

.zero-saisie-outputs {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.zero-saisie-output {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
}

.output-icon {
    font-size: 1rem;
}

/* Facturation Workflow Visual */
.fact-workflow-visual {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-sm);
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.fact-workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    min-width: 120px;
    transition: all var(--transition-base);
}

.fact-workflow-step.highlight {
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border: 2px solid var(--color-accent-red);
}

.fact-workflow-number {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-primary);
    color: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.fact-workflow-step.highlight .fact-workflow-number {
    background: var(--color-accent-red);
}

.fact-workflow-content {
    text-align: center;
}

.fact-workflow-content h4 {
    font-size: 0.875rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.fact-workflow-content p {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.fact-workflow-connector {
    width: 40px;
    height: 2px;
    background: var(--color-gray-300);
    position: relative;
}

.fact-workflow-connector::after {
    content: "";
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
    border: 4px solid transparent;
    border-left-color: var(--color-gray-300);
}

/* Connectors Grid */
.connectors-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: var(--space-md);
}

.connector-item {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-lg);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.connector-item:hover {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-md);
}

.connector-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

/* ============================================
   REVENUE ASSURANCE PAGE STYLES
   ============================================ */

/* Kill Switch Demo */
.kill-switch-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.kill-switch-header {
    padding: var(--space-lg);
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    border-bottom: 1px solid #fecaca;
}

.kill-switch-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    color: var(--color-accent-red);
}

.kill-switch-status.blocked svg {
    color: var(--color-accent-red);
}

.kill-switch-content {
    padding: var(--space-xl);
}

.kill-switch-alert {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-lg);
    background: #fef2f2;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-xl);
}

.kill-switch-alert-icon {
    color: var(--color-accent-red);
    flex-shrink: 0;
}

.kill-switch-alert-text strong {
    display: block;
    color: var(--color-accent-red);
    margin-bottom: var(--space-xs);
}

.kill-switch-alert-text p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

.kill-switch-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.kill-switch-action {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.action-label {
    font-weight: 500;
    color: var(--color-text-primary);
}

.action-buttons {
    display: flex;
    gap: var(--space-sm);
}

/* Scenarios Grid */
.scenarios-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.scenario-category {
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    text-align: center;
    transition: all var(--transition-base);
}

.scenario-category:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.scenario-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-md);
}

.scenario-category h4 {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.scenario-category p {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
}

.scenario-count {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 600;
}

.scenarios-summary {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-3xl);
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.scenarios-total {
    text-align: center;
}

.scenarios-number {
    display: block;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1;
}

.scenarios-label {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.scenarios-coverage {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    min-width: 200px;
}

.coverage-bar {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
}

.coverage-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-green), #22c55e);
    border-radius: var(--radius-full);
}

.coverage-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent-green);
    text-align: center;
}

/* Threshold Examples */
.threshold-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.threshold-example {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
}

.threshold-service {
    font-weight: 500;
    color: var(--color-text-primary);
}

.threshold-config {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.threshold-value {
    font-weight: 600;
    color: var(--color-primary);
    font-family: var(--font-mono);
}

.threshold-action {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

/* Threshold Visual */
.threshold-visual {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.threshold-chart {
    padding: var(--space-xl);
}

.threshold-chart-header {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xl);
}

.threshold-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-lg);
}

.threshold-bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.bar-label {
    width: 60px;
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-text-secondary);
}

.bar-container {
    flex: 1;
    height: 24px;
    border-radius: var(--radius-md);
    display: flex;
    overflow: hidden;
}

.bar-zone {
    height: 100%;
    transition: all var(--transition-base);
}

.bar-zone.ok {
    background: var(--color-accent-green);
}

.bar-zone.warning {
    background: var(--color-accent-yellow);
}

.bar-zone.alert {
    background: var(--color-accent-red);
}

.threshold-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    margin-top: var(--space-xl);
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

.legend-item::before {
    content: "";
    width: 12px;
    height: 12px;
    border-radius: var(--radius-sm);
}

.legend-item.ok::before {
    background: var(--color-accent-green);
}

.legend-item.warning::before {
    background: var(--color-accent-yellow);
}

.legend-item.alert::before {
    background: var(--color-accent-red);
}

/* ============================================
   MOTEUR HYBRIDE PAGE STYLES
   ============================================ */

/* Prorata Demo */
.prorata-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.prorata-header {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
    color: var(--color-text-primary);
}

.prorata-content {
    padding: var(--space-xl);
}

.prorata-calendar {
    margin-bottom: var(--space-xl);
}

.calendar-month {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.calendar-days {
    display: flex;
    gap: var(--space-xs);
    flex-wrap: wrap;
}

.calendar-day {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    background: var(--color-gray-100);
    color: var(--color-text-tertiary);
}

.calendar-day.inactive {
    background: var(--color-gray-100);
    color: var(--color-text-tertiary);
}

.calendar-day.start {
    background: var(--color-primary);
    color: var(--color-white);
}

.calendar-day.active {
    background: #dbeafe;
    color: var(--color-primary);
}

.prorata-calculation {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
}

.calc-line {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-200);
}

.calc-line:last-child {
    border-bottom: none;
}

.calc-line.result {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 2px solid var(--color-primary);
    border-bottom: none;
}

.calc-label {
    color: var(--color-text-secondary);
    font-size: 0.875rem;
}

.calc-value {
    font-weight: 600;
    color: var(--color-text-primary);
}

.calc-line.result .calc-value {
    color: var(--color-primary);
    font-size: 1.125rem;
}

/* Billing Types Grid */
.billing-types-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: var(--space-xl);
}

.billing-type-card {
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.billing-type-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.billing-type-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-lg);
}

.billing-type-icon.subscription {
    background: linear-gradient(135deg, #eff6ff, #dbeafe);
    color: var(--color-accent-blue);
}

.billing-type-icon.usage {
    background: linear-gradient(135deg, #f0fdf4, #dcfce7);
    color: var(--color-accent-green);
}

.billing-type-icon.rental {
    background: linear-gradient(135deg, #fffbeb, #fef3c7);
    color: var(--color-accent-orange);
}

.billing-type-icon.service {
    background: linear-gradient(135deg, #faf5ff, #f3e8ff);
    color: var(--color-accent-purple);
}

.billing-type-card h3 {
    font-size: 1.125rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.billing-type-card p {
    font-size: 0.9375rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.billing-type-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.billing-type-features li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-md);
    position: relative;
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.billing-type-features li::before {
    content: "✓";
    position: absolute;
    left: 0;
    color: var(--color-accent-green);
}

/* Multi-site Demo */
.multisite-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.multisite-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.multisite-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.site-count {
    font-size: 0.875rem;
    color: var(--color-primary);
    font-weight: 500;
}

.multisite-content {
    padding: var(--space-xl);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.multisite-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-lg);
    cursor: pointer;
    transition: all var(--transition-base);
}

.multisite-option:hover {
    border-color: var(--color-primary);
}

.option-radio {
    width: 20px;
    height: 20px;
    border: 2px solid var(--color-gray-300);
    border-radius: 50%;
    flex-shrink: 0;
    position: relative;
}

.option-radio.selected {
    border-color: var(--color-primary);
}

.option-radio.selected::after {
    content: "";
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 10px;
    height: 10px;
    background: var(--color-primary);
    border-radius: 50%;
}

.option-content strong {
    display: block;
    color: var(--color-text-primary);
    font-size: 0.9375rem;
    margin-bottom: var(--space-xs);
}

.option-content span {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.multisite-preview {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

.preview-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-sm);
}

.preview-invoice {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.invoice-icon {
    font-size: 2rem;
}

.invoice-total {
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}

/* Multi-TVA Demo */
.multitva-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.multitva-header {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
    color: var(--color-text-primary);
}

.multitva-lines {
    padding: var(--space-lg);
}

.tva-line {
    display: grid;
    grid-template-columns: 1fr auto auto auto;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
    align-items: center;
}

.tva-line:last-child {
    border-bottom: none;
}

.line-desc {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.line-ht, .line-ttc {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    text-align: right;
}

.line-tva {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.line-tva.tva-20 {
    background: #dbeafe;
    color: var(--color-accent-blue);
}

.line-tva.tva-10 {
    background: #dcfce7;
    color: var(--color-accent-green);
}

.line-tva.tva-5 {
    background: #fef3c7;
    color: var(--color-accent-orange);
}

.line-tva.tva-0 {
    background: var(--color-gray-100);
    color: var(--color-text-tertiary);
}

.multitva-summary {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

.tva-recap {
    margin-bottom: var(--space-md);
}

.recap-line {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-md);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    padding: var(--space-xs) 0;
}

.total-line {
    display: flex;
    justify-content: space-between;
    font-weight: 700;
    font-size: 1.125rem;
    color: var(--color-primary);
    padding-top: var(--space-md);
    border-top: 2px solid var(--color-primary);
}

/* Document Builder Demo */
.document-builder-demo {
    display: grid;
    grid-template-columns: 1fr 200px;
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.builder-toolbar {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-800);
    border-bottom: 1px solid var(--color-gray-700);
}

.toolbar-group {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.toolbar-btn {
    width: 32px;
    height: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-gray-700);
    border: none;
    border-radius: var(--radius-sm);
    color: var(--color-white);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.toolbar-btn:hover {
    background: var(--color-gray-600);
}

.toolbar-label {
    font-size: 0.75rem;
    color: var(--color-gray-400);
}

.toolbar-var {
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-primary);
    color: var(--color-white);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    font-family: var(--font-mono);
}

.builder-canvas {
    padding: var(--space-xl);
    min-height: 400px;
    background: var(--color-white);
}

.canvas-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xl);
}

.canvas-logo {
    padding: var(--space-lg);
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    color: var(--color-text-tertiary);
}

.canvas-info {
    text-align: right;
}

.canvas-var {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: #e0f2fe;
    color: var(--color-primary);
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-family: var(--font-mono);
    margin: 2px;
}

.canvas-title {
    text-align: center;
    margin-bottom: var(--space-lg);
    font-size: 1.25rem;
    font-weight: 700;
}

.canvas-client {
    margin-bottom: var(--space-xl);
}

.canvas-table {
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    overflow: hidden;
    margin-bottom: var(--space-xl);
}

.table-header, .table-row {
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
}

.table-header {
    background: var(--bg-light);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-text-secondary);
}

.table-row {
    font-size: 0.8125rem;
    border-top: 1px solid var(--color-gray-100);
}

.canvas-totals {
    margin-left: auto;
    width: 200px;
}

.total-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: 0.875rem;
}

.total-row.final {
    font-weight: 700;
    border-top: 2px solid var(--color-gray-300);
    padding-top: var(--space-sm);
    margin-top: var(--space-sm);
}

.builder-sidebar {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-left: 1px solid var(--color-gray-200);
}

.sidebar-section h4 {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-md);
}

.block-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    font-size: 0.8125rem;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.block-item:hover {
    border-color: var(--color-primary);
}

.block-icon {
    font-size: 1rem;
}

/* ============================================
   COMPTABILITE PAGE STYLES
   ============================================ */

/* Connectors Showcase */
.connectors-showcase {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-lg);
}

.connector-card {
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    transition: all var(--transition-base);
}

.connector-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-lg);
}

.connector-card.featured {
    border-color: var(--color-primary);
    box-shadow: var(--shadow-lg);
}

.connector-logo {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.connector-initial {
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.25rem;
}

.connector-info h3 {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.connector-info p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-md);
}

.connector-features {
    list-style: none;
    padding: 0;
    margin: 0;
}

.connector-features li {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
    padding: var(--space-xs) 0;
    padding-left: var(--space-md);
    position: relative;
}

.connector-features li::before {
    content: "•";
    position: absolute;
    left: 0;
    color: var(--color-primary);
}

.connector-status {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: #dcfce7;
    color: var(--color-accent-green);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
    margin-top: var(--space-md);
}

/* Grand Livre Demo */
.grand-livre-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.gl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.gl-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.gl-period {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

.gl-content {
    padding: var(--space-lg);
}

.gl-section {
    margin-bottom: var(--space-xl);
}

.gl-section:last-child {
    margin-bottom: 0;
}

.gl-section-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-md);
}

.gl-section-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.gl-total {
    font-weight: 700;
    color: var(--color-primary);
}

.gl-accounts {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.gl-account {
    display: grid;
    grid-template-columns: 80px 1fr auto;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    align-items: center;
}

.account-num {
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.account-name {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.account-amount {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

/* Arrondis Demo */
.arrondis-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.arrondis-header {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
    color: var(--color-text-primary);
}

.arrondis-content {
    padding: var(--space-xl);
}

.arrondi-example {
    margin-bottom: var(--space-xl);
}

.example-header {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.example-modes {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.mode-item {
    display: grid;
    grid-template-columns: 1fr auto auto;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    border: 2px solid transparent;
    align-items: center;
}

.mode-item.selected {
    border-color: var(--color-primary);
    background: #e0f2fe;
}

.mode-name {
    font-weight: 500;
    color: var(--color-text-primary);
}

.mode-result {
    font-weight: 700;
    color: var(--color-primary);
    font-family: var(--font-mono);
}

.mode-rule {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.arrondi-scope {
    padding-top: var(--space-lg);
    border-top: 1px solid var(--color-gray-200);
}

.scope-label {
    font-size: 0.75rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-sm);
    display: block;
}

.scope-options {
    display: flex;
    gap: var(--space-sm);
}

.scope-option {
    padding: var(--space-xs) var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.scope-option.active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* Arrondi Modes List */
.arrondi-modes-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.arrondi-mode-item {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.mode-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.arrondi-mode-item strong {
    display: block;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.arrondi-mode-item p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Export Workflow */
.export-workflow {
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.export-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    min-width: 100px;
}

.export-step-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    transition: all var(--transition-base);
}

.export-step:hover .export-step-icon {
    background: var(--color-primary);
    color: var(--color-white);
}

.export-step.final .export-step-icon {
    background: var(--color-accent-green);
    color: var(--color-white);
}

.export-step h4 {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.export-step p {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.export-connector {
    color: var(--color-gray-400);
}

/* ============================================
   RECOUVREMENT PAGE STYLES
   ============================================ */

/* Acomptes Demo */
.acomptes-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.acomptes-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.acomptes-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.acomptes-total {
    font-weight: 700;
    color: var(--color-primary);
}

.acomptes-content {
    padding: var(--space-xl);
}

.acompte-line {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
}

.acompte-line.pending {
    background: #fef3c7;
    border: 1px dashed var(--color-accent-orange);
}

.acompte-info {
    display: flex;
    flex-direction: column;
}

.acompte-label {
    font-weight: 500;
    color: var(--color-text-primary);
}

.acompte-date {
    font-size: 0.8125rem;
    color: var(--color-text-tertiary);
}

.acompte-amount {
    font-weight: 600;
    font-family: var(--font-mono);
}

.acompte-amount.paid {
    color: var(--color-accent-green);
}

.acomptes-footer {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

.acomptes-footer .progress-bar {
    height: 8px;
    background: var(--color-gray-200);
    border-radius: var(--radius-full);
    overflow: hidden;
    margin-bottom: var(--space-sm);
}

.acomptes-footer .progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-green), #22c55e);
    border-radius: var(--radius-full);
}

.acomptes-footer .progress-label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-accent-green);
    text-align: center;
    display: block;
}

/* Dunning Stages Config */
.dunning-stages-config {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stage-config {
    display: flex;
    gap: var(--space-lg);
    align-items: flex-start;
}

.stage-marker {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.75rem;
    flex-shrink: 0;
}

.stage-marker.j7 {
    background: #fef3c7;
    color: var(--color-accent-orange);
}

.stage-marker.j15 {
    background: #fed7aa;
    color: #c2410c;
}

.stage-marker.j30 {
    background: #fee2e2;
    color: var(--color-accent-red);
}

.stage-marker.j45 {
    background: var(--color-gray-200);
    color: var(--color-text-secondary);
}

.stage-detail strong {
    display: block;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.stage-detail p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Echeancier Demo */
.echeancier-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.echeancier-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.echeancier-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.echeancier-status {
    padding: var(--space-xs) var(--space-md);
    background: #fef3c7;
    color: var(--color-accent-orange);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.echeancier-content {
    padding: var(--space-xl);
}

.echeancier-summary {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

.summary-item {
    text-align: center;
}

.summary-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
}

.summary-value {
    font-weight: 700;
    color: var(--color-text-primary);
}

.summary-value.paid {
    color: var(--color-accent-green);
}

.echeancier-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.echeance-line {
    display: grid;
    grid-template-columns: 100px 1fr auto;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--bg-light);
    border-radius: var(--radius-md);
    align-items: center;
}

.echeance-line.paid {
    opacity: 0.7;
}

.echeance-line.current {
    border: 2px solid var(--color-primary);
    background: #e0f2fe;
}

.echeance-date {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.echeance-amount {
    font-weight: 600;
    color: var(--color-text-primary);
}

.echeance-status {
    font-size: 0.75rem;
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

.echeance-line.paid .echeance-status {
    background: #dcfce7;
    color: var(--color-accent-green);
}

.echeance-line.current .echeance-status {
    background: #fef3c7;
    color: var(--color-accent-orange);
}

.echeancier-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

/* Lettrage Demo */
.lettrage-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.lettrage-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.lettrage-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.lettrage-date {
    font-size: 0.875rem;
    color: var(--color-text-tertiary);
}

.lettrage-content {
    padding: var(--space-xl);
}

.lettrage-match {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.lettrage-match.pending {
    border: 1px dashed var(--color-gray-300);
}

.match-bank, .match-invoice {
    margin-bottom: var(--space-md);
}

.match-label {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
}

.match-detail {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.match-ref {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.match-amount {
    font-weight: 600;
    color: var(--color-primary);
}

.match-connector {
    display: flex;
    justify-content: center;
    color: var(--color-accent-green);
    margin: var(--space-md) 0;
}

.match-actions {
    display: flex;
    gap: var(--space-sm);
    justify-content: flex-end;
}

.match-status {
    margin-top: var(--space-md);
}

.status-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-md);
    background: #fef3c7;
    color: var(--color-accent-orange);
    border-radius: var(--radius-full);
    font-size: 0.75rem;
    font-weight: 500;
}

.lettrage-summary {
    display: flex;
    justify-content: space-between;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
    font-size: 0.875rem;
}

.summary-matched {
    color: var(--color-accent-green);
    font-weight: 500;
}

/* Penalties Grid */
.penalties-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    gap: var(--space-xl);
}

.penalty-card {
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
    text-align: center;
}

.penalty-icon {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    background: linear-gradient(135deg, #fef2f2, #fee2e2);
    color: var(--color-accent-red);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--space-lg);
}

.penalty-card h4 {
    font-size: 1rem;
    color: var(--color-text-primary);
    margin-bottom: var(--space-sm);
}

.penalty-card p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin-bottom: var(--space-lg);
}

.penalty-example {
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-md);
}

.example-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
}

.example-value {
    font-weight: 700;
    color: var(--color-accent-red);
    font-size: 1.125rem;
}

/* ============================================
   OPERATIONS PAGE STYLES
   ============================================ */

/* Dispatch Flow Demo */
.dispatch-flow-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.dispatch-source {
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.dispatch-header {
    font-weight: 600;
    color: var(--color-text-primary);
    margin-bottom: var(--space-md);
}

.dispatch-lines {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.commercial-line {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-md);
}

.line-qty {
    font-weight: 600;
    color: var(--color-primary);
    font-size: 0.875rem;
}

.line-name {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.dispatch-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-primary);
    margin-bottom: var(--space-lg);
}

.dispatch-arrow span {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

.dispatch-targets {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.target-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    text-align: center;
}

.target-icon {
    font-size: 1.5rem;
}

.target-label {
    font-weight: 500;
    color: var(--color-text-primary);
    font-size: 0.875rem;
}

.target-count {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

/* Dispatch Interface Demo */
.dispatch-interface-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dispatch-ui-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
}

.dispatch-ui-header span:first-child {
    font-weight: 600;
    color: var(--color-text-primary);
}

.dispatch-status {
    font-size: 0.875rem;
    color: var(--color-accent-orange);
    font-weight: 500;
}

.dispatch-ui-content {
    padding: var(--space-xl);
}

.dispatch-line-item {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    gap: var(--space-md);
    align-items: center;
    padding: var(--space-md);
    background: var(--bg-light);
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.line-commercial, .line-technical {
    padding: var(--space-sm);
}

.line-badge {
    display: inline-block;
    padding: var(--space-xs) var(--space-sm);
    background: var(--color-gray-200);
    color: var(--color-text-tertiary);
    border-radius: var(--radius-sm);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    margin-bottom: var(--space-xs);
}

.line-badge.tech {
    background: #dcfce7;
    color: var(--color-accent-green);
}

.line-text {
    display: block;
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.line-arrow {
    font-size: 1.25rem;
    color: var(--color-gray-400);
}

.tech-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-xs);
}

.tech-select {
    padding: var(--space-xs) var(--space-sm);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
    background: var(--color-white);
}

.tech-count, .tech-date {
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
}

.dispatch-ui-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    background: var(--bg-light);
    border-top: 1px solid var(--color-gray-200);
}

/* Traceability Demo */
.traceability-demo {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.trace-header {
    padding: var(--space-lg);
    background: var(--bg-light);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
    color: var(--color-text-primary);
}

.trace-timeline {
    padding: var(--space-xl);
    position: relative;
}

.trace-timeline::before {
    content: "";
    position: absolute;
    left: calc(var(--space-xl) + 6px);
    top: var(--space-xl);
    bottom: var(--space-xl);
    width: 2px;
    background: var(--color-gray-200);
}

.trace-event {
    display: flex;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
    position: relative;
}

.trace-event.sub {
    margin-left: var(--space-xl);
}

.event-dot {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    background: var(--color-primary);
    flex-shrink: 0;
    position: relative;
    z-index: 1;
}

.event-dot.small {
    width: 8px;
    height: 8px;
    background: var(--color-gray-400);
    margin-left: 3px;
}

.trace-event.current .event-dot {
    background: var(--color-accent-orange);
    box-shadow: 0 0 0 4px #fef3c7;
}

.event-content {
    flex: 1;
}

.event-content.sub {
    padding-left: var(--space-sm);
}

.event-date {
    display: block;
    font-size: 0.75rem;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
}

.event-action {
    font-size: 0.875rem;
    color: var(--color-text-primary);
}

.event-content.sub .event-action {
    font-size: 0.8125rem;
    color: var(--color-text-secondary);
}

/* Traceability Features */
.traceability-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.trace-feature {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.trace-feature-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: var(--bg-light);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    flex-shrink: 0;
}

.trace-feature strong {
    display: block;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.trace-feature p {
    font-size: 0.875rem;
    color: var(--color-text-secondary);
    margin: 0;
}

/* Workflow Rules Grid */
.workflow-rules-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--space-xl);
}

.workflow-rule-card {
    padding: var(--space-xl);
    background: var(--color-white);
    border-radius: var(--radius-xl);
    border: 1px solid var(--color-gray-200);
}

.rule-trigger {
    padding: var(--space-md);
    background: #e0f2fe;
    border-radius: var(--radius-lg);
    margin-bottom: var(--space-md);
}

.rule-when, .rule-then {
    display: block;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--color-text-tertiary);
    margin-bottom: var(--space-xs);
}

.rule-event {
    font-weight: 600;
    color: var(--color-primary);
}

.rule-arrow {
    display: flex;
    justify-content: center;
    color: var(--color-gray-400);
    margin-bottom: var(--space-md);
}

.rule-actions {
    padding: var(--space-md);
    background: #dcfce7;
    border-radius: var(--radius-lg);
}

.rule-list {
    list-style: none;
    padding: 0;
    margin: 0;
}

.rule-list li {
    padding: var(--space-xs) 0;
    padding-left: var(--space-md);
    position: relative;
    font-size: 0.875rem;
    color: var(--color-text-secondary);
}

.rule-list li::before {
    content: "→";
    position: absolute;
    left: 0;
    color: var(--color-accent-green);
}

/* Integration Flow */
.integration-flow {
    position: relative;
    height: 400px;
    display: flex;
    align-items: center;
    justify-content: center;
}

.integration-center {
    position: relative;
    z-index: 2;
}

.center-logo {
    width: 120px;
    height: 120px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-white);
    font-weight: 700;
    font-size: 1.25rem;
    box-shadow: var(--shadow-xl);
}

.integration-items {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
}

.integration-item {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) rotate(var(--angle)) translateX(160px) rotate(calc(-1 * var(--angle)));
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.integration-icon {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    background: var(--color-white);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
    box-shadow: var(--shadow-md);
    transition: all var(--transition-base);
}

.integration-item:hover .integration-icon {
    background: var(--color-primary);
    color: var(--color-white);
    transform: scale(1.1);
}

.integration-item span {
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-text-secondary);
    white-space: nowrap;
}

/* ============================================
   FACTURATION RESPONSIVE
   ============================================ */

@media (max-width: 1200px) {
    .fact-comparison-hero {
        grid-template-columns: 1fr;
    }

    .fact-comparison-vs {
        justify-content: center;
        padding: var(--space-lg) 0;
    }

    .document-builder-demo {
        grid-template-columns: 1fr;
    }

    .builder-sidebar {
        border-left: none;
        border-top: 1px solid var(--color-gray-200);
    }

    .integration-flow {
        height: 300px;
    }

    .integration-item {
        transform: translate(-50%, -50%) rotate(var(--angle)) translateX(120px) rotate(calc(-1 * var(--angle)));
    }
}

@media (max-width: 992px) {
    .fact-workflow-visual {
        flex-direction: column;
    }

    .fact-workflow-connector {
        width: 2px;
        height: 24px;
    }

    .fact-workflow-connector::after {
        right: auto;
        left: 50%;
        top: auto;
        bottom: 0;
        transform: translateX(-50%);
        border: 4px solid transparent;
        border-top-color: var(--color-gray-300);
        border-left-color: transparent;
    }

    .dispatch-targets {
        grid-template-columns: 1fr;
    }

    .dispatch-line-item {
        grid-template-columns: 1fr;
        gap: var(--space-sm);
    }

    .line-arrow {
        transform: rotate(90deg);
        justify-self: center;
    }

    .echeancier-summary {
        grid-template-columns: 1fr;
    }

    .export-workflow {
        flex-direction: column;
    }

    .export-connector {
        transform: rotate(90deg);
    }
}

@media (max-width: 768px) {
    .scenarios-summary {
        flex-direction: column;
        gap: var(--space-xl);
    }

    .scenarios-coverage {
        width: 100%;
    }

    .threshold-example {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .threshold-config {
        flex-direction: column;
        align-items: flex-start;
    }

    .tva-line {
        grid-template-columns: 1fr 1fr;
        gap: var(--space-sm);
    }

    .canvas-table .table-header,
    .canvas-table .table-row {
        grid-template-columns: 1fr 1fr;
    }

    .zero-saisie-flow {
        flex-direction: column;
    }

    .zero-saisie-arrow {
        transform: rotate(90deg);
    }

    .zero-saisie-outputs {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: center;
    }

    .integration-flow {
        height: auto;
        flex-direction: column;
        gap: var(--space-xl);
        padding: var(--space-xl) 0;
    }

    .integration-items {
        position: relative;
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-lg);
    }

    .integration-item {
        position: relative;
        top: auto;
        left: auto;
        transform: none;
    }

    .lettrage-match .match-detail {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-xs);
    }
}

/* ========================================
   MODULE PROJETS (PSA)
   ======================================== */

/* PSA Flow diagram */
.psa-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    flex-wrap: wrap;
    padding: var(--space-2xl) 0;
}

.psa-flow-step {
    text-align: center;
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    min-width: 140px;
    transition: all var(--transition-normal);
}

.psa-flow-step:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-lg);
}

.psa-flow-arrow {
    flex-shrink: 0;
    color: var(--color-gray-400);
}

/* Timer Demo styles */
.timer-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.timer-display {
    font-family: 'Courier New', monospace;
    font-size: 3rem;
    font-weight: 700;
    color: var(--color-gray-800);
    text-align: center;
    letter-spacing: 2px;
}

.timer-display.timer-running {
    color: #00ACC1;
}

.timer-display.timer-paused {
    color: var(--color-accent-yellow);
}

.timer-controls {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.timer-btn {
    width: 56px;
    height: 56px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.timer-btn-start {
    background: linear-gradient(135deg, var(--color-accent-green), #5CB377);
    color: white;
}

.timer-btn-pause {
    background: linear-gradient(135deg, var(--color-accent-yellow), #F5B800);
    color: white;
}

.timer-btn-stop {
    background: linear-gradient(135deg, #E53935, #C62828);
    color: white;
}

.timer-btn:hover {
    transform: scale(1.1);
    box-shadow: var(--shadow-md);
}

/* P&L Mini Card */
.pnl-mini {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-md);
}

.pnl-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.pnl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
}

.pnl-total {
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 2px dashed var(--color-gray-200);
}

/* Gantt Preview */
.gantt-preview {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.gantt-header {
    display: flex;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.gantt-day {
    flex: 1;
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    font-weight: 500;
}

.gantt-row {
    display: flex;
    align-items: center;
    margin-bottom: var(--space-sm);
}

.gantt-task-name {
    width: 120px;
    flex-shrink: 0;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    padding-right: var(--space-sm);
}

.gantt-bar-container {
    flex: 1;
    height: 24px;
    position: relative;
}

.gantt-bar {
    position: absolute;
    height: 20px;
    border-radius: var(--radius-sm);
    top: 2px;
}

.gantt-bar-cyan {
    background: linear-gradient(90deg, #00ACC1, #0097A7);
}

.gantt-bar-green {
    background: linear-gradient(90deg, var(--color-accent-green), #5CB377);
}

.gantt-bar-yellow {
    background: linear-gradient(90deg, var(--color-accent-yellow), #F5B800);
}

.gantt-bar-purple {
    background: linear-gradient(90deg, var(--color-accent-purple), #7C4DFF);
}

/* Kanban Preview */
.kanban-preview {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
}

.kanban-column {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-md);
    min-height: 200px;
}

.kanban-column-header {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    margin-bottom: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.kanban-column-count {
    background: var(--color-gray-200);
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
}

.kanban-card {
    background: white;
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
    box-shadow: var(--shadow-sm);
    font-size: 0.75rem;
    border-left: 3px solid transparent;
    transition: all var(--transition-fast);
}

.kanban-card:hover {
    box-shadow: var(--shadow-md);
    transform: translateY(-2px);
}

.kanban-card-urgent {
    border-left-color: #E53935;
}

.kanban-card-high {
    border-left-color: var(--color-accent-yellow);
}

.kanban-card-normal {
    border-left-color: var(--color-accent-green);
}

/* Prediction Timeline */
.prediction-timeline {
    position: relative;
    padding: var(--space-lg) 0;
}

.prediction-line {
    height: 4px;
    background: var(--color-gray-200);
    border-radius: 2px;
}

.prediction-marker {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
}

.prediction-marker-dot {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    border: 3px solid white;
    box-shadow: var(--shadow-md);
}

.prediction-marker-label {
    position: absolute;
    top: 20px;
    left: 50%;
    transform: translateX(-50%);
    font-size: 0.625rem;
    white-space: nowrap;
}

/* Portail Client Demo */
.portail-demo {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-xl);
    overflow: hidden;
}

.portail-header {
    background: linear-gradient(135deg, var(--color-accent-purple), #7C4DFF);
    padding: var(--space-lg);
    color: white;
}

.portail-content {
    padding: var(--space-lg);
}

.portail-progress-bar {
    height: 8px;
    background: var(--color-gray-100);
    border-radius: 999px;
    overflow: hidden;
}

.portail-progress-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--color-accent-purple), #7C4DFF);
    transition: width 0.5s ease;
}

/* Commentaires Interne/Externe */
.comment-internal {
    background: rgba(229, 57, 53, 0.05);
    border-left: 3px solid #E53935;
}

.comment-external {
    background: rgba(114, 201, 143, 0.05);
    border-left: 3px solid var(--color-accent-green);
}

.comment-client {
    background: rgba(159, 122, 234, 0.05);
    border-left: 3px solid var(--color-accent-purple);
}

/* Validation Buttons */
.validation-btn {
    padding: var(--space-sm);
    border: none;
    border-radius: var(--radius-sm);
    font-weight: 600;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    transition: all var(--transition-fast);
}

.validation-btn-approve {
    background: var(--color-accent-green);
    color: white;
}

.validation-btn-approve:hover {
    background: #5CB377;
}

.validation-btn-reject {
    background: white;
    color: var(--color-gray-600);
    border: 1px solid var(--color-gray-300);
}

.validation-btn-reject:hover {
    border-color: #E53935;
    color: #E53935;
}

/* Feuille de temps */
.timesheet-table {
    width: 100%;
    border-collapse: collapse;
}

.timesheet-table th,
.timesheet-table td {
    padding: var(--space-sm);
    text-align: center;
    font-size: 0.875rem;
}

.timesheet-table th {
    background: var(--color-gray-50);
    font-weight: 600;
    color: var(--color-gray-600);
}

.timesheet-table td {
    border-bottom: 1px solid var(--color-gray-100);
}

.timesheet-cell {
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
    font-weight: 500;
}

.timesheet-cell-filled {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.timesheet-cell-empty {
    color: var(--color-gray-300);
}

/* Drill-down Hierarchy */
.drilldown-tree {
    padding-left: 0;
}

.drilldown-item {
    list-style: none;
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.drilldown-item:hover {
    background: var(--color-gray-50);
}

.drilldown-item-level-1 {
    background: var(--color-gray-50);
    font-weight: 600;
}

.drilldown-item-level-2 {
    margin-left: var(--space-lg);
}

.drilldown-item-level-3 {
    margin-left: calc(var(--space-lg) * 2);
}

/* Module Projets responsive */
@media (max-width: 768px) {
    .psa-flow {
        flex-direction: column;
    }

    .psa-flow-arrow {
        transform: rotate(90deg);
    }

    .kanban-preview {
        grid-template-columns: repeat(2, 1fr);
    }

    .gantt-task-name {
        width: 80px;
        font-size: 0.625rem;
    }

    .timer-display {
        font-size: 2rem;
    }

    .timer-btn {
        width: 48px;
        height: 48px;
    }
}

@media (max-width: 576px) {
    .kanban-preview {
        grid-template-columns: 1fr;
    }

    .kanban-column {
        min-height: auto;
    }

    .pnl-row {
        grid-template-columns: 1fr;
    }

    .portail-header h4 {
        font-size: 1rem;
    }
}

/* ========================================
   MODULE PROJETS - STYLES ADDITIONNELS
   ======================================== */

/* Comparison Boxes (Standard vs Xcelere) */
.comparison-boxes {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.comparison-box {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
}

.comparison-box.standard {
    background: rgba(229, 57, 53, 0.05);
    border-color: rgba(229, 57, 53, 0.2);
}

.comparison-box.xcelere {
    background: rgba(114, 201, 143, 0.05);
    border-color: rgba(114, 201, 143, 0.3);
}

.comparison-box-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    font-weight: 600;
}

.comparison-box.standard .comparison-box-header {
    color: #E53935;
}

.comparison-box.xcelere .comparison-box-header {
    color: var(--color-accent-green);
}

.comparison-box p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* P&L Realtime Demo */
.pnl-realtime-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
}

.realtime-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
}

.realtime-indicator {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-accent-green);
    font-weight: 500;
}

.realtime-indicator .pulse {
    width: 8px;
    height: 8px;
    background: var(--color-accent-green);
    border-radius: 50%;
    animation: pulse 1.5s ease-in-out infinite;
}

@keyframes pulse {
    0%, 100% { opacity: 1; transform: scale(1); }
    50% { opacity: 0.5; transform: scale(1.2); }
}

.realtime-metrics {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.metric-card {
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.metric-card.revenue {
    background: rgba(65, 157, 240, 0.1);
}

.metric-card.costs {
    background: rgba(229, 57, 53, 0.1);
}

.metric-card.margin {
    background: rgba(114, 201, 143, 0.1);
}

.metric-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    display: block;
    margin-bottom: var(--space-xs);
}

.metric-value {
    font-size: 1.25rem;
    font-weight: 700;
    display: block;
    margin-bottom: var(--space-xs);
}

.metric-card.revenue .metric-value { color: var(--color-primary); }
.metric-card.costs .metric-value { color: #E53935; }
.metric-card.margin .metric-value { color: var(--color-accent-green); }

.metric-trend {
    font-size: 0.75rem;
    font-weight: 500;
}

.metric-trend.up { color: var(--color-accent-green); }
.metric-trend.down { color: #E53935; }

/* Revenue Segments */
.revenue-segments {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.segment-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    border-left: 4px solid transparent;
}

.segment-item.recurring {
    border-left-color: var(--color-accent-green);
}

.segment-item.oneshot {
    border-left-color: #00ACC1;
}

.segment-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.segment-item.recurring .segment-icon {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.segment-item.oneshot .segment-icon {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.segment-content {
    flex: 1;
}

.segment-content strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.segment-content p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0 0 var(--space-xs);
}

.segment-value {
    font-weight: 600;
    color: var(--color-gray-700);
}

.segment-percent {
    font-size: 1.5rem;
    font-weight: 700;
    flex-shrink: 0;
}

.segment-item.recurring .segment-percent { color: var(--color-accent-green); }
.segment-item.oneshot .segment-percent { color: #00ACC1; }

/* Donut Chart Demo */
.donut-chart-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
    text-align: center;
}

.donut-visual {
    width: 200px;
    height: 200px;
    margin: 0 auto var(--space-lg);
    position: relative;
}

.donut-ring {
    width: 100%;
    height: 100%;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-accent-green) 0deg 327.6deg,
        #00ACC1 327.6deg 360deg
    );
    position: relative;
}

.donut-ring::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: white;
    border-radius: 50%;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
}

.donut-center-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-gray-800);
}

.donut-center-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.donut-legend {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.legend-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.legend-dot.recurring { background: var(--color-accent-green); }
.legend-dot.oneshot { background: #00ACC1; }

/* Drilldown Demo */
.drilldown-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    box-shadow: var(--shadow-lg);
}

.drilldown-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    padding-bottom: var(--space-md);
    border-bottom: 1px solid var(--color-gray-200);
}

.drilldown-breadcrumb {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.875rem;
}

.drilldown-breadcrumb span {
    color: var(--color-gray-400);
}

.drilldown-breadcrumb a {
    color: var(--color-primary);
    text-decoration: none;
}

.drilldown-breadcrumb a:hover {
    text-decoration: underline;
}

.drilldown-level {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    cursor: pointer;
    transition: all var(--transition-fast);
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.drilldown-level:hover {
    background: var(--color-gray-100);
}

.drilldown-level.active {
    background: rgba(65, 157, 240, 0.1);
    border-left: 3px solid var(--color-primary);
}

.drilldown-level-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.drilldown-level-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
}

.drilldown-level-name {
    font-weight: 600;
}

.drilldown-level-type {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.drilldown-level-value {
    font-weight: 600;
    color: var(--color-accent-green);
}

/* Canvas Table (Purchases/Invoices) */
.canvas-table {
    background: white;
    border-radius: var(--radius-lg);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.table-header {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.table-row {
    display: grid;
    grid-template-columns: 1.5fr 1fr 1.5fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
    align-items: center;
}

.table-row:last-child {
    border-bottom: none;
}

.table-row:hover {
    background: var(--color-gray-50);
}

.status {
    display: inline-flex;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status.pending {
    background: rgba(247, 200, 68, 0.2);
    color: #D4A000;
}

.status.paid {
    background: rgba(114, 201, 143, 0.2);
    color: var(--color-accent-green);
}

.status.overdue {
    background: rgba(229, 57, 53, 0.2);
    color: #E53935;
}

/* Billing Chain Demo */
.billing-link-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.billing-chain {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.chain-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
}

.chain-item.devis { border-left-color: var(--color-primary); }
.chain-item.projet { border-left-color: #00ACC1; }
.chain-item.facture { border-left-color: var(--color-accent-green); }

.chain-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    background: white;
    flex-shrink: 0;
}

.chain-item.devis .chain-icon { color: var(--color-primary); }
.chain-item.projet .chain-icon { color: #00ACC1; }
.chain-item.facture .chain-icon { color: var(--color-accent-green); }

.chain-type {
    font-weight: 600;
    width: 60px;
}

.chain-ref {
    font-family: monospace;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    flex: 1;
}

.chain-amount {
    font-weight: 600;
}

.chain-status {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.chain-status.signed {
    background: rgba(114, 201, 143, 0.2);
    color: var(--color-accent-green);
}

.chain-status.progress {
    background: rgba(0, 172, 193, 0.2);
    color: #00ACC1;
}

.chain-status.sent {
    background: rgba(65, 157, 240, 0.2);
    color: var(--color-primary);
}

.chain-connector {
    display: flex;
    justify-content: center;
    color: var(--color-gray-300);
}

/* Feature List Detailed */
.feature-list-detailed {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.feature-item-detailed {
    display: flex;
    gap: var(--space-md);
    align-items: flex-start;
}

.feature-icon-small {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(0, 172, 193, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ACC1;
    flex-shrink: 0;
}

.feature-item-detailed strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.feature-item-detailed p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Vues Tabs Demo (Gantt/Kanban) */
.views-tabs-demo {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.views-tabs {
    display: flex;
    border-bottom: 1px solid var(--color-gray-200);
}

.view-tab {
    flex: 1;
    padding: var(--space-md);
    text-align: center;
    font-weight: 500;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
    border-bottom: 2px solid transparent;
}

.view-tab.active {
    color: #00ACC1;
    border-bottom-color: #00ACC1;
    background: rgba(0, 172, 193, 0.05);
}

.views-content {
    padding: var(--space-lg);
}

/* ===== PROJ-GESTION PAGE STYLES ===== */

/* Views Showcase - Gantt & Kanban */
.views-showcase {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-xl);
}

.view-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-gray-100);
    transition: all var(--transition-base);
}

.view-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gray-200);
    transform: translateY(-4px);
}

.view-header {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-bottom: var(--space-lg);
}

.view-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.gantt-view .view-icon {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.kanban-view .view-icon {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.view-header h3 {
    flex: 1;
    margin: 0;
    font-size: 1.25rem;
}

.view-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.gantt-view .view-badge {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.kanban-view .view-badge {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.view-preview {
    background: var(--color-gray-50);
    border-radius: var(--radius-lg);
    padding: var(--space-lg);
    margin-bottom: var(--space-lg);
    min-height: 160px;
}

.view-features {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.view-features li {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.view-features li::before {
    content: '';
    width: 6px;
    height: 6px;
    background: var(--color-primary);
    border-radius: 50%;
    flex-shrink: 0;
}

/* Gantt Mini Preview */
.gantt-mini {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.gantt-mini-row {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.mini-task {
    width: 60px;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.mini-bar {
    height: 24px;
    border-radius: var(--radius-sm);
    position: relative;
}

.mini-bar.phase1 {
    background: linear-gradient(90deg, #00ACC1, #26C6DA);
}

.mini-bar.phase2 {
    background: linear-gradient(90deg, #72C98F, #81D497);
}

.mini-bar.phase3 {
    background: linear-gradient(90deg, #9F7AEA, #B794F4);
}

.mini-bar.phase4 {
    background: linear-gradient(90deg, #F7C844, #FFD54F);
}

/* Kanban Mini Preview */
.kanban-mini {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-sm);
    height: 100%;
}

.kanban-col {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-sm);
}

.col-header {
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
    text-align: center;
}

.mini-card {
    height: 28px;
    background: var(--color-gray-100);
    border-radius: var(--radius-sm);
    margin-bottom: var(--space-xs);
    border-left: 3px solid var(--color-gray-300);
}

.mini-card.active {
    background: rgba(0, 172, 193, 0.1);
    border-left-color: #00ACC1;
}

.mini-card.done {
    background: rgba(114, 201, 143, 0.1);
    border-left-color: var(--color-accent-green);
}

/* Template Benefits */
.template-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.benefit-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.benefit-item strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.benefit-item p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Templates Demo Card */
.templates-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.templates-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.templates-list {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.template-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.template-item:hover {
    background: var(--color-gray-100);
}

.template-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.template-icon.blue {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.template-icon.green {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.template-icon.orange {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.template-info {
    flex: 1;
}

.template-info strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.template-info span {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

/* Prediction Demo Enhanced */
.prediction-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.prediction-status {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.prediction-status.warning {
    background: rgba(247, 200, 68, 0.2);
    color: #D4A000;
}

.prediction-status.ok {
    background: rgba(114, 201, 143, 0.2);
    color: var(--color-accent-green);
}

.prediction-content {
    padding: var(--space-lg);
}

.prediction-dates {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-lg);
    margin-bottom: var(--space-lg);
}

.date-item {
    text-align: center;
    flex: 1;
}

.date-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.date-value {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.date-item.deadline .date-value {
    color: var(--color-text-primary);
}

.date-item.calculated .date-value {
    color: #D4A000;
}

.date-comparison {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.comparison-arrow {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.comparison-arrow.warning {
    background: rgba(247, 200, 68, 0.2);
    color: #D4A000;
}

.comparison-arrow.danger {
    background: rgba(229, 57, 53, 0.2);
    color: #E53935;
}

.comparison-text {
    font-size: 0.75rem;
    font-weight: 600;
    color: #D4A000;
}

.prediction-factors {
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    padding: var(--space-md);
}

.factors-title {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-sm);
}

.factor-item {
    display: flex;
    justify-content: space-between;
    font-size: 0.875rem;
    padding: var(--space-xs) 0;
}

.factor-name {
    color: var(--color-gray-600);
}

.factor-value {
    font-weight: 600;
}

/* Alerts Demo */
.alerts-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.alerts-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.alerts-count {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-500);
}

.alerts-list {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
    background: var(--color-gray-50);
}

.alert-item.critical {
    background: rgba(229, 57, 53, 0.05);
    border-left-color: #E53935;
}

.alert-item.warning {
    background: rgba(247, 200, 68, 0.08);
    border-left-color: #F7C844;
}

.alert-item.info {
    background: rgba(0, 172, 193, 0.05);
    border-left-color: #00ACC1;
}

.alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-item.critical .alert-icon {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

.alert-item.warning .alert-icon {
    background: rgba(247, 200, 68, 0.2);
    color: #D4A000;
}

.alert-item.info .alert-icon {
    background: rgba(0, 172, 193, 0.15);
    color: #00ACC1;
}

.alert-content {
    flex: 1;
}

.alert-content strong {
    display: block;
    margin-bottom: var(--space-xs);
    font-size: 0.875rem;
}

.alert-content p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0;
}

.alert-time {
    font-size: 0.75rem;
    color: var(--color-gray-400);
    flex-shrink: 0;
}

/* Alert Types List */
.alert-types {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.alert-type-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.type-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.type-icon.critical {
    background: rgba(229, 57, 53, 0.1);
    color: #E53935;
}

.type-icon.warning {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.type-icon.info {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.alert-type-item strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.alert-type-item p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Responsive for proj-gestion */
@media (max-width: 768px) {
    .views-showcase {
        grid-template-columns: 1fr;
    }

    .prediction-dates {
        flex-direction: column;
    }

    .date-comparison {
        flex-direction: row;
    }
}

/* ===== END PROJ-GESTION STYLES ===== */

/* ===== INTERVENTIONS MODULE STYLES ===== */

/* USPs Grid */
.usps-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.usp-card {
    text-align: center;
    padding: var(--space-lg);
}

.usp-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.usp-card h3 {
    margin-bottom: var(--space-sm);
}

.usp-card p {
    color: var(--color-gray-600);
    font-size: 0.9375rem;
    margin: 0;
}

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

/* Pillars Grid */
.pillars-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
}

.pillar-card {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    border: 2px solid var(--color-gray-100);
    text-decoration: none;
    color: inherit;
    transition: all var(--transition-base);
}

.pillar-card:hover {
    box-shadow: var(--shadow-lg);
    border-color: var(--color-gray-200);
    transform: translateY(-4px);
}

.pillar-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.pillar-icon.command-center {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.pillar-icon.mobility {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.pillar-icon.assets {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.pillar-icon.logistics {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.pillar-content {
    flex: 1;
}

.pillar-badge {
    display: inline-block;
    padding: 4px 10px;
    background: var(--color-gray-100);
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
    margin-bottom: var(--space-xs);
}

.pillar-content h3 {
    margin: 0 0 var(--space-xs);
    font-size: 1.125rem;
}

.pillar-content p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.pillar-arrow {
    color: var(--color-gray-400);
    transition: all var(--transition-fast);
}

.pillar-card:hover .pillar-arrow {
    color: var(--color-primary);
    transform: translateX(4px);
}

/* FSM Flow Diagram */
.fsm-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--space-xl);
    overflow-x: auto;
}

.flow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
    min-width: 100px;
}

.flow-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.flow-icon.crm {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.flow-icon.intervention {
    background: rgba(255, 152, 0, 0.15);
    color: #FF9800;
}

.flow-icon.stock {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.flow-icon.facture {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.flow-step.active .flow-icon {
    box-shadow: 0 0 0 3px rgba(255, 152, 0, 0.3);
}

.flow-label {
    font-weight: 600;
    font-size: 0.875rem;
}

.flow-source {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.flow-arrow {
    color: var(--color-gray-300);
    flex-shrink: 0;
}

.flow-benefits {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
    flex-wrap: wrap;
}

.flow-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    color: var(--color-accent-green);
}

/* Comparison Table */
.comparison-table-wrapper {
    overflow-x: auto;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
}

.comparison-table {
    width: 100%;
    border-collapse: collapse;
}

.comparison-table th,
.comparison-table td {
    padding: var(--space-md) var(--space-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-gray-100);
}

.comparison-table thead th {
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.875rem;
}

.comparison-table thead th small {
    display: block;
    font-weight: 400;
    color: var(--color-gray-500);
    margin-top: var(--space-xs);
}

.comparison-table thead th.highlight {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.comparison-table tbody td {
    font-size: 0.875rem;
}

.comparison-table tbody td.highlight {
    background: rgba(255, 152, 0, 0.05);
}

.comparison-table tbody tr:last-child td {
    border-bottom: none;
}

.comparison-table .level {
    display: inline-block;
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

.comparison-table .level.basic {
    background: rgba(229, 57, 53, 0.1);
    color: #E53935;
}

.comparison-table .level.advanced {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.comparison-table .level.optimized {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.comparison-table .status-icon {
    display: inline-block;
    width: 18px;
    height: 18px;
    border-radius: 50%;
    vertical-align: middle;
    margin-right: var(--space-xs);
}

.comparison-table .status-icon.yes {
    background: var(--color-accent-green);
}

.comparison-table .status-icon.no {
    background: #E53935;
}

.comparison-table .status-icon.partial {
    background: #F7C844;
}

/* Status Legend & Dots */
.status-legend {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
}

.status-dot {
    width: 12px;
    height: 12px;
    border-radius: 50%;
}

.status-dot.todo {
    background: var(--color-gray-400);
}

.status-dot.in-progress {
    background: #00ACC1;
}

.status-dot.done {
    background: var(--color-accent-green);
}

.status-dot.billed {
    background: var(--color-accent-purple);
}

/* Workorders Demo */
.workorders-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.workorders-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.workorders-filters {
    display: flex;
    gap: var(--space-xs);
}

.filter-tag {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.filter-tag.active {
    background: var(--color-primary);
    color: white;
}

.workorders-list {
    padding: var(--space-md);
}

.workorder-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.workorder-item:hover {
    background: var(--color-gray-50);
}

.wo-status {
    width: 12px;
    height: 12px;
    border-radius: 50%;
    flex-shrink: 0;
}

.wo-status.todo {
    background: var(--color-gray-400);
}

.wo-status.in-progress {
    background: #00ACC1;
}

.wo-status.done {
    background: var(--color-accent-green);
}

.wo-info {
    flex: 1;
}

.wo-info strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.wo-info span {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
}

.wo-tech {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
}

.tech-avatar {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--color-primary);
    color: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
}

/* Workflow Statuses */
.workflow-statuses {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.workflow-status {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.status-pill {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.status-pill.todo {
    background: var(--color-gray-200);
    color: var(--color-gray-700);
}

.status-pill.in-progress {
    background: rgba(0, 172, 193, 0.15);
    color: #00ACC1;
}

.status-pill.done {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.status-pill.billed {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-accent-purple);
}

.workflow-status p {
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Lifecycle Demo */
.lifecycle-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    padding: var(--space-xl);
}

.lifecycle-header {
    text-align: center;
    font-weight: 600;
    margin-bottom: var(--space-xl);
}

.lifecycle-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-xl);
}

.lifecycle-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.step-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 0.875rem;
}

.step-circle.todo {
    background: var(--color-gray-200);
    color: var(--color-gray-600);
}

.step-circle.in-progress {
    background: #00ACC1;
    color: white;
}

.step-circle.done {
    background: var(--color-accent-green);
    color: white;
}

.step-circle.billed {
    background: var(--color-accent-purple);
    color: white;
}

.lifecycle-step span {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

.lifecycle-connector {
    width: 40px;
    height: 2px;
    background: var(--color-gray-200);
}

.lifecycle-current {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: rgba(0, 172, 193, 0.1);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: #00ACC1;
}

/* Dispatch Demo */
.dispatch-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.dispatch-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.dispatch-content {
    padding: var(--space-lg);
}

.dispatch-intervention {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-lg);
}

.dispatch-intervention strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.dispatch-intervention span {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.dispatch-date {
    margin-top: var(--space-sm);
    color: var(--color-primary) !important;
    font-weight: 500;
}

.dispatch-techs {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.techs-label {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.tech-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 2px solid var(--color-gray-100);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.tech-option:hover {
    border-color: var(--color-gray-200);
}

.tech-option.selected {
    border-color: var(--color-primary);
    background: rgba(65, 157, 240, 0.05);
}

.tech-details {
    flex: 1;
}

.tech-details strong {
    display: block;
    font-size: 0.875rem;
}

.tech-details span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.tech-load {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
}

.tech-load.low {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.tech-load.medium {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.tech-load.high {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

/* SLA Demo */
.sla-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.sla-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.sla-filter {
    font-size: 0.75rem;
    font-weight: 500;
    padding: 4px 10px;
    background: var(--color-gray-100);
    border-radius: 999px;
    color: var(--color-gray-600);
}

.sla-list {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.sla-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
}

.sla-indicator {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.sla-item.critical .sla-indicator {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

.sla-item.warning .sla-indicator {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.sla-item.ok .sla-indicator {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.sla-info {
    flex: 1;
}

.sla-info strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.sla-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.sla-badge {
    padding: 4px 10px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
}

.sla-badge.critical {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

.sla-badge.warning {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.sla-badge.ok {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

/* Control Tower Demo */
.control-tower-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.tower-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.tower-title {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
}

.tower-filters {
    display: flex;
    gap: var(--space-sm);
}

.filter-select {
    padding: 6px 12px;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    font-size: 0.75rem;
    background: white;
    color: var(--color-gray-600);
}

.tower-stats {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg);
    background: var(--color-gray-50);
}

.tower-stat {
    text-align: center;
    position: relative;
}

.stat-number {
    display: block;
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--color-text-primary);
}

.tower-stat .stat-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.stat-indicator {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    position: absolute;
    top: 0;
    right: calc(50% - 30px);
}

.stat-indicator.todo {
    background: var(--color-gray-400);
}

.stat-indicator.in-progress {
    background: #00ACC1;
}

.stat-indicator.done {
    background: var(--color-accent-green);
}

.stat-indicator.critical {
    background: #E53935;
}

.tower-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-md);
    padding: var(--space-lg);
}

.tower-card {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border-left: 3px solid var(--color-gray-300);
}

.tower-card .card-status {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    display: inline-block;
    margin-bottom: var(--space-xs);
}

.tower-card .card-status.in-progress {
    background: #00ACC1;
}

.tower-card .card-status.todo {
    background: var(--color-gray-400);
}

.tower-card .card-status.done {
    background: var(--color-accent-green);
}

.tower-card .card-status.critical {
    background: #E53935;
}

.tower-card strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.tower-card span {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.tower-card .card-tech {
    margin-top: var(--space-sm);
    font-weight: 500;
    color: var(--color-gray-600);
}

.tower-card.urgent {
    border-left-color: #E53935;
    background: rgba(229, 57, 53, 0.05);
}

/* Checklist Demo */
.checklist-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.checklist-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.checklist-progress {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-primary);
}

.checklist-tasks {
    padding: var(--space-md);
}

.task-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    transition: all var(--transition-fast);
}

.task-item:hover {
    background: var(--color-gray-50);
}

.task-check {
    width: 24px;
    height: 24px;
    border-radius: 50%;
    border: 2px solid var(--color-gray-300);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.task-item.completed .task-check {
    background: var(--color-accent-green);
    border-color: var(--color-accent-green);
    color: white;
}

.task-item.current .task-check {
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px rgba(65, 157, 240, 0.2);
}

.task-name {
    font-size: 0.875rem;
}

.task-item.completed .task-name {
    text-decoration: line-through;
    color: var(--color-gray-500);
}

/* Smart Input Demo */
.smart-input-features {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.smart-feature {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.smart-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.smart-feature strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.smart-feature p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

.smart-input-demo {
    display: flex;
    justify-content: center;
}

.mobile-frame {
    width: 280px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    border: 8px solid var(--color-gray-800);
}

.mobile-header {
    padding: var(--space-md);
    background: var(--color-gray-800);
    color: white;
    text-align: center;
    font-weight: 600;
    font-size: 0.875rem;
}

.mobile-content {
    padding: var(--space-lg);
}

.tag-section {
    margin-bottom: var(--space-lg);
}

.tag-label {
    display: block;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.tags-row {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-xs);
}

.tags-row .tag {
    padding: 6px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    background: var(--color-gray-100);
    color: var(--color-gray-600);
    cursor: pointer;
}

.tags-row .tag.selected {
    background: var(--color-accent-green);
    color: white;
}

.quantity-section {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.qty-label {
    font-size: 0.875rem;
}

.qty-control {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.qty-btn {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    border: 1px solid var(--color-gray-300);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
    cursor: pointer;
}

.qty-value {
    font-weight: 700;
    min-width: 30px;
    text-align: center;
}

/* Time Tracking Demo */
.time-tracking-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.tracking-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.tracking-status {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.tracking-status.active {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.tracking-display {
    padding: var(--space-xl);
    text-align: center;
}

.time-main {
    font-size: 3rem;
    font-weight: 700;
    font-family: 'Inter', monospace;
    color: var(--color-text-primary);
    margin-bottom: var(--space-lg);
}

.time-details {
    display: flex;
    justify-content: center;
    gap: var(--space-xl);
}

.time-detail {
    text-align: center;
}

.detail-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.detail-value {
    font-weight: 600;
}

.tracking-actions {
    display: flex;
    justify-content: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
}

.track-btn {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-lg);
    border-radius: var(--radius-md);
    border: none;
    font-weight: 600;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.track-btn.pause {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.track-btn.stop {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

.tracking-comparison {
    display: flex;
    justify-content: space-between;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
}

.comparison-item {
    text-align: center;
}

.comparison-item .comparison-label {
    display: block;
    font-size: 0.75rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.comparison-item .comparison-value {
    font-weight: 700;
}

.comparison-item.warning .comparison-value {
    color: #D4A000;
}

/* Proofs Grid */
.proofs-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.proof-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
    text-align: center;
}

.proof-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
    display: flex;
    align-items: center;
    justify-content: center;
}

.proof-card h3 {
    margin-bottom: var(--space-sm);
}

.proof-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.proof-demo {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
}

.photo-slot {
    width: 80px;
    height: 60px;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.photo-slot.before {
    border: 2px dashed var(--color-gray-300);
}

.photo-slot.after {
    border: 2px solid var(--color-accent-green);
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.signature-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.signature-pad {
    width: 200px;
    height: 80px;
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    background: var(--color-gray-50);
    margin-bottom: var(--space-sm);
}

.signature-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.pdf-demo {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.pdf-preview {
    width: 100px;
    height: 120px;
    background: white;
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    padding: var(--space-sm);
    margin-bottom: var(--space-sm);
}

.pdf-header {
    height: 12px;
    background: var(--color-primary);
    border-radius: 2px;
    margin-bottom: var(--space-sm);
}

.pdf-line {
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 2px;
    margin-bottom: var(--space-xs);
}

.pdf-line.short {
    width: 60%;
}

.pdf-label {
    font-size: 0.75rem;
    font-weight: 600;
}

/* GPS Demo */
.gps-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.gps-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.gps-map {
    height: 150px;
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e8ee 100%);
    position: relative;
}

.map-placeholder {
    width: 100%;
    height: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.map-pin {
    color: #E53935;
    animation: bounce 1s infinite;
}

@keyframes bounce {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-10px); }
}

.gps-details {
    display: flex;
    justify-content: space-around;
    padding: var(--space-md);
    background: var(--color-gray-50);
}

.gps-coord {
    text-align: center;
}

.coord-label {
    display: block;
    font-size: 0.625rem;
    color: var(--color-gray-500);
    text-transform: uppercase;
}

.coord-value {
    font-weight: 600;
    font-size: 0.875rem;
}

.gps-equipment {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
}

.equip-qr {
    color: var(--color-gray-400);
}

.equip-info strong {
    display: block;
    font-size: 0.875rem;
}

.equip-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* History Demo */
.history-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.history-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.history-equipment {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.history-equipment svg {
    color: var(--color-primary);
}

.history-equipment strong {
    display: block;
}

.history-equipment span {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.history-timeline {
    padding: var(--space-md);
}

.timeline-item {
    display: flex;
    gap: var(--space-md);
    padding: var(--space-md);
    border-left: 2px solid var(--color-gray-200);
    margin-left: var(--space-lg);
    position: relative;
}

.timeline-item::before {
    content: '';
    position: absolute;
    left: -7px;
    top: var(--space-md);
    width: 12px;
    height: 12px;
    border-radius: 50%;
    background: white;
    border: 2px solid var(--color-gray-300);
}

.timeline-date {
    text-align: center;
    min-width: 50px;
}

.date-day {
    display: block;
    font-size: 1.25rem;
    font-weight: 700;
}

.date-month {
    font-size: 0.625rem;
    color: var(--color-gray-500);
}

.timeline-content {
    flex: 1;
}

.timeline-type {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.timeline-type.maintenance {
    background: rgba(0, 172, 193, 0.15);
    color: #00ACC1;
}

.timeline-type.repair {
    background: rgba(255, 152, 0, 0.15);
    color: #FF9800;
}

.timeline-type.install {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.timeline-content strong {
    display: block;
    font-size: 0.875rem;
    margin-bottom: 2px;
}

.timeline-tech {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Asset Card Demo */
.asset-card-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.asset-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-xl);
    border-bottom: 1px solid var(--color-gray-100);
}

.asset-identity {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.asset-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
}

.asset-identity h3 {
    margin: 0;
}

.asset-serial {
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.asset-status {
    padding: 6px 14px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.asset-status.active {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.asset-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-lg);
    padding: var(--space-xl);
}

.asset-section h4 {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    padding-bottom: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-100);
}

.info-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-xs) 0;
    font-size: 0.875rem;
}

.info-label {
    color: var(--color-gray-500);
}

.info-value {
    font-weight: 500;
}

.info-value.warning {
    color: #D4A000;
}

.mini-map {
    height: 80px;
    background: linear-gradient(135deg, #e8f4f8 0%, #d4e8ee 100%);
    border-radius: var(--radius-md);
    position: relative;
    margin-bottom: var(--space-sm);
}

.mini-pin {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 16px;
    height: 16px;
    background: #E53935;
    border-radius: 50% 50% 50% 0;
    transform: translate(-50%, -50%) rotate(-45deg);
}

.asset-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-sm);
    padding: var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

/* Stock Demo */
.stock-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.stock-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.stock-status {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.75rem;
    font-weight: 500;
    color: var(--color-accent-green);
}

.pulse {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    animation: pulse 1.5s infinite;
}

.pulse.green {
    background: var(--color-accent-green);
}

@keyframes pulse {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

.stock-transaction {
    padding: var(--space-md);
}

.transaction-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--color-gray-50);
}

.transaction-item.warning {
    background: rgba(247, 200, 68, 0.1);
}

.item-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.item-details {
    flex: 1;
}

.item-details strong {
    display: block;
    font-size: 0.875rem;
}

.item-details span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.item-qty {
    text-align: right;
}

.qty-change {
    display: block;
    font-weight: 700;
    color: #E53935;
}

.qty-remaining {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.qty-remaining.warning {
    color: #D4A000;
    font-weight: 600;
}

/* Subunit Demo */
.subunit-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.subunit-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.subunit-content {
    padding: var(--space-xl);
    display: flex;
    gap: var(--space-xl);
}

.subunit-visual {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-md);
}

.bidon-visual {
    width: 80px;
    height: 120px;
    border: 3px solid var(--color-gray-300);
    border-radius: var(--radius-md);
    position: relative;
    overflow: hidden;
}

.bidon-level {
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
    background: linear-gradient(to top, #00ACC1, #4DD0E1);
}

.bidon-info {
    text-align: center;
}

.bidon-info strong {
    display: block;
    font-size: 1.5rem;
}

.bidon-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.subunit-stats {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.stat-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.stat-row span {
    color: var(--color-gray-600);
}

.stat-row strong {
    color: var(--color-text-primary);
}

/* Unit Example */
.unit-example {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.unit-card {
    flex: 1;
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
    text-align: center;
}

.unit-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-sm);
}

.unit-card .unit-icon {
    margin: 0 auto var(--space-sm);
}

.unit-card.purchase .unit-icon {
    color: var(--color-accent-purple);
}

.unit-card.consume .unit-icon {
    color: var(--color-accent-green);
}

.unit-card strong {
    display: block;
    margin-bottom: 2px;
}

.unit-card span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.unit-arrow {
    color: var(--color-gray-400);
}

/* Depots Demo */
.depots-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.depots-header {
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.depots-list {
    padding: var(--space-md);
}

.depot-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    margin-bottom: var(--space-sm);
    background: var(--color-gray-50);
}

.depot-item.main {
    background: rgba(65, 157, 240, 0.1);
    border: 1px solid rgba(65, 157, 240, 0.2);
}

.depot-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: white;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
}

.depot-item.main .depot-icon {
    color: var(--color-primary);
}

.depot-info {
    flex: 1;
}

.depot-info strong {
    display: block;
    font-size: 0.875rem;
}

.depot-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.depot-count {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
}

.depot-transfer {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-sm);
    padding: var(--space-md);
    background: var(--color-gray-50);
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

/* AI Features Grid */
.ai-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.ai-feature-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.ai-icon {
    width: 56px;
    height: 56px;
    margin-bottom: var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-feature-card h3 {
    margin-bottom: var(--space-sm);
}

.ai-feature-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.ai-demo {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.ai-demo.voice {
    text-align: center;
}

.voice-wave {
    display: flex;
    justify-content: center;
    gap: 4px;
    margin-bottom: var(--space-sm);
}

.voice-wave span {
    width: 4px;
    height: 20px;
    background: var(--color-accent-purple);
    border-radius: 2px;
    animation: wave 0.8s ease-in-out infinite;
}

.voice-wave span:nth-child(2) { animation-delay: 0.1s; }
.voice-wave span:nth-child(3) { animation-delay: 0.2s; }
.voice-wave span:nth-child(4) { animation-delay: 0.3s; }
.voice-wave span:nth-child(5) { animation-delay: 0.4s; }

@keyframes wave {
    0%, 100% { height: 10px; }
    50% { height: 30px; }
}

.voice-text {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--color-gray-600);
}

.ai-demo.transform {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.transform-before,
.transform-after {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.transform-before {
    background: rgba(229, 57, 53, 0.1);
}

.transform-after {
    background: rgba(114, 201, 143, 0.1);
}

.transform-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
    color: var(--color-gray-500);
}

.transform-before p,
.transform-after p {
    font-size: 0.75rem;
    margin: 0;
    color: var(--color-gray-700);
}

.transform-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    color: var(--color-accent-purple);
    font-size: 0.75rem;
    font-weight: 600;
}

.ai-demo.pdf {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ai-demo.pdf .pdf-icon {
    color: #E53935;
}

.ai-demo.pdf .pdf-info {
    flex: 1;
}

.ai-demo.pdf .pdf-info strong {
    display: block;
    font-size: 0.875rem;
}

.ai-demo.pdf .pdf-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.pdf-badge {
    padding: 4px 10px;
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
}

/* Responsive for Interventions */
@media (max-width: 992px) {
    .pillars-grid {
        grid-template-columns: 1fr;
    }

    .proofs-grid {
        grid-template-columns: 1fr;
    }

    .ai-features-grid {
        grid-template-columns: 1fr;
    }

    .asset-grid {
        grid-template-columns: 1fr;
    }
}

@media (max-width: 768px) {
    .fsm-flow {
        flex-direction: column;
    }

    .flow-arrow {
        transform: rotate(90deg);
    }

    .tower-stats,
    .tower-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .workflow-statuses {
        grid-template-columns: 1fr;
    }

    .comparison-table-wrapper {
        overflow-x: auto;
    }

    .unit-example {
        flex-direction: column;
    }

    .unit-arrow {
        transform: rotate(90deg);
    }
}

/* ===== END INTERVENTIONS STYLES ===== */

/* ===== SUPPORT MODULE STYLES ===== */

/* Support USPs */
.support-usps .usp-icon.support {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

/* Support Pillars */
.support-pillars .pillar-icon.console {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.support-pillars .pillar-icon.tickets {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.support-pillars .pillar-icon.sla {
    background: rgba(255, 152, 0, 0.1);
    color: #FF9800;
}

.support-pillars .pillar-icon.portal {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

/* Flow Icons for Support */
.flow-icon.ticket {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.flow-icon.devis {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

/* Ticket Demo on Main Support Page */
.ticket-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ticket-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.ticket-info {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.ticket-id {
    font-weight: 600;
    font-family: 'Inter', monospace;
}

.ticket-status {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ticket-status.in-progress {
    background: rgba(0, 172, 193, 0.15);
    color: #00ACC1;
}

.ticket-sla .sla-badge {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.ticket-sla .sla-badge.warning {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.ticket-subject {
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.ticket-subject strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.ticket-client {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

.ticket-thread {
    padding: var(--space-lg);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    max-height: 200px;
    overflow-y: auto;
}

.thread-message {
    display: flex;
    gap: var(--space-md);
}

.message-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
    flex-shrink: 0;
}

.message-avatar.agent {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-accent-purple);
}

.message-content {
    flex: 1;
    background: var(--color-gray-50);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
}

.thread-message.agent .message-content {
    background: rgba(159, 122, 234, 0.08);
}

.message-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-xs);
}

.message-header strong {
    font-size: 0.875rem;
}

.message-header span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.message-content p {
    font-size: 0.875rem;
    margin: 0;
    color: var(--color-gray-700);
}

.ticket-actions {
    display: flex;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
    background: var(--color-gray-50);
}

.action-btn {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    background: white;
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
    transition: all var(--transition-fast);
}

.action-btn:hover {
    background: var(--color-gray-50);
}

.action-btn.primary {
    background: var(--color-accent-purple);
    color: white;
    border-color: var(--color-accent-purple);
}

.action-btn.primary:hover {
    background: #8E6DD0;
}

/* Status Dots */
.status-dot.received {
    background: var(--color-gray-400);
}

.status-dot.waiting {
    background: #FFB300;
}

.status-dot.resolved {
    background: var(--color-accent-green);
}

/* Multi-Instance Demo */
.multi-instance-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.instance-mother {
    padding: var(--space-lg);
    border-bottom: 2px solid var(--color-gray-100);
}

.instance-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-lg);
    font-weight: 600;
    color: var(--color-accent-purple);
}

.instance-tickets {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.unified-ticket {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.ticket-instance {
    width: 28px;
    height: 28px;
    border-radius: var(--radius-sm);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 700;
    color: white;
}

.ticket-instance.stark {
    background: #E53935;
}

.ticket-instance.wayne {
    background: #1E3A5F;
}

.ticket-instance.oscorp {
    background: #388E3C;
}

.ticket-ref {
    font-family: 'Inter', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
}

.ticket-title {
    flex: 1;
    font-size: 0.875rem;
}

.instances-children {
    display: flex;
    justify-content: space-around;
    padding: var(--space-lg);
    background: var(--color-gray-50);
}

.instance-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.child-logo {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    color: white;
}

.instance-child.stark .child-logo {
    background: #E53935;
}

.instance-child.wayne .child-logo {
    background: #1E3A5F;
}

.instance-child.oscorp .child-logo {
    background: #388E3C;
}

.instance-child span {
    font-size: 0.75rem;
    color: var(--color-gray-600);
}

/* Delegation Demo */
.delegation-demo {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.delegation-flow {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-lg);
}

.delegation-entity {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-sm);
    text-align: center;
}

.delegation-entity .entity-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
}

.delegation-entity.client-a .entity-icon {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.delegation-entity.partner-b .entity-icon {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.delegation-entity strong {
    display: block;
}

.delegation-entity span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.delegation-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-gray-400);
}

.delegation-arrow span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Mapping Demo */
.mapping-demo {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.mapping-external,
.mapping-local {
    flex: 1;
    padding: var(--space-md);
    border-radius: var(--radius-lg);
}

.mapping-external {
    background: rgba(0, 172, 193, 0.05);
    border: 1px solid rgba(0, 172, 193, 0.2);
}

.mapping-local {
    background: rgba(159, 122, 234, 0.05);
    border: 1px solid rgba(159, 122, 234, 0.2);
}

.mapping-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
    text-transform: uppercase;
}

.mapping-user {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.mapping-user .user-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 600;
}

.mapping-user .user-avatar.local {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-accent-purple);
}

.mapping-user .user-info {
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.mapping-user .user-info strong {
    font-size: 0.875rem;
}

.mapping-user .user-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.mapping-badge {
    display: inline-block;
    padding: 2px 8px;
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
    border-radius: 999px;
    font-size: 0.625rem;
    font-weight: 600;
}

.mapping-arrow {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-gray-400);
}

.mapping-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Mapping Benefits */
.mapping-benefits {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
    margin-top: var(--space-lg);
}

.mapping-benefit {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.mapping-benefit .benefit-icon {
    width: 40px;
    height: 40px;
    border-radius: var(--radius-md);
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.mapping-benefit div {
    display: flex;
    flex-direction: column;
}

.mapping-benefit strong {
    font-size: 0.875rem;
}

.mapping-benefit span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Flux Demo */
.flux-demo {
    display: flex;
    gap: var(--space-xl);
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.flux-column {
    flex: 1;
}

.flux-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    margin-bottom: var(--space-sm);
}

.flux-column.internal .flux-header {
    color: var(--color-accent-purple);
}

.flux-column.external .flux-header {
    color: #00ACC1;
}

.flux-description {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.flux-examples {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.flux-example {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
}

.flux-example .example-icon {
    color: var(--color-gray-500);
}

.flux-separator {
    display: flex;
    align-items: center;
    padding: 0 var(--space-md);
}

.separator-line {
    width: 2px;
    height: 100%;
    min-height: 200px;
    background: linear-gradient(to bottom, var(--color-accent-purple), #00ACC1);
    border-radius: 1px;
}

/* Channels Grid */
.channels-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-xl);
}

.channel-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.channel-icon {
    width: 64px;
    height: 64px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.channel-icon.email {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.channel-icon.portal {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.channel-icon.agent {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.channel-card h3 {
    margin-bottom: var(--space-sm);
}

.channel-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.channel-demo {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

/* Email to Ticket Demo */
.email-to-ticket {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.email-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    flex: 1;
}

.email-from {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.email-subject {
    font-size: 0.875rem;
    font-weight: 600;
}

.conversion-arrow {
    color: var(--color-gray-400);
}

.ticket-preview {
    display: flex;
    flex-direction: column;
    gap: 2px;
    align-items: flex-end;
}

.ticket-auto {
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-accent-green);
    text-transform: uppercase;
}

/* Portal Form Demo */
.portal-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.form-field {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.field-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.field-value {
    font-size: 0.875rem;
    font-weight: 600;
}

.field-value.urgent {
    color: #E53935;
}

/* Agent Create Demo */
.agent-create {
    text-align: center;
}

.create-btn {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-accent-purple);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    font-weight: 500;
    cursor: pointer;
}

/* Ticket Workflow */
.ticket-workflow {
    display: flex;
    align-items: flex-start;
    justify-content: center;
    gap: 0;
    margin-bottom: var(--space-2xl);
}

.workflow-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
    text-align: center;
    min-width: 100px;
}

.step-circle {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
}

.step-circle.received {
    background: var(--color-gray-400);
}

.step-circle.waiting {
    background: #FFB300;
}

.step-circle.in-progress {
    background: #00ACC1;
}

.step-circle.resolved {
    background: var(--color-accent-green);
}

.step-circle.closed {
    background: var(--color-accent-purple);
}

.step-label {
    font-weight: 600;
    font-size: 0.875rem;
}

.step-desc {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.workflow-connector {
    width: 60px;
    height: 2px;
    background: var(--color-gray-200);
    margin-top: 23px;
}

.workflow-step.active .step-circle {
    box-shadow: 0 0 0 4px rgba(0, 172, 193, 0.2);
}

/* Validation Highlight */
.validation-highlight {
    display: flex;
    align-items: center;
    gap: var(--space-lg);
    padding: var(--space-lg);
    background: rgba(114, 201, 143, 0.1);
    border: 1px solid rgba(114, 201, 143, 0.3);
    border-radius: var(--radius-lg);
}

.validation-icon {
    width: 64px;
    height: 64px;
    border-radius: 50%;
    background: white;
    color: var(--color-accent-green);
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.validation-content h3 {
    margin-bottom: var(--space-xs);
}

.validation-content p {
    margin: 0;
    color: var(--color-gray-600);
}

/* Agent Interface Demo */
.agent-interface-demo {
    display: flex;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.interface-main {
    flex: 1;
    border-right: 1px solid var(--color-gray-100);
}

.ticket-thread-demo {
    padding: var(--space-md);
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.thread-message-demo {
    display: flex;
    gap: var(--space-sm);
}

.msg-avatar {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--color-gray-200);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.625rem;
    font-weight: 600;
    flex-shrink: 0;
}

.msg-avatar.agent {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-accent-purple);
}

.msg-content {
    flex: 1;
    padding: var(--space-sm);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.thread-message-demo.agent .msg-content {
    background: rgba(159, 122, 234, 0.08);
}

.msg-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: var(--space-xs);
}

.msg-header strong {
    font-size: 0.75rem;
}

.msg-header span {
    font-size: 0.625rem;
    color: var(--color-gray-500);
}

.msg-content p {
    font-size: 0.75rem;
    margin: 0;
    color: var(--color-gray-700);
}

.editor-demo {
    border-top: 1px solid var(--color-gray-100);
}

.editor-toolbar {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm);
    border-bottom: 1px solid var(--color-gray-100);
}

.toolbar-btn {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-sm);
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
    cursor: pointer;
}

.toolbar-btn:hover {
    background: var(--color-gray-100);
}

.toolbar-separator {
    width: 1px;
    height: 20px;
    background: var(--color-gray-200);
    margin: 0 var(--space-xs);
}

.editor-body {
    padding: var(--space-md);
    font-size: 0.875rem;
    color: var(--color-gray-400);
    min-height: 60px;
}

.interface-sidebar {
    width: 160px;
    padding: var(--space-md);
    background: var(--color-gray-50);
}

.sidebar-section {
    margin-bottom: var(--space-md);
}

.sidebar-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    color: var(--color-gray-500);
    margin-bottom: var(--space-xs);
}

.sidebar-value {
    font-size: 0.875rem;
    font-weight: 500;
}

.sidebar-value.warning {
    color: #D4A000;
}

/* AI Assistance Grid */
.ai-assistance-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.ai-capability {
    text-align: center;
    padding: var(--space-lg);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.capability-icon {
    width: 48px;
    height: 48px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-md);
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.ai-capability h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.ai-capability p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* AI Demo Block */
.ai-demo-block {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.ai-demo-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
    color: var(--color-accent-purple);
}

.ai-demo-content {
    padding: var(--space-xl);
}

.demo-before,
.demo-after {
    padding: var(--space-md);
    border-radius: var(--radius-md);
}

.demo-before {
    background: rgba(229, 57, 53, 0.08);
    margin-bottom: var(--space-md);
}

.demo-after {
    background: rgba(114, 201, 143, 0.08);
}

.demo-label {
    display: block;
    font-size: 0.625rem;
    font-weight: 600;
    text-transform: uppercase;
    margin-bottom: var(--space-xs);
}

.demo-before .demo-label {
    color: #E53935;
}

.demo-after .demo-label {
    color: var(--color-accent-green);
}

.demo-before p,
.demo-after p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-gray-700);
}

.demo-arrow {
    display: flex;
    justify-content: center;
    margin: var(--space-md) 0;
    color: var(--color-accent-purple);
}

/* SLA Config Demo */
.sla-config-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
    max-width: 700px;
    margin: 0 auto;
}

.sla-config-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.sla-config-table {
    padding: var(--space-md);
}

.sla-row {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: var(--space-md);
    padding: var(--space-md);
    border-bottom: 1px solid var(--color-gray-100);
    align-items: center;
}

.sla-row:last-child {
    border-bottom: none;
}

.sla-row.header {
    font-weight: 600;
    font-size: 0.75rem;
    text-transform: uppercase;
    color: var(--color-gray-500);
}

.sla-col.response,
.sla-col.resolution {
    text-align: center;
    font-weight: 500;
}

.priority-badge {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.priority-badge.urgent {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

.priority-badge.normal {
    background: rgba(0, 172, 193, 0.15);
    color: #00ACC1;
}

.priority-badge.low {
    background: rgba(158, 158, 158, 0.15);
    color: var(--color-gray-600);
}

/* Metric Cards */
.metric-card {
    background: white;
    border-radius: var(--radius-xl);
    padding: var(--space-xl);
    box-shadow: var(--shadow-md);
}

.metric-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    display: flex;
    align-items: center;
    justify-content: center;
    margin-bottom: var(--space-md);
}

.metric-icon.response {
    background: rgba(65, 157, 240, 0.1);
    color: var(--color-primary);
}

.metric-icon.resolution {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.metric-card h3 {
    margin-bottom: var(--space-sm);
}

.metric-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.metric-example {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.example-timeline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.timeline-point {
    display: flex;
    flex-direction: column;
    align-items: center;
    text-align: center;
}

.point-label {
    font-size: 0.625rem;
    color: var(--color-gray-500);
}

.point-time {
    font-weight: 600;
    font-size: 0.875rem;
}

.timeline-bar {
    flex: 1;
    height: 4px;
    border-radius: 2px;
}

.timeline-bar.response {
    background: var(--color-primary);
}

.timeline-bar.resolution {
    background: var(--color-accent-green);
}

.example-result {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.result-value {
    font-size: 1.5rem;
    font-weight: 700;
}

.result-sla {
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
}

.result-sla.ok {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

/* Alert Legend */
.alert-legend {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.alert-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.sla-tag {
    display: inline-block;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 600;
    min-width: 120px;
    text-align: center;
}

.sla-tag.ok {
    background: rgba(114, 201, 143, 0.15);
    color: var(--color-accent-green);
}

.sla-tag.warning {
    background: rgba(247, 200, 68, 0.15);
    color: #D4A000;
}

.sla-tag.critical {
    background: rgba(255, 152, 0, 0.15);
    color: #FF9800;
}

.sla-tag.breach {
    background: rgba(229, 57, 53, 0.15);
    color: #E53935;
}

.alert-desc {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* Tickets List Demo */
.tickets-list-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.ticket-row-demo {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.ticket-row-demo:last-child {
    border-bottom: none;
}

.ticket-row-demo .ticket-ref {
    font-family: 'Inter', monospace;
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-600);
}

.ticket-row-demo .ticket-subject {
    flex: 1;
    font-size: 0.875rem;
    padding: 0;
    border: none;
}

/* Business Hours Demo */
.business-hours-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.hours-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
    font-weight: 600;
}

.hours-grid {
    padding: var(--space-md);
}

.day-row {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
}

.day-row:nth-child(odd) {
    background: var(--color-gray-50);
}

.day-name {
    font-weight: 500;
}

.day-hours {
    font-size: 0.875rem;
}

.day-hours.active {
    color: var(--color-accent-green);
    font-weight: 500;
}

.day-hours.closed {
    color: var(--color-gray-400);
}

/* Suspension Example */
.suspension-example {
    margin: var(--space-lg) 0;
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
}

.suspension-timeline {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.suspension-block {
    flex: 1;
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-align: center;
}

.suspension-block.active {
    background: rgba(114, 201, 143, 0.15);
}

.suspension-block.pause {
    background: rgba(247, 200, 68, 0.15);
}

.block-label {
    display: block;
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.block-desc {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* KPI Dashboard Demo */
.kpi-dashboard-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.kpi-row {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 1px;
    background: var(--color-gray-100);
}

.kpi-card {
    padding: var(--space-xl);
    background: white;
    text-align: center;
}

.kpi-card.alert {
    background: rgba(229, 57, 53, 0.05);
}

.kpi-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-text-primary);
    margin-bottom: var(--space-xs);
}

.kpi-card.alert .kpi-value {
    color: #E53935;
}

.kpi-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-sm);
}

.kpi-trend {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
}

.kpi-trend.up {
    color: var(--color-accent-green);
}

.kpi-trend.down {
    color: #E53935;
}

.kpi-chart {
    padding: var(--space-xl);
    border-top: 1px solid var(--color-gray-100);
}

.chart-header {
    font-weight: 600;
    margin-bottom: var(--space-lg);
}

.chart-bars {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.bar-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
}

.bar-label {
    width: 80px;
    font-size: 0.875rem;
}

.bar-track {
    flex: 1;
    height: 8px;
    background: var(--color-gray-100);
    border-radius: 4px;
    overflow: hidden;
}

.bar-fill {
    height: 100%;
    background: var(--color-accent-purple);
    border-radius: 4px;
}

.bar-value {
    width: 30px;
    text-align: right;
    font-weight: 600;
    font-size: 0.875rem;
}

/* Wizard Demo */
.wizard-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    padding: var(--space-xl);
    background: var(--color-gray-50);
    border-bottom: 1px solid var(--color-gray-100);
}

.wizard-step {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--space-xs);
}

.step-number {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--color-gray-200);
    color: var(--color-gray-600);
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
}

.wizard-step.completed .step-number {
    background: var(--color-accent-green);
    color: white;
}

.wizard-step.active .step-number {
    background: var(--color-accent-purple);
    color: white;
}

.step-name {
    font-size: 0.875rem;
    font-weight: 500;
}

.wizard-connector {
    width: 60px;
    height: 2px;
    background: var(--color-gray-200);
    margin: 0 var(--space-md);
    margin-bottom: 24px;
}

.wizard-connector.completed {
    background: var(--color-accent-green);
}

.wizard-content {
    padding: var(--space-xl);
}

.wizard-form h3 {
    margin-bottom: var(--space-lg);
}

.form-group {
    margin-bottom: var(--space-lg);
}

.form-group label {
    display: block;
    font-weight: 500;
    margin-bottom: var(--space-sm);
}

.category-select {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.category-option {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border: 2px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.category-option:hover {
    border-color: var(--color-gray-300);
}

.category-option.selected {
    border-color: var(--color-accent-purple);
    background: rgba(159, 122, 234, 0.05);
}

.textarea-demo {
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    border: 1px solid var(--color-gray-200);
    min-height: 80px;
}

.textarea-demo p {
    margin: 0;
    color: var(--color-gray-700);
}

.form-actions {
    display: flex;
    justify-content: flex-end;
    gap: var(--space-md);
}

/* Suggestions Demo */
.suggestions-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.suggestions-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
    font-weight: 600;
    font-size: 0.875rem;
}

.suggestion-list {
    padding: var(--space-md);
}

.suggestion-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.suggestion-item:hover {
    background: var(--color-gray-50);
}

.suggestion-item.selected {
    background: rgba(159, 122, 234, 0.1);
    border: 1px solid rgba(159, 122, 234, 0.3);
}

.suggestion-icon {
    width: 36px;
    height: 36px;
    border-radius: var(--radius-md);
    background: var(--color-gray-100);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-600);
}

.suggestion-item.selected .suggestion-icon {
    background: rgba(159, 122, 234, 0.15);
    color: var(--color-accent-purple);
}

.suggestion-content {
    display: flex;
    flex-direction: column;
}

.suggestion-content strong {
    font-size: 0.875rem;
}

.suggestion-content span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* KB Demo */
.kb-demo {
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.kb-search {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
    color: var(--color-gray-400);
}

.kb-search input {
    flex: 1;
    border: none;
    background: none;
    font-size: 0.875rem;
    outline: none;
}

.kb-categories {
    padding: var(--space-md);
}

.kb-category {
    margin-bottom: var(--space-md);
}

.category-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    font-weight: 600;
    font-size: 0.875rem;
}

.article-count {
    margin-left: auto;
    font-size: 0.75rem;
    font-weight: normal;
    color: var(--color-gray-500);
}

.category-articles {
    padding: var(--space-sm) var(--space-md);
    padding-left: var(--space-xl);
}

.article-link {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-xs) 0;
    font-size: 0.875rem;
    color: var(--color-gray-600);
    text-decoration: none;
    transition: color var(--transition-fast);
}

.article-link:hover {
    color: var(--color-primary);
}

.article-link.highlighted {
    color: var(--color-accent-purple);
    font-weight: 500;
}

/* KB Integration */
.kb-integration {
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(0, 172, 193, 0.08);
    border-radius: var(--radius-md);
}

.integration-header {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-weight: 600;
    font-size: 0.875rem;
    color: #00ACC1;
    margin-bottom: var(--space-sm);
}

.kb-integration p {
    margin: 0;
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* Portal Features Grid */
.portal-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.portal-feature {
    text-align: center;
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: var(--shadow-sm);
}

.portal-feature .feature-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
    display: flex;
    align-items: center;
    justify-content: center;
}

.portal-feature h3 {
    font-size: 1rem;
    margin-bottom: var(--space-xs);
}

.portal-feature p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Responsive Support Styles */
@media (max-width: 992px) {
    .channels-grid {
        grid-template-columns: 1fr;
    }

    .ai-assistance-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .kpi-row {
        grid-template-columns: repeat(2, 1fr);
    }

    .portal-features-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .flux-demo {
        flex-direction: column;
    }

    .flux-separator {
        padding: var(--space-md) 0;
    }

    .separator-line {
        width: 100%;
        height: 2px;
        min-height: auto;
    }
}

@media (max-width: 768px) {
    .ticket-workflow {
        flex-wrap: wrap;
        gap: var(--space-md);
    }

    .workflow-connector {
        display: none;
    }

    .wizard-steps {
        flex-direction: column;
        gap: var(--space-md);
    }

    .wizard-connector {
        width: 2px;
        height: 30px;
        margin: 0;
    }

    .mapping-demo {
        flex-direction: column;
    }

    .delegation-flow {
        flex-direction: column;
    }

    .delegation-arrow {
        transform: rotate(90deg);
    }

    .ai-assistance-grid {
        grid-template-columns: 1fr;
    }

    .portal-features-grid {
        grid-template-columns: 1fr;
    }

    .agent-interface-demo {
        flex-direction: column;
    }

    .interface-sidebar {
        width: 100%;
        flex-direction: row;
        flex-wrap: wrap;
    }

    .sidebar-section {
        flex: 1;
        min-width: 100px;
    }
}

/* ===== END SUPPORT STYLES ===== */

/* Templates Demo OLD - keeping for backward compatibility */
.templates-demo-old {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-md);
}

.template-card {
    background: white;
    border-radius: var(--radius-md);
    padding: var(--space-lg);
    box-shadow: var(--shadow-sm);
    border: 2px solid transparent;
    cursor: pointer;
    transition: all var(--transition-fast);
    text-align: center;
}

.template-card:hover {
    border-color: var(--color-gray-200);
    box-shadow: var(--shadow-md);
}

.template-card.selected {
    border-color: #00ACC1;
    background: rgba(0, 172, 193, 0.05);
}

.template-icon {
    width: 56px;
    height: 56px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
}

.template-card:nth-child(1) .template-icon {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
}

.template-card:nth-child(2) .template-icon {
    background: rgba(114, 201, 143, 0.1);
    color: var(--color-accent-green);
}

.template-card:nth-child(3) .template-icon {
    background: rgba(159, 122, 234, 0.1);
    color: var(--color-accent-purple);
}

.template-name {
    font-weight: 600;
    margin-bottom: var(--space-xs);
}

.template-tasks {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Prediction Demo */
.prediction-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.prediction-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
}

.prediction-badge {
    background: rgba(0, 172, 193, 0.1);
    color: #00ACC1;
    padding: 4px 12px;
    border-radius: 999px;
    font-size: 0.75rem;
    font-weight: 500;
}

/* Alert Demo */
.alert-demo {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.alert-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    border-left: 4px solid transparent;
}

.alert-item.warning {
    background: rgba(247, 200, 68, 0.1);
    border-left-color: var(--color-accent-yellow);
}

.alert-item.danger {
    background: rgba(229, 57, 53, 0.1);
    border-left-color: #E53935;
}

.alert-item.success {
    background: rgba(114, 201, 143, 0.1);
    border-left-color: var(--color-accent-green);
}

.alert-icon {
    width: 32px;
    height: 32px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.alert-item.warning .alert-icon {
    background: rgba(247, 200, 68, 0.2);
    color: var(--color-accent-yellow);
}

.alert-item.danger .alert-icon {
    background: rgba(229, 57, 53, 0.2);
    color: #E53935;
}

.alert-item.success .alert-icon {
    background: rgba(114, 201, 143, 0.2);
    color: var(--color-accent-green);
}

.alert-content strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.alert-content p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Responsive for Projets additional styles */
@media (max-width: 768px) {
    .comparison-boxes {
        grid-template-columns: 1fr;
    }

    .realtime-metrics {
        grid-template-columns: 1fr;
    }

    .templates-demo {
        grid-template-columns: 1fr;
    }

    .table-header,
    .table-row {
        grid-template-columns: 1fr 1fr;
        font-size: 0.75rem;
    }
}

@media (max-width: 576px) {
    .segment-item {
        flex-wrap: wrap;
    }

    .segment-percent {
        width: 100%;
        text-align: right;
    }

    .chain-item {
        flex-wrap: wrap;
    }

    .chain-ref {
        order: 5;
        width: 100%;
        margin-top: var(--space-xs);
    }
}

/* ========================================
   PROJ-FINANCE - STYLES SPECIFIQUES
   ======================================== */

/* Segment Insight */
.segment-insight,
.valor-insight {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    margin-top: var(--space-lg);
    padding: var(--space-md);
    background: rgba(0, 172, 193, 0.05);
    border-radius: var(--radius-md);
    border-left: 3px solid #00ACC1;
}

.segment-insight .insight-icon,
.valor-insight .insight-icon {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 172, 193, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ACC1;
    flex-shrink: 0;
}

.segment-insight p,
.valor-insight p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Revenue Chart Demo */
.revenue-chart-demo {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-lg);
}

.chart-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: var(--space-lg);
    font-weight: 600;
}

.chart-period {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    font-weight: 400;
}

.chart-visual {
    display: flex;
    align-items: center;
    gap: var(--space-xl);
}

.donut-chart {
    width: 160px;
    height: 160px;
    border-radius: 50%;
    background: conic-gradient(
        var(--color-accent-green) 0deg 327deg,
        #00ACC1 327deg 360deg
    );
    position: relative;
    flex-shrink: 0;
}

.donut-chart::before {
    content: '';
    position: absolute;
    top: 25%;
    left: 25%;
    width: 50%;
    height: 50%;
    background: white;
    border-radius: 50%;
}

.donut-center {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    text-align: center;
}

.donut-total {
    font-size: 1.5rem;
    font-weight: 700;
    display: block;
}

.donut-label {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.chart-legend {
    flex: 1;
}

.chart-legend .legend-item {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    margin-bottom: var(--space-md);
}

.legend-color {
    width: 12px;
    height: 12px;
    border-radius: 3px;
}

.legend-color.recurring { background: var(--color-accent-green); }
.legend-color.oneshot { background: #00ACC1; }

.legend-label {
    flex: 1;
    font-size: 0.875rem;
}

.legend-value {
    font-weight: 600;
    font-size: 0.875rem;
}

/* Drilldown Content */
.drilldown-content {
    margin-bottom: var(--space-md);
}

.level-header {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin-bottom: var(--space-md);
}

.level-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm);
}

.level-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    background: var(--color-gray-50);
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.level-item:hover,
.level-item.clickable:hover {
    background: var(--color-gray-100);
}

.item-main {
    flex: 1;
    min-width: 0;
}

.item-name {
    font-weight: 600;
    display: block;
    margin-bottom: 2px;
}

.item-revenue {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.item-bar {
    width: 80px;
    height: 6px;
    background: var(--color-gray-200);
    border-radius: 3px;
    overflow: hidden;
}

.item-bar .bar-fill {
    height: 100%;
    background: var(--color-accent-green);
    border-radius: 3px;
}

.item-margin {
    font-weight: 600;
    color: var(--color-accent-green);
    width: 40px;
    text-align: right;
}

.item-arrow {
    color: var(--color-gray-400);
}

.drilldown-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.75rem;
    color: var(--color-gray-500);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-200);
}

.crumb {
    color: var(--color-gray-400);
}

.crumb.active {
    color: var(--color-primary);
    font-weight: 500;
}

.crumb-sep {
    color: var(--color-gray-300);
}

/* Purchases Features Grid */
.purchases-features-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
    margin-bottom: var(--space-2xl);
}

.purchase-feature-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    text-align: center;
    box-shadow: var(--shadow-sm);
}

.purchase-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
    border-radius: var(--radius-lg);
    background: rgba(0, 172, 193, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ACC1;
}

.purchase-feature-card h4 {
    margin-bottom: var(--space-sm);
}

.purchase-feature-card p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin: 0;
}

/* Purchases Demo */
.purchases-demo {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-md);
    overflow: hidden;
}

.purchases-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-200);
    font-weight: 600;
}

.purchases-actions {
    display: flex;
    gap: var(--space-sm);
}

.drop-zone {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-sm) var(--space-md);
    border: 2px dashed var(--color-gray-300);
    border-radius: var(--radius-md);
    font-size: 0.875rem;
    color: var(--color-gray-500);
    cursor: pointer;
    transition: all var(--transition-fast);
}

.drop-zone:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.purchases-table {
    padding: var(--space-md);
}

.purchases-table .table-row {
    display: grid;
    grid-template-columns: 1.2fr 1fr 1.5fr 1fr 0.8fr;
    gap: var(--space-md);
    padding: var(--space-md);
    align-items: center;
    font-size: 0.875rem;
}

.purchases-table .table-row.table-head {
    background: var(--color-gray-50);
    border-radius: var(--radius-sm);
    font-weight: 600;
    font-size: 0.75rem;
    color: var(--color-gray-600);
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.purchases-table .table-row:not(.table-head) {
    border-bottom: 1px solid var(--color-gray-100);
}

.purchases-table .table-row:last-child {
    border-bottom: none;
}

/* Stats Grid */
.stats-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: var(--space-lg);
}

.stat-card {
    text-align: center;
    padding: var(--space-xl);
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-sm);
}

.stat-value {
    font-size: 2rem;
    font-weight: 700;
    color: var(--color-primary);
    margin-bottom: var(--space-xs);
}

.stat-label {
    font-size: 0.875rem;
    color: var(--color-gray-600);
}

/* ========================================
   PROJ-RESSOURCES - STYLES SPECIFIQUES
   ======================================== */

/* Timer Demo Extended */
.timer-demo {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.timer-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--color-gray-50);
    font-weight: 600;
}

.timer-date {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    font-weight: 400;
}

.timer-active {
    padding: var(--space-lg);
    background: linear-gradient(135deg, rgba(0, 172, 193, 0.05), rgba(0, 172, 193, 0.1));
    border-bottom: 1px solid var(--color-gray-200);
}

.timer-task {
    margin-bottom: var(--space-md);
}

.timer-task .task-project {
    display: block;
    font-size: 0.75rem;
    color: #00ACC1;
    font-weight: 500;
    margin-bottom: 2px;
}

.timer-task .task-name {
    font-weight: 600;
}

.timer-display {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.timer-time {
    font-family: 'Courier New', monospace;
    font-size: 2.5rem;
    font-weight: 700;
    color: #00ACC1;
    letter-spacing: 2px;
}

.timer-btn {
    width: 48px;
    height: 48px;
    border-radius: 50%;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.timer-btn.stop {
    background: #E53935;
    color: white;
}

.timer-btn.stop:hover {
    background: #C62828;
    transform: scale(1.05);
}

.timer-logs {
    padding: var(--space-md) var(--space-lg);
}

.log-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
}

.log-item:last-child {
    border-bottom: none;
}

.log-time {
    width: 100px;
    color: var(--color-gray-500);
    font-size: 0.75rem;
}

.log-task {
    flex: 1;
}

.log-duration {
    font-weight: 600;
    color: #00ACC1;
}

.timer-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    font-weight: 600;
}

.total-value {
    font-size: 1.25rem;
    color: #00ACC1;
}

/* Valorisation Example */
.valorisation-example {
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
    overflow: hidden;
    margin-bottom: var(--space-lg);
}

.valor-header {
    padding: var(--space-md);
    background: var(--color-gray-50);
    font-weight: 600;
    font-size: 0.875rem;
}

.valor-lines {
    padding: var(--space-md);
}

.valor-line {
    display: flex;
    justify-content: space-between;
    padding: var(--space-sm) 0;
    border-bottom: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
}

.valor-line:last-child {
    border-bottom: none;
}

.valor-line.result {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 2px dashed var(--color-gray-200);
    border-bottom: none;
    font-weight: 600;
}

.valor-label {
    color: var(--color-gray-600);
}

.valor-value {
    font-weight: 500;
}

.valor-value.negative {
    color: #E53935;
}

/* Valorisation Demo */
.valorisation-demo {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.valor-demo-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--color-gray-50);
    font-weight: 600;
}

.valor-period {
    font-size: 0.75rem;
    color: var(--color-gray-500);
    font-weight: 400;
}

.valor-demo-content {
    padding: var(--space-md) var(--space-lg);
}

.collab-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md) 0;
    border-bottom: 1px solid var(--color-gray-100);
}

.collab-item:last-child {
    border-bottom: none;
}

.collab-avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: linear-gradient(135deg, var(--color-primary), var(--color-primary-dark));
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-weight: 600;
    font-size: 0.875rem;
    flex-shrink: 0;
}

.collab-info {
    flex: 1;
}

.collab-info strong {
    display: block;
    margin-bottom: 2px;
}

.collab-info span {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.collab-stats {
    text-align: right;
}

.collab-hours {
    display: block;
    font-weight: 600;
    color: #00ACC1;
}

.collab-cost {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.valor-demo-total {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-md) var(--space-lg);
    background: var(--color-gray-50);
    font-weight: 600;
}

.total-stats {
    text-align: right;
}

.total-hours {
    display: block;
    color: #00ACC1;
    font-size: 1.125rem;
}

.total-cost {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

/* Timesheet Demo */
.timesheet-demo {
    background: white;
    border-radius: var(--radius-lg);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}

.timesheet-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-lg);
    background: var(--color-gray-50);
    font-weight: 600;
}

.timesheet-nav {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    font-size: 0.875rem;
    font-weight: 400;
}

.nav-btn {
    width: 28px;
    height: 28px;
    border: 1px solid var(--color-gray-300);
    background: white;
    border-radius: var(--radius-sm);
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all var(--transition-fast);
}

.nav-btn:hover {
    border-color: var(--color-primary);
    color: var(--color-primary);
}

.timesheet-grid {
    padding: var(--space-md);
}

.timesheet-grid .grid-header,
.timesheet-grid .grid-row,
.timesheet-grid .grid-footer {
    display: grid;
    grid-template-columns: 2fr repeat(5, 1fr) 1fr;
    gap: var(--space-sm);
    align-items: center;
    padding: var(--space-sm);
}

.timesheet-grid .grid-header {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    border-bottom: 1px solid var(--color-gray-200);
    padding-bottom: var(--space-md);
    margin-bottom: var(--space-sm);
}

.timesheet-grid .grid-row {
    padding: var(--space-sm);
    border-radius: var(--radius-sm);
}

.timesheet-grid .grid-row:hover {
    background: var(--color-gray-50);
}

.timesheet-grid .col-project {
    font-size: 0.875rem;
}

.timesheet-grid .col-project .project-name {
    display: block;
    font-weight: 600;
    margin-bottom: 2px;
}

.timesheet-grid .col-project .task-name {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.timesheet-grid .col-day {
    text-align: center;
}

.timesheet-grid .col-day input {
    width: 100%;
    max-width: 48px;
    padding: var(--space-xs);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-sm);
    text-align: center;
    font-size: 0.875rem;
}

.timesheet-grid .col-day input:focus {
    outline: none;
    border-color: var(--color-primary);
}

.timesheet-grid .col-total {
    text-align: center;
    font-weight: 600;
    color: #00ACC1;
}

.timesheet-grid .grid-footer {
    margin-top: var(--space-sm);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-200);
    font-weight: 600;
    font-size: 0.875rem;
}

.timesheet-grid .grid-footer .col-total.highlight {
    background: rgba(0, 172, 193, 0.1);
    padding: var(--space-xs) var(--space-sm);
    border-radius: var(--radius-sm);
}

/* Saisie Modes */
.saisie-modes {
    display: flex;
    flex-direction: column;
    gap: var(--space-md);
}

.mode-item {
    display: flex;
    align-items: flex-start;
    gap: var(--space-md);
    padding: var(--space-md);
    background: white;
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-sm);
}

.mode-icon {
    width: 48px;
    height: 48px;
    border-radius: var(--radius-md);
    background: rgba(0, 172, 193, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ACC1;
    flex-shrink: 0;
}

.mode-item strong {
    display: block;
    margin-bottom: var(--space-xs);
}

.mode-item p {
    font-size: 0.875rem;
    color: var(--color-gray-500);
    margin: 0;
}

/* Reports Grid */
.reports-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: var(--space-lg);
}

.report-card {
    background: white;
    border-radius: var(--radius-lg);
    padding: var(--space-xl);
    box-shadow: var(--shadow-sm);
}

.report-icon {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-lg);
    background: rgba(0, 172, 193, 0.1);
    display: flex;
    align-items: center;
    justify-content: center;
    color: #00ACC1;
    margin-bottom: var(--space-md);
}

.report-card h4 {
    margin-bottom: var(--space-sm);
}

.report-card > p {
    font-size: 0.875rem;
    color: var(--color-gray-600);
    margin-bottom: var(--space-lg);
}

.report-mini-chart {
    height: 60px;
    display: flex;
    align-items: flex-end;
    gap: var(--space-xs);
}

.report-mini-chart.bars .bar {
    flex: 1;
    background: linear-gradient(180deg, #00ACC1, rgba(0, 172, 193, 0.3));
    border-radius: 3px 3px 0 0;
}

.report-mini-chart.collab {
    flex-direction: column;
    justify-content: center;
    gap: var(--space-xs);
    height: auto;
}

.report-mini-chart .collab-bar {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
}

.report-mini-chart .collab-bar .bar-label {
    width: 24px;
    font-size: 0.625rem;
    font-weight: 600;
    color: var(--color-gray-500);
}

.report-mini-chart .collab-bar .bar-fill {
    height: 8px;
    background: linear-gradient(90deg, #00ACC1, rgba(0, 172, 193, 0.5));
    border-radius: 4px;
}

/* Responsive pour proj-finance et proj-ressources */
@media (max-width: 768px) {
    .purchases-features-grid {
        grid-template-columns: 1fr;
    }

    .reports-grid {
        grid-template-columns: 1fr;
    }

    .stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .chart-visual {
        flex-direction: column;
    }

    .purchases-table .table-row {
        grid-template-columns: 1fr 1fr;
    }

    .timesheet-grid .grid-header,
    .timesheet-grid .grid-row,
    .timesheet-grid .grid-footer {
        grid-template-columns: 1.5fr repeat(3, 1fr) 0.8fr;
    }

    .timesheet-grid .col-day:nth-child(5),
    .timesheet-grid .col-day:nth-child(6) {
        display: none;
    }
}

@media (max-width: 576px) {
    .stats-grid {
        grid-template-columns: 1fr;
    }

    .timer-time {
        font-size: 1.75rem;
    }

    .level-items {
        gap: var(--space-xs);
    }

    .level-item {
        flex-wrap: wrap;
    }

    .item-bar {
        order: 5;
        width: 100%;
        margin-top: var(--space-xs);
    }
}

/* ============================================
   SOCIAL PROOF SECTION - Homepage
   Stats, Testimonials Rotator & Trust Badges
   ============================================ */

.social-proof-section {
    background: linear-gradient(180deg, #f8fafc 0%, #ffffff 100%);
    padding: var(--space-lg) 0 var(--space-2xl) 0;
    margin-top: calc(-1 * var(--space-xl));
}

/* ----- Hero Trust Badges (inline) ----- */
.hero-trust-badges {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-md) var(--space-lg);
    margin-bottom: var(--space-lg);
}

.hero-trust-badge {
    display: inline-flex;
    align-items: center;
    gap: var(--space-xs);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    font-weight: 500;
}

.hero-trust-badge svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 576px) {
    .hero-trust-badges {
        gap: var(--space-sm) var(--space-md);
    }

    .hero-trust-badge {
        font-size: 0.75rem;
    }
}

/* ----- Stats Grid ----- */
.social-proof-section .stats-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-md);
    margin-bottom: var(--space-xl);
}

/* Stats Disclaimer */
.stats-disclaimer {
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-gray-400);
    margin-top: var(--space-md);
    font-style: italic;
    display: none;
}

.stats-disclaimer::before {
    content: "* ";
}

@media (max-width: 1200px) {
    .social-proof-section .stats-grid {
        grid-template-columns: repeat(5, 1fr);
        gap: var(--space-sm);
    }
}

@media (max-width: 992px) {
    .social-proof-section .stats-grid {
        grid-template-columns: repeat(3, 1fr);
        gap: var(--space-md);
    }
}

@media (max-width: 576px) {
    .social-proof-section .stats-grid {
        grid-template-columns: repeat(2, 1fr);
        gap: var(--space-sm);
    }
}

.stat-item {
    text-align: center;
    padding: var(--space-md) var(--space-sm);
    background: var(--color-white);
    border-radius: var(--radius-lg);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.04);
    border: 1px solid rgba(0, 0, 0, 0.03);
    transition: all 0.3s ease;
}

.stat-item:hover {
    transform: translateY(-4px);
    box-shadow: 0 12px 30px rgba(65, 157, 240, 0.12);
    border-color: rgba(65, 157, 240, 0.15);
}

.stat-icon {
    width: 44px;
    height: 44px;
    margin: 0 auto var(--space-sm);
    background: linear-gradient(135deg, rgba(65, 157, 240, 0.1) 0%, rgba(65, 157, 240, 0.05) 100%);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-primary);
}

.stat-icon svg {
    width: 22px;
    height: 22px;
}

.stat-number {
    display: block;
    font-size: clamp(1.25rem, 2.5vw, 1.75rem);
    font-weight: 700;
    color: var(--color-primary);
    line-height: 1.2;
    margin-bottom: 2px;
    font-variant-numeric: tabular-nums;
}

.stat-label {
    display: block;
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--color-gray-500);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    line-height: 1.3;
}

/* ----- Testimonial Rotator ----- */
.testimonial-rotator {
    max-width: 800px;
    margin: 0 auto var(--space-2xl);
    text-align: center;
    position: relative;
}

.testimonial-rotator-inner {
    background: var(--color-white);
    border-radius: var(--radius-xl);
    padding: var(--space-2xl) var(--space-xl);
    box-shadow: 0 8px 40px rgba(0, 0, 0, 0.06);
    border: 1px solid rgba(0, 0, 0, 0.03);
    position: relative;
    overflow: hidden;
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.testimonial-rotator-inner.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

.testimonial-rotator-inner.fade-in {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.4s ease;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(15px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.testimonial-quote-icon {
    position: absolute;
    top: var(--space-lg);
    left: var(--space-xl);
    color: var(--color-primary);
    opacity: 0.1;
}

.testimonial-rotator-quote {
    font-size: clamp(1rem, 2.5vw, 1.25rem);
    font-weight: 400;
    color: var(--color-gray-700);
    line-height: 1.7;
    margin: 0 0 var(--space-xl) 0;
    padding: 0;
    border: none;
    font-style: italic;
    position: relative;
    z-index: 1;
}

.testimonial-rotator-author {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-md);
    margin-bottom: var(--space-md);
}

.testimonial-rotator-avatar {
    width: 56px;
    height: 56px;
    border-radius: var(--radius-full);
    object-fit: cover;
    border: 3px solid var(--color-white);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

.testimonial-rotator-info {
    text-align: left;
}

.testimonial-rotator-info strong {
    display: block;
    font-size: 1rem;
    font-weight: 600;
    color: var(--color-dark);
}

.testimonial-rotator-info span {
    display: block;
    font-size: 0.875rem;
    color: var(--color-gray-500);
}

.testimonial-rotator-rating {
    display: flex;
    justify-content: center;
    gap: 2px;
}

.testimonial-rotator-rating svg {
    filter: drop-shadow(0 1px 2px rgba(247, 200, 68, 0.3));
}

/* Testimonial Navigation Dots */
.testimonial-rotator-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

.testimonial-dot {
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
    background: var(--color-gray-300);
    border: none;
    cursor: pointer;
    transition: all 0.3s ease;
    padding: 0;
}

.testimonial-dot:hover {
    background: var(--color-gray-400);
    transform: scale(1.2);
}

.testimonial-dot.active {
    background: var(--color-primary);
    width: 28px;
}

/* ----- Trust Badges ----- */
.trust-badges {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;
    gap: var(--space-lg);
}

.trust-badge {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: var(--space-sm) var(--space-md);
    background: var(--color-white);
    border-radius: var(--radius-full);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.04);
    border: 1px solid var(--color-gray-100);
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--color-gray-600);
    transition: all 0.2s ease;
}

.trust-badge:hover {
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
    border-color: var(--color-gray-200);
}

.trust-badge svg {
    color: var(--color-primary);
    flex-shrink: 0;
}

@media (max-width: 768px) {
    .trust-badges {
        gap: var(--space-sm);
    }

    .trust-badge {
        font-size: 0.8125rem;
        padding: var(--space-xs) var(--space-sm);
    }

    .testimonial-rotator-inner {
        padding: var(--space-xl) var(--space-md);
    }

    .testimonial-rotator-author {
        flex-direction: column;
        gap: var(--space-sm);
    }

    .testimonial-rotator-info {
        text-align: center;
    }
}

/* ============================================
   TESTIMONIALS PAGE - Dynamic Features
   ============================================ */

/* Featured Testimonial Nav */
.featured-testimonial-nav {
    display: flex;
    justify-content: center;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
}

/* Featured Testimonial Animation */
.featured-testimonial {
    transition: opacity 0.3s ease, transform 0.3s ease;
}

.featured-testimonial.fade-out {
    opacity: 0;
    transform: translateY(10px);
}

.featured-testimonial.fade-in {
    opacity: 1;
    transform: translateY(0);
    animation: fadeInUp 0.4s ease;
}

/* Mini Metrics for Testimonial Cards */
.testimonial-mini-metrics {
    display: flex;
    gap: var(--space-md);
    margin-top: var(--space-md);
    padding-top: var(--space-md);
    border-top: 1px solid var(--color-gray-200);
}

.mini-metric {
    font-size: 0.75rem;
    color: var(--color-gray-500);
}

.mini-metric strong {
    color: var(--color-primary);
    font-weight: 600;
}

/* Section subtitle for testimonials */
.section-subtitle {
    font-size: 0.9375rem;
    color: var(--color-gray-500);
    margin-top: var(--space-sm);
    font-style: italic;
}

/* ============================================
   MOBILE STICKY CTA - Conversion Optimization
   ============================================ */
.mobile-sticky-cta {
    display: none;
}

@media (max-width: 768px) {
    .mobile-sticky-cta {
        display: block;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 9997;
        background: linear-gradient(to top, rgba(255, 255, 255, 1) 80%, rgba(255, 255, 255, 0));
        padding: var(--space-md) var(--space-lg);
        padding-top: var(--space-xl);
        padding-bottom: calc(var(--space-md) + env(safe-area-inset-bottom, 0px));
        transform: translateY(100%);
        transition: transform 0.3s ease;
    }

    .mobile-sticky-cta.visible {
        transform: translateY(0);
    }

    .mobile-sticky-cta .btn {
        width: 100%;
        justify-content: center;
        padding: var(--space-md) var(--space-lg);
        font-size: 1rem;
        font-weight: 600;
        border-radius: var(--radius-lg);
        box-shadow: 0 4px 20px rgba(65, 157, 240, 0.4);
    }

    .mobile-sticky-cta .btn svg {
        width: 20px;
        height: 20px;
    }

    /* Ajouter du padding en bas du body pour éviter que le contenu soit caché */
    body.has-sticky-cta {
        padding-bottom: 80px;
    }
}

/* ============================================
   VIDEO DEMO SECTION
   ============================================ */
.video-demo-section {
    background: linear-gradient(135deg, var(--color-gray-50) 0%, #ffffff 100%);
}

.video-demo-container {
    max-width: 900px;
    margin: 0 auto;
}

.video-wrapper {
    position: relative;
    width: 100%;
    padding-bottom: 56.25%; /* 16:9 aspect ratio */
    border-radius: var(--radius-xl);
    overflow: hidden;
    box-shadow: var(--shadow-xl);
    background: var(--color-dark);
}

.video-wrapper iframe,
.video-wrapper video {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    border: none;
}

.video-placeholder {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    background: linear-gradient(135deg, var(--color-dark) 0%, #2a2a3d 100%);
    cursor: pointer;
    transition: all 0.3s ease;
}

.video-placeholder:hover {
    background: linear-gradient(135deg, #2a2a3d 0%, var(--color-dark) 100%);
}

.video-placeholder:hover .play-button {
    transform: scale(1.1);
    box-shadow: 0 0 40px rgba(65, 157, 240, 0.6);
}

.play-button {
    width: 80px;
    height: 80px;
    border-radius: 50%;
    background: var(--color-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    box-shadow: 0 0 30px rgba(65, 157, 240, 0.4);
    transition: all 0.3s ease;
}

.play-button svg {
    width: 32px;
    height: 32px;
    margin-left: 4px;
}

.video-placeholder-text {
    color: white;
    margin-top: var(--space-lg);
    font-size: 1.125rem;
    font-weight: 500;
    opacity: 0.9;
}

.video-duration {
    color: var(--color-gray-400);
    font-size: 0.875rem;
    margin-top: var(--space-xs);
}

/* ============================================
   SEARCH MODAL
   ============================================ */
.search-modal {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    z-index: 10002;
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding-top: 10vh;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.2s ease, visibility 0.2s ease;
}

.search-modal.active {
    opacity: 1;
    visibility: visible;
}

.search-modal-backdrop {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(4px);
}

.search-modal-content {
    position: relative;
    width: 100%;
    max-width: 640px;
    background: white;
    border-radius: var(--radius-xl);
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    overflow: hidden;
    transform: translateY(-20px) scale(0.95);
    transition: transform 0.2s ease;
    margin: 0 var(--space-md);
}

.search-modal.active .search-modal-content {
    transform: translateY(0) scale(1);
}

.search-input-wrapper {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-lg);
    border-bottom: 1px solid var(--color-gray-100);
}

.search-input-icon {
    color: var(--color-gray-400);
    flex-shrink: 0;
}

.search-input {
    flex: 1;
    border: none;
    outline: none;
    font-size: 1.125rem;
    font-family: inherit;
    background: none;
    color: var(--color-text-primary);
}

.search-input::placeholder {
    color: var(--color-gray-400);
}

.search-shortcut {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-gray-400);
    font-size: 0.75rem;
}

.search-shortcut kbd {
    background: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
    font-size: 0.7rem;
}

.search-results {
    max-height: 400px;
    overflow-y: auto;
}

.search-results-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: var(--space-2xl);
    color: var(--color-gray-500);
    text-align: center;
}

.search-results-empty svg {
    color: var(--color-gray-300);
    margin-bottom: var(--space-md);
}

.search-results-empty p {
    margin: 0 0 var(--space-xs);
}

.search-results-empty span {
    font-size: 0.875rem;
    color: var(--color-gray-400);
}

.search-suggestions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-sm);
    margin-top: var(--space-lg);
    justify-content: center;
}

.search-suggestion {
    padding: 6px 12px;
    background: var(--color-gray-100);
    border-radius: var(--radius-full);
    font-size: 0.8125rem;
    color: var(--color-gray-600);
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-suggestion:hover {
    background: var(--color-primary);
    color: white;
}

.search-results-list {
    padding: var(--space-sm);
}

.search-result-item {
    display: flex;
    align-items: center;
    gap: var(--space-md);
    padding: var(--space-md);
    border-radius: var(--radius-md);
    text-decoration: none;
    color: inherit;
    transition: background 0.15s ease;
}

.search-result-item:hover,
.search-result-item.selected {
    background: var(--color-gray-50);
}

.search-result-icon {
    width: 40px;
    height: 40px;
    background: var(--color-gray-100);
    border-radius: var(--radius-md);
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-gray-500);
    flex-shrink: 0;
}

.search-result-item:hover .search-result-icon,
.search-result-item.selected .search-result-icon {
    background: var(--color-blue-light);
    color: var(--color-primary);
}

.search-result-content {
    flex: 1;
    min-width: 0;
}

.search-result-title {
    font-weight: 500;
    color: var(--color-text-primary);
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-title mark {
    background: rgba(65, 157, 240, 0.2);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.search-result-description {
    font-size: 0.8125rem;
    color: var(--color-gray-500);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.search-result-description mark {
    background: rgba(65, 157, 240, 0.15);
    color: inherit;
    padding: 0 2px;
    border-radius: 2px;
}

.search-result-arrow {
    color: var(--color-gray-300);
    flex-shrink: 0;
    opacity: 0;
    transition: opacity 0.15s ease;
}

.search-result-item:hover .search-result-arrow,
.search-result-item.selected .search-result-arrow {
    opacity: 1;
}

.search-results-footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: var(--space-sm) var(--space-lg);
    border-top: 1px solid var(--color-gray-100);
    font-size: 0.75rem;
    color: var(--color-gray-400);
}

.search-nav-hint {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
}

.search-nav-hint kbd {
    background: var(--color-gray-100);
    padding: 2px 6px;
    border-radius: 4px;
    font-family: inherit;
}

/* Search button in header */
.search-trigger {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    padding: 8px 14px;
    background: var(--color-gray-100);
    border: 1px solid var(--color-gray-200);
    border-radius: var(--radius-md);
    color: var(--color-gray-500);
    font-size: 0.875rem;
    cursor: pointer;
    transition: all 0.15s ease;
}

.search-trigger:hover {
    background: var(--color-gray-50);
    border-color: var(--color-gray-300);
}

.search-trigger-text {
    color: var(--color-gray-400);
}

.search-trigger kbd {
    background: white;
    padding: 2px 6px;
    border-radius: 4px;
    font-size: 0.7rem;
    border: 1px solid var(--color-gray-200);
    margin-left: var(--space-sm);
}

@media (max-width: 768px) {
    .search-modal {
        padding-top: 0;
        align-items: stretch;
    }

    .search-modal-content {
        max-width: none;
        margin: 0;
        border-radius: 0;
        height: 100%;
        display: flex;
        flex-direction: column;
    }

    .search-results {
        flex: 1;
        max-height: none;
    }

    .search-shortcut {
        display: none;
    }

    .search-trigger {
        padding: 8px;
    }

    .search-trigger-text,
    .search-trigger kbd {
        display: none;
    }
}