/**
 * ============================================
 * RDCONNECT - DESIGN SYSTEM OFFICIEL v3.0
 * ============================================
 * 
 * Charte UI unifiée - Frontend & Backend
 * Date: 30 décembre 2025
 * 
 * ⚠️ CE FICHIER EST LA SOURCE UNIQUE DE VÉRITÉ
 * Toutes les variables et styles doivent être utilisés depuis ce fichier.
 * Interdiction de créer des styles isolés ou des valeurs arbitraires.
 * 
 * STRUCTURE:
 * 1. Variables CSS (Couleurs, Typographie, Espacements)
 * 2. Reset & Base
 * 3. Typographie
 * 4. Boutons
 * 5. Formulaires (Inputs)
 * 6. Cartes
 * 7. Modals
 * 8. Menus & Sidebar
 * 9. Tables
 * 10. Badges & Alertes
 * 11. Utilitaires
 */

/* ============================================
   1. VARIABLES CSS - DESIGN TOKENS
   ============================================ */

:root {
    /* ========== COULEURS OFFICIELLES ========== */
    
    /* Couleur Principale - Bleu Nuit (Confiance) */
    --color-primary: #0F2A44;
    --color-primary-rgb: 15, 42, 68;
    --color-primary-light: #1a3d5c;
    --color-primary-dark: #0a1f33;
    --color-primary-hover: #1a3d5c;
    
    /* Couleur d'Action - Orange Opportunité (CTA) */
    --color-secondary: #E46A2E;
    --color-secondary-rgb: 228, 106, 46;
    --color-secondary-light: #f07d42;
    --color-secondary-dark: #c85a24;
    --color-secondary-hover: #c85a24;
    
    /* Couleurs Neutres */
    --color-white: #FFFFFF;
    --color-gray-light: #F2F2F2;
    --color-gray-text: #7A8A9A;
    --color-gray-border: #E0E0E0;
    --color-black: #000000;
    
    /* Couleurs Fonctionnelles */
    --color-success: #2E7D32;
    --color-success-rgb: 46, 125, 50;
    --color-success-light: #4CAF50;
    --color-success-bg: rgba(46, 125, 50, 0.1);
    
    --color-warning: #F9A825;
    --color-warning-rgb: 249, 168, 37;
    --color-warning-light: #FFB74D;
    --color-warning-bg: rgba(249, 168, 37, 0.1);
    
    --color-error: #C62828;
    --color-error-rgb: 198, 40, 40;
    --color-error-light: #EF5350;
    --color-error-bg: rgba(198, 40, 40, 0.1);
    
    --color-info: #1976D2;
    --color-info-rgb: 25, 118, 210;
    --color-info-light: #42A5F5;
    --color-info-bg: rgba(25, 118, 210, 0.1);
    
    /* ========== TYPOGRAPHIE ========== */
    
    /* Police unique */
    --font-family: 'Raleway', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    
    /* Tailles de police */
    --font-size-h1: 36px;
    --font-size-h2: 30px;
    --font-size-h3: 24px;
    --font-size-h4: 20px;
    --font-size-body: 16px;
    --font-size-secondary: 14px;
    --font-size-small: 12px;
    
    /* Poids de police */
    --font-weight-bold: 700;
    --font-weight-semibold: 600;
    --font-weight-medium: 500;
    --font-weight-regular: 400;
    
    /* Hauteur de ligne */
    --line-height-tight: 1.2;
    --line-height-normal: 1.5;
    --line-height-relaxed: 1.7;
    
    /* ========== BORDER-RADIUS (ÉCHELLE STRICTE) ========== */
    
    --radius-xs: 4px;   /* Petits boutons, badges */
    --radius-sm: 8px;   /* Inputs, tables */
    --radius-md: 12px;  /* Boutons principaux */
    --radius-lg: 16px;  /* Modals */
    --radius-xl: 20px;  /* Grandes cartes */
    --radius-full: 9999px; /* Pilules */
    
    /* ========== OMBRES ========== */
    
    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.05);
    --shadow-md: 0 4px 6px rgba(0, 0, 0, 0.07);
    --shadow-lg: 0 10px 20px rgba(0, 0, 0, 0.1);
    --shadow-xl: 0 20px 40px rgba(0, 0, 0, 0.15);
    --shadow-card: 0 2px 8px rgba(15, 42, 68, 0.08);
    --shadow-modal: 0 25px 50px rgba(15, 42, 68, 0.25);
    
    /* ========== TRANSITIONS ========== */
    
    --transition-fast: 150ms ease;
    --transition-normal: 250ms ease;
    --transition-slow: 350ms ease;
    
    /* ========== ESPACEMENTS ========== */
    
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 16px;
    --spacing-lg: 24px;
    --spacing-xl: 32px;
    --spacing-2xl: 48px;
    
    /* ========== COMPATIBILITÉ (mapping vers anciennes variables) ========== */
    
    --primary-rgb: var(--color-primary-rgb);
    --primary-color: var(--color-primary);
    --primary01: rgba(var(--color-primary-rgb), 0.1);
    --primary03: rgba(var(--color-primary-rgb), 0.3);
    --primary05: rgba(var(--color-primary-rgb), 0.5);
    --default-font-family: var(--font-family);
}

