/* =========================================================================
   style.css - CSS principal NUM-ECARD (Webpack compatible)
   ========================================================================= */

/* =========================================================================
   _variables.css - Variables CSS globales NUM-ECARD
   =========================================================================
   Ce fichier contient toutes les variables de design utilisées dans l'app.
   Modifier ces valeurs changera automatiquement tout le design.
   ========================================================================= */

:root {
    /* =========================================== */
    /* COULEURS PRINCIPALES                        */
    /* =========================================== */
    
    /* Bleu Apple */
    --color-primary: #0071e3;
    --color-primary-hover: #0077ed;
    --color-primary-light: rgba(0, 113, 227, 0.08);
    --color-primary-lighter: rgba(0, 113, 227, 0.06);
    
    /* Dégradé violet NUM-ECARD */
    --gradient-primary: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
    --gradient-primary-light: linear-gradient(135deg, rgba(102, 126, 234, 0.1) 0%, rgba(118, 75, 162, 0.1) 100%);
    
    /* Violet facture/invoice */
    --color-invoice: #9b59b6;
    --color-invoice-dark: #8e44ad;
    --gradient-invoice: linear-gradient(135deg, #9b59b6 0%, #8e44ad 100%);
    
    /* =========================================== */
    /* COULEURS TEXTE                              */
    /* =========================================== */
    --color-text-primary: #1d1d1f;
    --color-text-secondary: #6e6e73;
    --color-text-tertiary: #86868b;
    --color-text-muted: #999999;
    
    /* =========================================== */
    /* COULEURS FOND                               */
    /* =========================================== */
    --color-bg-white: #ffffff;
    --color-bg-light: #f5f5f7;
    --color-bg-lighter: #f9f9fb;
    --color-bg-border: #e8e8ed;
    --color-bg-border-light: rgba(0, 0, 0, 0.08);
    
    /* =========================================== */
    /* COULEURS STATUS                             */
    /* =========================================== */
    
    /* Success - Vert */
    --color-success: #22c55e;
    --color-success-dark: #065f46;
    --color-success-bg: #d1fae5;
    --color-success-bg-light: #f0fdf4;
    --color-success-border: #a7f3d0;
    
    /* Warning - Jaune/Orange */
    --color-warning: #f59e0b;
    --color-warning-dark: #92400e;
    --color-warning-bg: #fef3c7;
    --color-warning-bg-light: #fffbeb;
    --color-warning-border: #fde68a;
    
    /* Error - Rouge */
    --color-error: #ef4444;
    --color-error-dark: #991b1b;
    --color-error-bg: #fee2e2;
    --color-error-bg-light: #fff5f5;
    --color-error-border: #fecaca;
    
    /* Info - Bleu */
    --color-info: #3b82f6;
    --color-info-dark: #1e40af;
    --color-info-bg: #dbeafe;
    
    /* Processing - Indigo */
    --color-processing: #6366f1;
    --color-processing-dark: #4338ca;
    --color-processing-bg: #e0e7ff;
    
    /* Draft - Gris */
    --color-draft: #9ca3af;
    --color-draft-dark: #6b7280;
    --color-draft-bg: #f3f4f6;
    
    /* =========================================== */
    /* TYPOGRAPHIE                                 */
    /* =========================================== */
    --font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
    
    --font-size-xs: 11px;
    --font-size-sm: 12px;
    --font-size-base: 14px;
    --font-size-md: 15px;
    --font-size-lg: 17px;
    --font-size-xl: 18px;
    --font-size-2xl: 20px;
    --font-size-3xl: 24px;
    --font-size-4xl: 28px;
    --font-size-5xl: 32px;
    
    --font-weight-normal: 400;
    --font-weight-medium: 500;
    --font-weight-semibold: 600;
    --font-weight-bold: 700;
    
    --line-height-tight: 1.1;
    --line-height-base: 1.47059;
    --line-height-relaxed: 1.6;
    
    --letter-spacing-tight: -0.022em;
    --letter-spacing-normal: -0.01em;
    
    /* =========================================== */
    /* ESPACEMENT                                  */
    /* =========================================== */
    --spacing-xs: 4px;
    --spacing-sm: 8px;
    --spacing-md: 12px;
    --spacing-lg: 16px;
    --spacing-xl: 20px;
    --spacing-2xl: 24px;
    --spacing-3xl: 30px;
    --spacing-4xl: 40px;
    
    /* =========================================== */
    /* BORDURES & RADIUS                           */
    /* =========================================== */
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-xl: 16px;
    --radius-2xl: 20px;
    --radius-full: 980px;
    
    --border-width: 1px;
    --border-color: var(--color-bg-border);
    
    /* =========================================== */
    /* OMBRES                                      */
    /* =========================================== */
    --shadow-sm: 0 2px 8px rgba(0, 0, 0, 0.04);
    --shadow-md: 0 2px 12px rgba(0, 0, 0, 0.06);
    --shadow-lg: 0 4px 20px rgba(0, 0, 0, 0.08);
    --shadow-xl: 0 8px 30px rgba(0, 0, 0, 0.12);
    --shadow-primary: 0 4px 20px rgba(102, 126, 234, 0.4);
    --shadow-invoice: 0 8px 25px rgba(155, 89, 182, 0.4);
    
    /* =========================================== */
    /* TRANSITIONS                                 */
    /* =========================================== */
    --transition-fast: 0.2s ease;
    --transition-base: 0.3s ease;
    --transition-smooth: 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
    
    /* =========================================== */
    /* Z-INDEX                                     */
    /* =========================================== */
    --z-dropdown: 100;
    --z-sticky: 500;
    --z-fixed: 1000;
    --z-modal: 9000;
    --z-navbar: 9999;
    
    /* =========================================== */
    /* LAYOUT                                      */
    /* =========================================== */
    --sidebar-width: 260px;
    --navbar-height: 44px;
    --container-max-width: 1200px;
    --card-padding: 24px;
}

/* =========================================== */
/* DARK MODE (optionnel pour plus tard)       */
/* =========================================== */
/*
@media (prefers-color-scheme: dark) {
    :root {
        --color-text-primary: #f5f5f7;
        --color-text-secondary: #a1a1a6;
        --color-bg-white: #1d1d1f;
        --color-bg-light: #2d2d2d;
    }
}
*/

/* =========== FIN VARIABLES - DEBUT ACCOUNT =========== */

/* =========================================================================
   _account.css - Styles de l'espace compte NUM-ECARD
   =========================================================================
   Regroupe tous les styles pour /compte/* 
   Utilise les variables définies dans _variables.css
   ========================================================================= */

/* =========================================== */
/* LAYOUT PRINCIPAL                            */
/* =========================================== */

.account-layout {
    display: flex;
    min-height: calc(100vh - var(--navbar-height));
    background: var(--color-bg-light);
}

/* =========================================== */
/* SIDEBAR                                     */
/* =========================================== */

.sidebar {
    width: var(--sidebar-width);
    background: var(--color-bg-white);
    border-right: var(--border-width) solid var(--color-bg-border-light);
    padding: var(--spacing-3xl) 0;
    flex-shrink: 0;
}

.sidebar-section {
    margin-bottom: var(--spacing-3xl);
}

.sidebar-title {
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    padding: 0 var(--spacing-2xl);
    margin-bottom: var(--spacing-md);
}

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

.sidebar-menu li a {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
    padding: var(--spacing-md) var(--spacing-2xl);
    color: var(--color-text-primary);
    text-decoration: none;
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
    border-left: 3px solid transparent;
}

.sidebar-menu li a:hover {
    background: var(--color-bg-light);
    color: var(--color-primary);
}

.sidebar-menu li a.active {
    background: linear-gradient(90deg, var(--color-primary-light) 0%, transparent 100%);
    color: var(--color-primary);
    border-left-color: var(--color-primary);
    font-weight: var(--font-weight-medium);
}

.sidebar-menu .icon {
    font-size: var(--font-size-xl);
    width: 24px;
    text-align: center;
}

.admin-badge {
    background: var(--gradient-primary);
    color: white;
    font-size: 9px;
    padding: 2px 6px;
    border-radius: var(--radius-sm);
    font-weight: var(--font-weight-semibold);
    margin-left: auto;
}

/* =========================================== */
/* CONTENU PRINCIPAL                           */
/* =========================================== */

.main-content {
    flex: 1;
    padding: var(--spacing-3xl) var(--spacing-4xl);
    max-width: var(--container-max-width);
}

/* =========================================== */
/* ALERTES / FLASH MESSAGES                    */
/* =========================================== */

.alert {
    padding: var(--spacing-lg) var(--spacing-xl);
    border-radius: var(--radius-lg);
    margin-bottom: var(--spacing-2xl);
    font-size: var(--font-size-base);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.alert-success {
    background: linear-gradient(135deg, var(--color-success-bg-light) 0%, var(--color-success-bg) 100%);
    color: var(--color-success-dark);
    border: var(--border-width) solid var(--color-success-border);
}

.alert-success::before {
    content: '✅';
}

.alert-error {
    background: linear-gradient(135deg, var(--color-error-bg-light) 0%, var(--color-error-bg) 100%);
    color: var(--color-error-dark);
    border: var(--border-width) solid var(--color-error-border);
}

.alert-error::before {
    content: '❌';
}

.alert-warning {
    background: linear-gradient(135deg, var(--color-warning-bg-light) 0%, var(--color-warning-bg) 100%);
    color: var(--color-warning-dark);
    border: var(--border-width) solid var(--color-warning-border);
}

.alert-warning::before {
    content: '⚠️';
}

/* =========================================== */
/* PAGE HEADER                                 */
/* =========================================== */

.page-header {
    margin-bottom: var(--spacing-3xl);
}

.page-title {
    font-size: var(--font-size-4xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    letter-spacing: -0.02em;
    margin-bottom: var(--spacing-sm);
}

.page-subtitle {
    font-size: var(--font-size-md);
    color: var(--color-text-tertiary);
}

.page-header-row {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    flex-wrap: wrap;
    gap: var(--spacing-lg);
}

.page-header-actions {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

/* =========================================== */
/* CARDS                                       */
/* =========================================== */

.card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: var(--card-padding);
    box-shadow: var(--shadow-md);
    margin-bottom: var(--spacing-2xl);
}

.card-title {
    font-size: var(--font-size-lg);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.card-title .icon {
    font-size: var(--font-size-2xl);
}

/* Card variants */
.card-gradient {
    background: var(--gradient-primary);
    color: white;
}

.card-light {
    background: linear-gradient(135deg, var(--color-bg-light) 0%, var(--color-bg-border) 100%);
    border: none;
}

/* =========================================== */
/* STATS GRID                                  */
/* =========================================== */

.stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: var(--spacing-xl);
    margin-bottom: var(--spacing-3xl);
}

.stat-card {
    background: var(--color-bg-white);
    border-radius: var(--radius-xl);
    padding: var(--card-padding);
    box-shadow: var(--shadow-md);
}

.stat-value {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-bold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.stat-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.stat-card.highlight {
    background: var(--gradient-primary);
}

.stat-card.highlight .stat-value,
.stat-card.highlight .stat-label {
    color: white;
}

/* =========================================== */
/* DATA TABLES                                 */
/* =========================================== */

.data-table {
    width: 100%;
    border-collapse: collapse;
}

.data-table th {
    text-align: left;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-xs);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    border-bottom: var(--border-width) solid var(--color-bg-border);
}

.data-table td {
    padding: var(--spacing-lg);
    font-size: var(--font-size-base);
    border-bottom: var(--border-width) solid var(--color-bg-light);
    vertical-align: middle;
}

.data-table tr:hover td {
    background: var(--color-bg-lighter);
}

.data-table tr:last-child td {
    border-bottom: none;
}

/* Table cell utilities */
.table-overflow {
    overflow-x: auto;
}

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

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

/* =========================================== */
/* BADGES / STATUS                             */
/* =========================================== */

.badge {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-xs);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
}

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

.badge-pending {
    background: var(--color-warning-bg);
    color: var(--color-warning-dark);
}

.badge-paid {
    background: var(--color-info-bg);
    color: var(--color-info-dark);
}

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

.badge-completed {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
}

.badge-cancelled {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
}

/* Card count badge */
.badge-count {
    background: var(--gradient-primary);
    color: white;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
}

/* Pack type badge */
.badge-pack {
    background: var(--color-bg-light);
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-sm);
    font-size: var(--font-size-sm);
}

/* =========================================== */
/* BUTTONS                                     */
/* =========================================== */

.btn {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-medium);
    text-decoration: none;
    cursor: pointer;
    transition: all var(--transition-fast);
    border: none;
}

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

.btn-primary:hover {
    transform: translateY(-1px);
    box-shadow: var(--shadow-primary);
}

.btn-secondary {
    background: var(--color-bg-light);
    color: var(--color-text-primary);
}

.btn-secondary:hover {
    background: var(--color-bg-border);
}

.btn-sm {
    padding: var(--spacing-sm) var(--spacing-md);
    font-size: var(--font-size-sm);
}

.btn-lg {
    padding: var(--spacing-lg) var(--spacing-2xl);
    font-size: var(--font-size-lg);
}

/* Bouton facture */
.btn-invoice {
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding: var(--spacing-md) var(--spacing-xl);
    background: var(--gradient-invoice);
    color: white;
    text-decoration: none;
    border-radius: var(--radius-md);
    font-weight: var(--font-weight-semibold);
    font-size: var(--font-size-base);
    transition: all var(--transition-base);
    border: none;
    cursor: pointer;
}

.btn-invoice:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-invoice);
    color: white;
}

/* Link button */
.link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    transition: opacity var(--transition-fast);
}

.link:hover {
    opacity: 0.7;
}

.link-back {
    font-size: var(--font-size-base);
    display: inline-flex;
    align-items: center;
    gap: var(--spacing-sm);
    margin-bottom: var(--spacing-lg);
}

/* =========================================== */
/* FORMS                                       */
/* =========================================== */

.form-group {
    margin-bottom: var(--spacing-xl);
}

.form-group label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

.form-group input,
.form-group textarea,
.form-group select {
    width: 100%;
    padding: var(--spacing-md) var(--spacing-lg);
    font-size: var(--font-size-md);
    border: var(--border-width) solid var(--color-bg-border);
    border-radius: var(--radius-md);
    background: var(--color-bg-white);
    transition: all var(--transition-fast);
}

.form-group input:focus,
.form-group textarea:focus,
.form-group select:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-row {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: var(--spacing-xl);
}

.form-hint {
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    margin-top: var(--spacing-xs);
    display: block;
}

.form-actions {
    display: flex;
    gap: var(--spacing-md);
    margin-top: var(--spacing-3xl);
}

.form-divider {
    border: none;
    border-top: var(--border-width) solid var(--color-bg-light);
    margin: var(--spacing-2xl) 0;
}

/* =========================================== */
/* FILTERS                                     */
/* =========================================== */

.filters {
    display: flex;
    gap: var(--spacing-md);
    margin-bottom: var(--spacing-2xl);
    flex-wrap: wrap;
}

.filter-btn {
    padding: var(--spacing-sm) var(--spacing-lg);
    background: var(--color-bg-light);
    border: none;
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
    cursor: pointer;
    transition: all var(--transition-fast);
    text-decoration: none;
}

.filter-btn:hover {
    background: var(--color-bg-border);
    color: var(--color-text-primary);
}

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

/* =========================================== */
/* TIMELINE                                    */
/* =========================================== */

.timeline {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-xl) 0;
    position: relative;
}

.timeline::before {
    content: '';
    position: absolute;
    top: 35px;
    left: 30px;
    right: 30px;
    height: 3px;
    background: var(--color-bg-border);
}

.timeline-step {
    text-align: center;
    position: relative;
    z-index: 1;
    flex: 1;
}

.timeline-dot {
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--color-bg-border);
    display: flex;
    align-items: center;
    justify-content: center;
    margin: 0 auto var(--spacing-md);
    font-size: var(--font-size-sm);
}

.timeline-step.completed .timeline-dot {
    background: var(--gradient-primary);
    color: white;
}

.timeline-step.active .timeline-dot {
    background: var(--color-primary);
    color: white;
    box-shadow: 0 0 0 4px var(--color-primary-light);
}

.timeline-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

.timeline-step.completed .timeline-label,
.timeline-step.active .timeline-label {
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* =========================================== */
/* DETAIL GRID                                 */
/* =========================================== */

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

.detail-item {
    padding: var(--spacing-md) 0;
}

.detail-label {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-bottom: var(--spacing-xs);
}

.detail-value {
    font-size: var(--font-size-md);
    color: var(--color-text-primary);
    font-weight: var(--font-weight-medium);
}

/* =========================================== */
/* PRICE SUMMARY                               */
/* =========================================== */

.price-summary {
    border-top: var(--border-width) solid var(--color-bg-border);
    padding-top: var(--spacing-lg);
}

.price-row {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-sm) 0;
    color: var(--color-text-secondary);
}

