/**
 * ============================================
 * ALNOTRA DESIGN SYSTEM - BRIDGE
 * Harmonisation Legacy → Design System
 * ============================================
 * 
 * Ce fichier sert de pont entre le CSS legacy (cloudx.css)
 * et le nouveau design system (design-tokens.css, components.css).
 * 
 * Il override les styles legacy pour utiliser les variables
 * et composants du design system.
 * 
 * À SUPPRIMER progressivement lors de la migration complète.
 */

/* ===== SMOOTH SCROLL ===== */

html {
    scroll-behavior: smooth;
}

@media (prefers-reduced-motion: reduce) {
    html {
        scroll-behavior: auto;
    }
}

/* ===== GLOBAL TYPOGRAPHY OVERRIDE ===== */

/* Remplacer Nunito Sans par Inter partout */
body,
body.al-theme,
body.primary-bg-color,
body.body-cloudx,
.font-sans,
input,
select,
textarea,
button {
    font-family: var(--font-sans) !important;
}

/* Code et monospace */
code,
pre,
kbd,
.font-mono {
    font-family: var(--font-mono) !important;
}

/* ===== COLOR HARMONIZATION ===== */

/* Action principale : NOIRE, comme .al-btn-primary (components.css), les
   boutons du tableau de bord (.dash-main .btn) et .al-notice__btn--primary.
   L'indigo reste l'accent (sélection, états actifs, liens) et ne signale plus
   une action : le tunnel de commande cessait de changer de couleur de bouton
   entre le configurateur, le panier, les services et les factures. */
.btn-primary,
.btn-primary:focus,
a.login-btn-cloudx,
button#btnCompleteOrder,
button#btnDomainContinue,
.btn-add-to-cart {
    background-color: var(--al-text) !important;
    border-color: var(--al-text) !important;
    color: var(--al-surface) !important;
}

.btn-primary:hover,
a.login-btn-cloudx:hover {
    background-color: var(--al-text-secondary) !important;
    border-color: var(--al-text-secondary) !important;
    color: var(--al-surface) !important;
}

.btn-primary:focus-visible {
    outline: none !important;
    box-shadow: 0 0 0 2px var(--al-surface), 0 0 0 4px var(--al-primary) !important;
}

/* Accent indigo conservé pour les états de sélection */
.bg-primary,
.form-check-input:checked {
    background-color: var(--al-primary) !important;
    border-color: var(--al-primary) !important;
}

.btn-outline-info,
.text-primary,
a:not(.btn):not(.dropdown-item):not(.nav-link):not(.list-group-item):hover {
    color: var(--al-primary) !important;
}

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

/* Focus states */
.form-control:focus,
.form-select:focus,
input:focus,
select:focus,
textarea:focus {
    border-color: var(--al-primary) !important;
    box-shadow: 0 0 0 3px var(--al-primary-subtle) !important;
}

/* ===== BACKGROUND HARMONIZATION ===== */

body.primary-bg-color,
section#main-body,
.body-background-cloudx {
    background-color: var(--al-bg) !important;
}

.card,
.modal-content,
.dropdown-menu {
    background-color: var(--al-surface) !important;
    border-color: var(--al-border) !important;
}

.card-header,
.modal-header,
.modal-footer,
.card-footer,
.table thead th,
.bg-purple,
.bg-purple-dark {
    background-color: var(--al-bg-subtle) !important;
}

/* ===== BORDER HARMONIZATION ===== */

.card,
.modal-content,
.dropdown-menu,
.form-control,
.form-select,
.input-group,
.table,
.list-group-item,
.border {
    border-color: var(--al-border) !important;
}

.table th,
.table td {
    border-color: var(--al-border) !important;
}

/* ===== TEXT COLOR HARMONIZATION ===== */

body,
.text-dark,
h1, h2, h3, h4, h5, h6,
.card-title,
.modal-title {
    color: var(--al-text) !important;
}

.text-muted,
.text-secondary,
.small,
small,
.card-sidebar .collapsable-card-body .card-body,
.master-breadcrumb .breadcrumb li.breadcrumb-item a {
    color: var(--al-text-secondary) !important;
}

/* ===== BADGE HARMONIZATION ===== */

.badge.bg-success,
.label.status-active,
.label.status-paid {
    background-color: var(--al-success) !important;
    color: white !important;
}

.badge.bg-warning,
.label.status-pending,
.label.status-pending_setup {
    background-color: var(--al-warning) !important;
    color: white !important;
}

.badge.bg-danger,
.label.status-failed,
.label.status-suspended,
.label.status-failed_setup,
.label.status-failed_renew,
.label.status-unpaid {
    background-color: var(--al-error) !important;
    color: white !important;
}

.badge.bg-secondary,
.label.status-canceled,
.label.status-cancelled {
    background-color: var(--al-text-muted) !important;
    color: white !important;
}

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

/* Status labels avec border-radius moderne */
.label,
.badge {
    border-radius: var(--radius-full) !important;
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-xs) !important;
    padding: 4px 10px !important;
}

/* ===== BUTTON HARMONIZATION ===== */

.btn {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-medium) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-all) !important;
}

/* Override le border-radius: 50px de cloudx.css */
.btn:not(.btn-icon):not(.rounded-circle) {
    border-radius: var(--radius-md) !important;
}

.btn-sm {
    font-size: var(--text-xs) !important;
    padding: 6px 12px !important;
}

.btn-lg {
    font-size: var(--text-base) !important;
    padding: 12px 24px !important;
}

/* Secondary button style */
.btn-default,
.btn-secondary,
.btn-outline-secondary {
    background-color: var(--al-surface) !important;
    border-color: var(--al-border) !important;
    color: var(--al-text) !important;
}