/* ============================================
   2. RESET & BASE
   ============================================ */

/* Import Google Fonts - Raleway */
@import url('https://fonts.googleapis.com/css2?family=Raleway:wght@400;500;600;700&display=swap');

*, *::before, *::after {
    box-sizing: border-box;
}

html {
    font-size: var(--font-size-body);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
}

body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-normal);
    color: var(--color-primary);
    background-color: var(--color-gray-light);
    margin: 0;
    padding: 0;
}

/* Force Raleway sur tous les éléments (override templates) */
.page, .app-content, .main-content,
[data-nav-layout], [data-theme-mode],
.card, .modal, .sidebar, .navbar,
input, select, textarea, button {
    font-family: var(--font-family) !important;
}

/* ============================================
   3. TYPOGRAPHIE
   ============================================ */

h1, .h1 {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h1) !important;
    font-weight: var(--font-weight-bold) !important;
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md) 0;
}

h2, .h2 {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h2) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-md) 0;
}

h3, .h3 {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h3) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-tight);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

h4, .h4 {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-medium) !important;
    line-height: var(--line-height-normal);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-sm) 0;
}

h5, .h5 {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-normal);
    color: var(--color-primary);
    margin: 0 0 var(--spacing-xs) 0;
}

h6, .h6 {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: var(--line-height-normal);
    color: var(--color-gray-text);
    margin: 0 0 var(--spacing-xs) 0;
}

p, .text-body {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-body);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-relaxed);
    color: var(--color-gray-text);
    margin: 0 0 var(--spacing-md) 0;
}

.text-secondary {
    font-size: var(--font-size-secondary) !important;
    color: var(--color-gray-text) !important;
}

.text-small, small, .small {
    font-size: var(--font-size-small) !important;
    color: var(--color-gray-text);
}

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

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

a:hover {
    color: var(--color-secondary);
    text-decoration: underline;
}

/* ============================================
   4. BOUTONS
   ============================================ */

/* Reset boutons */
.btn {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-semibold) !important;
    line-height: 1;
    padding: var(--spacing-sm) var(--spacing-lg) !important;
    border-radius: var(--radius-md) !important;
    border: 2px solid transparent;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--spacing-sm);
    transition: all var(--transition-normal) !important;
    text-decoration: none !important;
}

.btn:focus {
    outline: none;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.2) !important;
}

/* Bouton Primaire - Bleu Nuit */
.btn-primary {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.btn-primary:hover,
.btn-primary:focus {
    background-color: var(--color-primary-hover) !important;
    border-color: var(--color-primary-hover) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-primary-rgb), 0.3) !important;
}

.btn-primary:active {
    transform: translateY(0);
}

/* Bouton Secondaire / CTA - Orange */
.btn-secondary,
.btn-cta,
.btn-orange,
.main-button {
    background-color: var(--color-secondary) !important;
    border-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}

.btn-secondary:hover,
.btn-secondary:focus,
.btn-cta:hover,
.btn-orange:hover,
.main-button:hover {
    background-color: var(--color-secondary-hover) !important;
    border-color: var(--color-secondary-hover) !important;
    color: var(--color-white) !important;
    transform: translateY(-2px);
    box-shadow: 0 4px 12px rgba(var(--color-secondary-rgb), 0.3) !important;
}

