/* ==============================================================================
   TOKENS.CSS — Source unique de vérité — TikeWA
   ==============================================================================
   Ce fichier centralise TOUTES les variables de design (couleurs, typographie,
   espacements, rayons, ombres) utilisées sur l'ensemble du site.

   Règle : ce fichier doit être chargé EN PREMIER, avant tout autre CSS
   (style.css, eventia-brand.css, dashboard-pro.css, responsive-pro.css,
   seating-booking.css, accueil-client.css). Les autres fichiers ne doivent
   plus redéfinir --primary, --accent, --radius-*, --shadow-* ni les couleurs
   de marque : ils doivent les consommer via var(--...) ou définir uniquement
   des alias namespacés qui pointent vers ces variables (ex: --dash-primary:
   var(--accent)).

   Historique : avant ce fichier, chaque feuille de style (style.css,
   responsive-pro.css, dashboard-pro.css, eventia-brand.css) définissait son
   propre bloc :root avec des valeurs parfois contradictoires pour le même nom
   de variable (ex: --primary valait l'orange de marque dans style.css mais
   #121212 dans responsive-pro.css, qui se chargeait en dernier et l'emportait
   silencieusement). Ce fichier met fin à ces conflits.
   ============================================================================== */

:root,
html,
body,
*,
*::before,
*::after {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
}