.price-total {
    display: flex;
    justify-content: space-between;
    padding: var(--spacing-lg) 0;
    font-size: var(--font-size-2xl);
    font-weight: var(--font-weight-bold);
    border-top: 2px solid var(--color-bg-border);
    margin-top: var(--spacing-sm);
}

.price-total-value {
    color: var(--color-primary);
}

.payment-success-box {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
    padding: var(--spacing-md) var(--spacing-lg);
    border-radius: var(--radius-md);
    margin-top: var(--spacing-lg);
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
}

/* =========================================== */
/* BENEFICIAIRE CARD                           */
/* =========================================== */

.beneficiaire-list {
    display: grid;
    gap: var(--spacing-lg);
}

.beneficiaire-card {
    background: var(--color-bg-light);
    border-radius: var(--radius-lg);
    padding: var(--spacing-xl);
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
}

.beneficiaire-info {
    flex: 1;
}

.beneficiaire-name {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.beneficiaire-role {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

.beneficiaire-email {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
    margin-top: var(--spacing-xs);
}

.beneficiaire-price {
    text-align: right;
}

.beneficiaire-price-value {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
}

.beneficiaire-template {
    font-size: var(--font-size-sm);
    color: var(--color-text-tertiary);
}

/* =========================================== */
/* AVATARS                                     */
/* =========================================== */

.avatar {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-base);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.avatar-lg {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-2xl);
}

.avatar-sm {
    width: 32px;
    height: 32px;
    font-size: var(--font-size-sm);
}

/* =========================================== */
/* EMPTY STATE                                 */
/* =========================================== */

.empty-state {
    text-align: center;
    padding: 60px var(--spacing-xl);
    color: var(--color-text-tertiary);
}

.empty-state-icon {
    font-size: 48px;
    margin-bottom: var(--spacing-lg);
}

.empty-state-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-sm);
}

/* =========================================== */
/* CTA BOX                                     */
/* =========================================== */

.cta-box {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--spacing-xl);
}

.cta-content {
    flex: 1;
}

.cta-title {
    font-size: var(--font-size-xl);
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-xs);
}

.cta-text {
    font-size: var(--font-size-base);
    opacity: 0.9;
}

.cta-box-help {
    background: var(--gradient-primary);
    color: white;
}

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

/* Info box */
.info-box {
    display: flex;
    align-items: center;
    gap: var(--spacing-lg);
    flex-wrap: wrap;
}

.info-box-icon {
    font-size: var(--font-size-5xl);
}

.info-box-content {
    flex: 1;
}

.info-box-title {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    margin-bottom: var(--spacing-xs);
}

.info-box-text {
    font-size: var(--font-size-base);
    color: var(--color-text-secondary);
}

/* =========================================== */
/* SECURITY TIPS LIST                          */
/* =========================================== */

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

.tips-list li {
    padding: var(--spacing-sm) 0;
    display: flex;
    align-items: flex-start;
    gap: var(--spacing-md);
}

.tips-list .check {
    color: var(--color-success);
}

/* =========================================== */
/* CANCELLED ALERT                             */
/* =========================================== */

.alert-cancelled {
    background: var(--color-error-bg);
    color: var(--color-error-dark);
    padding: var(--spacing-lg);
    border-radius: var(--radius-lg);
    margin-top: var(--spacing-xl);
    text-align: center;
}

/* =========================================== */
/* TWO COLUMN GRID                             */
/* =========================================== */

.grid-2-cols {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
    gap: var(--spacing-2xl);
}

/* =========================================== */
/* UTILITIES                                   */
/* =========================================== */

.mt-1 { margin-top: var(--spacing-sm); }
.mt-2 { margin-top: var(--spacing-lg); }
.mt-3 { margin-top: var(--spacing-2xl); }
.mt-4 { margin-top: var(--spacing-3xl); }

.mb-1 { margin-bottom: var(--spacing-sm); }
.mb-2 { margin-bottom: var(--spacing-lg); }
.mb-3 { margin-bottom: var(--spacing-2xl); }
.mb-4 { margin-bottom: var(--spacing-3xl); }