/* Bouton Success */
.btn-success {
    background-color: var(--color-success) !important;
    border-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.btn-success:hover {
    background-color: var(--color-success-light) !important;
    border-color: var(--color-success-light) !important;
    box-shadow: 0 4px 12px rgba(var(--color-success-rgb), 0.3) !important;
}

/* Bouton Danger */
.btn-danger {
    background-color: var(--color-error) !important;
    border-color: var(--color-error) !important;
    color: var(--color-white) !important;
}

.btn-danger:hover {
    background-color: var(--color-error-light) !important;
    border-color: var(--color-error-light) !important;
    box-shadow: 0 4px 12px rgba(var(--color-error-rgb), 0.3) !important;
}

/* Bouton Warning */
.btn-warning {
    background-color: var(--color-warning) !important;
    border-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}

.btn-warning:hover {
    background-color: var(--color-warning-light) !important;
    border-color: var(--color-warning-light) !important;
}

/* Bouton Info */
.btn-info {
    background-color: var(--color-info) !important;
    border-color: var(--color-info) !important;
    color: var(--color-white) !important;
}

.btn-info:hover {
    background-color: var(--color-info-light) !important;
    border-color: var(--color-info-light) !important;
}

/* Bouton Light */
.btn-light {
    background-color: var(--color-white) !important;
    border-color: var(--color-gray-border) !important;
    color: var(--color-primary) !important;
}

.btn-light:hover {
    background-color: var(--color-gray-light) !important;
    border-color: var(--color-gray-text) !important;
}

/* Bouton Outline Primary */
.btn-outline-primary {
    background-color: transparent !important;
    border: 2px solid var(--color-primary) !important;
    color: var(--color-primary) !important;
}

.btn-outline-primary:hover {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Bouton Outline Secondary */
.btn-outline-secondary {
    background-color: transparent !important;
    border: 2px solid var(--color-secondary) !important;
    color: var(--color-secondary) !important;
}

.btn-outline-secondary:hover {
    background-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}

/* Bouton Désactivé */
.btn:disabled,
.btn.disabled {
    background-color: var(--color-gray-text) !important;
    border-color: var(--color-gray-text) !important;
    color: var(--color-white) !important;
    opacity: 0.6;
    cursor: not-allowed;
    transform: none !important;
    box-shadow: none !important;
}

/* Tailles de boutons */
.btn-sm {
    font-size: var(--font-size-small) !important;
    padding: var(--spacing-xs) var(--spacing-md) !important;
    border-radius: var(--radius-xs) !important;
}

.btn-lg {
    font-size: var(--font-size-body) !important;
    padding: var(--spacing-md) var(--spacing-xl) !important;
}

/* ============================================
   5. FORMULAIRES (INPUTS)
   ============================================ */

.form-control,
.form-select,
input[type="text"],
input[type="email"],
input[type="password"],
input[type="number"],
input[type="tel"],
input[type="url"],
input[type="search"],
input[type="date"],
textarea,
select {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-regular);
    color: var(--color-primary) !important;
    background-color: var(--color-white) !important;
    border: 2px solid var(--color-gray-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    transition: all var(--transition-fast) !important;
    width: 100%;
}

.form-control:focus,
.form-select:focus,
input:focus,
textarea:focus,
select:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1) !important;
    outline: none !important;
}

.form-control::placeholder,
input::placeholder,
textarea::placeholder {
    color: var(--color-gray-text) !important;
    opacity: 0.7;
}

/* États de validation */
.form-control.is-invalid,
.is-invalid {
    border-color: var(--color-error) !important;
}

.form-control.is-valid,
.is-valid {
    border-color: var(--color-success) !important;
}

/* Labels */
.form-label,
label {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--spacing-xs) !important;
    display: block;
}

/* Checkboxes et Radios */
.form-check-input {
    width: 18px !important;
    height: 18px !important;
    border: 2px solid var(--color-gray-border) !important;
    border-radius: var(--radius-xs) !important;
    cursor: pointer;
}

.form-check-input:checked {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
}

.form-check-input[type="radio"] {
    border-radius: 50% !important;
}

.form-check-label {
    font-size: var(--font-size-secondary) !important;
    color: var(--color-gray-text) !important;
    cursor: pointer;
}

/* Textarea */
textarea.form-control {
    min-height: 120px;
    resize: vertical;
}

/* Input Group */
.input-group {
    border-radius: var(--radius-sm) !important;
}

.input-group > :first-child {
    border-top-left-radius: var(--radius-sm) !important;
    border-bottom-left-radius: var(--radius-sm) !important;
}

.input-group > :last-child {
    border-top-right-radius: var(--radius-sm) !important;
    border-bottom-right-radius: var(--radius-sm) !important;
}

/* ============================================
   6. CARTES
   ============================================ */

.card {
    font-family: var(--font-family) !important;
    background-color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    transition: all var(--transition-normal);
    overflow: hidden;
}

.card:hover {
    box-shadow: var(--shadow-lg) !important;
    transform: translateY(-2px);
}

.card-header {
    font-family: var(--font-family) !important;
    background-color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-gray-light) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.card-body {
    padding: var(--spacing-lg) !important;
}