.btn-default:hover,
.btn-secondary:hover,
.btn-outline-secondary:hover {
    background-color: var(--al-surface-hover) !important;
    border-color: var(--al-text) !important;
}

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

.btn-success:hover {
    background-color: var(--al-success-dark) !important;
    border-color: var(--al-success-dark) !important;
}

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

.btn-danger:hover {
    background-color: var(--al-error-dark) !important;
    border-color: var(--al-error-dark) !important;
}

/* ===== CARD HARMONIZATION ===== */

.card {
    border-radius: var(--radius-xl) !important;
    box-shadow: var(--shadow-xs, 0 1px 2px rgba(0,0,0,0.05)) !important;
    overflow: hidden;
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.card:hover {
    transform: translateY(-2px);
    box-shadow: var(--shadow-md, 0 4px 6px rgba(0,0,0,0.1)) !important;
}

.card-header {
    border-bottom-color: var(--al-border) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.card-body {
    padding: var(--space-5) !important;
}

.card-footer {
    border-top-color: var(--al-border) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.card-title {
    font-weight: var(--font-semibold) !important;
    margin-bottom: var(--space-2) !important;
}

/* ===== TABLE HARMONIZATION ===== */

.table {
    font-size: var(--text-sm) !important;
}

.table thead th {
    font-weight: var(--font-semibold) !important;
    font-size: var(--text-xs) !important;
    text-transform: uppercase !important;
    letter-spacing: var(--tracking-wide) !important;
    color: var(--al-text-secondary) !important;
    padding: var(--space-3) var(--space-4) !important;
}

.table tbody td {
    padding: var(--space-3) var(--space-4) !important;
    color: var(--al-text) !important;
}

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

.table-striped tbody tr:nth-of-type(odd) {
    background-color: var(--al-bg-subtle) !important;
}

/* ===== FORM HARMONIZATION ===== */

.form-control,
.form-select {
    border-radius: var(--radius-md) !important;
    border-color: var(--al-border) !important;
    font-size: var(--text-sm) !important;
    padding: 10px 14px !important;
    transition: var(--transition-all) !important;
}

.form-control:hover,
.form-select:hover {
    border-color: var(--al-border-strong) !important;
}

.form-label {
    font-weight: var(--font-medium) !important;
    font-size: var(--text-sm) !important;
    color: var(--al-text) !important;
    margin-bottom: var(--space-2) !important;
}

/* ===== ALERT HARMONIZATION ===== */

.alert {
    border-radius: var(--radius-lg) !important;
    border-width: 1px !important;
    font-size: var(--text-sm) !important;
}

.alert-success {
    background-color: var(--al-success-light) !important;
    border-color: var(--al-success) !important;
    color: var(--al-success-dark) !important;
}

.alert-danger {
    background-color: var(--al-error-light) !important;
    border-color: var(--al-error) !important;
    color: var(--al-error-dark) !important;
}

.alert-warning {
    background-color: var(--al-warning-light) !important;
    border-color: var(--al-warning) !important;
    color: var(--al-warning-dark) !important;
}

.alert-info {
    background-color: var(--al-info-light) !important;
    border-color: var(--al-info) !important;
    color: var(--al-info-dark) !important;
}

/* ===== MODAL HARMONIZATION ===== */

.modal-content {
    border-radius: var(--radius-xl) !important;
    border: 1px solid var(--al-border) !important;
    box-shadow: var(--shadow-2xl) !important;
}

.modal-header {
    border-bottom-color: var(--al-border) !important;
    padding: var(--space-5) !important;
}

.modal-body {
    padding: var(--space-5) !important;
}

.modal-footer {
    border-top-color: var(--al-border) !important;
    padding: var(--space-4) var(--space-5) !important;
}

.modal-title {
    font-size: var(--text-lg) !important;
    font-weight: var(--font-semibold) !important;
}

/* ===== DROPDOWN HARMONIZATION ===== */

.dropdown-menu {
    border-radius: var(--radius-lg) !important;
    box-shadow: var(--shadow-lg) !important;
    padding: var(--space-2) !important;
    border: 1px solid var(--al-border) !important;
}

.dropdown-item {
    border-radius: var(--radius-md) !important;
    padding: var(--space-2) var(--space-3) !important;
    font-size: var(--text-sm) !important;
    transition: var(--transition-colors) !important;
}

.dropdown-item:hover,
.dropdown-item:focus {
    background-color: var(--al-bg-subtle) !important;
    color: var(--al-text) !important;
}

.dropdown-divider {
    border-color: var(--al-border) !important;
    margin: var(--space-2) 0 !important;
}

/* ===== PAGINATION HARMONIZATION ===== */

.pagination {
    gap: var(--space-1) !important;
}

.page-item .page-link {
    border-radius: var(--radius-md) !important;
    border-color: var(--al-border) !important;
    color: var(--al-text-secondary) !important;
    font-size: var(--text-sm) !important;
    padding: var(--space-2) var(--space-3) !important;
    transition: var(--transition-all) !important;
}

.page-item .page-link:hover {
    background-color: var(--al-bg-subtle) !important;
    color: var(--al-text) !important;
    border-color: var(--al-border-strong) !important;
}

.page-item.active .page-link {
    background-color: var(--al-text) !important;
    border-color: var(--al-text) !important;
    color: var(--al-surface) !important;
}

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

.sidebar .card-sidebar {
    border-radius: var(--radius-xl) !important;
    margin-bottom: var(--space-4) !important;
}

.sidebar .list-group-item {
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: var(--space-3) var(--space-4) !important;
    font-size: var(--text-sm) !important;
    color: var(--al-text-secondary) !important;
    transition: var(--transition-colors) !important;
}

.sidebar .list-group-item:hover {
    background-color: var(--al-bg-subtle) !important;
    color: var(--al-text) !important;
}

.sidebar .list-group-item.active {
    background-color: var(--al-primary-subtle) !important;
    color: var(--al-primary) !important;
}

/* ===== BREADCRUMB HARMONIZATION ===== */

.breadcrumb {
    font-size: var(--text-sm) !important;
    padding: var(--space-3) 0 !important;
}

.breadcrumb-item a {
    color: var(--al-text-secondary) !important;
    transition: var(--transition-colors) !important;
}

.breadcrumb-item a:hover {
    color: var(--al-text) !important;
}

.breadcrumb-item.active {
    color: var(--al-text) !important;
    font-weight: var(--font-medium) !important;
}

.breadcrumb-item + .breadcrumb-item::before {
    color: var(--al-text-muted) !important;
}

/* ===== DATATABLE HARMONIZATION ===== */

.dataTables_wrapper {
    font-size: var(--text-sm) !important;
}

.dataTables_wrapper .dataTables_length select,
.dataTables_wrapper .dataTables_filter input {
    border-radius: var(--radius-md) !important;
    border-color: var(--al-border) !important;
    padding: var(--space-2) var(--space-3) !important;
}

.dataTables_wrapper .dataTables_info {
    color: var(--al-text-secondary) !important;
    font-size: var(--text-sm) !important;
}

/* ===== NAVIGATION HEADER HARMONIZATION ===== */

header.header .main-navbar-wrapper .navbar-nav a {
    font-family: var(--font-sans) !important;
    font-weight: var(--font-medium) !important;
    color: var(--al-text) !important;
}

header.header .main-navbar-wrapper .navbar-nav a:hover {
    color: var(--al-primary) !important;
}

header.header .main-navbar-wrapper .navbar-nav a::before {
    background-color: var(--al-primary) !important;
}

/* ===== VERCEL CARD (from mod_order_manage) ===== */

/* Override les styles Vercel pour utiliser les tokens */
.vercel-card {
    background: var(--al-surface) !important;
    border-color: var(--al-border) !important;
    border-radius: var(--radius-lg) !important;
}

.vercel-card-header {
    background: var(--al-bg-subtle) !important;
    border-bottom-color: var(--al-border) !important;
}

.vercel-card-header:hover {
    background: var(--al-surface-hover) !important;
}

.vercel-card-footer {
    background: var(--al-bg-subtle) !important;
    border-top-color: var(--al-border) !important;
}

.vercel-btn.primary {
    background: var(--al-text) !important;
    border-color: var(--al-text) !important;
}

.vercel-btn.primary:hover {
    background: var(--al-text-secondary) !important;
    border-color: var(--al-text-secondary) !important;
}

/* ===== DARK THEME SPECIFIC OVERRIDES ===== */

[data-bs-theme="dark"] body,
[data-bs-theme="dark"] .primary-bg-color,
[data-bs-theme="dark"] section#main-body {
    background-color: var(--al-bg) !important;
    color: var(--al-text) !important;
}

[data-bs-theme="dark"] .card,
[data-bs-theme="dark"] .modal-content,
[data-bs-theme="dark"] .dropdown-menu {
    background-color: var(--al-surface) !important;
    border-color: var(--al-border) !important;
}

[data-bs-theme="dark"] .card-header,
[data-bs-theme="dark"] .modal-header,
[data-bs-theme="dark"] .modal-footer,
[data-bs-theme="dark"] .card-footer,
[data-bs-theme="dark"] .table thead th {
    background-color: var(--al-bg-subtle) !important;
    border-color: var(--al-border) !important;
}

[data-bs-theme="dark"] .form-control,
[data-bs-theme="dark"] .form-select {
    background-color: var(--al-surface) !important;
    border-color: var(--al-border) !important;
    color: var(--al-text) !important;
}

[data-bs-theme="dark"] .table tbody tr:hover {
    background-color: var(--al-surface-hover) !important;
}

/* ===== UTILITY OVERRIDES ===== */

/* Shadow removal for cleaner look */
.shadow-sm,
.shadow,
.shadow-lg {
    box-shadow: var(--shadow-md) !important;
}

/* Border radius consistency */
.rounded,
.rounded-3 {
    border-radius: var(--radius-lg) !important;
}

.rounded-pill {
    border-radius: var(--radius-full) !important;
}

/* Gap utilities */
.gap-1 { gap: var(--space-1) !important; }
.gap-2 { gap: var(--space-2) !important; }
.gap-3 { gap: var(--space-3) !important; }
.gap-4 { gap: var(--space-4) !important; }

/* ===== ENHANCED UI STATES ===== */

/* Loading overlay */
.al-loading-overlay {
    position: absolute;
    inset: 0;
    background: rgba(255, 255, 255, 0.8);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 100;
}

[data-bs-theme="dark"] .al-loading-overlay {
    background: rgba(0, 0, 0, 0.6);
}

/* Error state for cards */
.al-card-error {
    border-color: var(--al-error) !important;
}

.al-card-error .al-card-header {
    background-color: var(--al-error-light) !important;
    border-bottom-color: var(--al-error) !important;
}

/* Success state for cards */
.al-card-success {
    border-color: var(--al-success) !important;
}

.al-card-success .al-card-header {
    background-color: var(--al-success-light) !important;
    border-bottom-color: var(--al-success) !important;
}

/* ===== FOCUS VISIBLE FOR ACCESSIBILITY ===== */

*:focus-visible {
    outline: 2px solid var(--al-primary);
    outline-offset: 2px;
}

button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible {
    outline: 2px solid var(--al-primary);
    outline-offset: 2px;
}

/* Skip link for accessibility */
.al-skip-link {
    position: absolute;
    top: -100px;
    left: 50%;
    transform: translateX(-50%);
    padding: var(--space-3) var(--space-5);
    background: var(--al-text);
    color: var(--al-surface);
    border-radius: var(--radius-md);
    z-index: 9999;
    transition: top 0.3s ease;
}

.al-skip-link:focus {
    top: var(--space-3);
}

/* ===== TOAST/NOTIFICATION IMPROVEMENTS ===== */

.al-toast-container {
    position: fixed;
    bottom: var(--space-6);
    right: var(--space-6);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    z-index: 9999;
    pointer-events: none;
}

.al-toast-container .al-alert {
    pointer-events: auto;
    box-shadow: var(--shadow-lg);
    animation: al-slide-up 0.3s ease-out;
}

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

@media (max-width: 768px) {
    /* Stack buttons on mobile */
    .al-page-header {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .al-page-header-actions {
        width: 100%;
    }
    
    .al-page-header-actions .al-btn {
        width: 100%;
        justify-content: center;
    }
    
    /* Full-width cards on mobile */
    .al-kpi-grid {
        grid-template-columns: 1fr !important;
    }
    
    /* Stats bar responsive */
    .al-stats-bar {
        flex-direction: column !important;
        align-items: stretch !important;
    }
    
    .al-stat-divider {
        width: 100% !important;
        height: 1px !important;
    }
    
    /* Toast on mobile */
    .al-toast-container {
        left: var(--space-4);
        right: var(--space-4);
        bottom: var(--space-4);
    }
}

/* ===== PRINT STYLES ===== */

@media print {
    .al-btn,
    .al-sidebar,
    .al-filter-sidebar,
    .al-page-header-actions,
    .dataTables_wrapper .dataTables_length,
    .dataTables_wrapper .dataTables_filter,
    .dataTables_wrapper .dataTables_paginate {
        display: none !important;
    }
    
    .al-card {
        border: 1px solid #000 !important;
        box-shadow: none !important;
    }
    
    body {
        background: white !important;
        color: black !important;
    }
}

/* ===== HIGH CONTRAST MODE SUPPORT ===== */

@media (prefers-contrast: high) {
    .al-badge {
        border: 2px solid currentColor !important;
    }
    
    .al-btn {
        border-width: 2px !important;
    }
    
    .al-card {
        border-width: 2px !important;
    }
}

/* ===== REDUCED MOTION SUPPORT ===== */

@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
    
    .al-badge-dot-pulse {
        animation: none !important;
    }
}

/* ===== BREADCRUMB / BANNER MODERNIZATION ===== */

.master-breadcrumb {
    background: var(--al-surface) !important;
    border-bottom: 1px solid var(--al-border) !important;
    padding: var(--space-3) 0 !important;
}

.master-breadcrumb .breadcrumb {
    margin: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    font-size: var(--text-sm) !important;
}

.master-breadcrumb .breadcrumb-item {
    color: var(--al-text-secondary) !important;
}

.master-breadcrumb .breadcrumb-item a {
    color: var(--al-text-secondary) !important;
    text-decoration: none !important;
    transition: var(--transition-colors) !important;
}

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

.master-breadcrumb .breadcrumb-item.active {
    color: var(--al-text) !important;
    font-weight: var(--font-medium) !important;
}

.master-breadcrumb .breadcrumb-item + .breadcrumb-item::before {
    color: var(--al-text-muted) !important;
    content: "/" !important;
    padding: 0 var(--space-2) !important;
}

/* ===== DASHBOARD SECTION HEADER FIX ===== */

.al-section-header {
    display: flex !important;
    align-items: center !important;
    justify-content: space-between !important;
    margin-bottom: var(--space-4) !important;
    gap: var(--space-4) !important;
}

.al-section-header .al-section-title {
    margin: 0 !important;
}

.al-section-header .al-section-link,
.al-section-header .al-btn {
    flex-shrink: 0 !important;
    white-space: nowrap !important;
}

/* ===== DATATABLE "SHOW" SELECTOR FIX ===== */

.dataTables_wrapper .dataTables_length {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    font-size: var(--text-sm) !important;
    color: var(--al-text-secondary) !important;
}

.dataTables_wrapper .dataTables_length label {
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
    margin: 0 !important;
    font-weight: var(--font-normal) !important;
}

.dataTables_wrapper .dataTables_length select {
    height: 36px !important;
    min-width: 70px !important;
    padding: 0 var(--space-8) 0 var(--space-3) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-md) !important;
    background-color: var(--al-surface) !important;
    font-size: var(--text-sm) !important;
    color: var(--al-text) !important;
    cursor: pointer !important;
    appearance: none !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23666666' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: right 8px center !important;
}

.dataTables_wrapper .dataTables_length select:focus {
    outline: none !important;
    border-color: var(--al-primary) !important;
    box-shadow: 0 0 0 3px var(--al-primary-subtle) !important;
}

/* ===== SERVICE MANAGE PAGE - CARD ALIGNMENT FIX ===== */

.vercel-card {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-xl) !important;
    margin-bottom: var(--space-5) !important;
    overflow: visible !important;
}