.flex { display: flex; }
.flex-wrap { flex-wrap: wrap; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-1 { gap: var(--spacing-sm); }
.gap-2 { gap: var(--spacing-md); }
.gap-3 { gap: var(--spacing-lg); }

.text-success { color: var(--color-success); }
.text-error { color: var(--color-error); }
.text-muted { color: var(--color-text-tertiary); }
.text-primary { color: var(--color-primary); }

.font-semibold { font-weight: var(--font-weight-semibold); }
.font-bold { font-weight: var(--font-weight-bold); }

.max-w-sm { max-width: 500px; }

/* =========================================== */
/* RESPONSIVE                                  */
/* =========================================== */

@media (max-width: 900px) {
    .account-layout {
        flex-direction: column;
    }

    .sidebar {
        width: 100%;
        border-right: none;
        border-bottom: var(--border-width) solid var(--color-bg-border-light);
        padding: var(--spacing-xl) 0;
    }

    .sidebar-menu {
        display: flex;
        overflow-x: auto;
        gap: 0;
        padding: 0 var(--spacing-lg);
    }

    .sidebar-menu li a {
        white-space: nowrap;
        padding: var(--spacing-md) var(--spacing-lg);
        border-left: none;
        border-bottom: 3px solid transparent;
    }

    .sidebar-menu li a.active {
        background: transparent;
        border-left-color: transparent;
        border-bottom-color: var(--color-primary);
    }

    .sidebar-title {
        display: none;
    }

    .sidebar-section {
        margin-bottom: 0;
    }

    .main-content {
        padding: var(--spacing-xl);
    }

    .form-row {
        grid-template-columns: 1fr;
    }

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

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

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

    .page-title {
        font-size: var(--font-size-3xl);
    }

    .page-header-row {
        flex-direction: column;
        align-items: flex-start;
    }

    .page-header-actions {
        width: 100%;
    }

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

    .timeline {
        flex-direction: column;
        gap: var(--spacing-xl);
    }

    .timeline::before {
        display: none;
    }

    .timeline-step {
        display: flex;
        align-items: center;
        gap: var(--spacing-lg);
        text-align: left;
    }

    .timeline-dot {
        margin: 0;
    }

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

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

    .cta-box {
        flex-direction: column;
        text-align: center;
    }
}

/* =========== FIN ACCOUNT - DEBUT SITE =========== */


/* =========================================================================
   STYLES DU SITE PRINCIPAL
   ========================================================================= */

        * {
            margin: 0;
            padding: 0;
            box-sizing: border-box;
        }

        html {
            scroll-behavior: smooth;
            overflow-x: hidden;
        }

        body {
            font-family: -apple-system, BlinkMacSystemFont, 'SF Pro Display', 'SF Pro Text', 'Helvetica Neue', Helvetica, Arial, sans-serif;
            background: #ffffff;
            color: #1d1d1f;
            line-height: 1.47059;
            font-weight: 400;
            letter-spacing: -0.022em;
            overflow-x: hidden;
        }

        /* Apple-style Navigation */
        .navbar {
            position: sticky;
            top: 0;
            left: 0;
            right: 0;
            background: rgba(255, 255, 255, 0.72);
            backdrop-filter: saturate(180%) blur(20px);
            border-bottom: 1px solid rgba(0, 0, 0, 0.08);
            z-index: 9999;
            height: 44px;
            transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
        }

        .navbar-container {
            max-width: 1000px;
            margin: 0 auto;
            padding: 0 22px;
            display: flex;
            justify-content: center;
            align-items: center;
            height: 100%;
            gap: 48px;
        }

        .navbar-logo {
            font-size: 21px;
            font-weight: 600;
            color: #1d1d1f;
            text-decoration: none;
            letter-spacing: -0.02em;
            transition: opacity 0.3s;
        }

        .navbar-logo:hover {
            opacity: 0.7;
        }

        .navbar-menu {
            display: flex;
            gap: 22px;
            list-style: none;
            align-items: center;
        }

        .navbar-menu a {
            color: #1d1d1f;
            text-decoration: none;
            font-size: 12px;
            font-weight: 400;
            transition: opacity 0.3s;
            letter-spacing: -0.01em;
        }

        .navbar-menu a:hover {
            opacity: 0.7;
        }

        .navbar-cta {
            background: #0071e3;
            color: #ffffff !important;
            padding: 4px 11px;
            border-radius: 980px;
            font-size: 12px;
            font-weight: 400;
            transition: background 0.3s;
        }

        .navbar-cta:hover {
            background: #0077ed;
            opacity: 1;
        }

        .navbar-toggle {
            display: none;
            flex-direction: column;
            gap: 5px;
            cursor: pointer;
            padding: 8px;
        }

        .navbar-toggle span {
            width: 24px;
            height: 2px;
            background: #1d1d1f;
            border-radius: 2px;
            transition: all 0.3s;
        }

        /* Hero Section avec Démo de Carte */
        .hero {
            min-height: 100vh;
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(180deg, #f5f5f7 0%, #ffffff 50%);
            padding: 100px 20px 60px;
        }

        .hero-container {
            max-width: 1100px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: 450px 380px 240px;
            gap: 25px;
            align-items: center;
            justify-items: center;
            justify-content: center;
            width: 100%;
        }

        .hero-text {
            padding: 0 15px;
            text-align: left;
            justify-self: center;
            width: 100%;
        }

        .hero-title {
            font-size: 64px;
            font-weight: 600;
            color: #1d1d1f;
            letter-spacing: -0.015em;
            line-height: 1.05;
            margin-bottom: 16px;
        }

        .hero-title .brand {
            color: #007aff;
            display: block;
            font-size: 80px;
        }

        .hero-title .subtitle-text {
            font-size: 32px;
            display: block;
        }

        .hero-subtitle {
            font-size: 18px;
            font-weight: 400;
            color: #6e6e73;
            letter-spacing: -0.005em;
            line-height: 1.16667;
            margin-bottom: 12px;
            margin-top: -8px;
        }

        .hero-highlight {
            font-size: 17px;
            color: #007aff;
            margin-bottom: 30px;
            padding: 16px 20px;
            background: rgba(0, 122, 255, 0.06);
            border-left: 3px solid #007aff;
            border-radius: 8px;
            max-width: 380px;
        }

        .hero-cta {
            display: flex;
            gap: 20px;
            margin-bottom: 30px;
        }

        .btn-primary {
            background: #0071e3;
            color: #ffffff;
            padding: 12px 22px;
            border-radius: 980px;
            text-decoration: none;
            font-size: 17px;
            font-weight: 400;
            transition: all 0.3s;
            border: none;
            cursor: pointer;
            display: inline-block;
        }

        .btn-primary:hover {
            background: #0077ed;
            transform: scale(1.02);
        }

        .btn-secondary {
            background: transparent;
            color: #0071e3;
            padding: 12px 22px;
            border: 2px solid #0071e3;
            border-radius: 980px;
            text-decoration: none;
            font-size: 17px;
            font-weight: 400;
            transition: all 0.3s;
            cursor: pointer;
            display: inline-block;
        }

        .btn-secondary:hover {
            background: #0071e3;
            color: #ffffff;
        }

        /* Smartphone Mockup */
        .smartphone-mockup {
            position: relative;
            perspective: 1000px;
            justify-self: end;
            margin-right: -20px;
        }

        .smartphone-frame {
            width: 380px;
            height: 760px;
            background: #1a1a1a;
            border-radius: 40px;
            padding: 15px;
            box-shadow:
                0 30px 80px rgba(0, 0, 0, 0.15),
                inset 0 0 0 2px #333;
            position: relative;
            margin: 0 auto;
        }

        .smartphone-frame::before {
            content: '';
            position: absolute;
            top: 20px;
            left: 50%;
            transform: translateX(-50%);
            width: 100px;
            height: 25px;
            background: #1a1a1a;
            border-radius: 0 0 15px 15px;
            z-index: 10;
        }

        .smartphone-frame::after {
            content: '';
            position: absolute;
            top: 28px;
            left: 50%;
            transform: translateX(-50%);
            width: 12px;
            height: 12px;
            background: #333;
            border-radius: 50%;
            z-index: 11;
        }

        .smartphone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 30px;
            overflow-y: auto;
            overflow-x: hidden;
            scrollbar-width: thin;
            scrollbar-color: #d2d2d7 rgba(210, 210, 215, 0.1);
        }

        .smartphone-screen::-webkit-scrollbar {
            width: 4px;
        }

        .smartphone-screen::-webkit-scrollbar-track {
            background: rgba(210, 210, 215, 0.1);
        }

        .smartphone-screen::-webkit-scrollbar-thumb {
            background: #d2d2d7;
            border-radius: 2px;
        }

        /* VCard Styles - RENFORT IMMO */
        .vcard-container {
            max-width: 100%;
            background: white;
        }

        .vcard-header {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            color: white;
            padding: 20px;
            text-align: center;
        }

        .vcard-logo {
            font-size: 36px;
            font-weight: 700;
            color: #c9a569;
            margin-bottom: 8px;
            letter-spacing: 2px;
        }

        .vcard-company {
            font-size: 20px;
            font-weight: 700;
            color: white;
            letter-spacing: 1.5px;
        }

        .vcard-tagline {
            font-size: 12px;
            color: rgba(255, 255, 255, 0.8);
            margin-top: 5px;
        }

        .vcard-profile {
            padding: 20px;
            text-align: center;
            background: white;
        }

        .vcard-name {
            font-size: 22px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 4px;
        }

        .vcard-position {
            font-size: 14px;
            color: #666;
            margin-bottom: 12px;
        }

        .vcard-address {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            font-size: 13px;
            color: #2c3e50;
            padding: 10px 15px;
            background: #f8f9fa;
            border-radius: 8px;
            margin-top: 10px;
        }

        .vcard-contacts {
            padding: 0 20px 20px;
            background: white;
        }

        .vcard-contact-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #c9a569 0%, #b8935f 100%);
            color: white;
            padding: 12px 16px;
            margin: 8px 0;
            border-radius: 10px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            transition: all 0.3s;
        }

        .vcard-contact-btn:hover {
            transform: translateX(3px);
            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
        }

        .vcard-contact-btn svg {
            width: 18px;
            height: 18px;
            margin-right: 10px;
            fill: white;
        }

        .vcard-services {
            padding: 20px;
            background: #f8f9fa;
            text-align: center;
        }

        .vcard-services h3 {
            color: #2c3e50;
            font-size: 16px;
            font-weight: 700;
            margin-bottom: 12px;
        }

        .vcard-pills {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 10px;
        }

        .vcard-pill {
            background: white;
            color: #2c3e50;
            padding: 10px 12px;
            border-radius: 20px;
            font-size: 12px;
            font-weight: 600;
            border: 2px solid #c9a569;
        }

        .vcard-share {
            padding: 20px;
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            margin: 15px;
            border-radius: 12px;
            text-align: center;
        }

        .vcard-share h3 {
            color: white;
            font-size: 16px;
            margin-bottom: 4px;
        }

        .vcard-share-subtitle {
            color: rgba(255, 255, 255, 0.8);
            font-size: 11px;
            margin-bottom: 15px;
            font-style: italic;
        }

        .vcard-share-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 8px;
        }

        .vcard-share-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 10px 12px;
            border-radius: 8px;
            font-size: 13px;
            font-weight: 600;
            color: white;
            text-decoration: none;
            transition: all 0.3s;
            cursor: pointer;
            border: none;
        }

        .vcard-share-btn svg {
            width: 16px;
            height: 16px;
            margin-right: 6px;
            fill: currentColor;
        }

        .vcard-share-btn:hover {
            transform: translateY(-2px);
            opacity: 0.9;
        }

        .share-whatsapp {
            background: linear-gradient(135deg, #25D366 0%, #128C7E 100%);
        }

        .share-email {
            background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%);
        }

        .share-sms {
            background: linear-gradient(135deg, #0088cc 0%, #006699 100%);
        }

        .share-linkedin {
            background: linear-gradient(135deg, #0077B5 0%, #005582 100%);
        }

        .vcard-footer {
            padding: 15px 20px;
            background: #f8f9fa;
            text-align: center;
        }

        .vcard-footer-logo {
            font-size: 16px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 5px;
        }

        .vcard-footer-text {
            font-size: 10px;
            color: #666;
        }

        /* Models List */
        .models-list-container {
            display: flex;
            flex-direction: column;
            gap: 20px;
            padding: 20px 0;
            margin-left: 0;
        }

        .models-list-title {
            font-size: 24px;
            font-weight: 600;
            color: #1d1d1f;
            letter-spacing: -0.015em;
            margin-bottom: 10px;
        }

        .models-list {
            list-style: none;
            display: flex;
            flex-direction: column;
            gap: 16px;
        }

        .models-list li {
            font-size: 17px;
            color: #1d1d1f;
            font-weight: 500;
            padding: 14px 20px;
            background: rgba(0, 122, 255, 0.06);
            border-left: 4px solid #007aff;
            border-radius: 8px;
            transition: all 0.3s cubic-bezier(0.28, 0.11, 0.32, 1);
        }

        .models-list li:hover {
            background: rgba(0, 122, 255, 0.12);
            transform: translateX(5px);
            box-shadow: 0 4px 12px rgba(0, 122, 255, 0.15);
        }

        .models-list li a {
            color: inherit;
            text-decoration: none;
            display: block;
            width: 100%;
        }

        .models-list li a:hover {
            color: inherit;
        }

        /* Features Section */
        .features-section {
            padding: 100px 20px;
            background: #fbfbfd;
        }

        .section-title {
            font-size: 48px;
            font-weight: 600;
            color: #1d1d1f;
            text-align: center;
            letter-spacing: -0.003em;
            margin-bottom: 60px;
        }

        .features-grid {
            max-width: 1200px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
            gap: 40px;
        }

        .feature-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 50px 30px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .feature-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        .feature-icon {
            font-size: 56px;
            margin-bottom: 24px;
            filter: drop-shadow(0 4px 12px rgba(0, 0, 0, 0.1));
        }

        .feature-title {
            font-size: 24px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 12px;
            letter-spacing: -0.007em;
        }

        .feature-description {
            font-size: 17px;
            color: #6e6e73;
            line-height: 1.47059;
        }

        /* Comparison Section */
        .comparison-section {
            padding: 100px 20px;
            background: #ffffff;
        }

        .comparison-grid {
            max-width: 1200px;
            margin: 60px auto 0;
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 30px;
        }

        .comparison-card {
            background: #f5f5f7;
            border-radius: 18px;
            padding: 50px 40px;
            transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
        }

        .comparison-card.old {
            border: 2px solid #d2d2d7;
        }

        .comparison-card.new {
            background: linear-gradient(135deg, #f5f5f7 0%, #e8f4f8 100%);
            border: 2px solid #007aff;
        }

        .comparison-card:hover {
            transform: scale(1.02);
        }

        .comparison-label {
            font-size: 12px;
            font-weight: 600;
            color: #bf4800;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-bottom: 12px;
        }

        .comparison-title {
            font-size: 32px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 20px;
            letter-spacing: -0.005em;
        }

        .comparison-list {
            list-style: none;
        }

        .comparison-list li {
            font-size: 17px;
            color: #1d1d1f;
            padding: 12px 0;
            padding-left: 32px;
            position: relative;
            line-height: 1.47059;
        }

        .comparison-list li::before {
            content: '';
            position: absolute;
            left: 0;
            top: 17px;
            width: 20px;
            height: 20px;
            background-size: contain;
        }

        .comparison-card.old li::before {
            content: '✗';
            color: #bf4800;
            font-weight: 600;
            font-size: 18px;
        }

        .comparison-card.new li::before {
            content: '✓';
            color: #007aff;
            font-weight: 600;
            font-size: 18px;
        }

        /* Audience Section */
        .audience-section {
            padding: 100px 20px;
            background: #f5f5f7;
        }

        .audience-grid {
            max-width: 1200px;
            margin: 60px auto 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
            gap: 30px;
        }

        .audience-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .audience-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        .audience-emoji {
            font-size: 48px;
            margin-bottom: 20px;
        }

        .audience-title {
            font-size: 21px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 16px;
            letter-spacing: -0.005em;
        }

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

        .audience-list li {
            font-size: 15px;
            color: #6e6e73;
            padding: 6px 0;
            padding-left: 24px;
            position: relative;
        }

        .audience-list li::before {
            content: '→';
            position: absolute;
            left: 0;
            color: #007aff;
            font-weight: 600;
        }

        /* Pricing Section */
        .pricing-section {
            min-height: 100vh;
            display: flex;
            flex-direction: column;
            justify-content: center;
            align-items: center;
            padding: 100px 20px;
            background: #ffffff;
            position: relative;
        }


        .pricing-section .section-title {
            color: #1d1d1f;
            position: relative;
            z-index: 1;
        }

        .pricing-grid {
            max-width: 1400px;
            margin: 0 auto;
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 20px;
            position: relative;
            z-index: 1;
        }

        .pricing-card {
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: blur(10px);
            border-radius: 20px;
            padding: 35px 25px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
            position: relative;
            border: 1px solid rgba(255, 255, 255, 0.3);
            box-shadow: 0 8px 32px rgba(0, 0, 0, 0.1);
            display: flex;
            flex-direction: column;
            height: 100%;
        }

        .pricing-card.featured {
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            color: #ffffff;
            transform: scale(1.05);
            box-shadow: 0 12px 40px rgba(102, 126, 234, 0.4);
            border: 1px solid rgba(255, 255, 255, 0.2);
        }

        .pricing-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 16px 48px rgba(0, 0, 0, 0.15);
            background: rgba(255, 255, 255, 1);
        }

        .pricing-card.featured:hover {
            transform: scale(1.05) translateY(-8px);
            box-shadow: 0 20px 60px rgba(102, 126, 234, 0.5);
        }

        .pricing-card.featured:hover .pricing-name,
        .pricing-card.featured:hover .pricing-tagline,
        .pricing-card.featured:hover .pricing-price,
        .pricing-card.featured:hover .pricing-period,
        .pricing-card.featured:hover .pricing-features li,
        .pricing-card.featured:hover .pricing-label {
            color: #000000 !important;
        }

        .pricing-card.featured:hover .pricing-features li::before {
            color: #000000 !important;
        }

        .pricing-label {
            font-size: 12px;
            font-weight: 600;
            color: #9c27b0;
            text-transform: uppercase;
            letter-spacing: 0.07em;
            margin-bottom: 12px;
        }

        .pricing-card.featured .pricing-label {
            color: #ffd700;
        }

        .pricing-name {
            font-size: 28px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 8px;
            letter-spacing: -0.005em;
        }

        .pricing-card.featured .pricing-name {
            color: #ffffff;
        }

        .pricing-name a:hover {
            opacity: 0.7;
            cursor: pointer;
        }

        .pricing-tagline {
            font-size: 16px;
            color: #6e6e73;
            margin-bottom: 24px;
        }

        .pricing-card.featured .pricing-tagline {
            color: rgba(255, 255, 255, 0.9);
        }

        .pricing-price {
            font-size: 56px;
            font-weight: 600;
            color: #9c27b0;
            margin-bottom: 8px;
            letter-spacing: -0.015em;
        }

        .pricing-card.featured .pricing-price {
            color: #ffffff;
        }

        .pricing-period {
            font-size: 17px;
            color: #6e6e73;
            margin-bottom: 30px;
        }

        .pricing-card.featured .pricing-period {
            color: rgba(255, 255, 255, 0.8);
        }

        .pricing-features {
            list-style: none;
            margin-bottom: 40px;
            text-align: left;
            flex-grow: 1;
        }

        .pricing-features li {
            font-size: 15px;
            color: #1d1d1f;
            padding: 10px 0;
            padding-left: 28px;
            position: relative;
        }

        .pricing-card.featured .pricing-features li {
            color: #ffffff;
        }

        .pricing-features li::before {
            content: '✓';
            position: absolute;
            left: 0;
            color: #9c27b0;
            font-weight: 600;
            font-size: 16px;
        }

        .pricing-card.featured .pricing-features li::before {
            color: #ffd700;
        }

        /* Browser Support Section */
        .browser-section {
            padding: 100px 20px;
            background: #f5f5f7;
        }

        .browser-grid {
            max-width: 1000px;
            margin: 60px auto 0;
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 30px;
        }

        .browser-card {
            background: #ffffff;
            border-radius: 18px;
            padding: 40px 30px;
            text-align: center;
            transition: all 0.4s cubic-bezier(0.28, 0.11, 0.32, 1);
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .browser-card:hover {
            transform: translateY(-8px);
            box-shadow: 0 12px 40px rgba(0, 0, 0, 0.12);
        }

        .browser-icon {
            font-size: 56px;
            margin-bottom: 20px;
        }

        .browser-name {
            font-size: 21px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 8px;
        }

        .browser-status {
            font-size: 12px;
            padding: 6px 12px;
            border-radius: 980px;
            display: inline-block;
            margin-top: 10px;
        }

        .browser-status.full {
            background: rgba(52, 199, 89, 0.1);
            color: #34c759;
            font-weight: 600;
        }

        /* CTA Section */
        .cta-section {
            padding: 100px 20px;
            background: linear-gradient(180deg, #f5f5f7 0%, #e8f4f8 100%);
            text-align: center;
        }

        .cta-container {
            max-width: 800px;
            margin: 0 auto;
        }

        .cta-title {
            font-size: 31px;
            font-weight: 600;
            color: #1d1d1f;
            letter-spacing: -0.015em;
            margin-bottom: 20px;
        }

        .cta-text {
            font-size: 24px;
            color: #6e6e73;
            margin-bottom: 40px;
            line-height: 1.16667;
        }

        .cta-buttons {
            display: flex;
            gap: 20px;
            justify-content: center;
            margin-bottom: 50px;
        }

        .guarantee-box {
            background: #ffffff;
            border-radius: 18px;
            padding: 40px;
            box-shadow: 0 4px 16px rgba(0, 0, 0, 0.08);
        }

        .guarantee-title {
            font-size: 21px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 12px;
        }

        .guarantee-text {
            font-size: 17px;
            color: #6e6e73;
            line-height: 1.47059;
        }

        /* Contact/Order Form Section */
        .contact-section {
            padding: 100px 20px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 50%, #f093fb 100%);
        }

        .contact-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .form-tabs {
            display: flex;
            justify-content: center;
            gap: 12px;
            margin-bottom: 50px;
            flex-wrap: wrap;
        }

        .form-tab {
            background: #f5f5f7;
            color: #1d1d1f;
            padding: 12px 24px;
            border-radius: 980px;
            font-size: 15px;
            font-weight: 400;
            cursor: pointer;
            transition: all 0.3s;
            border: none;
        }

        .form-tab:hover {
            background: #e8e8ed;
        }

        .form-tab.active {
            background: #0071e3;
            color: #ffffff;
        }

        .form-container {
            max-width: 900px;
            margin: 0 auto;
        }

        .contact-form {
            display: none;
            background: #f5f5f7;
            padding: 50px;
            border-radius: 18px;
        }

        .contact-form.active {
            display: block;
            animation: fadeIn 0.4s ease;
        }

        @keyframes fadeIn {
            from { opacity: 0; transform: translateY(20px); }
            to { opacity: 1; transform: translateY(0); }
        }

        .form-row {
            display: grid;
            grid-template-columns: 1fr 1fr;
            gap: 20px;
            margin-bottom: 20px;
        }

        .form-group {
            margin-bottom: 20px;
        }

        .form-label {
            display: block;
            color: #1d1d1f;
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 15px;
        }

        .form-input,
        .form-select,
        .form-textarea {
            width: 100%;
            padding: 14px 16px;
            background: #ffffff;
            border: 1px solid #d2d2d7;
            border-radius: 12px;
            font-size: 17px;
            font-family: inherit;
            color: #1d1d1f;
            transition: all 0.3s;
        }

        .form-input:focus,
        .form-select:focus,
        .form-textarea:focus {
            outline: none;
            border-color: #0071e3;
            box-shadow: 0 0 0 4px rgba(0, 113, 227, 0.1);
        }

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

        .form-select {
            cursor: pointer;
        }

        .checkbox-group {
            display: grid;
            grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
            gap: 12px;
            margin-top: 12px;
        }

        .checkbox-group label {
            display: flex;
            align-items: center;
            gap: 10px;
            color: #1d1d1f;
            font-size: 15px;
            cursor: pointer;
            padding: 12px;
            border-radius: 8px;
            background: #ffffff;
            transition: all 0.3s;
        }

        .checkbox-group label:hover {
            background: #f5f5f7;
        }

        .checkbox-group input[type="checkbox"] {
            width: 20px;
            height: 20px;
            cursor: pointer;
            accent-color: #0071e3;
        }

        /* Footer */
        .footer {
            background: #f5f5f7;
            border-top: 1px solid #d2d2d7;
            padding: 60px 20px 30px;
        }

        .footer-container {
            max-width: 980px;
            margin: 0 auto;
        }

        .footer-grid {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 40px;
            margin-bottom: 40px;
        }

        .footer-column h3 {
            font-size: 12px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 16px;
            letter-spacing: -0.01em;
        }

        .footer-column ul {
            list-style: none;
        }

        .footer-column a {
            color: #424245;
            text-decoration: none;
            font-size: 12px;
            line-height: 2.33333;
            transition: opacity 0.3s;
        }

        .footer-column a:hover {
            opacity: 0.7;
        }

        .footer-bottom {
            border-top: 1px solid #d2d2d7;
            padding-top: 20px;
            text-align: center;
        }

        .footer-logo {
            font-size: 24px;
            font-weight: 600;
            color: #1d1d1f;
            margin-bottom: 12px;
        }

        .footer-text {
            font-size: 12px;
            color: #6e6e73;
            line-height: 1.66667;
        }

        .footer-copyright {
            margin-top: 12px;
            font-size: 12px;
            color: #6e6e73;
        }

        /* Responsive Design */
        @media (max-width: 1150px) {
            .hero-container {
                grid-template-columns: 1fr 380px;
                max-width: 900px;
                gap: 40px;
            }

            .models-list-container {
                display: none;
            }

            .hero-text {
                padding: 0 20px;
            }
        }

        @media (max-width: 1068px) {
            .hero-title {
                font-size: 48px;
            }

            .hero-title .brand {
                font-size: 64px;
            }

            .hero-subtitle {
                font-size: 16px;
            }

            .section-title {
                font-size: 40px;
            }

            .hero-container {
                grid-template-columns: 1fr;
            }

            .smartphone-mockup {
                justify-self: center;
                margin-right: 0;
            }

            .hero-text {
                justify-self: center;
                text-align: center;
                padding: 0 20px;
            }

            .hero-highlight {
                max-width: 100%;
                margin-left: auto;
                margin-right: auto;
            }

            .hero-cta {
                justify-content: center;
            }

            .models-list-container {
                display: none;
            }
        }

        @media (max-width: 734px) {
            .navbar-menu {
                display: none;
            }

            .navbar-toggle {
                display: flex;
            }

            .navbar-container {
                justify-content: space-between;
                gap: 0;
            }

            .hero-title {
                font-size: 40px;
            }

            .hero-title .brand {
                font-size: 48px;
            }

            .hero-title .subtitle-text {
                font-size: 18px !important;
            }

            .hero-subtitle {
                font-size: 14px;
            }

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

            .btn-primary,
            .btn-secondary {
                width: 100%;
            }

            .section-title {
                font-size: 32px;
            }

            .features-grid,
            .comparison-grid,
            .audience-grid,
            .pricing-grid,
            .browser-grid {
                grid-template-columns: 1fr;
            }

            .comparison-grid {
                gap: 20px;
            }

            .pricing-card.featured {
                transform: scale(1);
            }

            .form-row {
                grid-template-columns: 1fr;
            }

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

            .smartphone-frame {
                width: 320px;
                height: 640px;
            }

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

        /* Animations */
        .fade-in-up {
            animation: fadeInUp 0.8s cubic-bezier(0.28, 0.11, 0.32, 1) forwards;
        }

        @keyframes fadeInUp {
            from {
                opacity: 0;
                transform: translateY(30px);
            }
            to {
                opacity: 1;
                transform: translateY(0);
            }
        }


        /* === STYLES MODÈLE ESSENTIEL === */
/* MODAL STYLES */
        .modal-overlay {
            display: flex !important;
            display: none;
            position: fixed;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: rgba(0, 0, 0, 0.95);
            z-index: 9999;
            align-items: center;
            justify-content: center;
            backdrop-filter: blur(10px);
            animation: fadeIn 0.3s ease;
        }

        .modal-overlay.active {
            display: flex;
        }

        @keyframes fadeIn {
            from { opacity: 0; }
            to { opacity: 1; }
        }

        @keyframes slideUp {
            from {
                opacity: 0;
                transform: translateY(50px) scale(0.9);
            }
            to {
                opacity: 1;
                transform: translateY(0) scale(1);
            }
        }

        .modal-container {
            position: relative;
            max-width: 95vw;
            max-height: 95vh;
            animation: slideUp 0.4s cubic-bezier(0.175, 0.885, 0.32, 1.275);
        }

        .modal-close {
            display: none;
            position: absolute;
            top: -50px;
            right: 0;
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            font-size: 22px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10001;
        }

        .modal-close:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: rotate(90deg);
        }

        .modal-navigation {
            position: absolute;
            top: 50%;
            transform: translateY(-50%);
            background: rgba(255, 255, 255, 0.1);
            color: white;
            border: 2px solid rgba(255, 255, 255, 0.3);
            width: 45px;
            height: 45px;
            border-radius: 50%;
            font-size: 24px;
            cursor: pointer;
            display: flex;
            align-items: center;
            justify-content: center;
            transition: all 0.3s ease;
            z-index: 10001;
        }

        .modal-navigation:hover {
            background: rgba(255, 255, 255, 0.2);
            transform: translateY(-50%) scale(1.1);
        }

        .modal-prev {
            left: -60px;
        }

        .modal-next {
            right: -60px;
        }

        .modal-info {
            position: absolute;
            top: -50px;
            left: 0;
            color: white;
            font-size: 1.1em;
            font-weight: 700;
            white-space: nowrap;
        }

        /* SMARTPHONE MOCKUP - MODELE ESSENTIEL */
        #charteMockupSection .smartphone-mockup {
            width: 380px;
            height: 760px;
            background: linear-gradient(145deg, #2a2a2a 0%, #1a1a1a 50%, #0a0a0a 100%);
            border-radius: 45px;
            padding: 12px;
            border: 4px solid #3a3a3a;
            box-shadow:
                0 40px 80px rgba(0, 0, 0, 0.9),
                0 20px 40px rgba(0, 0, 0, 0.7),
                0 10px 20px rgba(0, 0, 0, 0.5),
                inset 0 2px 3px rgba(255, 255, 255, 0.15),
                inset 0 0 0 3px #2a2a2a,
                inset 0 -3px 10px rgba(0, 0, 0, 0.7);
            position: relative;
            perspective: 1000px;
        }

        #charteMockupSection .smartphone-screen {
            width: 100%;
            height: 100%;
            background: white;
            border-radius: 33px;
            overflow: hidden;
            overflow-y: scroll;
            position: relative;
            box-shadow: inset 0 0 10px rgba(0, 0, 0, 0.1);
        }

        #charteMockupSection .card-content {
            background: white;
            min-height: 100%;
            padding: 0;
            margin: 0;
            position: relative;
            border-radius: 33px;
            overflow: hidden;
        }

        #charteMockupSection .smartphone-screen::-webkit-scrollbar {
            width: 6px;
            background: rgba(0, 0, 0, 0.05);
        }

        #charteMockupSection .smartphone-screen::-webkit-scrollbar-track {
            background: rgba(0, 0, 0, 0.05);
            margin: 35px 3px 10px 3px;
            border-radius: 3px;
        }

        #charteMockupSection .smartphone-screen::-webkit-scrollbar-thumb {
            background: var(--primary-color);
            border-radius: 3px;
            transition: all 0.3s ease;
        }

        #charteMockupSection .smartphone-screen::-webkit-scrollbar-thumb:hover {
            background: var(--primary-dark);
        }

        #charteMockupSection .vcard-container {
            max-width: 100%;
            margin: 0;
            padding: 0;
            background: white;
            border-radius: 33px;
            box-shadow: none;
            overflow: hidden;
        }

        /* HEADER - MODELE ESSENTIEL */
        #charteMockupSection .header {
            background: var(--gradient-bg);
            color: white;
            padding: 40px 15px 18px;
            text-align: center;
            display: flex;
            flex-direction: column;
            align-items: center;
            justify-content: center;
            position: relative;
            overflow: hidden;
            border-radius: 33px 33px 0 0;
        }

        #charteMockupSection .header::before {
            content: '';
            position: absolute;
            top: 0;
            left: 0;
            right: 0;
            bottom: 0;
            background: radial-gradient(circle at 50% 50%, var(--radial-glow) 0%, transparent 70%);
            pointer-events: none;
        }

        #charteMockupSection .logo {
            font-size: 38px;
            font-weight: 900;
            margin: 0 auto 8px;
            letter-spacing: 3px;
            background: var(--logo-gradient);
            -webkit-background-clip: text;
            -webkit-text-fill-color: transparent;
            background-clip: text;
            line-height: 1;
            position: relative;
            filter: drop-shadow(0 2px 4px rgba(0, 0, 0, 0.3));
        }

        #charteMockupSection .company-name {
            font-size: 24px;
            font-weight: 800;
            letter-spacing: 2px;
            color: white;
            text-shadow:
                0 0 20px var(--text-glow),
                0 2px 4px rgba(0, 0, 0, 0.5),
                0 1px 2px rgba(0, 0, 0, 0.8);
        }

        #charteMockupSection .tagline {
            font-size: 12px;
            margin-top: 5px;
            opacity: 0.95;
            letter-spacing: 1px;
            font-weight: 500;
            color: white;
            text-shadow:
                0 1px 3px rgba(0, 0, 0, 0.6),
                0 1px 2px rgba(0, 0, 0, 0.9);
        }

        /* PROFILE - MODELE ESSENTIEL */
        #charteMockupSection .profile {
            background: white;
            padding: 20px 15px;
            text-align: center;
            border-radius: 0;
        }

        #charteMockupSection .name {
            font-size: 26px;
            font-weight: 900;
            color: var(--dark-color);
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        #charteMockupSection .position {
            font-size: 15px;
            color: var(--text-on-white);
            font-weight: 700;
            margin-bottom: 12px;
            text-transform: uppercase;
            letter-spacing: 1.5px;
        }

        #charteMockupSection .slogan {
            font-size: 13px;
            color: #666;
            font-style: italic;
            line-height: 1.5;
            max-width: 280px;
            margin: 0 auto;
        }

        /* STATS - MODELE ESSENTIEL */
        #charteMockupSection .stats-section {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 15px;
            padding: 25px 20px;
            background: linear-gradient(to bottom, #f8f9fa, white);
        }

        #charteMockupSection .stat-box {
            text-align: center;
            padding: 15px 10px;
            background: white;
            border-radius: 15px;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 2px solid var(--text-on-white);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        #charteMockupSection .stat-box:hover {
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
            border-color: var(--text-on-white);
        }

        #charteMockupSection .stat-number {
            font-size: 24px;
            font-weight: 900;
            color: var(--text-on-white);
            margin-bottom: 4px;
            text-shadow: none;
        }

        #charteMockupSection .stat-label {
            font-size: 11px;
            color: #555;
            font-weight: 600;
            text-transform: uppercase;
            letter-spacing: 0.5px;
        }

        /* CONTACT BUTTONS - MODELE ESSENTIEL */
        #charteMockupSection .contact-buttons {
            display: flex;
            flex-direction: column;
            gap: 10px;
            padding: 15px;
            background: white;
        }

        #charteMockupSection .contact-buttons a {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 12px;
            padding: 14px 16px;
            background: linear-gradient(135deg, var(--primary-color) 0%, var(--primary-dark) 100%);
            color: white;
            text-decoration: none;
            border-radius: 15px;
            font-weight: 600;
            font-size: 14px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px var(--shadow-color);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
            text-align: center;
        }

        #charteMockupSection .contact-buttons a:hover {
            transform: translateX(5px);
            box-shadow: 0 6px 25px var(--shadow-hover);
        }

        #charteMockupSection .contact-buttons svg {
            width: 20px;
            height: 20px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            flex-shrink: 0;
        }

        /* ADD CONTACT - MODELE ESSENTIEL */
        #charteMockupSection .add-contact-section {
            padding: 15px;
            background: linear-gradient(to bottom, white, #f8f9fa);
        }

        #charteMockupSection .add-contact-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            gap: 8px;
            width: 100%;
            padding: 15px;
            background: white;
            color: var(--text-on-white);
            text-decoration: none;
            border: 3px dashed var(--text-on-white);
            border-radius: 15px;
            font-weight: 700;
            font-size: 14px;
            transition: all 0.3s ease;
            text-transform: uppercase;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 1;
        }

        #charteMockupSection .add-contact-btn:hover {
            background: var(--text-on-white);
            color: white;
            border-style: solid;
            border-color: var(--text-on-white);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        #charteMockupSection .add-contact-btn svg {
            width: 22px;
            height: 22px;
        }

        /* SERVICES - MODELE ESSENTIEL */
        #charteMockupSection .services {
            padding: 20px 15px;
            background: linear-gradient(135deg, var(--light-color) 0%, white 100%);
        }

        #charteMockupSection .services h3 {
            font-size: 17px;
            font-weight: 800;
            color: var(--dark-color);
            margin-bottom: 12px;
            text-align: center;
            letter-spacing: 0.5px;
        }

        #charteMockupSection .pills-container {
            display: flex;
            flex-direction: column;
            gap: 10px;
        }

        #charteMockupSection .pill {
            background: white;
            padding: 12px 16px;
            border-radius: 25px;
            font-size: 13px;
            font-weight: 600;
            color: var(--text-on-white);
            text-align: center;
            box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
            border: 2px solid var(--text-on-white);
            transition: all 0.3s ease;
            position: relative;
            z-index: 1;
        }

        #charteMockupSection .pill:hover {
            background: var(--text-on-white);
            color: white;
            transform: scale(1.02);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        /* SHARE SECTION - MODELE ESSENTIEL */
        #charteMockupSection .share-section {
            padding: 20px 15px;
            background: white;
        }

        #charteMockupSection .share-section h3 {
            font-size: 17px;
            font-weight: 800;
            color: var(--dark-color);
            margin-bottom: 8px;
            text-align: center;
        }

        #charteMockupSection .share-subtitle {
            font-size: 13px;
            color: #666;
            text-align: center;
            margin-bottom: 12px;
            font-weight: 500;
        }

        #charteMockupSection .share-buttons {
            display: grid;
            grid-template-columns: repeat(3, 1fr);
            gap: 12px;
        }

        #charteMockupSection .share-btn {
            display: flex;
            flex-direction: column;
            align-items: center;
            gap: 8px;
            padding: 15px 10px;
            background: linear-gradient(to bottom, #f8f9fa, white);
            border: 2px solid var(--primary-color);
            border-radius: 15px;
            text-decoration: none;
            color: #333;
            font-size: 11px;
            font-weight: 600;
            transition: all 0.3s ease;
            text-align: center;
            box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
        }

        #charteMockupSection .share-btn:hover {
            background: var(--primary-color);
            border-color: var(--primary-dark);
            color: white;
            transform: translateY(-3px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.15);
        }

        #charteMockupSection .share-btn:hover svg {
            filter: brightness(0) invert(1);
        }

        #charteMockupSection .share-btn svg {
            width: 24px;
            height: 24px;
            flex-shrink: 0;
        }

        #charteMockupSection .share-video {
            grid-column: span 3;
        }

        /* WEBSITE LINKS - MODELE ESSENTIEL */
        #charteMockupSection .website-links {
            padding: 20px 15px;
            background: linear-gradient(to bottom, white, #f8f9fa);
        }

        #charteMockupSection .website-links h3 {
            font-size: 17px;
            font-weight: 800;
            color: var(--dark-color);
            margin-bottom: 8px;
            text-align: center;
        }

        #charteMockupSection .website-subtitle {
            font-size: 13px;
            color: #666;
            text-align: center;
            margin-bottom: 12px;
            font-weight: 500;
        }

        #charteMockupSection .website-links a {
            display: flex;
            align-items: center;
            gap: 15px;
            padding: 18px 20px;
            background: white;
            color: var(--text-on-white);
            text-decoration: none;
            border-radius: 15px;
            font-weight: 700;
            font-size: 13px;
            margin-bottom: 12px;
            transition: all 0.3s ease;
            box-shadow: 0 4px 15px rgba(0, 0, 0, 0.08);
            border: 2px solid var(--text-on-white);
            position: relative;
            z-index: 1;
        }

        #charteMockupSection .website-links a:hover {
            background: var(--text-on-white);
            color: white;
            transform: translateX(5px);
            box-shadow: 0 6px 25px var(--shadow-hover);
            text-shadow: 0 1px 2px rgba(0, 0, 0, 0.3);
        }

        #charteMockupSection .website-links svg {
            width: 24px;
            height: 24px;
            fill: none;
            stroke: currentColor;
            stroke-width: 2;
            flex-shrink: 0;
        }

        @media (max-width: 1400px) {
            .grid-container { display: none !important;
            display: none;
                grid-template-columns: repeat(auto-fill, minmax(250px, 1fr));
            }
        }

        @media (max-width: 1024px) {
            .grid-container { display: none !important;
            display: none;
                grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
            }
        }

        /* Tablettes - 2 colonnes */
        @media (max-width: 1200px) {
            .pricing-grid {
                grid-template-columns: repeat(2, 1fr);
                max-width: 800px;
            }
        }

        @media (max-width: 768px) {
            .grid-container { display: none !important;
            display: none;
                grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
            }

            .modal-container {
                max-width: 100vw;
            }

            #charteMockupSection .smartphone-mockup {
                width: 340px;
                height: 680px;
            }

            .modal-prev {
                left: 10px;
                top: 50px;
            }

            .modal-next {
                right: 10px;
                top: 50px;
            }

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

            .modal-info {
                top: 10px;
                left: 10px;
                font-size: 1em;
            }
        }

        /* Style pour le bouton Commandez */
        button:hover {
            transform: scale(1.02);
            box-shadow: 0 6px 16px rgba(0, 113, 227, 0.4);
        }

        button:active {
            transform: scale(0.98);
        }

        /* ============================================ */
        /* NAVIGATION RAPIDE FLOTTANTE */
        /* ============================================ */

        /* Bouton Retour en Haut */
        /* Boutons de Navigation Rapide (Haut/Bas) */
        .scroll-nav-button {
            position: fixed;
            right: 30px;
            width: 56px;
            height: 56px;
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(0, 113, 227, 0.3);
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transform: scale(0.8);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
        }

        /* Bouton remonter (en bas) */
        .back-to-top {
            bottom: 30px;
            background: linear-gradient(135deg, #0071e3 0%, #0077ed 100%);
        }

        /* Bouton descendre (en haut) */
        .scroll-to-next {
            bottom: 190px;
            background: linear-gradient(135deg, #34c759 0%, #30d158 100%);
            box-shadow: 0 8px 24px rgba(52, 199, 89, 0.3);
        }

        .scroll-nav-button.show {
            opacity: 1;
            visibility: visible;
            transform: scale(1);
        }

        .back-to-top:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 32px rgba(0, 113, 227, 0.4);
        }

        .scroll-to-next:hover {
            transform: scale(1.1);
            box-shadow: 0 12px 32px rgba(52, 199, 89, 0.4);
        }

        .scroll-nav-button:active {
            transform: scale(0.95);
        }

        .scroll-nav-button svg {
            width: 24px;
            height: 24px;
            fill: white;
        }

        /* Animation de rebond pour le bouton down */
        @keyframes bounce {
            0%, 20%, 50%, 80%, 100% {
                transform: translateY(0) scale(1);
            }
            40% {
                transform: translateY(-8px) scale(1);
            }
            60% {
                transform: translateY(-4px) scale(1);
            }
        }

        .scroll-to-next.show {
            animation: bounce 2s infinite;
        }

        .scroll-to-next.show:hover {
            animation: none;
        }

        /* Menu Navigation Flottant (FAB) - au milieu entre les deux flèches */
        .quick-nav-fab {
            position: fixed;
            bottom: 110px;
            right: 30px;
            width: 56px;
            height: 56px;
            background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
            border-radius: 50%;
            display: flex;
            align-items: center;
            justify-content: center;
            cursor: pointer;
            box-shadow: 0 8px 24px rgba(102, 126, 234, 0.3);
            z-index: 9999;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            border: none;
        }

        .quick-nav-fab:hover {
            transform: scale(1.1) rotate(90deg);
            box-shadow: 0 12px 32px rgba(102, 126, 234, 0.4);
        }

        .quick-nav-fab:active {
            transform: scale(0.95) rotate(90deg);
        }

        .quick-nav-fab.active {
            background: linear-gradient(135deg, #764ba2 0%, #667eea 100%);
            transform: rotate(45deg);
        }

        .quick-nav-fab svg {
            width: 28px;
            height: 28px;
            fill: white;
            transition: transform 0.3s;
        }

        /* Menu de Navigation */
        .quick-nav-menu {
            position: fixed;
            bottom: 180px;
            right: 30px;
            background: rgba(255, 255, 255, 0.95);
            backdrop-filter: saturate(180%) blur(20px);
            border-radius: 20px;
            box-shadow: 0 20px 60px rgba(0, 0, 0, 0.15);
            padding: 12px;
            z-index: 9998;
            opacity: 0;
            visibility: hidden;
            transform: translateY(20px) scale(0.9);
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            max-height: 500px;
            overflow-y: auto;
            min-width: 280px;
            border: 1px solid rgba(0, 0, 0, 0.08);
        }

        .quick-nav-menu.show {
            opacity: 1;
            visibility: visible;
            transform: translateY(0) scale(1);
        }

        .quick-nav-menu::-webkit-scrollbar {
            width: 6px;
        }

        .quick-nav-menu::-webkit-scrollbar-track {
            background: transparent;
        }

        .quick-nav-menu::-webkit-scrollbar-thumb {
            background: rgba(0, 0, 0, 0.2);
            border-radius: 3px;
        }

        .quick-nav-item {
            display: flex;
            align-items: center;
            gap: 12px;
            padding: 14px 16px;
            text-decoration: none;
            color: #1d1d1f;
            font-size: 15px;
            font-weight: 500;
            border-radius: 12px;
            transition: all 0.2s ease;
            cursor: pointer;
            border: none;
            background: transparent;
            width: 100%;
            text-align: left;
        }

        .quick-nav-item:hover {
            background: rgba(0, 113, 227, 0.08);
            color: #0071e3;
            transform: translateX(4px);
        }

        .quick-nav-item svg {
            width: 20px;
            height: 20px;
            fill: currentColor;
            flex-shrink: 0;
        }

        .quick-nav-divider {
            height: 1px;
            background: rgba(0, 0, 0, 0.08);
            margin: 8px 0;
        }

        /* Responsive */
        @media (max-width: 768px) {
            /* Tous les boutons à droite avec taille réduite */
            .scroll-nav-button,
            .quick-nav-fab {
                right: 20px;
                width: 48px;
                height: 48px;
            }

            /* Bouton remonter (le plus bas) */
            .back-to-top {
                bottom: 20px;
            }

            /* Menu FAB (au milieu) */
            .quick-nav-fab {
                bottom: 80px;
            }

            /* Bouton descendre (le plus haut) */
            .scroll-to-next {
                bottom: 140px;
            }

            /* Menu de navigation - au-dessus de tout */
            .quick-nav-menu {
                bottom: 150px;
                right: 20px;
                min-width: 240px;
                max-height: 400px;
            }

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

            .quick-nav-fab svg {
                width: 24px;
                height: 24px;
            }
        }

        /* ============================================================================
           CORRECTION CRITIQUE NAVIGATION - MOBILE & DESKTOP
           ============================================================================ */

        /* === FIX Z-INDEX & POINTER-EVENTS POUR NAVIGATION === */

        /* Navbar sticky */
        .navbar {
            z-index: 99999 !important;
            pointer-events: auto !important;
            position: sticky !important;
        }

        /* Bouton FAB */
        .quick-nav-fab {
            z-index: 99999 !important;
            pointer-events: auto !important;
            position: fixed !important;
            cursor: pointer !important;
        }

        /* Menu du FAB */
        .quick-nav-menu {
            z-index: 99998 !important;
            pointer-events: auto !important;
            position: fixed !important;
        }

        /* Boutons de Navigation Rapide */
        .scroll-nav-button {
            z-index: 99999 !important;
            pointer-events: auto !important;
            position: fixed !important;
            cursor: pointer !important;
        }

        /* S'assurer que tous les éléments de navigation sont cliquables */
        .navbar a,
        .navbar button,
        .navbar-toggle,
        .quick-nav-fab,
        .scroll-nav-button,
        .quick-nav-item {
            pointer-events: auto !important;
            cursor: pointer !important;
            user-select: none !important;
            -webkit-user-select: none !important;
            -moz-user-select: none !important;
            -ms-user-select: none !important;
        }

        /* Empêcher les sections de bloquer les clics */
        .hero,
        section,
        .modele-essentiel-section,
        .modele-premium-section,
        .modele-multi-section {
            pointer-events: auto !important;
            /* Ne pas donner de z-index trop élevé aux sections */
        }

        /* S'assurer que le body n'a pas d'overflow qui pourrait bloquer */
        body {
            overflow-x: hidden !important;
        }

        /* Mobile spécifique */
        @media (max-width: 1024px) {
            .navbar,
            .quick-nav-fab,
            .scroll-nav-button,
            .quick-nav-menu {
                z-index: 99999 !important;
                pointer-events: auto !important;
            }

            /* Touch-action pour améliorer la réactivité mobile */
            .quick-nav-fab,
            .scroll-nav-button,
            .navbar-toggle,
            .quick-nav-item {
                touch-action: manipulation !important;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0.1) !important;
            }
        }

        /* ============================================ */
        /* STYLES POUR FORMULAIRES AMÉLIORÉS */
        /* ============================================ */

        /* En-têtes de formulaires */
        .form-header {
            border-left: 4px solid #0071e3;
            background: rgba(0, 113, 227, 0.1);
            padding: 20px;
            border-radius: 8px;
            margin-bottom: 30px;
        }

        .form-header h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
            color: #1d1d1f;
        }

        .form-header p {
            color: #6e6e73;
            font-size: 14px;
            margin: 0;
        }

        .form-header.devis {
            background: rgba(102, 126, 234, 0.1);
            border-color: #667eea;
        }

        .form-header.infos {
            background: rgba(156, 39, 176, 0.1);
            border-color: #9c27b0;
        }

        .form-header.commande {
            background: rgba(76, 175, 80, 0.1);
            border-color: #4caf50;
        }

        .form-header.contact {
            background: rgba(255, 152, 0, 0.1);
            border-color: #ff9800;
        }

        .form-header h3 {
            font-size: 20px;
            font-weight: 600;
            margin-bottom: 10px;
        }

        .form-header.devis h3 {
            color: #667eea;
        }

        .form-header.infos h3 {
            color: #9c27b0;
        }

        .form-header.commande h3 {
            color: #4caf50;
        }

        .form-header.contact h3 {
            color: #ff9800;
        }

        .form-header p {
            font-size: 15px;
            color: #6e6e73;
        }

        /* Messages d'erreur */
        .error-message {
            color: #ff3b30;
            font-size: 13px;
            margin-top: 6px;
            display: none;
        }

        .error-message.show {
            display: block;
        }

        .form-input.error,
        .form-select.error,
        .form-textarea.error {
            border-color: #ff3b30;
        }

        /* Récapitulatif du devis */
        .devis-summary {
            background: #f5f5f7;
            padding: 25px;
            border-radius: 12px;
            margin: 30px 0;
            display: none;
        }

        .devis-summary.show {
            display: block;
        }

        .summary-row {
            display: flex;
            justify-content: space-between;
            margin-bottom: 10px;
            font-size: 15px;
        }

        .summary-label {
            color: #6e6e73;
        }

        .summary-value {
            font-weight: 600;
            color: #1d1d1f;
        }

        .summary-total {
            padding-top: 15px;
            border-top: 2px solid #d2d2d7;
            margin-top: 15px;
        }

        .summary-total .summary-value {
            font-size: 24px;
            font-weight: 700;
            color: #667eea;
        }

        .summary-ttc {
            padding-top: 15px;
            border-top: 3px solid #0071e3;
            margin-top: 15px;
            background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%);
            padding: 15px;
            border-radius: 8px;
            margin-left: -25px;
            margin-right: -25px;
            padding-left: 25px;
            padding-right: 25px;
        }

        /* Actions du devis */
        .devis-actions {
            display: grid;
            grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
            gap: 15px;
            margin-top: 30px;
        }

        /* Checkbox CGV */
        .cgv-checkbox {
            background: #f5f5f7;
            padding: 20px;
            border-radius: 12px;
            margin: 25px 0;
        }

        .cgv-label {
            display: flex;
            align-items: flex-start;
            cursor: pointer;
        }

        .cgv-label input[type="checkbox"] {
            margin-top: 4px;
            margin-right: 12px;
            width: 18px;
            height: 18px;
            cursor: pointer;
        }

        .cgv-label span {
            font-size: 14px;
            color: #1d1d1f;
        }

        .cgv-label a {
            color: #0071e3;
            text-decoration: underline;
        }

        /* RGPD Notice */
        .rgpd-notice {
            background: rgba(0, 113, 227, 0.06);
            border-left: 3px solid #0071e3;
            padding: 15px;
            border-radius: 8px;
            margin-top: 20px;
            font-size: 12px;
            color: #6e6e73;
        }

        .rgpd-notice strong {
            color: #1d1d1f;
        }

        .rgpd-notice a {
            color: #0071e3;
            text-decoration: underline;
        }

        /* Alertes et notifications */
        .alert {
            position: fixed;
            top: 80px;
            right: 20px;
            max-width: 400px;
            background: #ffffff;
            border-radius: 12px;
            padding: 20px;
            box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2);
            z-index: 10000;
            opacity: 0;
            transform: translateX(400px);
            transition: all 0.3s;
        }

        .alert.show {
            opacity: 1;
            transform: translateX(0);
        }

        .alert.success {
            border-left: 4px solid #4caf50;
        }

        .alert.error {
            border-left: 4px solid #ff3b30;
        }

        .alert.info {
            border-left: 4px solid #0071e3;
        }

        .alert-title {
            font-weight: 600;
            margin-bottom: 8px;
            font-size: 16px;
        }

        .alert.success .alert-title {
            color: #4caf50;
        }

        .alert.error .alert-title {
            color: #ff3b30;
        }

        .alert.info .alert-title {
            color: #0071e3;
        }

        .alert-message {
            color: #6e6e73;
            font-size: 14px;
        }

        /* Loader */
        .loader {
            display: none;
            width: 20px;
            height: 20px;
            border: 3px solid #ffffff;
            border-top-color: transparent;
            border-radius: 50%;
            animation: spin 0.8s linear infinite;
        }

        @keyframes spin {
            to { transform: rotate(360deg); }
        }

        .btn-primary.loading .loader {
            display: inline-block;
        }

        .btn-primary.loading span {
            display: none;
        }

        /* Responsive pour nouveaux éléments */
        @media (max-width: 768px) {
            .devis-actions {
                grid-template-columns: 1fr;
            }

            .alert {
                right: 10px;
                left: 10px;
                max-width: none;
            }
        }

        /* ============================================
           STYLES ÉCRAN POUR LE CONTENU DU DEVIS
           ============================================ */

        .emetteur-content, .client-content {
            margin-bottom: 20px;
            line-height: 1.6;
        }

        .tableau-prestations {
            margin: 20px 0;
            border: 1px solid #e0e0e0;
            border-radius: 8px;
            overflow: hidden;
        }

        .tableau-header {
            background: #f5f5f5;
            padding: 12px;
            font-weight: 600;
            color: #666;
            display: flex;
            justify-content: space-between;
            font-size: 14px;
            text-transform: uppercase;
        }

        .tableau-ligne {
            padding: 15px 12px;
            display: flex;
            justify-content: space-between;
            align-items: center;
            border-top: 1px solid #f0f0f0;
        }

        .tableau-ligne strong {
            font-size: 16px;
            color: #1d1d1f;
        }

        .tableau-ligne small {
            font-size: 13px;
            color: #6e6e73;
        }

        .inclus-box {
            background: #e8f5e9;
            border-left: 4px solid #4caf50;
            padding: 15px;
            margin: 20px 0;
            border-radius: 4px;
            line-height: 1.6;
        }

        .inclus-box strong {
            color: #2e7d32;
        }

        .conditions {
            margin: 20px 0;
        }

        .conditions h4 {
            font-size: 16px;
            margin-bottom: 10px;
        }

        .conditions p {
            margin: 8px 0;
            color: #6e6e73;
        }

        /* ============================================
           STYLES D'IMPRESSION - UNE PAGE A4
           Design professionnel identique au devis.pdf
           ============================================ */
        @media print {
            /* Configuration page A4 - marges réduites */
            @page {
                size: A4 portrait;
                margin: 1.5cm 1cm;
            }

            /* Force l'impression exacte des couleurs */
            * {
                -webkit-print-color-adjust: exact !important;
                print-color-adjust: exact !important;
                color-adjust: exact !important;
            }

            /* Masquer tout par défaut */
            body * {
                visibility: hidden;
            }

            /* Fond blanc pur partout */
            body {
                background: white !important;
                margin: 0;
                padding: 0;
            }

            /* Forcer le fond blanc sur toutes les sections */
            section, .contact-form, #contact,
            .modele-essentiel-section,
            .modele-premium-section,
            .modele-multi-section {
                background: white !important;
                background-image: none !important;
                background-color: white !important;
            }

            /* Masquer navigation et éléments du site */
            .navbar, .hero, .features-section, .comparison-section,
            .audience-section, .demo-section, .pricing-section,
            .faq-section, .footer, .form-tabs, .devis-actions,
            .cgv-checkbox, .rgpd-notice, .btn-primary, .btn-secondary,
            .error-message, .alert, .loader,
            .modele-essentiel-section, .modele-premium-section, .modele-multi-section,
            #beneficiaires-section, #beneficiaires-commande-section,
            input[type="checkbox"], input[type="radio"], button {
                display: none !important;
                visibility: hidden !important;
            }

            /* Afficher uniquement le formulaire actif */
            #contact, #contact * {
                visibility: visible;
            }

            #contact {
                position: absolute;
                left: 0;
                top: 0;
                width: 100%;
            }

            .contact-form.active,
            .contact-form.active * {
                visibility: visible !important;
            }

            /* Container formulaire - très compact */
            .contact-form {
                max-width: 100%;
                padding: 0;
                margin: 0;
                box-shadow: none !important;
                border: none !important;
                background: white !important;
                font-size: 8pt;
            }

            /* ========================================
               EN-TÊTE COMPACT (comme le PDF)
               ======================================== */

            .form-header {
                background: white !important;
                border: none !important;
                border-bottom: 3px solid #00bcd4 !important;
                padding: 0 0 8px 0 !important;
                margin-bottom: 12px !important;
                page-break-inside: avoid;
                display: flex !important;
                justify-content: space-between !important;
                align-items: flex-start !important;
                position: relative;
                min-height: 45px;
            }

            /* Logo simulé - petit */
            .form-header::before {
                content: "NE";
                position: absolute;
                left: 0;
                top: 0;
                width: 50px;
                height: 50px;
                background: #1565c0;
                color: white;
                font-size: 18px;
                font-weight: 700;
                text-align: center;
                line-height: 50px;
                border-radius: 3px;
            }

            /* Texte sous logo - petit */
            .form-header.commande::after {
                content: "by Musycod - Cartes de visite digitales";
                position: absolute;
                left: 0;
                top: 53px;
                font-size: 7pt;
                color: #666;
            }

            /* Titre à droite - compact */
            .form-header h3 {
                font-size: 13pt !important;
                color: #1d1d1f !important;
                font-weight: 700 !important;
                margin: 0 !important;
                text-align: right !important;
                text-transform: uppercase;
            }

            .form-header p {
                font-size: 7pt !important;
                color: #666 !important;
                margin: 2px 0 0 0 !important;
                text-align: right !important;
            }

            /* ========================================
               SECTIONS ÉMETTEUR / CLIENT
               ======================================== */

            .emetteur-content, .client-content {
                font-size: 8pt;
                line-height: 1.4;
                margin-bottom: 10px;
            }

            .emetteur-content strong, .client-content strong {
                font-size: 9pt;
                font-weight: 700;
                color: #000;
            }

            /* ========================================
               TITRES DE SECTIONS - TRÈS COMPACTS
               ======================================== */

            h4 {
                font-size: 8pt !important;
                font-weight: 700 !important;
                color: #00bcd4 !important;
                margin: 10px 0 5px 0 !important;
                padding: 0 !important;
                background: none !important;
                border: none !important;
                text-transform: uppercase;
                letter-spacing: 0.3px;
                page-break-after: avoid;
            }

            /* ========================================
               CHAMPS DE FORMULAIRE - TRÈS COMPACTS
               ======================================== */

            .form-group {
                margin-bottom: 4px;
                page-break-inside: avoid;
            }

            .form-label {
                font-weight: 400 !important;
                color: #999 !important;
                font-size: 6pt !important;
                display: block;
                margin-bottom: 1px;
                text-transform: uppercase;
                letter-spacing: 0.2px;
            }

            .form-input, .form-select, .form-textarea {
                border: none !important;
                border-bottom: 0.5px solid #e0e0e0 !important;
                background: white !important;
                padding: 2px 0 !important;
                font-size: 8pt !important;
                color: #1d1d1f !important;
                width: 100% !important;
                box-sizing: border-box !important;
                border-radius: 0 !important;
                font-family: -apple-system, BlinkMacSystemFont, sans-serif;
                line-height: 1.1;
            }

            .form-textarea {
                border: 0.5px solid #e0e0e0 !important;
                padding: 3px !important;
                min-height: 30px !important;
                font-size: 7pt !important;
            }

            .form-row {
                display: flex;
                gap: 8px;
                margin-bottom: 4px;
                page-break-inside: avoid;
            }

            .form-row .form-group {
                flex: 1;
                margin-bottom: 0;
            }

            /* ========================================
               TABLEAU DES PRESTATIONS
               ======================================== */

            .tableau-prestations {
                margin: 10px 0;
                font-size: 8pt;
            }

            .tableau-header {
                background: #f5f5f5;
                padding: 4px 0;
                font-size: 7pt;
                font-weight: 600;
                color: #999;
                text-transform: uppercase;
                display: flex;
                justify-content: space-between;
                margin-bottom: 6px;
            }

            .tableau-header .col-designation { flex: 3; }
            .tableau-header .col-qte { flex: 0.5; text-align: center; }
            .tableau-header .col-prix { flex: 1; text-align: right; }
            .tableau-header .col-total { flex: 1; text-align: right; }

            .tableau-ligne {
                display: flex;
                justify-content: space-between;
                align-items: flex-start;
                padding: 6px 0;
                border-bottom: 1px solid #f0f0f0;
            }

            .tableau-ligne .col-designation {
                flex: 3;
            }

            .tableau-ligne .col-designation strong {
                font-size: 9pt;
                font-weight: 700;
                display: block;
                margin-bottom: 2px;
            }

            .tableau-ligne .col-designation small {
                font-size: 7pt;
                color: #666;
            }

            .tableau-ligne .col-qte {
                flex: 0.5;
                text-align: center;
            }

            .tableau-ligne .col-prix {
                flex: 1;
                text-align: right;
            }

            .tableau-ligne .col-total {
                flex: 1;
                text-align: right;
                font-weight: 600;
            }

            /* ========================================
               ENCADRÉ INCLUS
               ======================================== */

            .inclus-box {
                background: #e8f5e9;
                border-left: 3px solid #4caf50;
                padding: 8px;
                margin: 10px 0;
                font-size: 7pt;
                line-height: 1.4;
            }

            .inclus-box strong {
                color: #2e7d32;
                font-weight: 600;
            }

            /* ========================================
               CONDITIONS
               ======================================== */

            .conditions {
                margin: 10px 0;
            }

            .conditions h4 {
                font-size: 8pt;
                font-weight: 700;
                margin: 0 0 4px 0;
                color: #000;
            }

            .conditions p {
                font-size: 7pt;
                color: #666;
                margin: 2px 0;
                line-height: 1.4;
            }

            /* ========================================
               TABLEAU RÉCAPITULATIF TRÈS COMPACT
               ======================================== */

            .devis-summary {
                display: block !important;
                background: white !important;
                border: none !important;
                padding: 0 !important;
                margin: 10px 0 !important;
                page-break-inside: avoid;
            }

            .devis-summary h4 {
                display: none !important;
            }

            /* Lignes du récapitulatif - compactes */
            .summary-row {
                display: flex;
                justify-content: space-between;
                padding: 2px 0;
                font-size: 8pt;
                border-bottom: 0.5px solid #f0f0f0;
            }

            .summary-label {
                color: #1d1d1f;
                font-weight: 400;
                flex: 1;
            }

            .summary-value {
                font-weight: 400 !important;
                color: #1d1d1f !important;
                text-align: right;
                min-width: 70px;
            }

            /* Sous-total et TVA */
            .summary-row:not(.summary-total):not(.summary-ttc) {
                border-bottom: none;
            }

            .summary-total {
                border-top: 0.5px solid #e0e0e0 !important;
                margin-top: 8px !important;
                padding-top: 5px !important;
                justify-content: flex-end;
                gap: 35px;
            }

            .summary-total .summary-label,
            .summary-total .summary-value {
                font-weight: 400 !important;
                font-size: 8pt !important;
            }

            /* Total TTC - CYAN - GRANDE TAILLE */
            .summary-ttc {
                background: white !important;
                border: none !important;
                border-top: 2px solid #000 !important;
                margin: 6px 0 0 0 !important;
                padding: 6px 0 0 0 !important;
                justify-content: flex-end;
                gap: 35px;
            }

            .summary-ttc .summary-label {
                font-weight: 700 !important;
                font-size: 9pt !important;
                color: #1d1d1f !important;
                text-transform: uppercase;
            }

            .summary-ttc .summary-value,
            .summary-ttc span {
                font-size: 16pt !important;
                font-weight: 700 !important;
                color: #00bcd4 !important;
            }

            /* ========================================
               TEXTES ET NOTES - TRÈS COMPACTS
               ======================================== */

            p {
                font-size: 7pt !important;
                color: #999 !important;
                margin: 1px 0 !important;
                line-height: 1.2;
            }

            /* Style pour conditions */
            .contact-form p:has(strong) {
                font-size: 7pt !important;
                margin: 3px 0 !important;
            }

            /* ========================================
               PIED DE PAGE TRÈS COMPACT
               ======================================== */

            .contact-form::after {
                content: "Musycod - Agence de Développement Web\A contact@num-ecard.com | www.num-ecard.com                           SIRET : 504 447 533 00044\A                                                                                                      TVA Intracommunautaire : FR21504447533";
                display: block;
                margin-top: 10px;
                padding-top: 6px;
                border-top: 0.5px solid #e0e0e0;
                font-size: 6pt;
                color: #999;
                text-align: center;
                line-height: 1.3;
                page-break-inside: avoid;
                white-space: pre-line;
            }

            /* ========================================
               OPTIMISATION STRICTE UNE PAGE
               ======================================== */

            /* Éviter absolument les sauts de page */
            .form-header, .devis-summary, .form-row, h4, .form-group {
                page-break-inside: avoid;
                page-break-after: avoid;
            }

            /* Réduire au maximum les espacements */
            .contact-form > * {
                margin-top: 0 !important;
                margin-bottom: 4px !important;
            }

            /* Compacter tous les groupes */
            .form-group + .form-group {
                margin-top: 0 !important;
            }

            /* Réduire les espaces entre sections */
            h4 + .form-group {
                margin-top: 0 !important;
            }
        }

        /* ==========================================
           STYLES POUR LE NOUVEAU MOCKUP (#demo)
           ========================================== */

        /* HEADER */
        #demo .header {
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            color: white;
            padding: 40px 30px 45px;
            text-align: center;
            position: relative;
            overflow: hidden;
        }

        #demo .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='https://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.4;
        }

        #demo .logo {
            font-size: 48px;
            font-weight: 900;
            letter-spacing: 3px;
            color: #c9a569;
            line-height: 1;
            text-shadow: 0 2px 10px rgba(201, 165, 105, 0.3);
            position: relative;
            z-index: 1;
        }

        #demo .company-name {
            font-size: 28px;
            font-weight: 700;
            letter-spacing: 3px;
            color: white;
            margin-top: 8px;
            position: relative;
            z-index: 1;
        }

        #demo .tagline {
            font-size: 14px;
            margin-top: 8px;
            opacity: 0.9;
            font-weight: 300;
            letter-spacing: 0.5px;
            position: relative;
            z-index: 1;
        }

        /* PROFILE */
        #demo .profile {
            padding: 20px 30px 15px;
            text-align: center;
            background: linear-gradient(to bottom, #ffffff 0%, #f8f9fa 100%);
        }

        #demo .avatar-wrapper {
            width: 110px;
            height: 110px;
            margin: -55px auto 20px;
            border-radius: 50%;
            background: white;
            padding: 5px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.15);
            position: relative;
        }

        #demo .avatar {
            width: 100%;
            height: 100%;
            border-radius: 50%;
            background: linear-gradient(135deg, #c9a569 0%, #b8935f 100%);
            display: flex;
            align-items: center;
            justify-content: center;
            font-size: 42px;
            font-weight: 700;
            color: white;
            text-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
        }

        #demo .name {
            font-size: 28px;
            font-weight: 700;
            color: #2c3e50;
            margin-bottom: 8px;
            letter-spacing: 0.5px;
        }

        #demo .position {
            font-size: 16px;
            color: #6c757d;
            font-weight: 500;
            margin-bottom: 20px;
            letter-spacing: 0.3px;
        }

        /* CONTACT BUTTONS */
        #demo .contact-buttons {
            padding: 0 30px 15px;
            background: linear-gradient(to bottom, #f8f9fa 0%, #ffffff 100%);
        }

        #demo .contact-buttons a {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #c9a569 0%, #b8935f 100%);
            color: white;
            padding: 14px 20px;
            margin: 10px 0;
            border-radius: 12px;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
            position: relative;
            overflow: hidden;
        }

        #demo .contact-buttons a::before {
            content: '';
            position: absolute;
            top: 0;
            left: -100%;
            width: 100%;
            height: 100%;
            background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.2), transparent);
            transition: left 0.5s;
        }

        #demo .contact-buttons a:active::before {
            left: 100%;
        }

        #demo .contact-buttons a:active {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(201, 165, 105, 0.4);
        }

        #demo .contact-buttons svg {
            width: 20px;
            height: 20px;
            margin-right: 12px;
            fill: white;
        }

        /* SHARE SECTION */
        #demo .share-section {
            padding: 25px 20px;
            background: linear-gradient(135deg, #2c3e50 0%, #1a252f 100%);
            text-align: center;
            margin: 20px 15px;
            border-radius: 20px;
            box-shadow: 0 8px 24px rgba(0, 0, 0, 0.2);
            position: relative;
            overflow: hidden;
        }

        #demo .share-section h3 {
            color: #c9a569;
            font-size: 22px;
            margin-bottom: 20px;
            font-weight: 700;
            letter-spacing: 0.5px;
        }

        #demo .share-buttons {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
        }

        #demo .share-btn {
            display: flex;
            align-items: center;
            justify-content: center;
            padding: 14px 16px;
            border-radius: 12px;
            text-decoration: none;
            font-size: 14px;
            font-weight: 600;
            color: white;
            transition: all 0.3s ease;
            border: none;
            cursor: pointer;
        }

        #demo .share-btn svg {
            width: 18px;
            height: 18px;
            margin-right: 8px;
            fill: currentColor;
        }

        #demo .share-whatsapp { background: linear-gradient(135deg, #25D366 0%, #128C7E 100%); }
        #demo .share-email { background: linear-gradient(135deg, #EA4335 0%, #C5221F 100%); }
        #demo .share-sms { background: linear-gradient(135deg, #0084FF 0%, #0066CC 100%); }
        #demo .share-linkedin { background: linear-gradient(135deg, #0077B5 0%, #005582 100%); }
        #demo .share-facebook { background: linear-gradient(135deg, #1877F2 0%, #0D5EBF 100%); }
        #demo .share-x { background: linear-gradient(135deg, #000000 0%, #333333 100%); }
        #demo .share-instagram { background: linear-gradient(135deg, #E4405F 0%, #C13584 100%); }
        #demo .share-youtube { background: linear-gradient(135deg, #FF0000 0%, #CC0000 100%); }
        #demo .share-tiktok { background: linear-gradient(135deg, #000000 0%, #EE1D52 100%); }
        #demo .share-qrcode { background: linear-gradient(135deg, #6B46C1 0%, #5A3AA3 100%); }
        #demo .share-news { background: linear-gradient(135deg, #FF6B35 0%, #E55A2C 100%); }

        #demo .share-btn:active {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(0, 0, 0, 0.3);
        }

        /* WEBSITE LINKS */
        #demo .website-links {
            padding: 25px 30px;
            background: #f8f9fa;
        }

        #demo .website-links h3 {
            color: #2c3e50;
            font-size: 20px;
            margin-bottom: 18px;
            font-weight: 700;
            text-align: center;
        }

        #demo .website-links a {
            display: flex;
            align-items: center;
            justify-content: center;
            background: linear-gradient(135deg, #c9a569 0%, #b8935f 100%);
            color: white;
            padding: 14px 20px;
            margin: 10px 0;
            border-radius: 12px;
            text-decoration: none;
            font-size: 15px;
            font-weight: 600;
            transition: all 0.3s ease;
            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
        }

        #demo .website-links a svg {
            width: 20px;
            height: 20px;
            margin-right: 10px;
        }

        #demo .website-links a:active {
            transform: translateY(-2px);
            box-shadow: 0 6px 20px rgba(201, 165, 105, 0.4);
        }

        /* PILLS */
        #demo .pills-container {
            display: grid;
            grid-template-columns: repeat(2, 1fr);
            gap: 12px;
            margin-bottom: 5px;
        }

        #demo .pill {
            background: linear-gradient(135deg, #ffffff 0%, #f8f9fa 100%);
            color: #2c3e50;
            padding: 12px 16px;
            border-radius: 24px;
            font-size: 13px;
            font-weight: 600;
            border: 2px solid #c9a569;
            transition: all 0.3s ease;
            cursor: default;
            text-align: center;
        }

        #demo .pill:active {
            background: linear-gradient(135deg, #c9a569 0%, #b8935f 100%);
            color: white;
            transform: translateY(-2px);
            box-shadow: 0 4px 12px rgba(201, 165, 105, 0.3);
        }


