/*
 * Arc_Prod File Role: Design tokens (CSS variables) for tenant/admin UI.
 * File: public_html/assets/xhelpers/css/tokens.css
 *
 * Remplace design-system.css (renommage Phase 1 — 2026-03-13).
 * Contenu identique, rôle clarифié : fournit uniquement les variables CSS
 * globales (:root). Aucune règle de mise en page ou de composant.
 */
/**
 * XHelpers - XHelpers V1.0
 * Design System CSS - Système de design XHelpers
 *
 * @package   XHelpers
 * @version   V1.0
 * @author    ULB
 *
 * Note: Les variables CSS préfixées --lsh-* sont conservées pour compatibilité.
 * Elles proviennent du design system original et fonctionnent parfaitement
 * pour XHelpers car nous utilisons les mêmes couleurs et styles.
 */

:root {
    /* ================================================================ */
    /* COULEURS DE BASE                                                 */
    /* ================================================================ */

    --color-white: #ffffff;
    --color-black: #000000;
    --color-transparent: transparent;

    /* ================================================================ */
    /* COULEURS PRINCIPALES (HARMONISÉES AVEC ULB PANTONE 287 C)        */
    /* ================================================================ */

    /* --primary-green est ECRASE a l'execution par la couleur du tenant
       (_layout_header.php). La valeur ci-dessous n'est qu'un repli.
       Ses DERIVEES etaient restees des litteraux du bleu ULB : la migration
       multi-tenant n'avait rendu dynamique que la couleur de base, si bien que
       sur un tenant vert tout etat derive (survol, degrade, bordure active)
       retombait en bleu marine. Elles sont desormais calculees a partir de la
       marque reelle, sur le meme motif que --primary-color-hover plus bas.
       Le melange a 60 % de noir est le seul niveau qui passe AA pour TOUTE
       teinte : un ocre clair (#e5b611) y donne encore 4,93:1 avec du blanc
       dessus, contre 3,79:1 a 70 %. */
    --primary-green: #003f7f;        /* Pantone 287 C - repli si aucun tenant */
    --primary-green-light: color-mix(in srgb, var(--primary-green) 15%, transparent);
    --primary-green-dark: color-mix(in srgb, var(--primary-green) 60%, #000000);
    --primary-green-accent: color-mix(in srgb, var(--primary-green) 55%, #ffffff);

    /* ================================================================ */
    /* COULEURS DE TEXTE                                                */
    /* ================================================================ */

    --text-primary: #0f172a;
    --text-secondary: #64748b;
    --text-muted: #94a3b8;
    --text-on-white: var(--text-primary);
    --text-on-dark: var(--color-white);

    /* ================================================================ */
    /* COULEURS DE FOND                                                 */
    /* ================================================================ */

    --bg-primary: var(--color-white);   /* Fond principal blanc comme XHelpers */
    --bg-secondary: #f8f9fa;             /* Gris très clair pour les zones secondaires */
    --bg-muted: #e9ecef;                 /* Gris clair pour les éléments atténués */
    --bg-dark: var(--text-primary);

    /* ================================================================ */
    /* COULEURS ULB (PARTENAIRE)                                       */
    /* ================================================================ */

    /* Malgre leur nom, ces tokens ne designent PAS le bleu ULB : --ulb-blue est
       ecrase a l'execution par la couleur du tenant (_layout_header.php), la
       valeur ci-dessous n'est qu'un repli. Ses derivees suivent donc la marque
       elles aussi — voir l'explication du melange a 60 % plus haut. */
    --ulb-blue: #003f7f;
    --ulb-blue-light: color-mix(in srgb, var(--ulb-blue) 55%, #ffffff);
    --ulb-blue-dark: color-mix(in srgb, var(--ulb-blue) 60%, #000000);

    /* ================================================================ */
    /* COULEURS D'ÉTAT                                                 */
    /* ================================================================ */

    --success-primary: var(--primary-green);
    --success-light: rgba(0,63,127,0.1);  /* Bleu ULB très transparent pour les fonds success */
    --warning-light: #fef3c7;
    --danger-light: #fee2e2;
    --danger-primary: #dc2626;
    --info-light: #dbeafe;

    /* ================================================================ */
    /* LAYOUT & DIMENSIONS                                              */
    /* ================================================================ */

    --navbar-height: 68px;
    --sidebar-width-lg: 240px;
    --sidebar-width-collapsed-lg: 80px;
    --footer-height: 48px;

    /* ================================================================ */
    /* BORDURES & RADIUS                                                */
    /* ================================================================ */

    --border-color: #dee2e6;             /* Bordure grise neutre comme XHelpers */
    --border-width: 1px;
    --border-style: solid;

    --border-radius: 0.5rem;
    --border-radius-sm: 0.25rem;
    --border-radius-md: 0.75rem;
    --border-radius-lg: 1rem;
    --border-radius-xl: 1.5rem;
    --border-radius-full: 9999px;

    /* ================================================================ */
    /* OMBRES                                                           */
    /* ================================================================ */

    --shadow-soft: 0 1px 3px 0 rgba(0,0,0,0.1), 0 1px 2px 0 rgba(0,0,0,0.06);
    --shadow-medium: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --shadow-large: 0 10px 15px -3px rgba(0,0,0,0.1), 0 4px 6px -2px rgba(0,0,0,0.05);
    --shadow-success: 0 4px 15px rgba(5,150,105,0.3);
    --shadow-success-hover: 0 6px 20px rgba(5,150,105,0.4);

    /* ================================================================ */
    /* ESPACEMENTS                                                      */
    /* ================================================================ */

    --spacing-xs: 0.25rem;    /* 4px */
    --spacing-sm: 0.5rem;     /* 8px */
    --spacing-md: 1rem;       /* 16px */
    --spacing-lg: 1.5rem;     /* 24px */
    --spacing-xl: 3rem;       /* 48px */
    --spacing-2xl: 4rem;      /* 64px */
    --spacing-3xl: 6rem;      /* 96px */

    /* ================================================================ */
    /* TRANSITIONS                                                      */
    /* ================================================================ */

    --transition-fast: 0.15s ease;
    --transition-normal: 0.3s cubic-bezier(0.4,0,0.2,1);
    --transition-slow: 0.5s ease-out;

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

    --sidebar-bg: var(--bg-muted);
    --sidebar-bg-dark: var(--border-color);
    --sidebar-active: linear-gradient(135deg, var(--primary-green), var(--primary-green-accent));
    --sidebar-hover: var(--bg-secondary);
    --sidebar-text: #334155;
    --sidebar-text-active: var(--color-white);
    --sidebar-text-hover: #1e293b;

    /* ================================================================ */
    /* NAVBAR                                                           */
    /* ================================================================ */

    --navbar-bg: var(--color-white);     /* Navbar blanche comme XHelpers */
    --navbar-border: #dee2e6;             /* Bordure grise neutre */
    --navbar-shadow: 0 4px 6px -1px rgba(0,0,0,0.1), 0 2px 4px -1px rgba(0,0,0,0.06);
    --navbar-shadow-scrolled: 0 4px 12px rgba(0,0,0,0.15);

    /* ================================================================ */
    /* GRADIENTS                                                        */
    /* ================================================================ */

    --gradient-primary: linear-gradient(135deg, var(--primary-green), var(--primary-green-dark));
    --gradient-success: linear-gradient(135deg, var(--primary-green) 0%, var(--primary-green-accent) 100%);
    --gradient-warning: linear-gradient(135deg, #FFF3CD 0%, #FFE5A1 100%);
    --gradient-forum: linear-gradient(135deg, var(--primary-green), #8b5cf6);

    /* ================================================================ */
    /* VARIABLES MODULAIRES - HOME                                      */
    /* ================================================================ */

    --primary-color: var(--primary-green);
    --primary-light: var(--primary-green-light);
    --primary-hover: var(--primary-green-dark);
    --secondary-color: var(--text-secondary);
    --bg-light: var(--bg-secondary);
    --transition-speed: var(--transition-normal);
    --card-border-radius: var(--border-radius);
    --box-shadow: var(--shadow-soft);
    --box-shadow-hover: var(--shadow-medium);
    --section-spacing: var(--spacing-xl);
    --card-padding: var(--spacing-lg);
    --card-hover-transform: translateY(-2px);
    --icon-size: 1.5rem;

    /* ================================================================ */
    /* VARIABLES MODULAIRES - FAQ                                       */
    /* ================================================================ */

    --faq-primary: var(--primary-green);
    --faq-primary-light: var(--primary-green-light);
    --faq-primary-dark: var(--primary-green-dark);
    --faq-bg: var(--bg-primary);
    --faq-bg-light: var(--bg-secondary);
    --faq-card-bg: var(--bg-primary);
    --faq-border: var(--border-color);
    --faq-radius: var(--border-radius);
    --faq-text-dark: var(--text-primary);
    --faq-text-muted: var(--text-muted);
    --faq-text-disabled: var(--text-muted);
    --faq-transition: var(--transition-normal);
    --faq-shadow-base: var(--shadow-soft);
    --faq-shadow-hover: var(--shadow-medium);
    --faq-shadow-success: var(--shadow-success);
    --faq-success-light: var(--success-light);
    --faq-gradient-success: var(--gradient-success);
    --faq-medium-green: var(--primary-green-accent);

    /* ================================================================ */
    /* VARIABLES MODULAIRES - TUTORIALS                                 */
    /* ================================================================ */

    --tutorials-primary: var(--primary-green);
    --tutorials-primary-light: var(--primary-green-light);
    --tutorials-primary-dark: var(--primary-green-dark);
    --tutorials-bg: var(--bg-primary);
    --tutorials-bg-light: var(--bg-secondary);
    --tutorials-bg-hover: var(--bg-muted);
    --tutorials-card-bg: var(--bg-primary);
    --tutorials-border: var(--border-color);
    --tutorials-radius: var(--border-radius);
    --tutorials-text-dark: var(--text-primary);
    --tutorials-text-muted: var(--text-muted);
    --tutorials-text-disabled: var(--text-muted);
    --tutorials-transition: var(--transition-normal);
    --tutorials-shadow-base: var(--shadow-soft);
    --tutorials-shadow-hover: var(--shadow-medium);
    --tutorials-shadow-success: var(--shadow-success);
    --tutorials-success-light: var(--success-light);
    --tutorials-success-border: var(--primary-green);
    --tutorials-gradient-success: var(--gradient-success);

    /* ================================================================ */
    /* VARIABLES MODULAIRES - FORUM                                     */
    /* ================================================================ */

    --forum-primary: var(--primary-green);
    --forum-bg: var(--bg-primary);
    --forum-card-bg: var(--bg-primary);
    --forum-hover-bg: var(--bg-secondary);
    --forum-border: var(--border-color);
    --forum-radius: var(--border-radius);
    --forum-text-primary: var(--text-primary);
    --forum-text-secondary: var(--text-secondary);
    --forum-text-muted: var(--text-muted);
    --forum-shadow-soft: var(--shadow-soft);
    --forum-shadow-medium: var(--shadow-medium);

    /* Forum Thread Specific */
    --thread-bg: var(--bg-secondary);
    --thread-card-bg: var(--bg-primary);
    --thread-primary: var(--primary-green);
    --thread-text-dark: var(--text-primary);
    --thread-text-muted: var(--text-muted);
    --thread-border: var(--border-color);
    --thread-radius-lg: var(--border-radius-lg);
    --thread-radius-md: var(--border-radius-md);
    --thread-shadow-soft: var(--shadow-soft);

    /* Forum Stats & Reports */
    --lsh-forum-primary: var(--primary-green);
    --lsh-forum-accent: #8b5cf6;
    --lsh-forum-thread-bg: var(--bg-primary);
    --lsh-forum-post-bg: var(--bg-secondary);
    --lsh-reports-primary: var(--primary-green);
    --lsh-reports-accent: #8b5cf6;

    /* ================================================================ */
    /* VARIABLES MODULAIRES - EDITION                                   */
    /* ================================================================ */

    --edition-primary: var(--primary-green);
    --edition-bg-light: var(--bg-secondary);
    --edition-border-radius: var(--border-radius);
    --edition-text-on-pastel: var(--color-white);
    --edition-transition: var(--transition-normal);

    /* ================================================================ */
    /* VARIABLES MODULAIRES - CONTACT                                   */
    /* ================================================================ */

    --contact-primary: var(--primary-green);
    --contact-bg: var(--bg-primary);
    --contact-card-bg: var(--bg-primary);
    --contact-border: var(--border-color);
    --contact-border-light: var(--border-color);
    --contact-radius: var(--border-radius);
    --contact-form-radius: var(--border-radius);
    --contact-text-muted: var(--text-muted);
    --contact-text-on-pastel: var(--color-white);
    --contact-green-focus: var(--primary-green);
    --contact-shadow: var(--shadow-soft);
    --contact-transition: var(--transition-normal);

    /* ================================================================ */
    /* VARIABLES DESIGN SYSTEM                                          */
    /* ================================================================ */

    --lsh-stats-primary: var(--primary-green);
    --lsh-stats-info: #06b6d4;
    --lsh-stats-danger: #ef4444;

    --lsh-card-radius: var(--border-radius);
    --lsh-button-radius: var(--border-radius);
    --lsh-input-radius: var(--border-radius);

    --lsh-spacing-md: var(--spacing-md);
    --lsh-spacing-lg: var(--spacing-lg);
    --lsh-spacing-xl: var(--spacing-xl);

    --lsh-transition-fast: var(--transition-fast);
    --lsh-transition-normal: var(--transition-normal);

    --lsh-gradient-primary: var(--gradient-primary);
    --lsh-gradient-forum: var(--gradient-forum);

    --lsh-admin-info: var(--info-light);

    /* ================================================================ */
    /* VARIABLES GÉNÉRIQUES (COMPATIBILITÉ)                            */
    /* ================================================================ */

    --bg-white: var(--color-white);
    --text-dark: var(--text-primary);
    --shadow-base: var(--shadow-soft);

    /* Variables avec fallbacks pour compatibilité */
    --light-bg: var(--color-white, #ffffff);
    --dark-text: var(--text-primary, #0f172a);
    --danger-color: var(--danger-primary, #dc2626);
    --pastel-success: var(--primary-green, #059669);
    --text-on-pastel: var(--color-white, #ffffff);
}


/* ===== MERGED: redesign/00-variables.css — scoped tenant variables ===== */

/*
 * Arc_Prod — Design System Variables (socle définitif)
 * File: public_html/assets/xhelpers/css/redesign/00-variables.css
 *
 * Chargé EN PREMIER par theme-redesign.css.
 * Fournit toutes les variables CSS du design system Apple/Linear/Notion/Stripe
 * et assure le bridge vers les variables --rd-* existantes (01–09).
 *
 * Scope exclusif : body.arcprod-tenant (pages runtime tenant uniquement).
 * Les pages admin /_arc/* ne sont PAS affectées.
 */

body.arcprod-tenant {

  /* =========================================================
     COULEURS PRIMAIRES
     --primary-color est alimenté par --ulb-blue injecté dynamiquement
     par tenant (via inline style sur body).
     ========================================================= */
  --primary-color: var(--ulb-blue, #1a73e8);
  --primary-color-hover: color-mix(in srgb, var(--primary-color) 85%, #000000);
  --primary-color-light: color-mix(in srgb, var(--primary-color) 15%, #ffffff);
  --primary-color-ultra-light: color-mix(in srgb, var(--primary-color) 5%, #ffffff);

  /* =========================================================
     NEUTRES (échelle Tailwind-like)
     ========================================================= */
  --gray-50:  #fafafa;
  --gray-100: #f5f5f5;
  --gray-200: #e5e5e5;
  --gray-300: #d4d4d4;
  --gray-400: #a3a3a3;
  --gray-500: #737373;
  --gray-600: #525252;
  --gray-700: #404040;
  --gray-800: #262626;
  --gray-900: #171717;

  /* =========================================================
     COULEURS SÉMANTIQUES
     ========================================================= */
  --success:       #22c55e;
  --success-light: #f0fdf4;
  --warning:       #f59e0b;
  --warning-light: #fffbeb;
  --danger:        #ef4444;
  --danger-light:  #fef2f2;
  --info:          #3b82f6;
  --info-light:    #eff6ff;

  /* Variantes TEXTE des couleurs semantiques. Les valeurs ci-dessus sont pensees
     comme des FONDS : utilisees en couleur de texte sur une surface claire elles
     echouent AA (--success sur --success-light = 2,62:1, mesure sur le badge
     NOUVEAU le 2026-08-01). Ces variantes sont les memes teintes assombries
     jusqu'a passer 4,5:1 sur blanc, sur le fond de page ET sur leur propre
     surface *-light. Valeurs fixes : contrairement a --brand-text, elles ne
     dependent pas du tenant. */
  --success-text:  #147638;
  --warning-text:  #8e5c06;
  --danger-text:   #ba3535;
  --info-text:     #2e65c0;

  /* Statuts de modération du forum. Les trois propriétés sont séparées afin
     qu'un futur redesign puisse modifier une pilule sans reconstruire chaque
     règle de statut dans les modules. */
  --report-status-open-bg:        rgba(245, 158, 11, 0.10);
  --report-status-open-text:      var(--warning-text);
  --report-status-open-border:    rgba(245, 158, 11, 0.25);
  --report-status-resolved-bg:    rgba(34, 197, 94, 0.10);
  --report-status-resolved-text:  var(--success-text);
  --report-status-resolved-border: rgba(34, 197, 94, 0.25);
  --report-status-rejected-bg:    rgba(107, 114, 128, 0.10);
  --report-status-rejected-text:  var(--text-secondary);
  --report-status-rejected-border: rgba(107, 114, 128, 0.22);

  /* Familles actives consolidées le 2026-08-04. */
  --forum-urgent-metric-text:       #b45309;
  --forum-pending-badge-bg:         rgba(180, 83, 9, 0.08);
  --forum-pending-badge-text:       #b45309;
  --forum-pending-badge-border:     rgba(180, 83, 9, 0.2);
  --module-search-icon-hover-bg:    #f2f2f7;
  --category-badge-icon-color:      color-mix(in srgb, var(--brand-text) 64%, #475569 36%);
  --resource-category-icon-color:   color-mix(in srgb, var(--ulb-blue, #003876) 64%, #475569 36%);
  --admin-secondary-action-fg:      var(--text-on-primary);
  --admin-secondary-action-border:  rgba(255, 255, 255, 0.5);
  --admin-secondary-action-bg:      rgba(255, 255, 255, 0.12);
  --admin-secondary-action-hover-bg: rgba(255, 255, 255, 0.2);
  --member-visibility-badge-text:  #495057;
  --sidebar-scrollbar-thumb:       rgba(255, 255, 255, 0.2);
  --edition-add-hover-shade:       #0f172a;
  --guide-path-active-count-bg:    rgba(255, 255, 255, 0.24);
  --guide-path-active-count-border: rgba(255, 255, 255, 0.4);
  --forum-thread-locked-bg:        linear-gradient(180deg, #fff9e6 0%, #fff5d6 100%);
  --forum-thread-locked-border:    #f3e2a0;
  --forum-thread-locked-text:      #6b4f00;

  /* Code en ligne. Bootstrap impose son rose #d63384 (3,92 a 4,20:1 selon la
     surface) : meme teinte, assombrie au seuil AA. Redefini en sombre. */
  --code-text:     #9d2160;

  /* Deux teintes d'accent supplementaires, pour la palette des icones de cartes
     de metriques (admin-kpi.css) qui distingue les indicateurs par la couleur.
     Elle etait faite de six litteraux hors design system, dont trois
     illisibles : orange 2,15:1, vert 2,28:1, cyan 1,96:1 (mesures du
     2026-08-01). Les quatre premieres teintes sont desormais reprises des
     variantes semantiques ci-dessus ; ces deux-la n'avaient pas d'equivalent. */
  --accent-indigo-text: #5558cf;
  --accent-violet-text: #754dcf;

  /* =========================================================
     SURFACES & BORDURES
     ========================================================= */
  --bg-primary:         #ffffff;
  --bg-secondary:       var(--gray-50);
  --bg-tertiary:        var(--gray-100);
  --bg-muted:           var(--bg-tertiary);
  --bg-subtle:          var(--bg-secondary);
  --border-color:       var(--gray-200);
  --border-color-light: var(--gray-100);
  --border-color-strong: var(--gray-300);

  /* =========================================================
     TYPOGRAPHIE
     ========================================================= */
  --text-primary:    var(--gray-900);
  /* Ces deux tokens ne pointent PLUS sur l'echelle de gris : --gray-500 (#737373)
     plafonnait a 4,42:1 sur le fond de page et --gray-400 (#a3a3a3) a 2,52:1 sur
     blanc, tous deux sous le seuil AA (mesures localhost 2026-08-01). L'echelle
     elle-meme reste intacte, elle sert aussi aux bordures et aux fonds. */
  --text-secondary:  #5f5f5f;
  --text-tertiary:   #6b6b6b;
  --text-subtle:     var(--text-tertiary);
  --text-on-primary: #ffffff;
  /* Marque utilisee comme TEXTE sur fond clair. Repli seulement : la vraie
     valeur est calculee par tenant (BrandContrastService, injectee dans
     _layout_header.php) car la couleur de marque est arbitraire. */
  --brand-text: var(--primary-color);

  /* =========================================================
     OMBRES APPLE-LIKE (très subtiles)
     ========================================================= */
  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.06), 0 1px 2px rgba(0, 0, 0, 0.04);
  --shadow-md: 0 4px 6px -1px rgba(0, 0, 0, 0.06), 0 2px 4px -2px rgba(0, 0, 0, 0.04);
  --shadow-lg: 0 10px 15px -3px rgba(0, 0, 0, 0.06), 0 4px 6px -4px rgba(0, 0, 0, 0.04);

  /* =========================================================
     RAYONS (border-radius)
     ========================================================= */
  --radius-sm:   6px;
  --radius-md:   10px;
  --radius-lg:   14px;
  --radius-xl:   20px;
  --radius-full: 9999px;
  --border-radius-none: 0;
  --border-radius-2xl: 2rem;

  /* =========================================================
     TRANSITIONS
     ========================================================= */
  --transition-fast: 150ms ease;
  --transition-base: 200ms ease;
  --transition-slow: 300ms ease;

  /* =========================================================
     BRIDGE → variables existantes --rd-*
     Permet aux fichiers 01–09 de continuer à fonctionner
     sans modification, en profitant du nouveau système.
     ========================================================= */
  --rd-bg:          var(--bg-secondary);
  --rd-surface:     var(--bg-primary);
  --rd-border:      var(--border-color);
  --rd-text:        var(--text-primary);
  --rd-muted:       var(--text-secondary);
  --rd-radius:      var(--radius-md);
  --rd-shadow:      var(--shadow-md);
  --rd-shadow-soft: var(--shadow-sm);

  /* Bridge → --arc-brand utilisé dans 07-edition-forms.css */
  --arc-brand: var(--primary-color);

  /* =========================================================
     TOKENS sémantiques (aliases du design system)
     Utilisables directement dans les composants sans connaître
     les noms des variables internes (--primary-color, etc.)
     ========================================================= */
  --token-primary:          var(--primary-color);
  --token-text-primary:     var(--text-primary);
  --token-text-secondary:   var(--text-secondary);
  --token-border:           var(--border-color);
  --token-surface-secondary: var(--bg-secondary);
}

/* =========================================================
   Variables absorbées depuis ui-pro-uniform.css §7
   ========================================================= */
:root {
  --xh-min-surface: #ffffff;
  --xh-min-surface-soft: #f8f9fb;
  --xh-min-border: #e5e7eb;
  --xh-min-text: #111827;
  --xh-min-text-muted: #6b7280;
  --xh-min-radius: 12px;
}