.vercel-card-header {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    padding: var(--space-4) var(--space-5) !important;
    background: var(--al-bg-subtle) !important;
    border-bottom: 1px solid var(--al-border) !important;
    cursor: pointer !important;
    transition: var(--transition-colors) !important;
    border-radius: var(--radius-xl) var(--radius-xl) 0 0 !important;
}

.vercel-card-header.collapsed {
    border-radius: var(--radius-xl) !important;
    border-bottom: none !important;
}

.vercel-card-header:hover {
    background: var(--al-surface-hover) !important;
}

.vercel-card-header .header-info h5 {
    font-size: var(--text-base) !important;
    font-weight: var(--font-semibold) !important;
    color: var(--al-text) !important;
    margin: 0 0 var(--space-1) 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: var(--space-2) !important;
}

.vercel-card-header .header-subtitle {
    font-size: var(--text-sm) !important;
    color: var(--al-text-secondary) !important;
    margin: 0 !important;
}

.vercel-card-header .chevron {
    width: 32px !important;
    height: 32px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    border-radius: var(--radius-md) !important;
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    color: var(--al-text-secondary) !important;
    transition: var(--transition-all) !important;
    flex-shrink: 0 !important;
}

.vercel-card-header .chevron i {
    transition: transform 0.3s ease !important;
}