/* ============================================================================
   CSS CORRECTIF POUR SLIDERS HORIZONTAUX DES MODÈLES (MOBILE/TABLETTE)
   Ce CSS utilise !important pour écraser les styles inline du HTML
   ============================================================================ */

/* ============================================================================
   ANCIEN CSS DES MODÈLES - REMPLACÉ PAR LE NOUVEAU CSS AVEC ORDER
   ============================================================================
   Le nouveau CSS avec order se trouve plus bas dans le fichier (avant la fin des styles).
   Il gère correctement l'ordre d'affichage : Texte → Mockup → Prix
   ============================================================================ */

/* ============================================================================
   CORRECTIONS SUPPLÉMENTAIRES POUR TOUS LES ÉCRANS
   ============================================================================ */

/* Forcer les images dans le mockup à s'adapter */
.modele-essentiel-section .smartphone-mockup img,
.modele-premium-section .smartphone-mockup img,
.modele-multi-section .smartphone-mockup img {
    max-width: 100% !important;
    height: auto !important;
    object-fit: contain !important;
}

/* S'assurer que les liens restent cliquables */
.modele-essentiel-section a,
.modele-premium-section a,
.modele-multi-section a {
    pointer-events: auto !important;
    cursor: pointer !important;
}

/* ============================================================================
   FIN DU CSS CORRECTIF SLIDERS MODÈLES
   ============================================================================ */