.card-footer {
    background-color: var(--color-gray-light) !important;
    border-top: 1px solid var(--color-gray-border) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

.card-title {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-primary) !important;
    margin-bottom: var(--spacing-sm);
}

.card-text {
    font-size: var(--font-size-secondary);
    color: var(--color-gray-text);
}

/* Feature Cards (Frontend) */
.features-small-item,
.feature-card {
    background-color: var(--color-white) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-card) !important;
    padding: var(--spacing-lg);
    transition: all var(--transition-normal);
}

.features-small-item:hover,
.feature-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg) !important;
}

/* ============================================
   7. MODALS - COMPOSANT GLOBAL RÉUTILISABLE
   ============================================ */

.modal-content {
    font-family: var(--font-family) !important;
    background-color: var(--color-white) !important;
    border: none !important;
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-modal) !important;
    overflow: hidden;
}

.modal-header {
    background-color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-gray-light) !important;
    padding: var(--spacing-lg) !important;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0 !important;
}

/* Headers colorés pour modals */
.modal-header.bg-primary {
    background-color: var(--color-primary) !important;
    border-bottom: none !important;
}

.modal-header.bg-secondary {
    background-color: var(--color-secondary) !important;
    border-bottom: none !important;
}

.modal-header.bg-success {
    background-color: var(--color-success) !important;
    border-bottom: none !important;
}

.modal-header.bg-danger {
    background-color: var(--color-error) !important;
    border-bottom: none !important;
}

.modal-header.bg-warning {
    background-color: var(--color-warning) !important;
    border-bottom: none !important;
}

.modal-header.bg-info {
    background-color: var(--color-info) !important;
    border-bottom: none !important;
}

.modal-header.bg-primary,
.modal-header.bg-secondary,
.modal-header.bg-success,
.modal-header.bg-danger,
.modal-header.bg-info {
    color: var(--color-white) !important;
}

.modal-header.bg-primary .modal-title,
.modal-header.bg-secondary .modal-title,
.modal-header.bg-success .modal-title,
.modal-header.bg-danger .modal-title,
.modal-header.bg-info .modal-title {
    color: var(--color-white) !important;
}

.modal-header.bg-primary .btn-close,
.modal-header.bg-secondary .btn-close,
.modal-header.bg-success .btn-close,
.modal-header.bg-danger .btn-close,
.modal-header.bg-info .btn-close {
    filter: brightness(0) invert(1) !important;
}

.modal-title {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-h4) !important;
    font-weight: var(--font-weight-semibold) !important;
    color: var(--color-primary);
}

.modal-body {
    font-family: var(--font-family) !important;
    padding: var(--spacing-lg) !important;
    color: var(--color-gray-text);
}

.modal-footer {
    background-color: var(--color-gray-light) !important;
    border-top: 1px solid var(--color-gray-border) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-radius: 0 0 var(--radius-lg) var(--radius-lg) !important;
    gap: var(--spacing-sm);
}

.modal-footer .btn {
    min-width: 100px;
}

/* Animation du modal */
.modal.fade .modal-dialog {
    transform: scale(0.9) translateY(-30px);
    transition: transform var(--transition-normal) ease-out;
}

.modal.show .modal-dialog {
    transform: scale(1) translateY(0);
}

/* Tailles de modal */
.modal-sm { max-width: 350px !important; }
.modal-md { max-width: 500px !important; }
.modal-lg { max-width: 700px !important; }
.modal-xl { max-width: 900px !important; }

/* Backdrop */
.modal-backdrop.show {
    opacity: 0.5 !important;
    background-color: var(--color-primary) !important;
}

/* ============================================
   8. MENUS & SIDEBAR
   ============================================ */

/* ========== SIDEBAR MODE SOMBRE avec HEADER BLANC (RDConnect) ========== */
/* La sidebar reste en bleu nuit, SEUL le header du logo est blanc */

[data-menu-styles="dark"] .app-sidebar,
[data-menu-styles="dark"] .main-sidebar {
    background-color: var(--color-primary) !important;
    border-right: none !important;
}

/* HEADER DU LOGO - Fond blanc pour visibilité du logo */
[data-menu-styles="dark"] .main-sidebar-header {
    background-color: var(--color-white) !important;
    border-bottom: 1px solid var(--color-gray-light) !important;
}

[data-menu-styles="dark"] .side-menu__item {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-menu-styles="dark"] .side-menu__item:hover {
    background-color: rgba(255, 255, 255, 0.1) !important;
    color: var(--color-white) !important;
}

[data-menu-styles="dark"] .side-menu__item.active {
    background-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}