.vercel-card-header.collapsed .chevron i {
    transform: rotate(-90deg) !important;
}

/* Fix for collapsed body animation */
.vercel-card-body {
    padding: var(--space-5) !important;
    transition: max-height 0.4s ease-out, opacity 0.3s ease, padding 0.3s ease !important;
    overflow: hidden !important;
    max-height: 2000px !important;
    opacity: 1 !important;
}

.vercel-card-body.collapsed {
    max-height: 0 !important;
    padding-top: 0 !important;
    padding-bottom: 0 !important;
    opacity: 0 !important;
    border-top: none !important;
}

.vercel-card-footer {
    padding: var(--space-4) var(--space-5) !important;
    background: var(--al-bg-subtle) !important;
    border-top: 1px solid var(--al-border) !important;
    display: flex !important;
    gap: var(--space-2) !important;
    flex-wrap: wrap !important;
    border-radius: 0 0 var(--radius-xl) var(--radius-xl) !important;
}

/* ===== COOKIE CONSENT THEME ADAPTATION ===== */

.alnotra-cookie-container {
    background: var(--al-surface) !important;
    color: var(--al-text) !important;
    border: 1px solid var(--al-border) !important;
    box-shadow: var(--shadow-2xl) !important;
}

.alnotra-cookie-title {
    color: var(--al-text) !important;
}