:root {

    /* --------------------------------------------------------------------
       PALETTE DE MARQUE TIKEWA
       -------------------------------------------------------------------- */
    --tikeli-orange: #FF4A0D;
    --tikeli-orange-hover: #E03E08;
    --tikeli-orange-soft: #FFF2ED;
    --tikeli-orange-glow: rgba(255, 74, 13, 0.25);
    --tikeli-black: #000000;
    --tikeli-white: #FFFFFF;
    --tikeli-gray: #F5F5F5;
    --tikeli-dark-surface: #121212;
    --tikeli-gray-border: #E5E5E5;

    /* --------------------------------------------------------------------
       FOND & ENCRE
       -------------------------------------------------------------------- */
    --paper: var(--tikeli-white);
    --canvas: #FAFAFA;
    --ink: #000000;
    --navy: #000000;
    --navy-surface: #121212;
    --navy-light: #1E1E1E;
    --navy-dark: var(--tikeli-black);
    --muted: #737373;
    --line: var(--tikeli-gray-border);
    --line-light: #F5F5F5;
    --line-dark: #D4D4D4;
    --muted-light: #A3A3A3;
    --ink-muted: #525252;
    --ink-soft: #404040;

    /* --------------------------------------------------------------------
       ACCENT & IDENTITÉ (couleur unique de marque — utiliser avec parcimonie)
       -------------------------------------------------------------------- */
    --primary: var(--tikeli-orange);
    --primary-light: #FF6B38;
    --primary-dark: var(--tikeli-orange-hover);
    --primary-soft: var(--tikeli-orange-soft);
    --primary-glow: var(--tikeli-orange-glow);
    --accent: var(--tikeli-orange);
    --accent-dark: var(--tikeli-orange-hover);
    --accent-light: #FF6B38;
    --accent-soft: var(--tikeli-orange-soft);
    --accent-glow: var(--tikeli-orange-glow);

    /* --------------------------------------------------------------------
       ÉTATS FONCTIONNELS
       -------------------------------------------------------------------- */
    --success: #10b981;
    --success-dark: #059669;
    --success-soft: #ecfdf5;
    --warning: #f59e0b;
    --warning-soft: #fef3c7;
    --danger: #ef4444;
    --danger-soft: #fef2f2;
    --info: #0284c7;
    --info-soft: #e0f2fe;
    --success-text: #065f46;
    --success-border: #a7f3d0;
    --warning-dark: #d97706;
    --warning-text: #92400e;
    --warning-border: #fde68a;
    --danger-dark: #b91c1c;
    --danger-text: #991b1b;
    --danger-border: #fecaca;
    --info-dark: #0369a1;
    --info-border: #bae6fd;

    /* --------------------------------------------------------------------
       TOKENS KPI DASHBOARD HARMONISÉS (Promoteur & Admin)
       -------------------------------------------------------------------- */
    --kpi-neutral-lbl: var(--muted);
    --kpi-neutral-val: var(--navy-surface);

    --kpi-green-lbl: var(--success-dark);
    --kpi-green-val: var(--success-dark);
    --kpi-green-bg: #ecfdf5;
    --kpi-green-border: #a7f3d0;

    --kpi-blue-lbl: var(--info);
    --kpi-blue-val: var(--info);
    --kpi-blue-bg: #e0f2fe;
    --kpi-blue-border: #bae6fd;

    --kpi-orange-lbl: var(--tikeli-orange);
    --kpi-orange-val: var(--tikeli-orange);
    --kpi-orange-bg: var(--tikeli-orange-soft);
    --kpi-orange-border: rgba(255, 74, 13, 0.22);

    /* --------------------------------------------------------------------
       TYPOGRAPHIE UNIFIÉE (Inter comme police principale unique + Arial, sans-serif)
       -------------------------------------------------------------------- */
    --font-family: 'Inter', Arial, sans-serif;
    --font-primary: var(--font-family);
    --font-heading: var(--font-family);
    --font-body: var(--font-family);
    --font-mono: var(--font-family);
    --font-sans: var(--font-family);
    --font-display: var(--font-family);
    --vote-font-sans: var(--font-family);
    --vote-font-display: var(--font-family);
    --vote-font-mono: var(--font-family);
    --sb-font: var(--font-family);
    --sb-font-heading: var(--font-family);
    --sb-font-mono: var(--font-family);
    --ev-font-mono: var(--font-family);
    --dash-font: var(--font-family);
    --pos-font: var(--font-family);

    /* --------------------------------------------------------------------
       GRILLE & RYTHME VERTICAL
       -------------------------------------------------------------------- */
    --cols: 12;
    --bl: 8px;
    --lh: 24px;
    --gutter: 24px;
    --margin: clamp(16px, 4vw, 72px);
    --maxw: 1320px;

    /* --------------------------------------------------------------------
       ESPACEMENTS — échelle sur baseline 8px
       (nouveaux tokens, à adopter progressivement dans les composants ;
       les valeurs en dur existantes ne sont pas encore migrées)
       -------------------------------------------------------------------- */
    --space-1: 4px;
    --space-2: 8px;
    --space-3: 16px;
    --space-4: 24px;
    --space-5: 32px;
    --space-6: 48px;
    --space-7: 64px;

    /* --------------------------------------------------------------------
       RAYONS DE BORDURE
       -------------------------------------------------------------------- */
    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --radius-xl: 14px;
    --radius-full: 9999px;

    /* --------------------------------------------------------------------
       OMBRES
       -------------------------------------------------------------------- */
    --shadow-sm: 0 1px 2px 0 rgba(16, 24, 40, 0.04);
    --shadow-md: 0 4px 8px -1px rgba(16, 24, 40, 0.06);
    --shadow-lg: 0 10px 20px -3px rgba(16, 24, 40, 0.08);
    --shadow-xl: 0 20px 30px -5px rgba(16, 24, 40, 0.10);

    /* --------------------------------------------------------------------
       DIVERS
       -------------------------------------------------------------------- */
    --transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
}

/* ==============================================================================
   VERROUILLAGE TOTAL DU SCHÉMA DE COULEUR & PROTECTION SYSTEM DARK MODE
   Garantit que Tikewa conserve rigoureusement son design officiel (fond sombre,
   cartes blanches, boutons de marque, typographie contrastée) sur tout appareil :
   Windows, macOS, Android, iOS, Chrome et Edge.
   ============================================================================== */