[data-menu-styles="dark"] .slide__category {
    color: rgba(255, 255, 255, 0.5) !important;
}

[data-menu-styles="dark"] .side-menu__icon {
    color: rgba(255, 255, 255, 0.8) !important;
}

[data-menu-styles="dark"] .side-menu__item.active .side-menu__icon {
    color: var(--color-white) !important;
}

/* Sidebar principale (styles communs) */
.app-sidebar,
.main-sidebar {
    font-family: var(--font-family) !important;
}

.main-sidebar-header {
    padding: var(--spacing-md) !important;
}

/* Items du menu (styles communs) */
.side-menu__item {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
    margin: var(--spacing-xs) var(--spacing-sm) !important;
    border-radius: var(--radius-sm) !important;
    transition: all var(--transition-fast) !important;
}

.side-menu__label {
    font-family: var(--font-family) !important;
}

.side-menu__icon {
    color: inherit !important;
}

/* Scrollbar sidebar */
.main-sidebar::-webkit-scrollbar {
    width: 6px;
}

.main-sidebar::-webkit-scrollbar-thumb {
    border-radius: var(--radius-full);
}

.main-sidebar::-webkit-scrollbar-thumb:hover {
    opacity: 0.8;
}

/* Navigation Header (Frontend) */
.header-area .main-nav {
    font-family: var(--font-family) !important;
    background-color: var(--color-white) !important;
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-md) !important;
}

.header-area .main-nav .nav li a {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-medium) !important;
    color: var(--color-primary) !important;
    transition: color var(--transition-fast);
}

.header-area .main-nav .nav li a:hover,
.header-area .main-nav .nav li a.active {
    color: var(--color-secondary) !important;
}

/* ============================================
   9. TABLES
   ============================================ */

.table {
    font-family: var(--font-family) !important;
    border-radius: var(--radius-sm) !important;
    overflow: hidden;
}

.table thead th {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-semibold) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border: none !important;
    padding: var(--spacing-md) !important;
}

.table tbody td {
    font-size: var(--font-size-secondary) !important;
    color: var(--color-gray-text) !important;
    border-color: var(--color-gray-light) !important;
    padding: var(--spacing-md) !important;
    vertical-align: middle;
}

.table tbody tr:hover {
    background-color: var(--color-gray-light) !important;
}

/* Grid.js Tables */
.gridjs-container {
    border-radius: var(--radius-sm) !important;
    overflow: hidden !important;
}

.gridjs-wrapper {
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-card) !important;
}

.gridjs-th {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    font-weight: var(--font-weight-semibold) !important;
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-color: var(--color-primary-dark) !important;
    padding: var(--spacing-md) !important;
}

.gridjs-th:hover {
    background-color: var(--color-primary-light) !important;
}

.gridjs-td {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    padding: var(--spacing-md) !important;
    border-color: var(--color-gray-light) !important;
}

.gridjs-tr:hover {
    background-color: var(--color-gray-light) !important;
}

/* Pagination Grid.js */
.gridjs-pagination {
    font-family: var(--font-family) !important;
}

.gridjs-pagination .gridjs-currentPage {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
    border-radius: var(--radius-xs) !important;
}

.gridjs-pagination button:hover:not([disabled]) {
    background-color: var(--color-gray-light) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-primary) !important;
}

/* Recherche Grid.js */
.gridjs-search-input {
    font-family: var(--font-family) !important;
    border: 2px solid var(--color-gray-border) !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.gridjs-search-input:focus {
    border-color: var(--color-primary) !important;
    box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb), 0.1) !important;
}

/* ============================================
   10. BADGES & ALERTES
   ============================================ */

/* Badges */
.badge {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-small) !important;
    font-weight: var(--font-weight-semibold) !important;
    padding: var(--spacing-xs) var(--spacing-sm) !important;
    border-radius: var(--radius-xs) !important;
    text-transform: uppercase;
    letter-spacing: 0.5px;
}

.badge.bg-primary,
.badge-primary {
    background-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

.badge.bg-secondary,
.badge-secondary {
    background-color: var(--color-secondary) !important;
    color: var(--color-white) !important;
}

.badge.bg-success,
.badge-success {
    background-color: var(--color-success) !important;
    color: var(--color-white) !important;
}

.badge.bg-warning,
.badge-warning {
    background-color: var(--color-warning) !important;
    color: var(--color-white) !important;
}

.badge.bg-danger,
.badge-danger {
    background-color: var(--color-error) !important;
    color: var(--color-white) !important;
}

.badge.bg-info,
.badge-info {
    background-color: var(--color-info) !important;
    color: var(--color-white) !important;
}

.badge.bg-light,
.badge-light {
    background-color: var(--color-gray-light) !important;
    color: var(--color-gray-text) !important;
}

/* Badges soft */
.badge-soft-primary {
    background-color: rgba(var(--color-primary-rgb), 0.15) !important;
    color: var(--color-primary) !important;
}

.badge-soft-secondary {
    background-color: rgba(var(--color-secondary-rgb), 0.15) !important;
    color: var(--color-secondary) !important;
}

.badge-soft-success {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success) !important;
}