.alnotra-cookie-message {
    color: var(--al-text-secondary) !important;
}

.alnotra-cookie-message a {
    color: var(--al-primary) !important;
}

.alnotra-cookie-categories {
    background: var(--al-bg-subtle) !important;
    border: 1px solid var(--al-border) !important;
}

.alnotra-cookie-category {
    border-bottom-color: var(--al-border) !important;
}

.alnotra-cookie-category-name {
    color: var(--al-text) !important;
}

.alnotra-cookie-category-desc {
    color: var(--al-text-muted) !important;
}

.alnotra-cookie-toggle-slider {
    background-color: var(--al-border-strong) !important;
}

.alnotra-cookie-toggle input:checked + .alnotra-cookie-toggle-slider {
    background: var(--al-success) !important;
}

.alnotra-cookie-btn-accept {
    background: var(--al-success) !important;
    color: white !important;
}

.alnotra-cookie-btn-accept:hover {
    background: var(--al-success-dark) !important;
    box-shadow: var(--shadow-success) !important;
}

.alnotra-cookie-btn-decline {
    background: var(--al-bg-subtle) !important;
    color: var(--al-text) !important;
    border: 1px solid var(--al-border) !important;
}

.alnotra-cookie-btn-decline:hover {
    background: var(--al-surface-hover) !important;
    border-color: var(--al-border-strong) !important;
}

.alnotra-cookie-btn-settings {
    background: transparent !important;
    color: var(--al-primary) !important;
    border: 1px solid var(--al-primary) !important;
}

.alnotra-cookie-btn-settings:hover {
    background: var(--al-primary-subtle) !important;
}

.alnotra-cookie-btn-save {
    background: var(--al-primary) !important;
    color: white !important;
}

.alnotra-cookie-btn-save:hover {
    background: var(--al-primary-dark) !important;
    box-shadow: var(--shadow-primary) !important;
}

.alnotra-cookie-icon {
    background: var(--al-primary) !important;
}

/* ===== LOGIN PAGE MODERNIZATION ===== */

.login-wrapper {
    background: var(--al-bg) !important;
    min-height: 100vh !important;
}

.login-frm {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-xl) !important;
    padding: var(--space-8) !important;
    box-shadow: var(--shadow-lg) !important;
}

.login-frm h1 {
    font-size: var(--text-2xl) !important;
    font-weight: var(--font-bold) !important;
    color: var(--al-text) !important;
    margin-bottom: var(--space-2) !important;
}

.login-frm h6 {
    font-size: var(--text-sm) !important;
    color: var(--al-text-secondary) !important;
    font-weight: var(--font-normal) !important;
    margin-bottom: var(--space-6) !important;
}

.login-frm .form-control {
    height: 48px !important;
    padding: var(--space-3) var(--space-4) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-md) !important;
    font-size: var(--text-sm) !important;
    background: var(--al-surface) !important;
    color: var(--al-text) !important;
    transition: var(--transition-all) !important;
}

.login-frm .form-control:focus {
    border-color: var(--al-primary) !important;
    box-shadow: 0 0 0 3px var(--al-primary-subtle) !important;
    outline: none !important;
}

.login-frm .form-control::placeholder {
    color: var(--al-text-muted) !important;
}

.login-frm .btn-main,
.login-frm .btn-primary {
    height: 48px !important;
    background: var(--al-primary) !important;
    border-color: var(--al-primary) !important;
    font-weight: var(--font-semibold) !important;
    border-radius: var(--radius-md) !important;
    transition: var(--transition-all) !important;
}