html,
body {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
    font-family: var(--font-family) !important;
    background-color: var(--canvas, #fafafa);
    color: var(--ink, #000000);
}

/* Verrouillage strict de tous les contrôles de formulaire natifs */
input,
select,
textarea,
button,
optgroup,
option,
datalist,
output {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
}

/* Garantir le fond blanc et l'encre noire par défaut sur les champs de saisie */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]):not([type="reset"]):not([type="file"]):not([type="color"]):not([type="range"]),
select,
textarea {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Menu déroulant natif (options de select) toujours lisible sous tout OS */
option,
optgroup {
    background-color: #ffffff !important;
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

/* Cases à cocher et boutons radio aux couleurs officielles */
input[type="checkbox"],
input[type="radio"] {
    color-scheme: only light !important;
    accent-color: var(--primary) !important;
    forced-color-adjust: none !important;
}

/* Icônes de sélecteur calendrier et heure (input date / time) */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator {
    filter: none !important;
    opacity: 0.85 !important;
    cursor: pointer;
}

/* Placeholders de formulaire toujours parfaitement lisibles avec contraste optimal */
input::placeholder,
textarea::placeholder,
::placeholder {
    color: var(--muted) !important;
    opacity: 1 !important;
    -webkit-text-fill-color: var(--muted) !important;
}

/* Éléments désactivés lisibles et non délavés */
button:disabled,
input:disabled,
select:disabled,
textarea:disabled,
.btn:disabled,
.btn-disabled,
[disabled] {
    opacity: 0.72 !important;
    cursor: not-allowed !important;
    forced-color-adjust: none !important;
}

/* Préservation des médias, logos et icônes contre les filtres d'inversion automatique */
img,
svg,
picture,
video,
canvas,
i[class*="fa-"],
span[class*="fa-"] {
    color-scheme: only light !important;
    forced-color-adjust: none !important;
}

/* Neutralisation globale de prefers-color-scheme: dark pour maintenir le design officiel */
@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: only light !important;
        forced-color-adjust: none !important;
        --paper: #ffffff !important;
        --canvas: #fafafa !important;
        --ink: #000000 !important;
        --navy: #000000 !important;
        --line: #e5e5e5 !important;
        --muted: #737373 !important;
    }

    html,
    body {
        color-scheme: only light !important;
        forced-color-adjust: none !important;
        background-color: var(--canvas, #fafafa) !important;
        color: var(--ink, #000000) !important;
    }

    input,
    select,
    textarea,
    button,
    option {
        color-scheme: only light !important;
        forced-color-adjust: none !important;
    }
}

/* ==============================================================================
   PRÉSERVATION STRICTE DU DESIGN DES COMPOSANTS CLÉS (ANTI-RECOLORING SYSTÈME)
   Résout spécifiquement :
   - Les puces de catégories (Tous, Concert, Festival, Spectacle, Conférence, Sport, etc.)
   - Les liens du menu de navigation (Accueil, À Propos, etc.)
   - Les cartes d'événements, descriptions, métadonnées et boutons Réserver
   ============================================================================== */

/* 1. Bulles / Puces de catégories (.category-chip) */
.category-chip,
a.category-chip,
button.category-chip {
    background-color: #ffffff !important;
    color: var(--navy-surface) !important;
    border: 1px solid var(--line) !important;
    -webkit-text-fill-color: var(--navy-surface) !important;
    forced-color-adjust: none !important;
}

.category-chip i,
a.category-chip i,
button.category-chip i {
    color: var(--navy-surface) !important;
    -webkit-text-fill-color: var(--navy-surface) !important;
    forced-color-adjust: none !important;
}

.category-chip:hover,
a.category-chip:hover,
button.category-chip:hover {
    background-color: #FFF7ED !important;
    color: #FF4A0D !important;
    border-color: #FED7AA !important;
    -webkit-text-fill-color: #FF4A0D !important;
}

.category-chip:hover i,
a.category-chip:hover i,
button.category-chip:hover i {
    color: #FF4A0D !important;
    -webkit-text-fill-color: #FF4A0D !important;
}

.category-chip.active,
a.category-chip.active,
button.category-chip.active {
    background-color: #FF4A0D !important;
    color: #ffffff !important;
    border-color: #FF4A0D !important;
    -webkit-text-fill-color: #ffffff !important;
}

.category-chip.active i,
a.category-chip.active i,
button.category-chip.active i {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 2. Menu de navigation principal (.client-nav) */
.client-header,
header.client-header,
.shared-client-header {
    background-color: rgba(255, 255, 255, 0.96) !important;
    border-bottom: 1px solid #e5e5e5 !important;
    color: #000000 !important;
    forced-color-adjust: none !important;
}

.client-nav a:not(.btn-espace-promoteur):not(.btn-espace-admin):not(.btn-espace-agent):not(.client-register):not(.client-logout) {
    color: var(--navy-surface) !important;
    -webkit-text-fill-color: var(--navy-surface) !important;
    forced-color-adjust: none !important;
}

.client-nav a:not(.btn-espace-promoteur):not(.btn-espace-admin):not(.btn-espace-agent):not(.client-register):not(.client-logout) i {
    color: inherit !important;
    -webkit-text-fill-color: inherit !important;
}

.client-nav a:not(.btn-espace-promoteur):not(.btn-espace-admin):not(.btn-espace-agent):not(.client-register):not(.client-logout):hover {
    color: #FF4A0D !important;
    -webkit-text-fill-color: #FF4A0D !important;
    background-color: #FFF2ED !important;
}

.client-nav a:not(.btn-espace-promoteur):not(.btn-espace-admin):not(.btn-espace-agent):not(.client-register):not(.client-logout).active {
    color: #FF4A0D !important;
    -webkit-text-fill-color: #FF4A0D !important;
    background-color: #FFF2ED !important;
}

.client-nav .client-register {
    background-color: #FF4A0D !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.client-nav .client-logout {
    color: #DC2626 !important;
    -webkit-text-fill-color: #DC2626 !important;
}

/* 3. Cartes d'événements (.event-card-item) */
.event-card-item,
article.event-card-item {
    background-color: #ffffff !important;
    border: 1px solid #E5E5E5 !important;
    color: #000000 !important;
    forced-color-adjust: none !important;
}

.event-card-item h3,
.event-card-item h3 a {
    color: var(--navy-surface) !important;
    -webkit-text-fill-color: var(--navy-surface) !important;
}

.event-card-item p {
    color: var(--ink-muted) !important;
    -webkit-text-fill-color: var(--ink-muted) !important;
}

.event-card-item .btn-submit {
    background-color: #FF4A0D !important;
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* 4. Protection impérative des zones à fond sombre (Hero, Footer, Sidebar, Onglets actifs) */
.hero-banner h1,
.hero-banner h2,
.hero-banner h3,
.shared-client-footer h1,
.shared-client-footer h2,
.shared-client-footer h3,
.shared-client-footer h4,
.shared-client-footer h5,
.shared-client-footer h6,
.sidebar h1,
.sidebar h2,
.sidebar h3,
.sidebar h4,
.sidebar h5,
.sidebar h6,
.sidebar .ctrl-brand-logo,
.sidebar .ctrl-brand-logo span,
.sidebar .ctrl-user-name,
.ctrl-mobile-topbar *,
.s3d-modal-window h1,
.s3d-modal-window h2,
.s3d-modal-window h3,
.s3d-modal-window h4,
.s3d-modal-window .s3d-event-title,
.ticket-pass-header .ticket-pass-type,
.btn-primary,
.btn-primary *,
.btn-submit,
.btn-submit *,
.dash-btn-action.btn-primary,
.dash-btn-action.btn-primary * {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

.ticket-pass-header .badge-status-paid,
.ticket-pass-header .badge-status-paid * {
    color: #065F46 !important;
    -webkit-text-fill-color: #065F46 !important;
}

.ticket-pass-header .badge-status-used,
.ticket-pass-header .badge-status-used * {
    color: #475569 !important;
    -webkit-text-fill-color: #475569 !important;
}

.ticket-pass-header .badge-status-failed,
.ticket-pass-header .badge-status-failed * {
    color: #991B1B !important;
    -webkit-text-fill-color: #991B1B !important;
}
.filter-pill.active,
.filter-pill.active *,
.dp-tab-item.active,
.dp-tab-item.active *,
.dash-chart-tab.active,
.dash-chart-tab.active *,
.events-pill.active,
.events-pill.active *,
.commandes-pill.active,
.commandes-pill.active *,
.dash-btn-action.active,
.dash-btn-action.active * {
    background-color: #000000 !important;
    color: #ffffff !important;
    border-color: #000000 !important;
    -webkit-text-fill-color: #ffffff !important;
}

.filter-pill:not(.active),
.dp-tab-item.inactive,
.dash-chart-tab:not(.active),
.events-pill:not(.active),
.commandes-pill:not(.active) {
    background-color: #F5F5F5 !important;
    color: #737373 !important;
    border: 1px solid #E5E5E5 !important;
    -webkit-text-fill-color: #737373 !important;
}

.filter-pill:not(.active) *,
.dp-tab-item.inactive *,
.dash-chart-tab:not(.active) *,
.events-pill:not(.active) *,
.commandes-pill:not(.active) * {
    color: #737373 !important;
    -webkit-text-fill-color: #737373 !important;
}

.dash-btn-action:not(.btn-primary):not(.active) {
    background-color: #ffffff !important;
    color: #000000 !important;
    border-color: #E5E5E5 !important;
    -webkit-text-fill-color: #000000 !important;
}

.dash-btn-action:not(.btn-primary):not(.active) span {
    color: #000000 !important;
    -webkit-text-fill-color: #000000 !important;
}

.hero-banner p {
    color: var(--line-dark) !important;
    -webkit-text-fill-color: var(--line-dark) !important;
}

.shared-client-footer p,
.shared-client-footer span,
.shared-client-footer a {
    color: var(--muted-light) !important;
    -webkit-text-fill-color: var(--muted-light) !important;
}

.sidebar .ctrl-user-role,
.sidebar .ctrl-section-label,
.sidebar .ctrl-menu a {
    color: #737373 !important;
    -webkit-text-fill-color: #737373 !important;
}

.sidebar .ctrl-menu a.active,
.sidebar .ctrl-menu a:hover {
    color: #ffffff !important;
    -webkit-text-fill-color: #ffffff !important;
}

/* Application impérative à tous les conteneurs, textes, titres et composants */
h1, h2, h3, h4, h5, h6,
p, a, span:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands),
div:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands),
strong, b, em, i:not([class*="fa-"]):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands),
small, sub, sup,
button, input, select, textarea, label, optgroup, option,
table, th, td, tr, thead, tbody, tfoot,
ul, ol, li, dl, dt, dd, blockquote, figcaption,
section, article, aside, header, footer, main, nav,
.btn, .badge, .card, .modal, .toast, .alert, .kpi,
.nav, .navbar, .menu, .sidebar, .header, .footer,
.form-control, .form-select, .form-label,
input[type="text"], input[type="password"], input[type="email"], input[type="number"], input[type="tel"], input[type="url"], input[type="search"] {
    font-family: var(--font-family) !important;
}

/* Surcharge sécurisée des éléments portant un style inline font-family (sauf FontAwesome) */
[style*="font-family"]:not([class*="fa-"]):not(i):not(.fa):not(.fas):not(.far):not(.fab):not(.fa-solid):not(.fa-regular):not(.fa-brands) {
    font-family: var(--font-family) !important;
}

/* Préservation intégrale et prioritaire des icônes FontAwesome */
.fa, .fas, .far, .fal, .fad, .fab,
.fa-solid, .fa-regular, .fa-light, .fa-thin, .fa-duotone, .fa-brands,
i[class*="fa-"], span[class*="fa-"], div[class*="fa-"] {
    font-family: "Font Awesome 6 Free", "Font Awesome 6 Brands" !important;
}
.fa-brands, i.fa-brands, span.fa-brands {
    font-family: "Font Awesome 6 Brands" !important;
}

/* Couleurs de marque des canaux de partage (fenêtre « Partager », js/qr-publication.js) */
:root {
    --brand-whatsapp: #25D366;
    --brand-facebook: #1877F2;
}