/* ================================================================
   CSS CORRECTIF INTÉGRÉ - SLIDERS HORIZONTAUX RESPONSIVE
   Date: 2025-12-10
   ================================================================ */
/* ================================================================
   CSS CORRECTIF - SLIDERS HORIZONTAUX MOBILE/TABLETTE (<1024px)
   À ajouter à la fin de votre section <style> dans le HTML
   ================================================================ */

@media screen and (max-width: 1023px) {

    /* ============================================
       SECTIONS MODÈLES : ESSENTIEL, PREMIUM, MULTI
       ============================================ */

    /* Ciblage des conteneurs parents des 3 blocs */
    .modele-essentiel-section > div > div,
    .modele-premium-section > div > div,
    .modele-multi-section > div > div {
        /* Force le conteneur en slider horizontal */
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;

        /* Espacement et padding */
        gap: 0 !important;
        padding: 20px 0 !important;
        margin: 0 !important;

        /* Masque les scrollbars par défaut */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }

    /* Masque les scrollbars Webkit (Chrome, Safari) */
    .modele-essentiel-section > div > div::-webkit-scrollbar,
    .modele-premium-section > div > div::-webkit-scrollbar,
    .modele-multi-section > div > div::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Force chaque bloc enfant à occuper toute la largeur */
    .modele-essentiel-section > div > div > div,
    .modele-premium-section > div > div > div,
    .modele-multi-section > div > div > div {
        /* Chaque slide prend 100% de la largeur viewport */
        min-width: 100vw !important;
        max-width: 100vw !important;
        flex: 0 0 100vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;

        /* Espacement interne */
        padding: 20px !important;
        margin: 0 !important;

        /* Empêche le contenu de déborder */
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* Ajustements des textes dans les sections modèles */
    .modele-essentiel-section h2,
    .modele-essentiel-section h3,
    .modele-essentiel-section p,
    .modele-essentiel-section span,
    .modele-premium-section h2,
    .modele-premium-section h3,
    .modele-premium-section p,
    .modele-premium-section span,
    .modele-multi-section h2,
    .modele-multi-section h3,
    .modele-multi-section p,
    .modele-multi-section span {
        /* Réduit les tailles pour mobile */
        font-size: clamp(14px, 3.5vw, 18px) !important;
        line-height: 1.4 !important;
        word-wrap: break-word !important;
    }

    /* Ajustement spécifique des titres principaux */
    .modele-essentiel-section h2,
    .modele-premium-section h2,
    .modele-multi-section h2 {
        font-size: clamp(28px, 8vw, 42px) !important;
        margin-bottom: 20px !important;
    }

    /* Ajustement du mockup smartphone pour qu'il reste visible */
    .smartphone-mockup {
        transform: scale(0.75) !important;
        margin: 0 auto !important;
    }

    .smartphone-frame {
        width: 280px !important;
        height: 560px !important;
    }

    /* Ajustement des boutons de navigation des chartes */
    .modele-essentiel-section button[onclick*="Chart"],
    .modele-premium-section button[onclick*="Chart"],
    .modele-multi-section button[onclick*="Chart"] {
        width: 40px !important;
        height: 40px !important;
        font-size: 24px !important;
        position: absolute !important;
        z-index: 100 !important;
    }

    /* Bouton précédent */
    button[onclick*="previous"] {
        left: 10px !important;
    }

    /* Bouton suivant */
    button[onclick*="next"] {
        right: 10px !important;
    }

    /* ============================================
       SECTION TARIFS (.pricing-grid)
       ============================================ */

    .pricing-grid {
        /* Transforme la grille en slider horizontal */
        display: flex !important;
        flex-direction: row !important;
        overflow-x: auto !important;
        overflow-y: hidden !important;
        scroll-snap-type: x mandatory !important;
        scroll-behavior: smooth !important;
        -webkit-overflow-scrolling: touch !important;

        /* Espacement entre les cartes */
        gap: 20px !important;
        padding: 20px 10px !important;

        /* Masque les scrollbars */
        scrollbar-width: none !important; /* Firefox */
        -ms-overflow-style: none !important; /* IE/Edge */
    }

    /* Masque scrollbar Webkit */
    .pricing-grid::-webkit-scrollbar {
        display: none !important;
        width: 0 !important;
        height: 0 !important;
    }

    /* Chaque carte de tarif prend 85% de la largeur viewport */
    .pricing-card {
        min-width: 85vw !important;
        max-width: 85vw !important;
        flex: 0 0 85vw !important;
        scroll-snap-align: center !important;
        scroll-snap-stop: always !important;

        /* Espacement et mise en forme */
        margin: 0 !important;
        padding: 30px 20px !important;
        box-sizing: border-box !important;

        /* Supprime la transformation scale de la carte featured */
        transform: none !important;
    }

    /* Ajustement de la carte "featured" (Populaire) */
    .pricing-card.featured {
        transform: scale(1) !important;
        box-shadow: 0 10px 40px rgba(0, 122, 255, 0.25) !important;
    }

    /* ============================================
       INDICATEURS VISUELS DE SCROLL
       ============================================ */

    /* Indicateur de scroll pour les sections modèles */
    .modele-essentiel-section::after,
    .modele-premium-section::after,
    .modele-multi-section::after {
        content: "← Swiper pour naviguer →" !important;
        display: block !important;
        text-align: center !important;
        color: rgba(255, 255, 255, 0.7) !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-top: 20px !important;
        padding: 10px !important;
        letter-spacing: 0.5px !important;
    }

    /* Indicateur de scroll pour la section tarifs */
    .pricing-section::after {
        content: "← Swiper pour voir tous les tarifs →" !important;
        display: block !important;
        text-align: center !important;
        color: #6e6e73 !important;
        font-size: 14px !important;
        font-weight: 500 !important;
        margin-top: 20px !important;
        padding: 10px !important;
        letter-spacing: 0.5px !important;
    }

    /* ============================================
       POINTS DE NAVIGATION (DOTS) - Optionnel
       ============================================ */

    /* Container pour les dots */
    .pricing-section {
        position: relative !important;
    }

    /* Création d'indicateurs visuels sous forme de points */
    .pricing-section::before {
        content: "● ● ●" !important;
        display: block !important;
        text-align: center !important;
        color: rgba(0, 122, 255, 0.3) !important;
        font-size: 20px !important;
        letter-spacing: 8px !important;
        margin-top: -10px !important;
        margin-bottom: 20px !important;
    }

    /* ============================================
       AJUSTEMENTS SUPPLÉMENTAIRES
       ============================================ */

    /* Assure que les sections ont une hauteur minimale adaptée */
    .modele-essentiel-section,
    .modele-premium-section,
    .modele-multi-section {
        min-height: auto !important;
        padding: 60px 0 !important;
    }

    /* Ajustement de la section tarifs */
    .pricing-section {
        padding: 60px 0 !important;
        min-height: auto !important;
    }

    /* Empêche le débordement horizontal global */
    body {
        overflow-x: hidden !important;
    }

    html {
        overflow-x: hidden !important;
    }
}

/* ============================================
   MEDIA QUERY SPÉCIFIQUE POUR TRÈS PETITS ÉCRANS (<480px)
   ============================================ */

@media screen and (max-width: 479px) {

    /* Réduit encore plus les éléments pour petits smartphones */
    .smartphone-mockup {
        transform: scale(0.6) !important;
    }

    .smartphone-frame {
        width: 240px !important;
        height: 480px !important;
    }

    /* Cartes de tarifs prennent 95% de la largeur sur petits écrans */
    .pricing-card {
        min-width: 95vw !important;
        max-width: 95vw !important;
        flex: 0 0 95vw !important;
        padding: 25px 15px !important;
    }

    /* Ajuste les titres pour très petits écrans */
    .section-title {
        font-size: 24px !important;
    }

    .modele-essentiel-section h2,
    .modele-premium-section h2,
    .modele-multi-section h2 {
        font-size: 24px !important;
    }

    /* Réduit les boutons de navigation */
    .modele-essentiel-section button[onclick*="Chart"],
    .modele-premium-section button[onclick*="Chart"],
    .modele-multi-section button[onclick*="Chart"] {
        width: 35px !important;
        height: 35px !important;
        font-size: 20px !important;
    }
}

/* ============================================================================
   CORRECTION ORDRE & VISIBILITÉ - SECTIONS MODÈLES MOBILE
   ============================================================================ */

@media (max-width: 1024px) {

    /* ========================================
       PARTIE 1 : CONTENEUR PARENT - FLEXBOX VERTICAL
       ======================================== */

    /* Cibler le conteneur direct qui contient les 3 blocs */
    .modele-essentiel-section > div > div,
    .modele-premium-section > div > div,
    .modele-multi-section > div > div {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: flex-start !important;
        gap: 40px !important;
        padding: 20px !important;
        width: 100% !important;
        max-width: 100% !important;
    }

    /* ========================================
       PARTIE 2 : RÉORGANISATION AVEC ORDER
       ======================================== */

    /* BLOC 1 : Titre et Composition → EN HAUT (order: 1) */
    .modele-essentiel-section > div > div > div:nth-child(1),
    .modele-premium-section > div > div > div:nth-child(1),
    .modele-multi-section > div > div > div:nth-child(1) {
        order: 1 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        text-align: center !important;
    }

    /* BLOC 2 : Prix → EN BAS (order: 3) */
    .modele-essentiel-section > div > div > div:nth-child(2),
    .modele-premium-section > div > div > div:nth-child(2),
    .modele-multi-section > div > div > div:nth-child(2) {
        order: 3 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        text-align: center !important;
        margin-top: 20px !important;
    }

    /* BLOC 3 : Mockup → AU MILIEU (order: 2) */
    .modele-essentiel-section > div > div > div:nth-child(3),
    .modele-premium-section > div > div > div:nth-child(3),
    .modele-multi-section > div > div > div:nth-child(3) {
        order: 2 !important;
        width: 100% !important;
        max-width: 100% !important;
        flex: none !important;
        display: flex !important;
        justify-content: center !important;
        align-items: center !important;
        margin: 30px auto !important;
        padding: 0 !important;
    }

    /* ========================================
       PARTIE 3 : RÉPARER LE MOCKUP (INVISIBLE)
       ======================================== */

    /* Cibler spécifiquement le conteneur du mockup */
    .modele-essentiel-section .smartphone-mockup,
    .modele-premium-section .smartphone-mockup,
    .modele-multi-section .smartphone-mockup {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 500px !important;
        margin: 0 auto !important;
        position: relative !important;
        z-index: 1 !important;
    }

    /* Cibler le frame du smartphone */
    .modele-essentiel-section .smartphone-frame,
    .modele-premium-section .smartphone-frame,
    .modele-multi-section .smartphone-frame {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 320px !important;
        height: auto !important;
        min-height: 600px !important;
        max-width: 100% !important;
        margin: 0 auto !important;
    }

    /* Cibler l'écran du smartphone */
    .modele-essentiel-section .smartphone-screen,
    .modele-premium-section .smartphone-screen,
    .modele-multi-section .smartphone-screen {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
        height: auto !important;
        min-height: 550px !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
    }

    /* Forcer la visibilité du contenu de la carte */
    .modele-essentiel-section .card-content,
    .modele-premium-section .card-content,
    .modele-multi-section .card-content {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        width: 100% !important;
    }

    /* ========================================
       PARTIE 4 : MASQUER LES BOUTONS DE NAVIGATION
       ======================================== */

    /* Masquer les flèches < > autour du mockup sur mobile */
    .modele-essentiel-section button[onclick*="Chart"],
    .modele-essentiel-section button[onclick*="previous"],
    .modele-essentiel-section button[onclick*="next"],
    .modele-premium-section button[onclick*="Slide"],
    .modele-multi-section button[onclick*="Multi"] {
        display: none !important;
    }

    /* ========================================
       PARTIE 5 : AJUSTEMENTS TYPOGRAPHIQUES
       ======================================== */

    /* Réduire la taille du titre principal sur mobile */
    .modele-essentiel-section .section-title,
    .modele-premium-section .section-title,
    .modele-multi-section .section-title {
        font-size: 40px !important;
        line-height: 1.1 !important;
        margin-bottom: 20px !important;
        text-align: center !important;
    }

    /* Ajuster les blocs de composition */
    .modele-essentiel-section > div > div > div:nth-child(1) > div,
    .modele-premium-section > div > div > div:nth-child(1) > div,
    .modele-multi-section > div > div > div:nth-child(1) > div {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Ajuster le bloc prix */
    .modele-essentiel-section > div > div > div:nth-child(2) > div,
    .modele-premium-section > div > div > div:nth-child(2) > div,
    .modele-multi-section > div > div > div:nth-child(2) > div {
        width: 100% !important;
        max-width: 400px !important;
        margin: 0 auto !important;
    }
}

/* ========================================
   MOBILE STRICT (< 768px)
   ======================================== */

@media (max-width: 768px) {

    /* Réduire encore plus les tailles */
    .modele-essentiel-section .section-title,
    .modele-premium-section .section-title,
    .modele-multi-section .section-title {
        font-size: 32px !important;
    }

    /* Réduire la taille du mockup sur très petit écran */
    .modele-essentiel-section .smartphone-mockup,
    .modele-premium-section .smartphone-mockup,
    .modele-multi-section .smartphone-mockup {
        max-width: 280px !important;
        min-height: 450px !important;
    }

    .modele-essentiel-section .smartphone-frame,
    .modele-premium-section .smartphone-frame,
    .modele-multi-section .smartphone-frame {
        width: 280px !important;
        min-height: 520px !important;
    }

    /* Réduire les gaps */
    .modele-essentiel-section > div > div,
    .modele-premium-section > div > div,
    .modele-multi-section > div > div {
        gap: 30px !important;
        padding: 15px !important;
    }
}

/* ============================================================================
   CORRECTIF CRITIQUE - MOCKUPS MOBILE (< 1024px)
   ============================================================================

   PROBLÈME 1 : Essentiel & Premium → Mockups déformés/allongés
   PROBLÈME 2 : Multi-cartes → Contenu invisible (seulement le sélecteur visible)

   ============================================================================ */

@media (max-width: 1024px) {

    /* ========================================================================
       CORRECTIF 1 : ESSENTIEL & PREMIUM - RÉPARER LA DÉFORMATION
       ========================================================================
       Les mockups sont étirés verticalement et ne respectent pas leur ratio.
       Solution : Annuler les hauteurs forcées et utiliser aspect-ratio naturel.
       ======================================================================== */

    /* A. Conteneur principal du mockup */
    .modele-essentiel-section .smartphone-mockup,
    .modele-premium-section .smartphone-mockup,
    #charteMockupSection .smartphone-mockup {
        /* Annuler toute hauteur fixe */
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;

        /* Largeur adaptative avec maximum raisonnable */
        width: 100% !important;
        max-width: 320px !important;

        /* Centrage */
        margin: 0 auto !important;

        /* Permettre au contenu de définir la hauteur */
        display: block !important;
        position: relative !important;
    }

    /* B. Frame du smartphone (cadre noir) */
    .modele-essentiel-section .smartphone-frame,
    .modele-premium-section .smartphone-frame,
    #charteMockupSection .smartphone-frame {
        /* Annuler hauteur fixe - utiliser aspect-ratio naturel */
        height: auto !important;
        min-height: 550px !important; /* Hauteur minimale pour voir le contenu */
        max-height: none !important;

        /* Largeur adaptative */
        width: 100% !important;
        max-width: 320px !important;

        /* Ratio naturel d'un smartphone (environ 19.5:9) */
        aspect-ratio: 9 / 19.5 !important;

        /* Permettre au contenu de déborder si nécessaire */
        overflow: visible !important;

        /* Centrage */
        margin: 0 auto !important;
    }

    /* C. Écran du smartphone (zone de contenu) */
    .modele-essentiel-section .smartphone-screen,
    .modele-premium-section .smartphone-screen,
    #charteMockupSection .smartphone-screen {
        /* CRITIQUE : Annuler hauteur 100% qui force l'étirement */
        height: auto !important;
        min-height: 520px !important; /* Hauteur minimale pour voir les cartes */
        max-height: none !important;

        /* Largeur */
        width: 100% !important;

        /* PERMETTRE LE SCROLL pour voir tout le contenu */
        overflow-y: auto !important;
        overflow-x: hidden !important;

        /* Ne pas masquer le contenu */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* D. Contenu de la carte (vcard-container, card-content) */
    .modele-essentiel-section .card-content,
    .modele-premium-section .card-content,
    .modele-essentiel-section .vcard-container,
    .modele-premium-section .vcard-container,
    #charteMockupSection .card-content,
    #charteMockupSection .vcard-container {
        /* Laisser le contenu définir sa hauteur naturelle */
        height: auto !important;
        min-height: auto !important;

        /* S'assurer que le contenu est visible */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Pas de contrainte de hauteur */
        overflow: visible !important;
    }

    /* E. Si le mockup contient des images (fallback) */
    .modele-essentiel-section .smartphone-mockup img,
    .modele-premium-section .smartphone-mockup img,
    #charteMockupSection .smartphone-mockup img {
        /* Préserver le ratio de l'image */
        height: auto !important;
        width: 100% !important;
        max-width: 100% !important;

        /* Ne jamais déformer */
        object-fit: contain !important;
        object-position: center !important;
    }

    /* F. Si background-image est utilisé (rare mais possible) */
    .modele-essentiel-section .smartphone-mockup[style*="background-image"],
    .modele-premium-section .smartphone-mockup[style*="background-image"] {
        background-size: contain !important;
        background-repeat: no-repeat !important;
        background-position: center !important;
    }


    /* ========================================================================
       CORRECTIF 2 : MULTI-CARTES - RÉPARER LE CONTENU INVISIBLE
       ========================================================================
       Le mockup a la bonne taille mais les cartes sous le sélecteur sont vides.
       Solution : Forcer la visibilité et donner une hauteur au conteneur.
       ======================================================================== */

    /* A. Conteneur principal du mockup Multi-cartes */
    .modele-multi-section .smartphone-mockup {
        /* S'assurer que le conteneur est visible */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Dimensions adaptatives */
        width: 100% !important;
        max-width: 320px !important;
        height: auto !important;
        min-height: 600px !important; /* IMPORTANT : Hauteur min pour voir les cartes */

        /* Centrage */
        margin: 0 auto !important;

        /* Permettre le contenu de dépasser */
        overflow: visible !important;
    }

    /* B. Frame du smartphone Multi-cartes */
    .modele-multi-section .smartphone-frame {
        /* Annuler hauteur fixe */
        height: auto !important;
        min-height: 600px !important; /* CRITIQUE : Doit être assez grand pour les cartes */
        max-height: none !important;

        /* Largeur */
        width: 100% !important;
        max-width: 320px !important;

        /* Ratio smartphone */
        aspect-ratio: 9 / 19.5 !important;

        /* PERMETTRE LE DÉBORDEMENT pour voir les cartes */
        overflow: visible !important;

        /* Position relative pour les enfants absolus */
        position: relative !important;
    }

    /* C. Écran du smartphone Multi-cartes */
    .modele-multi-section .smartphone-screen {
        /* CRITIQUE : Annuler overflow: hidden qui cache les cartes */
        overflow: visible !important;
        overflow-y: auto !important; /* Permettre le scroll si contenu trop grand */
        overflow-x: hidden !important;

        /* Hauteur adaptative */
        height: auto !important;
        min-height: 570px !important; /* IMPORTANT : Doit afficher sélecteur + cartes */
        max-height: none !important;

        /* Largeur */
        width: 100% !important;

        /* S'assurer de la visibilité */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Position relative pour les iframes */
        position: relative !important;
    }

    /* D. Conteneur interne (div sous smartphone-screen) */
    .modele-multi-section .smartphone-screen > div {
        /* CRITIQUE : Hauteur minimale pour contenir sélecteur + cartes */
        min-height: 550px !important;
        height: auto !important;

        /* Permettre le débordement */
        overflow: visible !important;

        /* Position relative pour les cartes en absolute */
        position: relative !important;

        /* Padding pour que les cartes ne soient pas coupées */
        padding-bottom: 50px !important;
    }

    /* E. Card Selector (menu déroulant) */
    .modele-multi-section .card-selector {
        /* S'assurer qu'il est visible */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        z-index: 10 !important;

        /* Position */
        position: relative !important;

        /* Espace en bas pour les cartes */
        margin-bottom: 20px !important;
    }

    /* F. Card iframes (LES CARTES ELLES-MÊMES) */
    .modele-multi-section .card-iframe,
    .modele-multi-section iframe[id*="iframe-"] {
        /* CRITIQUE : Forcer la visibilité des iframes */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* HAUTEUR MINIMALE pour voir le contenu de la carte */
        min-height: 450px !important;
        height: auto !important;

        /* Largeur */
        width: 100% !important;

        /* ANNULER overflow: hidden qui cache le contenu */
        overflow: visible !important;
        overflow-y: auto !important;

        /* Position */
        position: relative !important;

        /* Fond blanc pour voir la carte */
        background: white !important;
    }

    /* G. Si les cartes utilisent position: absolute */
    .modele-multi-section [class*="card-display"],
    .modele-multi-section [id*="card-display"] {
        /* S'assurer que le parent a une hauteur définie */
        position: relative !important;

        /* Visibilité */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Hauteur */
        min-height: 400px !important;
        height: auto !important;

        /* Z-index pour être au-dessus */
        z-index: 5 !important;
    }

    /* H. Grille de cartes dans le sélecteur */
    .modele-multi-section .cards-grid {
        /* S'assurer de la visibilité */
        display: grid !important;
        visibility: visible !important;
        opacity: 1 !important;
    }

    /* I. Options de carte individuelles */
    .modele-multi-section .card-option {
        /* Visibilité */
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;

        /* Rendre cliquable */
        pointer-events: auto !important;
    }
}