.login-frm .btn-main:hover,
.login-frm .btn-primary:hover {
    background: var(--al-primary-dark) !important;
    border-color: var(--al-primary-dark) !important;
    box-shadow: var(--shadow-primary) !important;
}

.login-frm .fgtlinks {
    color: var(--al-primary) !important;
    font-size: var(--text-sm) !important;
}

.login-frm .remcheck label {
    color: var(--al-text-secondary) !important;
    font-size: var(--text-sm) !important;
}

.login-frm p {
    color: var(--al-text-secondary) !important;
    font-size: var(--text-sm) !important;
}

.login-frm p a {
    color: var(--al-primary) !important;
    font-weight: var(--font-medium) !important;
}

.divider-text {
    color: var(--al-text-muted) !important;
    font-size: var(--text-sm) !important;
}

/* ===== IDENTITY NOTIFICATION THEME ===== */

.identity-alert {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    box-shadow: var(--shadow-md) !important;
}

.identity-alert-icon {
    background: linear-gradient(135deg, var(--al-primary) 0%, var(--al-primary-dark) 100%) !important;
}

.identity-alert-title {
    color: var(--al-text) !important;
}

.identity-alert-subtitle {
    color: var(--al-text-secondary) !important;
}

.identity-alert-action {
    background: var(--al-primary) !important;
    color: white !important;
}

.identity-alert-action:hover {
    background: var(--al-primary-dark) !important;
    box-shadow: var(--shadow-primary) !important;
    color: white !important;
}

.identity-alert-action.secondary {
    background: var(--al-bg-subtle) !important;
    border: 1px solid var(--al-border) !important;
    color: var(--al-text-secondary) !important;
}

.identity-alert-action.secondary:hover {
    background: var(--al-surface-hover) !important;
    color: var(--al-text) !important;
}

.identity-alert-close {
    color: var(--al-text-muted) !important;
}

.identity-alert-close:hover {
    background: var(--al-bg-subtle) !important;
    color: var(--al-text) !important;
}

/* ===== 2FA LAYOUT MODERNIZATION ===== */

body[class*="layout_2fa"] {
    background: linear-gradient(135deg, var(--al-primary) 0%, var(--al-primary-dark) 100%) !important;
}

/* ===== ORDER PAGE SIDEBAR FIX ===== */
/* Correction des blocs Categories et Actions - fond gris foncé vers blanc */

#order-standard_cart .cart-sidebar {
    background: var(--al-surface) !important;
    border-radius: var(--radius-lg) !important;
    border: 1px solid var(--al-border) !important;
    overflow: hidden;
    box-shadow: var(--shadow-sm) !important;
}

#order-standard_cart .cart-sidebar .panel.card.card-sidebar.panel-sidebar {
    background: transparent !important;
    border: none !important;
    border-top: 1px solid var(--al-border) !important;
    padding: 16px 0 !important;
    margin: 0 !important;
}

#order-standard_cart .cart-sidebar .panel.card.card-sidebar.panel-sidebar:first-child {
    border-top: none !important;
}

#order-standard_cart .cart-sidebar .panel-heading.card-header {
    background: transparent !important;
    padding: 0 16px 8px !important;
    border: none !important;
}

#order-standard_cart .cart-sidebar .panel-heading.card-header h3.panel-title {
    font-size: 13px !important;
    font-weight: 600 !important;
    color: var(--al-text) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

#order-standard_cart .cart-sidebar .panel-heading.card-header h3.panel-title i {
    color: var(--al-text-muted) !important;
    font-size: 12px !important;
}

#order-standard_cart .cart-sidebar .list-group.collapsable-card-body {
    padding: 0 12px !important;
    background: transparent !important;
}

#order-standard_cart .cart-sidebar .list-group-item {
    background: transparent !important;
    border: none !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 12px !important;
    margin-bottom: 2px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    color: var(--al-text-secondary) !important;
    transition: var(--transition-colors) !important;
}

#order-standard_cart .cart-sidebar .list-group-item:hover {
    background: var(--al-bg-subtle) !important;
    color: var(--al-text) !important;
}

#order-standard_cart .cart-sidebar .list-group-item.active {
    background: var(--al-primary-subtle) !important;
    color: var(--al-primary) !important;
    font-weight: 600 !important;
}

#order-standard_cart .cart-sidebar .list-group-item i {
    width: 20px !important;
    text-align: center !important;
    margin-right: 8px !important;
}

/* Sidebar responsive mobile */
#order-standard_cart .sidebar-collapsed .panel.card.panel-default {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-lg) !important;
    margin-bottom: 16px !important;
}

#order-standard_cart .sidebar-collapsed .panel-heading.card-header {
    background: var(--al-bg-subtle) !important;
    border-bottom: 1px solid var(--al-border) !important;
    padding: 12px 16px !important;
}

#order-standard_cart .sidebar-collapsed .panel-heading.card-header h3.panel-title {
    font-size: 14px !important;
    font-weight: 600 !important;
    color: var(--al-text) !important;
}

#order-standard_cart .sidebar-collapsed .panel-body.card-body {
    padding: 16px !important;
}

#order-standard_cart .sidebar-collapsed select.form-control {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-md) !important;
    padding: 10px 14px !important;
    font-size: 14px !important;
    color: var(--al-text) !important;
}

/* Header de la page order */
#order-standard_cart .header-lined {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-lg) !important;
    padding: 24px !important;
    margin-bottom: 24px !important;
}

#order-standard_cart .header-lined h1 {
    font-size: 24px !important;
    font-weight: 700 !important;
    color: var(--al-text) !important;
    margin: 0 !important;
}