.badge-soft-warning {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning) !important;
}

.badge-soft-danger {
    background-color: var(--color-error-bg) !important;
    color: var(--color-error) !important;
}

.badge-soft-info {
    background-color: var(--color-info-bg) !important;
    color: var(--color-info) !important;
}

/* Alertes */
.alert {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
    border: none !important;
    border-radius: var(--radius-sm) !important;
    padding: var(--spacing-md) var(--spacing-lg) !important;
    border-left: 4px solid !important;
}

.alert-primary {
    background-color: rgba(var(--color-primary-rgb), 0.1) !important;
    color: var(--color-primary) !important;
    border-left-color: var(--color-primary) !important;
}

.alert-secondary {
    background-color: rgba(var(--color-secondary-rgb), 0.1) !important;
    color: var(--color-secondary) !important;
    border-left-color: var(--color-secondary) !important;
}

.alert-success {
    background-color: var(--color-success-bg) !important;
    color: var(--color-success) !important;
    border-left-color: var(--color-success) !important;
}

.alert-warning {
    background-color: var(--color-warning-bg) !important;
    color: var(--color-warning) !important;
    border-left-color: var(--color-warning) !important;
}

.alert-danger {
    background-color: var(--color-error-bg) !important;
    color: var(--color-error) !important;
    border-left-color: var(--color-error) !important;
}

.alert-info {
    background-color: var(--color-info-bg) !important;
    color: var(--color-info) !important;
    border-left-color: var(--color-info) !important;
}

/* ============================================
   11. UTILITAIRES
   ============================================ */

/* Backgrounds */
.bg-primary { background-color: var(--color-primary) !important; }
.bg-secondary { background-color: var(--color-secondary) !important; }
.bg-success { background-color: var(--color-success) !important; }
.bg-warning { background-color: var(--color-warning) !important; }
.bg-danger { background-color: var(--color-error) !important; }
.bg-info { background-color: var(--color-info) !important; }
.bg-light { background-color: var(--color-gray-light) !important; }
.bg-white { background-color: var(--color-white) !important; }