/* ============================================================================
   CORRECTIFS SUPPLÉMENTAIRES - MOBILE STRICT (< 768px)
   ============================================================================ */

@media (max-width: 768px) {

    /* Réduire légèrement les dimensions sur très petits écrans */
    .modele-essentiel-section .smartphone-mockup,
    .modele-premium-section .smartphone-mockup,
    .modele-multi-section .smartphone-mockup,
    #charteMockupSection .smartphone-mockup {
        max-width: 280px !important;
        min-height: 500px !important;
    }

    .modele-essentiel-section .smartphone-frame,
    .modele-premium-section .smartphone-frame,
    .modele-multi-section .smartphone-frame,
    #charteMockupSection .smartphone-frame {
        max-width: 280px !important;
        min-height: 520px !important;
    }

    .modele-essentiel-section .smartphone-screen,
    .modele-premium-section .smartphone-screen,
    .modele-multi-section .smartphone-screen,
    #charteMockupSection .smartphone-screen {
        min-height: 490px !important;
    }

    /* Cartes Multi sur petit écran */
    .modele-multi-section .card-iframe,
    .modele-multi-section iframe[id*="iframe-"] {
        min-height: 400px !important;
    }
}

/* ================================================================
   SYSTÈME DE MODALS POUR DOCUMENTS LÉGAUX
   ================================================================ */