/* Products cards style */
#order-standard_cart .products .product {
    background: var(--al-surface) !important;
    border: 1px solid var(--al-border) !important;
    border-radius: var(--radius-lg) !important;
    transition: var(--transition-shadow), border-color 0.2s ease !important;
}

#order-standard_cart .products .product:hover {
    border-color: var(--al-primary) !important;
    box-shadow: var(--shadow-lg) !important;
}

/* ===== SKIP LINK (accessibilité clavier) =====
   Truly invisible until focused — uses the .sr-only trick with
   dimensions clipped to 1 px so the element takes zero layout space
   (previous rule put it at left:-9999px but kept padding/height so a
   47 px indigo strip was still stealing top-of-page space). */
.al-skip-link {
    position: absolute !important;
    width: 1px !important;
    height: 1px !important;
    padding: 0 !important;
    margin: -1px !important;
    overflow: hidden !important;
    clip: rect(0, 0, 0, 0) !important;
    white-space: nowrap !important;
    border: 0 !important;
    top: 0 !important;
    left: 0 !important;
}

.al-skip-link:focus,
.al-skip-link:focus-visible {
    position: fixed !important;
    width: auto !important;
    height: auto !important;
    padding: var(--space-3) var(--space-4) !important;
    margin: 0 !important;
    overflow: visible !important;
    clip: auto !important;
    white-space: normal !important;
    top: var(--space-4) !important;
    left: var(--space-4) !important;
    z-index: 100000;
    background: var(--al-primary);
    color: #fff !important;
    font-weight: var(--font-semibold);
    text-decoration: none;
    border-radius: var(--radius-md);
    box-shadow: 0 0 0 2px var(--al-surface), 0 0 0 4px var(--al-primary);
    outline: none;
}

/* Legacy rule kept for old pages that still use the Cloudx footer markup. */
footer .foot-links-list {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 6px;
}
footer .foot-links-list li { margin: 0; }
footer .foot-links-list a {
    color: var(--al-text-secondary);
    font-size: 14px;
    text-decoration: none;
    transition: color .15s;
}
footer .foot-links-list a:hover { color: var(--al-primary); }

/* ===== Alnotra footer — layout_default + client-area ===== */
.al-footer {
    background: #fafafa;
    border-top: 1px solid var(--al-border);
    color: var(--al-text-secondary);
    margin-top: 48px;
}
[data-bs-theme="dark"] .al-footer {
    background: #0f1117;
    border-top-color: #1c1f29;
}
.al-footer-inner {
    max-width: 1200px;
    margin: 0 auto;
    padding: 56px 32px 40px;
    display: grid;
    grid-template-columns: 2fr 1fr 1fr 1.2fr;
    gap: 48px;
}
@media (max-width: 900px) {
    .al-footer-inner { grid-template-columns: 1fr 1fr; gap: 32px; padding: 40px 24px; }
}
@media (max-width: 560px) {
    .al-footer-inner { grid-template-columns: 1fr; gap: 28px; }
}

.al-footer-brand .alnotra-logo { margin-bottom: 16px; }
.al-footer-brand p {
    color: var(--al-text-secondary);
    font-size: 13px;
    line-height: 1.6;
    margin: 0;
    max-width: 280px;
}

.al-footer-col h4 {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    font-weight: 500;
    color: var(--al-text-muted);
    text-transform: uppercase;
    letter-spacing: .08em;
    margin: 0 0 16px;
}
.al-footer-col ul {
    list-style: none; padding: 0; margin: 0;
    display: flex; flex-direction: column; gap: 8px;
}
.al-footer-col li { margin: 0; }
.al-footer-col a {
    display: inline-flex;
    font-size: 14px;
    color: var(--al-text-secondary);
    text-decoration: none;
    transition: color .15s;
}
.al-footer-col a:hover { color: var(--al-primary); }