/* Textes */
.text-primary { color: var(--color-primary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.text-success { color: var(--color-success) !important; }
.text-warning { color: var(--color-warning) !important; }
.text-danger { color: var(--color-error) !important; }
.text-info { color: var(--color-info) !important; }
.text-white { color: var(--color-white) !important; }

/* Bordures */
.border-primary { border-color: var(--color-primary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }

/* Border-radius utilitaires */
.rounded-xs { border-radius: var(--radius-xs) !important; }
.rounded-sm { border-radius: var(--radius-sm) !important; }
.rounded-md { border-radius: var(--radius-md) !important; }
.rounded-lg { border-radius: var(--radius-lg) !important; }
.rounded-xl { border-radius: var(--radius-xl) !important; }

/* Ombres utilitaires */
.shadow-sm { box-shadow: var(--shadow-sm) !important; }
.shadow-md { box-shadow: var(--shadow-md) !important; }
.shadow-lg { box-shadow: var(--shadow-lg) !important; }

/* Hero Section (Frontend) */
.welcome-area,
.hero-section {
    font-family: var(--font-family) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
}

.welcome-area .header-text h1,
.hero-section h1 {
    color: var(--color-white) !important;
}

.welcome-area .header-text p,
.hero-section p {
    color: rgba(255, 255, 255, 0.9) !important;
}

/* Footer */
footer {
    font-family: var(--font-family) !important;
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
    color: var(--color-white);
}

footer a {
    color: rgba(255, 255, 255, 0.8);
}

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

/* Breadcrumbs */
.breadcrumb {
    font-family: var(--font-family) !important;
    font-size: var(--font-size-secondary) !important;
}

.breadcrumb-item a {
    color: var(--color-primary) !important;
}

.breadcrumb-item.active {
    color: var(--color-gray-text) !important;
}

/* Pagination */
.pagination .page-link {
    font-family: var(--font-family) !important;
    color: var(--color-primary);
    border-color: var(--color-gray-border);
    border-radius: var(--radius-xs) !important;
}

.pagination .page-item.active .page-link {
    background-color: var(--color-primary) !important;
    border-color: var(--color-primary) !important;
    color: var(--color-white) !important;
}

/* Spinners */
.spinner-border {
    color: var(--color-primary) !important;
}

/* Dropdown */
.dropdown-menu {
    font-family: var(--font-family) !important;
    border: 1px solid var(--color-gray-border) !important;
    border-radius: var(--radius-sm) !important;
    box-shadow: var(--shadow-lg) !important;
}

.dropdown-item {
    font-size: var(--font-size-secondary) !important;
    color: var(--color-gray-text) !important;
    padding: var(--spacing-sm) var(--spacing-md) !important;
}

.dropdown-item:hover {
    background-color: var(--color-gray-light) !important;
    color: var(--color-primary) !important;
}

/* Tooltips */
.tooltip-inner {
    font-family: var(--font-family) !important;
    background-color: var(--color-primary) !important;
    border-radius: var(--radius-xs) !important;
    font-size: var(--font-size-small) !important;
}

/* ============================================
   12. CARTES À FOND DÉGRADÉ (Profil, CTA, Hero)
   ============================================ */

/**
 * Classe réutilisable pour les cartes avec fond dégradé
 * où le texte doit être blanc et parfaitement lisible.
 * 
 * Usage: <div class="rd-card--gradient">...</div>
 * Variantes: .rd-card--gradient-primary, .rd-card--gradient-cyan
 */

.rd-card--gradient {
    position: relative;
    border-radius: var(--radius-xl) !important;
    padding: var(--spacing-xl) var(--spacing-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    transition: transform var(--transition-normal), box-shadow var(--transition-normal);
    overflow: hidden;
    color: var(--color-white) !important;
}

/* Overlay légère pour améliorer le contraste */
.rd-card--gradient::before {
    content: '';
    position: absolute;
    inset: 0;
    background: rgba(0, 0, 0, 0.12);
    border-radius: inherit;
    pointer-events: none;
    z-index: 0;
}

/* Tout le contenu doit être au-dessus de l'overlay */
.rd-card--gradient > * {
    position: relative;
    z-index: 1;
}

/* Variante Primary (Bleu Nuit) */
.rd-card--gradient-primary {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%) !important;
}

/* Variante Cyan (Compatibilité) */
.rd-card--gradient-cyan {
    background: linear-gradient(135deg, #0891b2 0%, #0e7490 100%) !important;
}

/* Hover effect */
.rd-card--gradient:hover {
    transform: translateY(-4px);
    box-shadow: var(--shadow-xl) !important;
}

/* === TYPOGRAPHIE SUR FOND DÉGRADÉ === */

/* Titres - Blanc pur pour contraste maximum */
.rd-card--gradient h1,
.rd-card--gradient h2,
.rd-card--gradient h3,
.rd-card--gradient h4,
.rd-card--gradient h5,
.rd-card--gradient h6,
.rd-card--gradient .card-title,
.rd-card--gradient .rd-card__title {
    color: #FFFFFF !important;
    font-weight: var(--font-weight-bold) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Paragraphes descriptifs - Blanc légèrement adouci */
.rd-card--gradient p,
.rd-card--gradient .rd-card__description {
    color: rgba(255, 255, 255, 0.92) !important;
    font-size: var(--font-size-body) !important;
    font-weight: var(--font-weight-regular) !important;
    line-height: var(--line-height-normal) !important;
}

/* Texte secondaire/notes */
.rd-card--gradient small,
.rd-card--gradient .text-muted,
.rd-card--gradient .rd-card__note {
    color: rgba(255, 255, 255, 0.78) !important;
    font-size: var(--font-size-secondary) !important;
}

/* Icônes */
.rd-card--gradient i,
.rd-card--gradient .rd-card__icon {
    color: rgba(255, 255, 255, 0.95) !important;
}

/* === BOUTONS SUR FOND DÉGRADÉ === */

/* Bouton Light (principal sur gradient) */
.rd-card--gradient .btn-light {
    background-color: var(--color-white) !important;
    color: var(--color-primary) !important;
    border: none !important;
    font-weight: var(--font-weight-semibold) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
}

.rd-card--gradient .btn-light:hover {
    background-color: var(--color-gray-light) !important;
    transform: translateY(-2px);
    box-shadow: 0 6px 16px rgba(0, 0, 0, 0.25) !important;
}

/* Bouton Outline Light (secondaire sur gradient) */
.rd-card--gradient .btn-outline-light {
    background-color: transparent !important;
    color: var(--color-white) !important;
    border: 2px solid rgba(255, 255, 255, 0.9) !important;
    font-weight: var(--font-weight-semibold) !important;
}

.rd-card--gradient .btn-outline-light:hover {
    background-color: rgba(255, 255, 255, 0.15) !important;
    border-color: var(--color-white) !important;
}

/* === RESPONSIVE === */

@media (max-width: 768px) {
    .rd-card--gradient {
        padding: var(--spacing-lg) var(--spacing-md) !important;
    }
    
    .rd-card--gradient h3 {
        font-size: var(--font-size-h4) !important;
    }
}

/* ============================================
   13. PRICING CARDS - Lisibilité texte
   ============================================ */

/**
 * Correctifs pour les cartes de pricing avec fond coloré
 * Problème: texte barré invisible sur fond orange (cartes featured)
 */

/* Prix barré sur fond orange (cartes featured/active) */
.pricing-item.active .price-wrapper .price-original,
.pricing-item.active .price-original,
.pricing-item.featured .price-wrapper .price-original,
.pricing-item.featured .price-original {
    color: rgba(255, 255, 255, 0.7) !important;
    text-decoration: line-through !important;
    font-size: 18px !important;
    font-weight: var(--font-weight-medium) !important;
    margin-bottom: 4px !important;
    display: block !important;
}

/* Prix barré sur fond bleu (cartes normales) */
.pricing-item:not(.active):not(.featured) .price-wrapper .price-original,
.pricing-item:not(.active):not(.featured) .price-original {
    color: rgba(255, 255, 255, 0.65) !important;
    text-decoration: line-through !important;
    font-size: 16px !important;
}

/* Promo badge sur fond orange - texte plus visible */
.pricing-item.active .promo-badge,
.pricing-item.featured .promo-badge {
    background: rgba(255, 255, 255, 0.25) !important;
    color: #FFFFFF !important;
    border: 1px solid rgba(255, 255, 255, 0.4) !important;
    font-weight: var(--font-weight-semibold) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* Amélioration globale de la lisibilité des prix */
.pricing-item .price-wrapper {
    position: relative;
}

.pricing-item .price-wrapper .currency,
.pricing-item .price-wrapper .price,
.pricing-item .price-wrapper .period {
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.15);
}

/* Subtitle dans les cartes pricing */
.pricing-item .pricing-subtitle {
    color: var(--color-gray-text) !important;
    font-size: var(--font-size-secondary) !important;
}

/* Promo badge - style de base (dans price-wrapper sur fond coloré) */
.pricing-item .promo-badge {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%);
    color: var(--color-white);
    padding: 6px 14px;
    border-radius: var(--radius-full);
    font-size: 11px;
    margin-top: 8px;
    display: inline-block;
    font-weight: var(--font-weight-semibold);
    box-shadow: 0 2px 8px rgba(228, 106, 46, 0.3);
}

/* Promo badge dans le header (fond blanc/clair) - HAUTE VISIBILITÉ */
.pricing-item .promo-badge--header,
.pricing-item .pricing-header .promo-badge {
    background: linear-gradient(135deg, var(--color-secondary) 0%, var(--color-secondary-dark) 100%) !important;
    color: #FFFFFF !important;
    padding: 8px 16px !important;
    border-radius: var(--radius-full) !important;
    font-size: 12px !important;
    font-weight: var(--font-weight-bold) !important;
    display: inline-block !important;
    margin-top: 10px !important;
    box-shadow: 0 4px 12px rgba(228, 106, 46, 0.4) !important;
    text-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

/* ============================================
   14. RESPONSIVE GÉNÉRAL
   ============================================ */

@media (max-width: 991.98px) {
    :root {
        --font-size-h1: 30px;
        --font-size-h2: 26px;
        --font-size-h3: 22px;
        --font-size-h4: 18px;
    }
    
    .card {
        border-radius: var(--radius-lg) !important;
    }
    
    .modal-content {
        border-radius: var(--radius-md) !important;
    }
    
    .modal-header,
    .modal-footer {
        padding: var(--spacing-md) !important;
    }
}

@media (max-width: 576px) {
    :root {
        --font-size-h1: 26px;
        --font-size-h2: 22px;
        --font-size-h3: 20px;
        --font-size-h4: 18px;
    }
    
    .btn {
        padding: var(--spacing-sm) var(--spacing-md) !important;
    }
    
    .card-body {
        padding: var(--spacing-md) !important;
    }
    
    .modal-dialog {
        margin: var(--spacing-sm) !important;
    }
}

/* ============================================
   FIN DU DESIGN SYSTEM RDCONNECT v3.0
   ============================================ */