/* Overlay du modal */
.legal-modal-overlay {
    display: none;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(10px);
    z-index: 99999;
    overflow-y: auto;
    padding: 20px;
    animation: fadeIn 0.3s ease-out;
}

.legal-modal-overlay.active {
    display: flex;
    align-items: flex-start;
    justify-content: center;
}

/* Conteneur du modal */
.legal-modal-container {
    position: relative;
    max-width: 1000px;
    width: 100%;
    background: white;
    border-radius: 18px;
    box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
    margin: 40px auto;
    animation: slideUp 0.4s ease-out;
}

/* En-tête du modal */
.legal-modal-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 24px 32px;
    border-bottom: 1px solid #e5e5e7;
    background: linear-gradient(135deg, #f5f5f7 0%, #ffffff 100%);
    border-radius: 18px 18px 0 0;
}

.legal-modal-title {
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
    letter-spacing: -0.02em;
    margin: 0;
}

.legal-modal-close {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: rgba(0, 0, 0, 0.05);
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    font-size: 20px;
    color: #6e6e73;
}

.legal-modal-close:hover {
    background: rgba(0, 0, 0, 0.1);
    transform: rotate(90deg);
}

/* Contenu du modal */
.legal-modal-content {
    padding: 40px 32px;
    max-height: calc(100vh - 200px);
    overflow-y: auto;
}