.al-footer-contact-item {
    display: flex; flex-direction: column; gap: 2px;
    font-size: 14px;
    color: var(--al-text);
}
.al-footer-contact-item .lbl {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    text-transform: uppercase;
    letter-spacing: .06em;
    /* --al-text-muted en 10,5 px échouait le contraste WCAG AA (axe) */
    color: var(--al-text-secondary, #5f6672);
    font-size: 11px;
    font-weight: 500;
}
.al-footer-contact-item a,
.al-footer-contact-item span:not(.lbl) {
    color: var(--al-text);
    text-decoration: none;
    font-weight: 500;
    transition: color .15s;
}
.al-footer-contact-item a:hover { color: var(--al-primary); }

.al-footer-bottom {
    border-top: 1px solid var(--al-border);
}
[data-bs-theme="dark"] .al-footer-bottom { border-top-color: #1c1f29; }
.al-footer-bottom-inner {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 20px 32px;
    font-size: 12px;
    color: var(--al-text-muted);
    gap: 16px;
    flex-wrap: wrap;
}
.al-footer-legal {
    display: flex;
    gap: 24px;
    list-style: none;
    padding: 0;
    margin: 0;
    align-items: center;
    flex-wrap: wrap;
}
.al-footer-legal li { margin: 0; }
.al-footer-legal a {
    color: var(--al-text-muted);
    text-decoration: none;
    font-size: 12px;
    transition: color .15s;
}
.al-footer-legal a:hover { color: var(--al-primary); }
.al-footer-flag {
    font-family: 'JetBrains Mono', ui-monospace, monospace;
    font-size: 11px;
    color: var(--al-text-muted);
}

/* ===== Responsive polish for client-area surfaces ===== */
@media (max-width: 560px) {
    /* Invoice/table headers wrap nicely, price columns don't overflow */
    .al-card .al-page-header { flex-direction: column; align-items: flex-start; gap: 12px; }
    .al-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .al-table-responsive table { min-width: 560px; }
    /* Filter sidebar becomes a horizontal chip row */
    .al-filter-sidebar { position: static; margin-bottom: 16px; }
    .al-filter-list { flex-direction: row; flex-wrap: wrap; gap: 6px; }
    .al-filter-item { padding: 6px 10px !important; gap: 6px; }
    .al-filter-item .al-filter-icon { width: 24px; height: 24px; font-size: 11px; }
    .al-filter-item .al-filter-label { font-size: 12px; }
    /* Footer bottom bar stacks */
    .al-footer-bottom-inner {
        flex-direction: column;
        align-items: flex-start;
        gap: 10px;
    }
    .al-footer-legal { flex-wrap: wrap; gap: 12px 16px; }
}

/* Tables on tablets: enable horizontal scroll inside card */
@media (max-width: 800px) {
    .al-table-responsive { overflow-x: auto; -webkit-overflow-scrolling: touch; }
    .al-table-responsive table { min-width: 640px; }
}

/* Bascule clair / sombre (header) */
.al-theme-toggle {
    color: var(--al-text-secondary) !important;
    padding: 0.35rem 0.6rem !important;
    line-height: 1.2 !important;
}

.al-theme-toggle:hover,
.al-theme-toggle:focus {
    color: var(--al-primary) !important;
}

[data-bs-theme="dark"] .al-theme-toggle {
    color: rgba(255, 255, 255, 0.88) !important;
}

[data-bs-theme="dark"] .al-theme-toggle:hover,
[data-bs-theme="dark"] .al-theme-toggle:focus {
    color: var(--al-accent) !important;
}


/* --- Empilement : en-tête du SITE au-dessus des en-têtes de CONTENU -------
 *
 * `cloudx.css` stylise le sélecteur d'élément NU `header` avec
 * `position: relative` + `z-index: 120`. La règle s'applique donc à TOUT
 * `<header>`, y compris ceux du contenu des pages — il y en a cinq dans le
 * thème (livraison, gestion VPS, hébergements, actualités).
 *
 * À z-index ÉGAL, c'est l'élément le plus bas dans le DOM qui l'emporte :
 * l'en-tête de contenu recouvrait donc les menus déroulants de la
 * navigation. Vécu sur /alnotra/livraison, où « Commander de nouveaux
 * services » disparaissait derrière le bandeau « Livraison ».
 *
 * On remonte l'en-tête du site plutôt que de neutraliser chaque en-tête de
 * contenu un par un : la correction couvre aussi les pages futures. 200
 * reste sous les modales Bootstrap (1050) et le bandeau cookies (99998),
 * qui doivent continuer de passer devant la navigation.
 */
header.top-header-active-theme,
header.side-header-menu-active-theme {
    z-index: 200;
}

/* avatar() (FOSSBillingExtension) renvoie un <span class="db-avatar"> dont la
   taille est posée en style inline (width/height). Un <span> est display:inline
   par défaut, qui IGNORE width/height : l'avatar s'affichait minuscule (~10px).
   inline-block les fait respecter. Vaut pour le profil, le menu mobile et les
   fils de ticket. Les classes Bootstrap passées (rounded-circle, img-thumbnail)
   restent prioritaires pour la forme. */
.db-avatar {
    display: inline-block;
    vertical-align: middle;
    border-radius: 8px;
    flex-shrink: 0;
}

/* --------------------------------------------------------------------------
   Bootstrap 5 .btn-close sur runtime Bootstrap 4 (cf. js/bs4-compat.js)
   BS4 ne style pas .btn-close (BS5 dessine la croix via un SVG de fond non
   chargé ici) → bouton vide/invisible. On redessine une croix « × » lisible.
   Fichier chargé uniquement dans les layouts BS4 → aucun risque de double
   croix sur les pages layout_standalone (vrai Bootstrap 5, CDN).
   -------------------------------------------------------------------------- */
.btn-close {
  -webkit-appearance: none;
          appearance: none;
  box-sizing: content-box;
  width: 1em;
  height: 1em;
  padding: .25rem .35rem;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: .55;
  cursor: pointer;
  line-height: 1;
}
.btn-close::before {
  content: "\00D7";
  display: block;
  font-size: 1.35rem;
  line-height: .85;
  text-align: center;
}
.btn-close:hover { opacity: .95; }
.btn-close:focus-visible { outline: 2px solid currentColor; outline-offset: 2px; opacity: 1; }
.btn-close.btn-close-white { color: #fff; opacity: .8; }

/* ===== LARGEUR DE PAGE SUR GRAND ECRAN =====
   Le conteneur legacy est fige par palier (cloudx_responsive.css : 1360px entre
   1401 et 1600px, ~1440px au-dela) et centre. Sur un ecran de 1920px, l'en-tete,
   le fil d'Ariane, les pages classiques et la console VPS flottaient dans ~240px
   de vide de chaque cote alors que le tableau de bord est en pleine largeur :
   logo de l'en-tete decale par rapport a la barre laterale, contenu qui parait
   petit (constate en session reelle, 1920x1200). A partir de 1201px, l'en-tete,
   le fil d'Ariane et le corps des pages prennent toute la largeur avec la meme
   marge de 28px que la colonne principale du tableau de bord. Landings et
   pages d'authentification gardent leur mise en page propre. */
@media (min-width: 1201px) {
  body:not(.al-landing):not(.al-auth) header > .container,
  body:not(.al-landing):not(.al-auth) .master-breadcrumb > .container,
  body:not(.al-landing):not(.al-auth) section#main-body > .container {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: 28px !important;
    padding-right: 28px !important;
    margin-left: auto;
    margin-right: auto;
  }
}