/* === THEME SYSTEM === */
        :root {
            --primary: #4F46E5;
            --primary-light: #6366F1;
            --primary-dark: #4338CA;
            --secondary: #7C3AED;
            --primary-bg: #EEF2FF;
            --primary-bg2: #E0E7FF;
            --gradient: linear-gradient(135deg, var(--primary) 0%, var(--secondary) 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(79,70,229,0.95), rgba(124,58,237,0.95));
        }
        [data-theme="graphite"] {
            --primary: #1F2937; --primary-light: #374151; --primary-dark: #111827;
            --secondary: #D97706; --primary-bg: #F9FAFB; --primary-bg2: #F3F4F6;
            --gradient: linear-gradient(135deg, #1F2937 0%, #374151 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(31,41,55,0.95), rgba(55,65,81,0.95));
        }
        [data-theme="marine"] {
            --primary: #1E3A5F; --primary-light: #2563EB; --primary-dark: #0F172A;
            --secondary: #0EA5E9; --primary-bg: #F0F9FF; --primary-bg2: #E0F2FE;
            --gradient: linear-gradient(135deg, #0F172A 0%, #1E3A5F 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(15,23,42,0.95), rgba(30,58,95,0.95));
        }
        [data-theme="emeraude"] {
            --primary: #059669; --primary-light: #34D399; --primary-dark: #064E3B;
            --secondary: #059669; --primary-bg: #ECFDF5; --primary-bg2: #D1FAE5;
            --gradient: linear-gradient(135deg, #064E3B 0%, #059669 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(6,78,59,0.95), rgba(5,150,105,0.95));
        }
        [data-theme="ardoise"] {
            --primary: #334155; --primary-light: #475569; --primary-dark: #1E293B;
            --secondary: #EA580C; --primary-bg: #FFF7ED; --primary-bg2: #FFEDD5;
            --gradient: linear-gradient(135deg, #334155 0%, #475569 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(51,65,85,0.95), rgba(71,85,105,0.95));
        }
        [data-theme="bordeaux"] {
            --primary: #991B1B; --primary-light: #DC2626; --primary-dark: #7F1D1D;
            --secondary: #991B1B; --primary-bg: #FEF2F2; --primary-bg2: #FEE2E2;
            --gradient: linear-gradient(135deg, #7F1D1D 0%, #991B1B 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(127,29,29,0.95), rgba(153,27,27,0.95));
        }
        [data-theme="rose"] {
            --primary: #D946A8; --primary-light: #F472B6; --primary-dark: #BE185D;
            --secondary: #F9A8D4; --primary-bg: #FDF2F8; --primary-bg2: #FCE7F3;
            --gradient: linear-gradient(135deg, #F1B2E1 0%, #D946A8 100%);
            --gradient-alpha: linear-gradient(135deg, rgba(241,178,225,0.95), rgba(217,70,168,0.95));
        }

        * { margin: 0; padding: 0; box-sizing: border-box; }
        body {
            font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
            background: var(--gradient);
            min-height: 100vh;
            padding: 5px;
        }
        .container { max-width: 500px; margin: 30px auto; }
        .dashboard { max-width: 1200px; margin: 0 auto; }
        .card {
            background: white;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 8px 20px rgba(0,0,0,0.2);
            margin-bottom: 15px;
        }
        .logo { text-align: center; font-size: 3em; margin-bottom: 10px; }
        h1 { text-align: center; color: #4a5568; margin-bottom: 5px; font-size: 1.8em; }
        h2 { color: #4a5568; margin-bottom: 15px; border-bottom: 3px solid var(--primary); padding-bottom: 10px; font-size: 1.3em; }
        h3 { color: #4a5568; margin: 20px 0 10px 0; font-size: 1.1em; }
        .subtitle { text-align: center; color: #718096; font-size: 0.9em; margin-bottom: 20px; }
        .version-badge {
            display: block; text-align: center; background: var(--primary); color: white;
            padding: 4px 12px; border-radius: 20px; font-size: 0.75em;
            margin: 0 auto 20px auto; width: fit-content;
        }
        
        /* Sections encadrées pour meilleure lisibilité */
        .form-section {
            background: #f7fafc;
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            padding: 20px;
            margin-bottom: 20px;
        }
        .form-section h3 {
            margin-top: 0;
            margin-bottom: 15px;
            color: #4a5568;
            font-size: 16px;
            padding-bottom: 10px;
            border-bottom: 2px solid #cbd5e0;
        }
        
        .form-group { margin-bottom: 15px; }
        .form-group label {
            display: block; margin-bottom: 5px; color: #4a5568;
            font-weight: 600; font-size: 13px;
        }
        .form-group input, .form-group select, .form-group textarea {
            width: 100%; padding: 10px; border: 2px solid #e2e8f0;
            border-radius: 8px; font-size: 14px; transition: border-color 0.3s;
        }
        .form-group input:focus, .form-group select:focus, .form-group textarea:focus {
            outline: none; border-color: var(--primary);
        }
        .btn {
            padding: 12px 20px; border: none; border-radius: 8px;
            font-size: 14px; font-weight: 600; cursor: pointer;
            transition: all 0.3s; margin-right: 8px; margin-bottom: 8px;
            min-height: 44px; /* Taille minimale pour les tactiles */
        }
        .btn-primary { background: var(--primary); color: white; }
        .btn-primary:hover { background: var(--primary-dark); transform: translateY(-2px); }
        .btn-success { background: #48bb78; color: white; }
        .btn-danger { background: #f56565; color: white; }
        .btn-secondary { background: #e2e8f0; color: #4a5568; }
        
        /* Barre d'actions compacte — toujours en ligne, labels visibles */
        .action-row {
            display: flex;
            gap: 6px;
            flex-wrap: wrap;
            padding-top: 8px;
            margin-top: 8px;
            border-top: 1px solid #edf2f7;
        }
        .action-row .btn {
            padding: 5px 10px !important;
            font-size: 12px !important;
            min-height: 30px !important;
            min-width: auto !important;
            border-radius: 6px !important;
            display: inline-flex !important;
            align-items: center !important;
            gap: 4px !important;
            flex: 0 0 auto !important;
            white-space: nowrap !important;
        }
        .action-row .btn-label {
            display: inline !important;
            font-size: 11px !important;
        }
        
        /* Boutons compacts sur mobile */
        .btn-actions-container {
            display: flex;
            gap: 4px;
            flex-wrap: wrap;
            justify-content: flex-start;
        }
        
        .btn-sm {
            padding: 6px 10px;
            font-size: 12px;
            min-height: 36px;
            line-height: 1.2;
            display: inline-flex;
            align-items: center;
            justify-content: center;
            gap: 4px;
            border-radius: 6px;
            margin: 2px !important;
            white-space: nowrap;
        }
        
        /* Texte des boutons caché sur mobile, visible sur desktop */
        .btn-label { display: inline; }
        
        @media (max-width: 1024px) {
            .btn {
                min-height: 38px !important;
                padding: 6px 10px !important;
                font-size: 12px !important;
            }
            .btn-sm {
                padding: 5px 7px !important;
                font-size: 11px !important;
                min-height: 32px !important;
                min-width: 32px !important;
            }
            /* Cacher le texte, garder les icônes */
            .btn-label { display: none !important; }
            /* Garder le texte sur les boutons de toolbar et action-row */
            .btn-toolbar .btn-label { display: inline !important; font-size: 10px !important; }
            .action-row .btn-label { display: inline !important; font-size: 10px !important; }
            
            /* Grille compacte pour les boutons d'actions */
            .btn-actions-container {
                display: grid !important;
                grid-template-columns: repeat(3, auto) !important;
                gap: 3px !important;
                justify-content: end !important;
            }
            
            /* Table responsive */
            .table-responsive td, .table-responsive th {
                padding: 8px 4px !important;
                font-size: 12px !important;
            }
        }
        
        @media (max-width: 768px) {
            .btn { 
                min-width: auto !important; 
                padding: 6px 8px !important;
                font-size: 11px !important;
                line-height: 1.2 !important;
                min-height: 34px !important;
            }
            .btn-sm {
                padding: 5px 7px !important;
                font-size: 11px !important;
                min-height: 30px !important;
                min-width: 30px !important;
            }
            .btn-actions-container {
                display: grid !important;
                grid-template-columns: repeat(3, auto) !important;
                gap: 2px !important;
                justify-content: end !important;
            }
            .action-row .btn-label { display: inline !important; font-size: 10px !important; }
            .desktop-only { display: none !important; }
            .mobile-only { display: inline !important; }
            
            /* Tables compactes sur mobile */
            .table-responsive {
                font-size: 11px;
            }
            .table-responsive td, .table-responsive th {
                padding: 6px 3px !important;
                font-size: 11px !important;
            }
            .table-responsive .col-actions {
                min-width: 80px;
            }
            
            /* Checkbox accepté plus compacte */
            .devis-accept-box {
                padding: 4px !important;
                margin-bottom: 3px !important;
            }
            .devis-accept-box span {
                font-size: 10px !important;
            }
        }
        
        @media (max-width: 480px) {
            .btn-sm {
                padding: 4px 6px !important;
                font-size: 10px !important;
                min-height: 28px !important;
                min-width: 28px !important;
            }
            .action-row {
                gap: 4px !important;
            }
            .action-row .btn {
                padding: 4px 7px !important;
                font-size: 11px !important;
                min-height: 28px !important;
            }
            .action-row .btn-label {
                font-size: 9px !important;
            }
            .btn-actions-container {
                grid-template-columns: repeat(3, auto) !important;
                gap: 2px !important;
            }
            /* Factures: colonnes plus compactes */
            .table td, .table th {
                padding: 6px 4px !important;
                font-size: 11px !important;
            }
        }
        
        @media (min-width: 769px) {
            .mobile-only { display: none !important; }
            .desktop-only { display: inline !important; }
        }
        
        .alert {
            padding: 12px; border-radius: 8px; margin-bottom: 15px; font-size: 14px;
        }
        .alert-error { background: #fed7d7; color: #742a2a; }
        .alert-success { background: #c6f6d5; color: #22543d; }
        .alert-info { background: #bee3f8; color: #2c5282; }
        .hidden { display: none !important; }
        .header {
            background: white; border-radius: 12px; padding: 12px 16px;
            margin-bottom: 15px; box-shadow: 0 5px 15px rgba(0,0,0,0.1);
            position: relative;
        }
        .user-info { text-align: center; margin-bottom: 6px; }
        .user-info strong { color: #4a5568; font-size: 15px; }
        .user-email { font-size: 0.85em; color: #718096; }
        .header-actions {
            display: flex; align-items: center; justify-content: center;
            gap: 8px; flex-wrap: wrap;
        }
        .header-icon-btn {
            font-size: 20px; padding: 6px 10px; border-radius: 10px;
            transition: background 0.2s; cursor: pointer;
            display: flex; align-items: center; justify-content: center;
        }
        .header-icon-btn:hover { background: rgba(0,0,0,0.06); }
        .header-icon-btn:active { background: rgba(0,0,0,0.1); }
        .btn-logout {
            padding: 8px 15px; background: #f56565; color: white;
            border: none; border-radius: 6px; cursor: pointer; font-size: 13px;
        }
        .tabs {
    display: flex; gap: 5px; margin-bottom: 15px;
    background: var(--gradient-alpha); /* ⭐ Dégradé violet/mauve */
    padding: 8px; border-radius: 12px;
    overflow-x: auto;
    position: sticky;
    top: 0;
    z-index: 999;
    backdrop-filter: blur(10px);
    -webkit-backdrop-filter: blur(10px);
    box-shadow: 0 4px 12px rgba(0,0,0,0.2); /* ⭐ Ombre plus marquée */
}
        .tab {
            flex: 1; min-width: 70px; padding: 14px 4px 10px; background: rgba(255,255,255,0.25);
            color: white; border: none; border-radius: 10px; cursor: pointer;
            font-weight: 600; font-size: 13px; transition: all 0.3s;
            white-space: normal; text-align: center; line-height: 1.3;
            min-height: 72px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
        }
        .tab .tab-icon { font-size: 32px; line-height: 1; display: block; }
        .tab .tab-label { font-size: 11px; font-weight: 600; line-height: 1.2; }
        .tab.active { background: white; color: var(--primary); }
        .tab-content { display: none; }
        .tab-content.active { display: block; }

        /* Accordéons Paramètres */
        .accordion-header {
            display: flex;
            align-items: center;
            justify-content: space-between;
            padding: 18px 20px;
            background: linear-gradient(135deg, #f8fafc 0%, #eef2f7 100%);
            border: 2px solid #e2e8f0;
            border-radius: 12px;
            cursor: pointer;
            user-select: none;
            transition: all 0.3s ease;
            margin-bottom: 0;
            scroll-margin-top: 260px;
        }
        .accordion-header:hover {

            border-color: var(--primary);
            background: linear-gradient(135deg, var(--primary-bg) 0%, var(--primary-bg2) 100%);
        }
        .accordion-header.active {
            border-color: var(--primary);
            border-radius: 12px 12px 0 0;
            background: var(--gradient);
        }
        .accordion-header.active h2 {
            color: white;
        }
        .accordion-header.active .accordion-arrow {
            color: white;
            transform: rotate(180deg);
        }
        .accordion-header.active .accordion-subtitle {
            color: rgba(255,255,255,0.8);
        }
        .accordion-header h2 {
            margin: 0;
            font-size: 1.1em;
            color: #2d3748;
            transition: color 0.3s;
        }
        .accordion-subtitle {
            font-size: 0.8em;
            color: #718096;
            margin-top: 4px;
            transition: color 0.3s;
        }
        .accordion-arrow {
            font-size: 1.4em;
            color: #a0aec0;
            transition: transform 0.3s ease, color 0.3s;
            flex-shrink: 0;
            margin-left: 15px;
        }
        .accordion-body {
            display: none;
            border: 2px solid var(--primary);
            border-top: none;
            border-radius: 0 0 12px 12px;
            padding: 25px;
            background: white;
            animation: accordionOpen 0.3s ease;
        }
        .accordion-body.open {
            display: block;
        }
        @keyframes accordionOpen {
            from { opacity: 0; max-height: 0; }
            to { opacity: 1; max-height: 2000px; }
        }
        .accordion-wrapper {
            margin-bottom: 12px;
        }
        .accordion-wrapper:last-child {
            margin-bottom: 0;
        }
        .table { width: 100%; border-collapse: collapse; margin-top: 15px; }
        .table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; }
        .table thead { background: var(--primary); color: white; }
        .table th, .table td {
            padding: 12px 10px; text-align: left; border-bottom: 2px solid #cbd5e0; font-size: 13px;
        }
        .table tbody tr { border-bottom: 2px solid #cbd5e0; transition: all 0.15s; }
        .table tbody tr:nth-child(even) { background: #f7fafc; }
        .table tbody tr:hover { background: #edf2f7; }
        
        /* Client cards separators */
        .client-card { border-bottom: 2px solid #cbd5e0 !important; }
        .client-card:last-child { border-bottom: none !important; }
        
        /* Responsive table - Tablette */
        @media (max-width: 1024px) {
            .table { font-size: 12px; }
            .table th, .table td { padding: 8px 6px; }
            .table th:nth-child(2), .table td:nth-child(2) { max-width: 140px; } /* Contact */
            .table th:nth-child(3), .table td:nth-child(3) { max-width: 100px; } /* Historique */
            .table th:nth-child(4), .table td:nth-child(4) { max-width: 80px; } /* CA Total */
            .table th:nth-child(5), .table td:nth-child(5) { min-width: 50px; max-width: 60px; } /* Actions */
            .btn { font-size: 11px !important; padding: 5px 8px !important; }
        }
        
        /* Responsive table - Mobile */
        @media (max-width: 768px) {
            .table { font-size: 10px; }
            .table th, .table td { padding: 6px 3px; }
            .table th:nth-child(1), .table td:nth-child(1) { max-width: 70px; } /* Nom */
            .table th:nth-child(2), .table td:nth-child(2) { max-width: 100px; } /* Contact */
            .table th:nth-child(3), .table td:nth-child(3) { font-size: 9px; max-width: 60px; } /* Historique */
            .table th:nth-child(4), .table td:nth-child(4) { max-width: 55px; } /* CA Total */
            .table th:nth-child(5), .table td:nth-child(5) { min-width: 40px; max-width: 45px; padding: 3px 1px; } /* Actions */
            .btn { font-size: 10px !important; padding: 4px 6px !important; margin: 1px !important; }
        }
        
        /* Wrapper pour scroll horizontal sur mobile */
        .table-wrapper {
            width: 100%;
            overflow-x: auto;
            -webkit-overflow-scrolling: touch;
        }
        
        .empty-state { text-align: center; padding: 40px 20px; color: #a0aec0; }
        .empty-icon { font-size: 3em; margin-bottom: 10px; }
        .modal {
            display: none; position: fixed; top: 0; left: 0; width: 100%; height: 100%;
            background: rgba(0,0,0,0.5); z-index: 9999; align-items: center;
            justify-content: center; padding: 20px; overflow-y: auto;
        }
        .modal.active { display: flex; }
        .modal-content {
            background: white; border-radius: 12px; padding: 25px;
            max-width: 500px; width: 100%; max-height: 90vh; overflow-y: auto;
        }
        .modal-header {
            display: flex; justify-content: space-between; align-items: center; margin-bottom: 20px;
        }
        .modal-header h3 { color: #4a5568; }
        .modal-close {
            background: none; border: none; font-size: 1.5em;
            cursor: pointer; color: #a0aec0;
        }
        .text-center { text-align: center; margin-top: 15px; font-size: 14px; color: #718096; }
        .link { 
            color: var(--primary); 
            cursor: pointer; 
            text-decoration: underline;
            font-weight: 600;
            padding: 5px 8px;
            display: inline-block;
            transition: all 0.3s;
        }
        .link:hover {
            color: var(--primary-dark);
            background: rgba(102, 126, 234, 0.1);
            border-radius: 4px;
        }
        .grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
        
        
        /* Notification personnalisée */
        .custom-notification {
            position: fixed;
            top: 20px;
            right: 20px;
            background: white;
            padding: 15px 20px;
            border-radius: 12px;
            box-shadow: 0 10px 40px rgba(0,0,0,0.3);
            z-index: 10000;
            display: flex;
            align-items: center;
            gap: 12px;
            font-size: 15px;
            font-weight: 600;
            animation: slideIn 0.3s ease-out;
            min-width: 250px;
            max-width: 400px;
        }
        .custom-notification.success {
            border-left: 5px solid #48bb78;
            color: #22543d;
        }
        .custom-notification.error {
            border-left: 5px solid #f56565;
            color: #742a2a;
        }
        .custom-notification.warning {
            border-left: 5px solid #ed8936;
            color: #7c2d12;
        }
        .custom-notification.info {
            border-left: 5px solid var(--primary);
            color: #2c5282;
        }
        @keyframes slideIn {
            from {
                transform: translateX(400px);
                opacity: 0;
            }
            to {
                transform: translateX(0);
                opacity: 1;
            }
        }
        @keyframes slideOut {
            from {
                transform: translateX(0);
                opacity: 1;
            }
            to {
                transform: translateX(400px);
                opacity: 0;
            }
        }
        
        @media (max-width: 768px) {
            .container { margin: 15px auto; }
            .card { padding: 15px; overflow-x: hidden; }
            .header { padding: 10px 12px; gap: 6px; }
            .header-icon-btn { font-size: 18px; padding: 5px 8px; }
            .tabs { flex-wrap: wrap; gap: 6px; }
            .tab { font-size: 11px; padding: 12px 4px 8px; min-height: 68px; min-width: 60px; }
            .tab .tab-icon { font-size: 28px; }
            .tab .tab-label { font-size: 10px; }
            .btn { width: 100%; margin-right: 0; }
            .action-row .btn { width: auto !important; flex: 0 0 auto !important; }
            .btn-trash-inline { width: auto !important; min-width: auto !important; min-height: 36px !important; padding: 4px 10px !important; flex-shrink: 0 !important; }
            .grid-2 { grid-template-columns: 1fr; }
            .table { font-size: 11px; display: table; }
            .table th, .table td { 
                padding: 5px 3px; 
                font-size: 11px;
                white-space: normal;
                word-wrap: break-word;
            }
            .table th:first-child, .table td:first-child { min-width: 80px; }
            .table tbody tr { display: table-row; }
        }
    

/* ============================================
   SYSTÈME DE LICENCES - STYLES
   ============================================ */
.license-modal{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.7);display:flex;align-items:center;justify-content:center;z-index:10000;animation:fadeIn .3s ease;padding:20px;overflow-y:auto}@keyframes fadeIn{from{opacity:0}to{opacity:1}}.license-modal-content{background:#fff;border-radius:16px;max-width:900px;width:100%;box-shadow:0 20px 60px rgba(0,0,0,.3);animation:slideUp .3s ease;max-height:90vh;overflow-y:auto}@keyframes slideUp{from{transform:translateY(30px);opacity:0}to{transform:translateY(0);opacity:1}}.license-modal-header{display:flex;justify-content:space-between;align-items:center;padding:30px;border-bottom:1px solid #e5e7eb}.license-modal-header h2{margin:0;font-size:28px;color:#1f2937;font-weight:700}.license-modal-close{background:0 0;border:none;font-size:32px;color:#6b7280;cursor:pointer;padding:0;width:40px;height:40px;display:flex;align-items:center;justify-content:center;border-radius:8px;transition:all .2s}.license-modal-close:hover{background:#f3f4f6;color:#1f2937}.license-modal-body{padding:30px}.license-message{text-align:center;font-size:18px;color:#4b5563;margin-bottom:40px;line-height:1.6}.license-tiers{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:30px}.license-tier{background:#f9fafb;border:2px solid #e5e7eb;border-radius:12px;padding:30px;text-align:center;transition:all .3s;position:relative}.license-tier:hover{transform:translateY(-5px);box-shadow:0 10px 30px rgba(0,0,0,.1)}.license-tier.premium{border-color:#3b82f6}.license-tier.lifetime{border-color:#f59e0b;background:linear-gradient(135deg,#fef3c7 0,#fef9e7 100%)}.license-badge-top{position:absolute;top:-12px;left:50%;transform:translateX(-50%);background:linear-gradient(135deg,#f59e0b 0,#d97706 100%);color:#fff;padding:6px 16px;border-radius:20px;font-size:13px;font-weight:600;box-shadow:0 4px 12px rgba(245,158,11,.3)}.license-tier h3{margin:0 0 20px 0;font-size:24px;color:#1f2937;font-weight:700}.license-price{font-size:48px;font-weight:800;color:#1f2937;margin-bottom:10px;line-height:1}.license-tier.lifetime .license-price{background:linear-gradient(135deg,#f59e0b 0,#d97706 100%);-webkit-background-clip:text;-webkit-text-fill-color:transparent;background-clip:text}.license-tier.premium .license-price{color:#3b82f6}.license-price span{font-size:16px;font-weight:500;color:#6b7280;display:block;margin-top:5px}.license-features{list-style:none;padding:0;margin:30px 0;text-align:left}.license-features li{padding:12px 0;color:#4b5563;font-size:15px;border-bottom:1px solid #e5e7eb;line-height:1.5}.license-features li:last-child{border-bottom:none}.license-btn{width:100%;padding:16px 24px;border:none;border-radius:8px;font-size:16px;font-weight:600;cursor:pointer;transition:all .3s;margin-top:10px}.premium-btn{background:linear-gradient(135deg,#3b82f6 0,#2563eb 100%);color:#fff;box-shadow:0 4px 12px rgba(59,130,246,.3)}.premium-btn:hover{box-shadow:0 6px 20px rgba(59,130,246,.4);transform:translateY(-2px)}.lifetime-btn{background:linear-gradient(135deg,#f59e0b 0,#d97706 100%);color:#fff;box-shadow:0 4px 12px rgba(245,158,11,.3)}.lifetime-btn:hover{box-shadow:0 6px 20px rgba(245,158,11,.4);transform:translateY(-2px)}.license-badge-app{display:inline-flex;align-items:center;gap:6px;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.license-badge-app.free{background:#f3f4f6;color:#6b7280}.license-badge-app.premium{background:linear-gradient(135deg,#3b82f6 0,#2563eb 100%);color:#fff}.license-badge-app.lifetime{background:linear-gradient(135deg,#f59e0b 0,#d97706 100%);color:#fff}.limit-indicator{display:flex;align-items:center;justify-content:space-between;padding:12px 16px;background:#fef3c7;border-left:4px solid #f59e0b;border-radius:8px;margin:16px 0;font-size:14px;color:#92400e}.limit-indicator.danger{background:#fee2e2;border-left-color:#ef4444;color:#991b1b}.limit-indicator .upgrade-link{color:#d97706;font-weight:600;cursor:pointer;text-decoration:underline}.limit-indicator.danger .upgrade-link{color:#dc2626}.license-checking{display:flex;align-items:center;justify-content:center;gap:10px;padding:20px;font-size:16px;color:#6b7280}.license-checking::before{content:'';width:20px;height:20px;border:3px solid #e5e7eb;border-top-color:#3b82f6;border-radius:50%;animation:spin .8s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}@media (max-width:768px){.license-modal-content{margin:20px;max-height:calc(100vh - 40px)}.license-modal-header{padding:20px}.license-modal-header h2{font-size:22px}.license-modal-body{padding:20px}.license-tiers{grid-template-columns:1fr;gap:20px}.license-tier{padding:20px}.license-price{font-size:36px}}

        

/* ============================================
   STYLES CRM, DASHBOARD & DÉPENSES v2.5
   ============================================ */
.kanban-board { display: grid; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); gap: 15px; margin: 20px 0; }
.kanban-column { background: #f7fafc; border-radius: 8px; padding: 15px; min-height: 200px; }
.kanban-column h4 { margin-bottom: 15px; color: #4a5568; font-size: 14px; text-transform: uppercase; letter-spacing: 0.5px; }
.kanban-card { background: white; padding: 12px; border-radius: 6px; margin-bottom: 10px; border-left: 3px solid var(--primary); cursor: pointer; transition: all 0.2s; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.kanban-card:hover { transform: translateY(-2px); box-shadow: 0 4px 8px rgba(0,0,0,0.15); }
.kanban-card[draggable="true"] { cursor: grab; }
.kanban-card[draggable="true"]:active { cursor: grabbing; }
.kanban-card-title { font-weight: 600; color: #4a5568; margin-bottom: 5px; font-size: 14px; }
.kanban-card-value { color: #48bb78; font-weight: 700; font-size: 16px; }
.kanban-card-date { font-size: 11px; color: #a0aec0; margin-top: 5px; }
.kanban-col { transition: background 0.2s, box-shadow 0.2s; }

.status-badge { display: inline-block; padding: 4px 10px; border-radius: 12px; font-size: 11px; font-weight: 600; }
.status-prospect { background: #bee3f8; color: #2c5282; }
.status-qualification { background: #feebc8; color: #7c2d12; }
.status-proposition { background: #fef5e7; color: #975a16; }
.status-negociation { background: #fed7d7; color: #742a2a; }
.status-gagne { background: #c6f6d5; color: #22543d; }
.status-perdu { background: #e2e8f0; color: #4a5568; }

.facturx-badge { display: inline-block; background: var(--gradient); color: white; padding: 4px 12px; border-radius: 12px; font-size: 11px; font-weight: 600; margin-left: 10px; box-shadow: 0 2px 6px rgba(102, 126, 234, 0.3); }

.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 15px; }

/* Boutons +/- pour quantités */
.qty-controls { display: inline-flex; align-items: center; gap: 5px; margin-left: 10px; }
.qty-btn { background: var(--primary); color: white; border: none; border-radius: 4px; width: 28px; height: 28px; cursor: pointer; font-size: 16px; font-weight: bold; display: flex; align-items: center; justify-content: center; transition: all 0.2s; }
.qty-btn:hover { background: var(--primary-dark); transform: scale(1.1); }
.qty-btn:active { transform: scale(0.95); }

@media (max-width: 768px) {
    .grid-2 { grid-template-columns: 1fr; }
    .kanban-board { grid-template-columns: 1fr; }
    #pipeline-board { grid-template-columns: repeat(2, 1fr) !important; }
}

/* ===== POPUP MOYEN DE PAIEMENT ===== */
.payment-modal {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    z-index: 10000;
    animation: fadeIn 0.3s;
}

.payment-modal-content {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: white;
    border-radius: 16px;
    padding: 30px;
    max-width: 450px;
    width: 90%;
    box-shadow: 0 10px 40px rgba(0,0,0,0.3);
}

.payment-modal h3 {
    margin: 0 0 20px 0;
    color: #4a5568;
    font-size: 1.4em;
    text-align: center;
}

.payment-options {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 12px;
    margin-bottom: 20px;
}

.payment-option {
    display: flex;
    align-items: center;
    padding: 15px;
    border: 2px solid #e2e8f0;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.3s;
    background: #f7fafc;
}

.payment-option:hover {
    border-color: var(--primary);
    background: #edf2f7;
    transform: translateY(-2px);
}

.payment-option input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 10px;
    cursor: pointer;
    accent-color: var(--primary);
}

.payment-option label {
    cursor: pointer;
    font-weight: 600;
    color: #4a5568;
    font-size: 14px;
    flex: 1;
    margin: 0;
}

.payment-option.checked {
    border-color: var(--primary);
    background: #edf2f7;
}

.payment-info {
    background: #edf2f7;
    border-left: 4px solid var(--primary);
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
}

.payment-info p {
    margin: 5px 0;
    color: #4a5568;
    font-size: 14px;
}

.payment-info strong {
    color: var(--primary);
    font-size: 18px;
}

.payment-buttons {
    display: flex;
    gap: 10px;
    justify-content: flex-end;
}

/* Badge moyen de paiement dans la liste */
.payment-badge {
    display: inline-block;
    background: #48bb78;
    color: white;
    padding: 4px 10px;
    border-radius: 12px;
    font-size: 11px;
    font-weight: 600;
    margin-left: 8px;
}

/* Accordéon formulaires */
.form-accordion-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    cursor: pointer;
    user-select: none;
    padding: 12px 0;
    margin: 0;
}
.form-accordion-header h2, .form-accordion-header h3 {
    margin: 0;
    flex: 1;
}
.form-accordion-arrow {
    font-size: 18px;
    transition: transform 0.3s ease;
    color: var(--primary);
    margin-left: 10px;
}
.form-accordion-arrow.open {
    transform: rotate(180deg);
}
.form-accordion-body {
    max-height: 0;
    overflow: hidden;
    transition: max-height 0.4s ease;
}
.form-accordion-body.open {
    max-height: 5000px;
}

/* === Animations supplémentaires === */
@keyframes progressPulse { 0%{width:15%} 50%{width:75%} 100%{width:15%} }