.legal-modal-content h2 {
    font-size: 24px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 32px 0 16px 0;
    letter-spacing: -0.01em;
}

.legal-modal-content h2:first-child {
    margin-top: 0;
}

.legal-modal-content h3 {
    font-size: 20px;
    font-weight: 600;
    color: #1d1d1f;
    margin: 24px 0 12px 0;
}

.legal-modal-content p {
    font-size: 16px;
    line-height: 1.6;
    color: #1d1d1f;
    margin-bottom: 16px;
}

.legal-modal-content ul {
    margin: 16px 0;
    padding-left: 24px;
}

.legal-modal-content li {
    margin-bottom: 8px;
    line-height: 1.6;
}

/* Animations */
@keyframes fadeIn {
    from {
        opacity: 0;
    }
    to {
        opacity: 1;
    }
}

@keyframes slideUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Scrollbar personnalisée pour le modal */
.legal-modal-content::-webkit-scrollbar {
    width: 8px;
}

.legal-modal-content::-webkit-scrollbar-track {
    background: #f5f5f7;
    border-radius: 4px;
}

.legal-modal-content::-webkit-scrollbar-thumb {
    background: #d2d2d7;
    border-radius: 4px;
}

.legal-modal-content::-webkit-scrollbar-thumb:hover {
    background: #b0b0b5;
}

/* Responsive */
@media (max-width: 768px) {
    .legal-modal-overlay {
        padding: 0;
    }

    .legal-modal-container {
        margin: 0;
        border-radius: 0;
        min-height: 100vh;
    }

    .legal-modal-header {
        border-radius: 0;
        padding: 20px;
    }

    .legal-modal-title {
        font-size: 20px;
    }

    .legal-modal-content {
        padding: 24px 20px;
        max-height: none;
    }
}

/* Masquer les sections légales (elles seront affichées dans les modals) */
#faq,
#cgv,
#legal,
#privacy,
#cookies {
    display: none !important;
}

/* ================================================================
   FIN DU CSS CORRECTIF
   ================================================================ */


/* =========================================================================
   SECTION ADMIN
   =========================================================================
   Styles pour l'espace administration /admin/*
   ========================================================================= */

/* =========================================== */
/* ADMIN HEADER                                */
/* =========================================== */

.admin-header {
    background: var(--gradient-primary);
    color: white;
    padding: 2rem 0;
    margin-bottom: 2rem;
}

/* =========================================== */
/* ADMIN TABLES                                */
/* =========================================== */

.admin-table {
    width: 100%;
    border-collapse: separate;
    border-spacing: 0;
    font-size: var(--font-size-base);
}

.admin-table thead th {
    background: var(--color-bg-light);
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-primary);
    border-bottom: 2px solid var(--color-bg-border);
    white-space: nowrap;
}

.admin-table tbody td {
    padding: var(--spacing-md) var(--spacing-lg);
    border-bottom: 1px solid #f0f0f0;
    vertical-align: middle;
}

.admin-table tbody tr:hover {
    background: var(--color-bg-light);
}

.admin-table tbody tr:last-child td {
    border-bottom: none;
}

/* Table container */
.table-container {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

.table-container table {
    width: 100%;
    border-collapse: collapse;
}

.table-container th,
.table-container td {
    padding: var(--spacing-md) var(--spacing-lg);
    text-align: left;
    border-bottom: 1px solid var(--color-bg-border);
}

.table-container th {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-tertiary);
    font-size: var(--font-size-sm);
    text-transform: uppercase;
    letter-spacing: 0.05em;
}

/* Colonnes spécifiques admin */
.col-reference { width: 160px; }
.col-client { width: 180px; }
.col-pack { width: 160px; }
.col-montant { width: 100px; text-align: right; }
.col-statut { width: 140px; }
.col-date { width: 140px; }
.col-action { width: 80px; text-align: right; }

/* =========================================== */
/* STATUS BADGES ADMIN                         */
/* =========================================== */

.status-badge {
    display: inline-block;
    padding: var(--spacing-xs) var(--spacing-md);
    border-radius: var(--radius-full);
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.status-draft { background: var(--color-draft-bg); color: var(--color-draft-dark); }
.status-pending { background: var(--color-warning-bg); color: var(--color-warning-dark); }
.status-paid { background: var(--color-info-bg); color: var(--color-info-dark); }
.status-processing { background: var(--color-processing-bg); color: var(--color-processing-dark); }
.status-completed { background: var(--color-success-bg); color: var(--color-success-dark); }
.status-cancelled { background: var(--color-error-bg); color: var(--color-error-dark); }

/* Badge status (version commandes admin) */
.badge-status {
    padding: 0.5rem 1rem;
    border-radius: var(--radius-full);
    font-weight: var(--font-weight-semibold);
    font-size: 0.85rem;
}

.badge-status.badge-draft { background-color: #6c757d; color: white; }
.badge-status.badge-pending { background-color: #ffc107; color: #000; }
.badge-status.badge-paid { background-color: #28a745; color: white; }
.badge-status.badge-processing { background-color: #17a2b8; color: white; }
.badge-status.badge-completed { background-color: #007bff; color: white; }
.badge-status.badge-cancelled { background-color: #dc3545; color: white; }

/* =========================================== */
/* USER AVATAR & INFO                          */
/* =========================================== */

.user-avatar {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--gradient-primary);
    display: flex;
    align-items: center;
    justify-content: center;
    color: white;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-semibold);
    flex-shrink: 0;
}

.user-avatar-lg {
    width: 60px;
    height: 60px;
    font-size: var(--font-size-2xl);
}

.user-info {
    display: flex;
    align-items: center;
    gap: var(--spacing-md);
}

.user-name {
    font-weight: var(--font-weight-medium);
    color: var(--color-text-primary);
}

/* =========================================== */
/* ACTION LINKS                                */
/* =========================================== */

.action-link {
    color: var(--color-primary);
    text-decoration: none;
    font-weight: var(--font-weight-medium);
    white-space: nowrap;
}

.action-link:hover {
    text-decoration: underline;
}

/* =========================================== */
/* ADMIN STATS CARDS                           */
/* =========================================== */

.stats-card {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    box-shadow: var(--shadow-md);
    margin-bottom: 1.5rem;
}

.stat-icon {
    font-size: var(--font-size-2xl);
    margin-bottom: var(--spacing-sm);
}

/* Status distribution boxes */
.status-box {
    flex: 1;
    min-width: 150px;
    text-align: center;
    padding: var(--spacing-xl);
    border-radius: var(--radius-lg);
}

.status-box-value {
    font-size: var(--font-size-5xl);
    font-weight: var(--font-weight-semibold);
}

.status-box-label {
    font-size: var(--font-size-base);
}

.status-box-pending { background: var(--color-warning-bg); }
.status-box-pending .status-box-value,
.status-box-pending .status-box-label { color: var(--color-warning-dark); }

.status-box-paid { background: var(--color-info-bg); }
.status-box-paid .status-box-value,
.status-box-paid .status-box-label { color: var(--color-info-dark); }

.status-box-processing { background: var(--color-processing-bg); }
.status-box-processing .status-box-value,
.status-box-processing .status-box-label { color: var(--color-processing-dark); }

.status-box-completed { background: var(--color-success-bg); }
.status-box-completed .status-box-value,
.status-box-completed .status-box-label { color: var(--color-success-dark); }

.status-box-cancelled { background: var(--color-error-bg); }
.status-box-cancelled .status-box-value,
.status-box-cancelled .status-box-label { color: var(--color-error-dark); }

/* =========================================== */
/* FILTER SECTION                              */
/* =========================================== */

.filter-section {
    background: white;
    border-radius: var(--radius-md);
    padding: 1.5rem;
    margin-bottom: 2rem;
    box-shadow: var(--shadow-md);
}

.btn-filter {
    margin-right: 0.5rem;
    margin-bottom: 0.5rem;
}

.btn-filter.active {
    background-color: #667eea;
    border-color: #667eea;
    color: white;
}

/* =========================================== */
/* COMMANDES TABLE ADMIN                       */
/* =========================================== */

.commandes-table {
    background: white;
    border-radius: var(--radius-md);
    overflow: hidden;
    box-shadow: var(--shadow-md);
}

.commandes-table table {
    margin-bottom: 0;
}

.table-actions {
    white-space: nowrap;
}

/* =========================================== */
/* SEARCH BOX ADMIN                            */
/* =========================================== */

.search-box {
    display: flex;
    gap: var(--spacing-md);
    align-items: center;
    flex-wrap: wrap;
}

.search-input {
    padding: var(--spacing-sm) var(--spacing-lg);
    border: 1px solid var(--color-bg-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
}

.search-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

/* =========================================== */
/* FORM INPUT ADMIN                            */
/* =========================================== */

.form-input {
    width: 100%;
    padding: var(--spacing-md);
    border: 1px solid var(--color-bg-border);
    border-radius: var(--radius-md);
    font-size: var(--font-size-base);
    transition: all var(--transition-fast);
}

.form-input:focus {
    outline: none;
    border-color: var(--color-primary);
    box-shadow: 0 0 0 3px var(--color-primary-light);
}

.form-label {
    display: block;
    font-size: var(--font-size-sm);
    font-weight: var(--font-weight-medium);
    color: var(--color-text-secondary);
    margin-bottom: var(--spacing-sm);
}

/* =========================================== */
/* BUTTON DANGER                               */
/* =========================================== */

.btn-danger {
    background: linear-gradient(135deg, #ef4444 0%, #dc2626 100%);
    color: white;
}

.btn-danger:hover {
    box-shadow: 0 4px 20px rgba(239, 68, 68, 0.4);
}

/* =========================================== */
/* VERIFIED ICON                               */
/* =========================================== */

.verified-icon {
    font-size: var(--font-size-lg);
}

/* =========================================== */
/* TEXT UTILITIES                              */
/* =========================================== */

.text-truncate {
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* =========================================== */
/* ADMIN GRID LAYOUTS                          */
/* =========================================== */

.admin-grid-2-1 {
    display: grid;
    grid-template-columns: 2fr 1fr;
    gap: var(--spacing-xl);
}

.admin-grid-1-1 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--spacing-xl);
}

/* =========================================== */
/* ADMIN RESPONSIVE                            */
/* =========================================== */

@media (max-width: 768px) {
    .admin-grid-2-1,
    .admin-grid-1-1 {
        grid-template-columns: 1fr;
    }
    
    .table-responsive {
        font-size: 0.9rem;
    }
    
    .btn-filter {
        font-size: 0.85rem;
        padding: 0.4rem 0.8rem;
    }
    
    .status-box {
        min-width: 100%;
    }
}

/* =========================================== */
/* PRINT STYLES ADMIN                          */
/* =========================================== */

@media print {
    .admin-header,
    .filter-section,
    .btn,
    .table-actions,
    .sidebar {
        display: none !important;
    }
    
    .main-content {
        padding: 0 !important;
        max-width: 100% !important;
    }
    
    .commandes-table {
        box-shadow: none !important;
    }
}